feat(ui-toolkit): composable Breadcrumb

fixes #734

packages/my-joy-beta/src/containers/navigation/breadcrumb.js

@@ -2,7 +2,7 @@ import React from 'react';
 import paramCase from 'param-case';
 import get from 'lodash.get';
 
-import { Breadcrumb } from 'joyent-ui-toolkit';
+import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';
 
 export default ({ match }) => {
   const instance = get(match, 'params.instance');
@@ -12,14 +12,21 @@ export default ({ match }) => {
       name: '/',
       pathname: '/instances'
     }
-  ].concat(
+  ]
-    instance && [
+    .concat(
-      {
+      instance && [
-        name: paramCase(instance),
+        {
-        pathname: `/instances/${instance}`
+          name: paramCase(instance),
-      }
+          pathname: `/instances/${instance}`
-    ]
+        }
-  );
+      ]
+    )
+    .filter(Boolean)
+    .map(({ name, pathname }) => (
+      <BreadcrumbItem key={name} to={pathname}>
+        {name}
+      </BreadcrumbItem>
+    ));
 
-  return <Breadcrumb links={links.filter(Boolean)} />;
+  return <Breadcrumb>{links}</Breadcrumb>;
 };

packages/my-joyent/src/components/home/home.js

@@ -7,6 +7,7 @@ import PackagesHOC from '@containers/packages';
 import {
   Message,
   Breadcrumb,
+  BreadcrumbItem,
   Anchor,
   Button
 } from 'joyent-ui-toolkit';
@@ -78,21 +79,19 @@ class Home extends Component {
       </Message>
     ) : null;
 
+    const breadcrumbLinks = [
+      { name: 'Instances', pathname: '/' },
+      { name: 'Create Instance', pathname: '/' }
+    ].map(({ name, pathname }) => (
+      <BreadcrumbItem key={name} to={pathname}>
+        {name}
+      </BreadcrumbItem>
+    ));
+
     return (
       <Main>
         <SectionNav />
-        <Breadcrumb
+        <Breadcrumb>{breadcrumbLinks}</Breadcrumb>
-          links={[
-            {
-              name: 'Instances',
-              pathname: '/'
-            },
-            {
-              name: 'Create Instance',
-              pathname: '/'
-            }
-          ]}
-        />
         <Row>{_msg}</Row>
         <Row>
           <Filters

packages/ui-toolkit/src/breadcrumb/container.js

@@ -1,39 +0,0 @@
-import React from 'react';
-import forceArray from 'force-array';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import remcalc from 'remcalc';
-
-import View from '../layout/view-container';
-import Breadcrumb from './index';
-import Item from './item';
-
-const Border = styled.div`
-  border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
-`;
-
-const getBreadcrumbItems = links =>
-  forceArray(links).map(({ pathname, name }) => (
-    <Item key={name} to={pathname}>
-      {name}
-    </Item>
-  ));
-
-const Container = ({ links = [] }) => (
-  <Border>
-    <View>
-      <Breadcrumb>{getBreadcrumbItems(links)}</Breadcrumb>
-    </View>
-  </Border>
-);
-
-Container.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      pathname: PropTypes.string
-    })
-  )
-};
-
-export default Container;

packages/ui-toolkit/src/breadcrumb/index.js

@@ -1,14 +1,26 @@
 import React from 'react';
+import forceArray from 'force-array';
+import styled from 'styled-components';
 import { Row, Col } from 'react-styled-flexboxgrid';
+import PropTypes from 'prop-types';
+import remcalc from 'remcalc';
+
+import View from '../layout/view-container';
+import Breadcrumb from './index';
+import Item from './item';
+
+const Border = styled.div`
+  border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
+`;
 
-/**
- * @example ./usage.md
- */
 export default ({ children, ...rest }) => (
-  <Row name="breadcrum" {...rest}>
+  <Border {...rest}>
-    <Col xs={12}>{children}</Col>
+    <View>
-  </Row>
+      <Row name="breadcrum">
+        <Col xs={12}>{children}</Col>
+      </Row>
+    </View>
+  </Border>
 );
 
 export { default as Item } from './item';
-export { default as Container } from './container';

packages/ui-toolkit/src/index.js

@@ -23,11 +23,7 @@ export { default as StatusLoader } from './status-loader';
 export { default as Slider } from './slider';
 export { MetricGraph } from './metrics';
 
-export {
+export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
-  default as BreadcrumbView,
-  Item as BreadcrumbItem,
-  Container as Breadcrumb
-} from './breadcrumb';
 
 export {
   default as Progressbar,