feat(joyent-ui-toolkit): implement SectionList

packages/ui-toolkit/src/index.js

@@ -5,7 +5,6 @@ export { default as Button } from './button';
 export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
 export { default as calc } from './calc';
 export { default as Label } from './label';
-export { Ul, Li } from './list';
 export { default as paperEffect } from './paper-effect';
 export { H1, H2, H3 } from './text/headings';
 export { default as P } from './text/p';
@@ -78,3 +77,11 @@ export {
   Brand as HeaderBrand,
   Item as HeaderItem
 } from './header';
+
+export {
+  default as SectionList,
+  Item as SectionListItem,
+  Anchor as SectionListAnchor,
+  Link as SectionListLink,
+  NavLink as SectionListNavLink
+} from './section-list';

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

@@ -1,2 +0,0 @@
-export { default as Ul } from './ul';
-export { default as Li } from './li';

packages/ui-toolkit/src/list/li.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-import Baseline from '../baseline';
-
-const StyledLi = styled.li`
-  display: inline-block;
-
-  & + & {
-    margin-left: ${remcalc(24)};
-  }
-
-  & a {
-    color: ${props => props.theme.text};
-    text-decoration: none;
-    padding-bottom: ${remcalc(6)};
-
-    &.active {
-      cursor: default;
-      color: ${props => props.theme.primary};
-      border-bottom: ${remcalc(2)} solid ${props => props.theme.primary};
-    }
-  }
-`;
-
-/**
- * @example ./usage.md
- */
-const Li = ({ children, ...rest }) =>
-  <StyledLi {...rest}>
-    {children}
-  </StyledLi>;
-
-export default Baseline(Li);

packages/ui-toolkit/src/list/ul.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-import Baseline from '../baseline';
-import typography from '../typography';
-
-const StyledUl = styled.ul`
-  ${typography.fontFamily};
-  ${typography.semibold};
-
-  list-style-type: none;
-  margin-bottom: ${remcalc(33)};
-`;
-
-/**
- * @example ./usage.md
- */
-const Ul = ({ children, ...rest }) =>
-  <StyledUl {...rest}>
-    {children}
-  </StyledUl>;
-
-export default Baseline(Ul);

packages/ui-toolkit/src/list/usage.md

@@ -1,28 +0,0 @@
-```
-const Ul = require('./ul').default;
-const Li = require('./li').default;
-
-<Ul>
-  <Li>
-    <a className='active' href='#ul'>
-      <span>
-        Ul
-      </span>
-    </a>
-  </Li>
-  <Li>
-    <a href='#ul'>
-      <span>
-        Ul
-      </span>
-    </a>
-  </Li>
-  <Li>
-    <a href='#li'>
-      <span>
-        Li
-      </span>
-    </a>
-  </Li>
-</Ul>
-```

packages/ui-toolkit/src/section-list/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Baseline from '../baseline';
+
+const UnorderedList = styled.ul`
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+`;
+
+/**
+ * @example ./usage.md
+ */
+const SectionList = ({ children, ...rest }) =>
+  <UnorderedList {...rest}>
+    {children}
+  </UnorderedList>;
+
+export default Baseline(SectionList);
+
+export { default as Item, Anchor, Link, NavLink } from './item';

packages/ui-toolkit/src/section-list/item.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { A } from 'normalized-styled-components';
+import { NavLink as RRNavLink, Link as RRLink } from 'react-router-dom';
+import remcalc from 'remcalc';
+
+import Baseline from '../baseline';
+import typography from '../typography';
+
+const Li = styled.li`
+  ${typography.fontFamily};
+  ${typography.normal};
+
+  display: inline-block;
+  font-size: ${remcalc(15)};
+  line-height: 1.6;
+  margin-right: ${remcalc(23)};
+`;
+
+const Item = ({ children, ...rest }) =>
+  <Li {...rest}>
+    {children}
+  </Li>;
+
+export default Baseline(Item);
+
+const style = css`
+  ${typography.fontFamily};
+  ${typography.normal};
+
+  color: ${props => props.theme.secondary};
+  text-decoration: none;
+  cursor: pointer;
+
+  &.active {
+    color: ${props => props.theme.primary};
+    cursor: default;
+  }
+`;
+
+export const Anchor = Baseline(A.extend`
+  ${style};
+`);
+
+export const NavLink = Baseline(styled(RRNavLink)`
+  ${style};
+`);
+
+export const Link = Baseline(styled(RRLink)`
+  ${style};
+`);

packages/ui-toolkit/src/section-list/usage.md

@@ -0,0 +1,37 @@
+```
+const Item = require('./item').default;
+const Link = require('./link').default;
+
+<SectionList>
+  <Item>
+    <Link className='active'>
+      Overview
+    </Link>
+  </Item>
+  <Item>
+    <Link>
+      Services
+    </Link>
+  </Item>
+  <Item>
+    <Link>
+      Instances
+    </Link>
+  </Item>
+  <Item>
+    <Link>
+      Versions
+    </Link>
+  </Item>
+  <Item>
+    <Link>
+      Manifest
+    </Link>
+  </Item>
+  <Item>
+    <Link>
+      Settings
+    </Link>
+  </Item>
+</SectionList>
+```

packages/ui-toolkit/styleguide.config.js

@@ -64,8 +64,7 @@ module.exports = {
         'src/form/select.js',
         'src/form/toggle.js',
         'src/header/index.js',
-        'src/list/ul.js',
+        'src/section-list/index.js',
-        'src/list/li.js',
         'src/topology/index.js',
         'src/tooltip/tooltip.js',
         'src/close-button/index.js',