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

packages/cp-frontend/src/components/layout/container.js

@@ -1,10 +1,3 @@
 import { Grid } from 'react-styled-flexboxgrid';
-import { breakpoints } from 'joyent-ui-toolkit';
 
-export default Grid.extend`
-  padding: 2rem;
-
-  ${breakpoints.large`
-    padding: 0;
-  `}
-`;
+export default Grid;

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

@@ -19,6 +19,7 @@ const BreadcrumbLink = styled(Link)`
 
 const BreadcrumbContainer = styled.div`
   border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
+  margin-bottom: ${remcalc(19)};
 `;
 
 const getBreadcrumbItems = (...links) =>

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

@@ -2,45 +2,31 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NavLink } from 'react-router-dom';
-import remcalc from 'remcalc';
+import forceArray from 'force-array';
 
-import { breakpoints, Ul, Li } from 'joyent-ui-toolkit';
 import { LayoutContainer } from '@components/layout';
 
-const StyledHorizontalList = Ul.extend`
-  padding: 0;
-`;
+import {
+  SectionList,
+  SectionListItem,
+  SectionListNavLink
+} from 'joyent-ui-toolkit';
 
-const StyledHorizontalListItem = Li.extend`
-  ${breakpoints.smallOnly`
-    display: block;
-  `}
-
-  & + li {
-    margin-left: ${remcalc(21)};
-  }
-`;
-
-const Menu = ({ links }) => {
-  const navLinks = links.map(link => {
-    return (
-      <StyledHorizontalListItem key={link.name}>
-        <NavLink activeClassName="active" to={link.pathname}>
-          {link.name}
-        </NavLink>
-      </StyledHorizontalListItem>
+const getMenuItems = (...links) =>
+  forceArray(links).map(({ pathname, name }) =>
+    <SectionListItem>
+      <SectionListNavLink activeClassName="active" to={pathname}>
+        {name}
+      </SectionListNavLink>
+    </SectionListItem>
   );
-  });
 
-  return (
+const Menu = ({ links = [] }) =>
   <LayoutContainer>
-      <StyledHorizontalList>
-        {navLinks}
-      </StyledHorizontalList>
-    </LayoutContainer>
-  );
-};
+    <SectionList>
+      {getMenuItems(...links)}
+    </SectionList>
+  </LayoutContainer>;
 
 Menu.propTypes = {
   links: PropTypes.arrayOf(