feat(joyent-cp-frontend): integrate toolkit's Breadcrumb

packages/cp-frontend/src/components/navigation/breadcrumb.js

@@ -1,66 +1,45 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { Grid } from 'react-styled-flexboxgrid';
 import { Link } from 'react-router-dom';
-import { Grid, Col, Row } from 'react-styled-flexboxgrid';
+import forceArray from 'force-array';
+import PropTypes from 'prop-types';
 import remcalc from 'remcalc';
-import unitcalc from 'unitcalc';
 
-import { H2 } from 'joyent-ui-toolkit';
-
-const StyledDiv = styled.div`
-  border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
-  padding: ${unitcalc(4.5)} 0 ${unitcalc(4.5)} 0;
-  margin-bottom: ${remcalc(18)};
-`;
-
-const StyledH2 = H2.extend`
-  color: ${props => props.theme.primary};
-  margin: 0;
-`;
+import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';
 
 const BreadcrumbLink = styled(Link)`
   text-decoration: none;
-  color: ${props => props.theme.primary};
-`;
+  cursor: pointer;
 
-const BreadcrumbSpan = styled.span`
-  color: ${props => props.theme.text};
-`;
-
-function getBreadcrumbLinks(links) {
-  if (links.length) {
-    return links.reduce((breadcrumb, link, index) => {
-      if (breadcrumb.length) {
-        breadcrumb.push(
-          <BreadcrumbSpan key={breadcrumb.length}> / </BreadcrumbSpan>
-        );
-      }
-      breadcrumb.push(
-        <BreadcrumbLink key={breadcrumb.length} to={link.pathname}>
-          {link.name}
-        </BreadcrumbLink>
-      );
-      return breadcrumb;
-    }, []);
+  &:visited {
+    color: inherit;
   }
-  return null;
-}
+`;
 
-const Breadcrumb = ({ links = [] }) =>
-  <Grid>
-    <Row>
-      <Col xs={12}>
-        <StyledDiv>
-          <StyledH2>
-            {getBreadcrumbLinks(links)}
-          </StyledH2>
-        </StyledDiv>
-      </Col>
-    </Row>
-  </Grid>;
+const BreadcrumbContainer = styled.div`
+  border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
+`;
 
-Breadcrumb.propTypes = {
+const getBreadcrumbItems = (...links) =>
+  forceArray(links).map(({ pathname, name }, i) => {
+    const item = i + 1 >= links.length
+      ? name
+      : <BreadcrumbLink to={pathname}>{name}</BreadcrumbLink>;
+
+    return <BreadcrumbItem key={name}>{item}</BreadcrumbItem>;
+  });
+
+const NavBreadcrumb = ({ links = [] }) =>
+  <BreadcrumbContainer>
+    <Grid>
+      <Breadcrumb>
+        {getBreadcrumbItems(...links)}
+      </Breadcrumb>
+    </Grid>
+  </BreadcrumbContainer>;
+
+NavBreadcrumb.propTypes = {
   links: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
@@ -69,4 +48,4 @@ Breadcrumb.propTypes = {
   )
 };
 
-export default Breadcrumb;
+export default NavBreadcrumb;

packages/cp-frontend/src/containers/deployment-groups/create.js

@@ -14,10 +14,6 @@ import { LayoutContainer } from '@components/layout';
 import { Name, Manifest, Review } from '@components/deployment-groups/create';
 import { H2 } from 'joyent-ui-toolkit';
 
-const Title = H2.extend`
-  margin-top: 0;
-`;
-
 const validateName = async ({ name = '' }) => {
   const { data } = await client.query({
     fetchPolicy: 'network-only',
@@ -210,7 +206,7 @@ class DeploymentGroupCreate extends Component {
 
     return (
       <LayoutContainer>
-        <Title>Creating deployment group</Title>
+        <H2>Creating deployment group</H2>
         {view}
       </LayoutContainer>
     );

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

@@ -4,10 +4,9 @@ import { Row } from 'react-styled-flexboxgrid';
 /**
  * @example ./usage.md
  */
-export default ({ children, ...rest }) => (
+export default ({ children, ...rest }) =>
   <Row name="breadcrum" {...rest}>
     {children}
-  </Row>
-);
+  </Row>;
 
 export { default as Item } from './item';

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

@@ -21,11 +21,10 @@ const Arrow = styled.div`
   margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
 `;
 
-export default ({ children, ...rest }) => (
+export default ({ children, ...rest }) =>
   <div>
     <Name name="breadcrum-item" {...rest}>
       {children}
     </Name>
     <Arrow />
-  </div>
-);
+  </div>;