From 8530b24691bd24adc775632572bc140ee408c2d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 7 Jun 2017 00:24:38 +0100
Subject: [PATCH] feat(joyent-cp-frontend): integrate toolkit's SectionList

---
 .../src/components/layout/container.js        |  9 +---
 .../src/components/navigation/breadcrumb.js   |  1 +
 .../src/components/navigation/menu.js         | 54 +++++++------------
 3 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/packages/cp-frontend/src/components/layout/container.js b/packages/cp-frontend/src/components/layout/container.js
index 86c2715d..587b8762 100644
--- a/packages/cp-frontend/src/components/layout/container.js
+++ b/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;
diff --git a/packages/cp-frontend/src/components/navigation/breadcrumb.js b/packages/cp-frontend/src/components/navigation/breadcrumb.js
index 86e8baa2..e4fac875 100644
--- a/packages/cp-frontend/src/components/navigation/breadcrumb.js
+++ b/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) =>
diff --git a/packages/cp-frontend/src/components/navigation/menu.js b/packages/cp-frontend/src/components/navigation/menu.js
index 8dc89a9d..e6ac4925 100644
--- a/packages/cp-frontend/src/components/navigation/menu.js
+++ b/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>
-    );
-  });
-
-  return (
-    <LayoutContainer>
-      <StyledHorizontalList>
-        {navLinks}
-      </StyledHorizontalList>
-    </LayoutContainer>
+const getMenuItems = (...links) =>
+  forceArray(links).map(({ pathname, name }) =>
+    <SectionListItem>
+      <SectionListNavLink activeClassName="active" to={pathname}>
+        {name}
+      </SectionListNavLink>
+    </SectionListItem>
   );
-};
+
+const Menu = ({ links = [] }) =>
+  <LayoutContainer>
+    <SectionList>
+      {getMenuItems(...links)}
+    </SectionList>
+  </LayoutContainer>;
 
 Menu.propTypes = {
   links: PropTypes.arrayOf(