Simplified breadcrumb component

The "multiline" variation was the only one actually used at the moment.
If we need a "singleline" one, we could make a "condensed" variation instead

admin/javascript/src/components/breadcrumb/README.md

@@ -9,28 +9,18 @@ The breadcrumbs for the current section of the CMS.
 An array of objects, each object should have a `text` and `href` key.
 
 ```
-import BreadcrumbComponent from 'breadcrumb';
-
-...
-
-getBreadcrumbs() {
-    var breadcrumbs = [
-        {
-            text: 'Pages',
-            href: 'admin/pages'
-        },
-        {
-            text: 'About us',
-            href: 'admin/pages/show/2'
-        }
-    ];
-    
-    return breadcrumbs;
-}
-
-render() {
-    return <BreadcrumbComponent crumbs={this.getBreadcrumbs()} />
+let breadcrumbs = [
+    {
+        text: 'Pages',
+        href: 'admin/pages'
+    },
+    {
+        text: 'About us',
+        href: 'admin/pages/show/2'
+    }
+];
+<BreadcrumbComponent crumbs={breadcrumbs} />
 }
 
 ...
-```
+```

admin/javascript/src/components/breadcrumb/index.js

@@ -4,14 +4,8 @@ import SilverStripeComponent from 'silverstripe-component';
 class BreadcrumbComponent extends SilverStripeComponent {
 
   render() {
-    const classNames = ['breadcrumb'];
-    if (this.props.multiline) {
-      classNames.push('breadcrumb--multiline');
-    }
-    const classNamesStr = classNames.join(' ');
-
     return (
-      <ol className={classNamesStr}>
+      <ol className="breadcrumb">
         {this.getBreadcrumbs()}
       </ol>
     );
@@ -24,11 +18,15 @@ class BreadcrumbComponent extends SilverStripeComponent {
 
     return [].concat(
      this.props.crumbs.slice(0, -1).map((crumb, index) => [
-       <li><a key={index} className="" href={crumb.href}>{crumb.text}</a></li>,
+       <li className="breadcrumb__item">
+         <a key={index} className="breadcrumb__item-title" href={crumb.href}>{crumb.text}</a>
+        </li>,
      ]),
        this.props.crumbs.slice(-1).map((crumb, index) => [
-         <li className="active">
-           <h2 className="breadcrumb__crumb--last" key={index}>{crumb.text}</h2>
+         <li className="breadcrumb__item breadcrumb__item--last">
+           <h2 className="breadcrumb__item-title breadcrumb__item-title--last" key={index}>
+             {crumb.text}
+           </h2>
          </li>,
        ])
     );
@@ -36,4 +34,8 @@ class BreadcrumbComponent extends SilverStripeComponent {
 
 }
 
+BreadcrumbComponent.propTypes = {
+  crumbs: React.PropTypes.array,
+};
+
 export default BreadcrumbComponent;

admin/javascript/src/components/breadcrumb/styles.scss

@@ -1,26 +1,21 @@
 .breadcrumb {
 	font-size: $font-size-xs;
 	line-height: 16px;
-
-    > .active {
-    	float: none;
-    }
-
-    .breadcrumb__crumb--last {
-    	font-size: $font-size-xs;
-		margin: 0;
-		font-weight: normal;
-		display: inline;
-		line-height: 16px;
-    }
+	margin-bottom: 0;
 }
 
-.breadcrumb--multiline {
-	margin-bottom: 0;
+.breadcrumb__item {}
 
-	.breadcrumb__crumb--last {
-		font-size: $font-size-lg;
-		display: block;
-		line-height: 22px;
-	}
-}
+.breadcrumb>li.breadcrumb__item--last, // TODO Fix Bootstrap clash
+.breadcrumb__item--last {
+	display: block;
+	float: none;
+}
+
+.cms h2.breadcrumb__item-title--last, // TODO Fix CMS clash
+.breadcrumb__item-title--last {
+	margin: 0;
+	font-size: $font-size-lg;
+	font-weight: normal;
+	line-height: 22px;
+}