Rename <ScrollableNavBar /> to <HorizontalOverflowBar />

- Renames component to be more descriptive of it's output
- Creates `/navigation` directory for additional navigation patterns

components/Navigation/HorizontalOverflowBar/HorizontalOverflowBar.css

@@ -0,0 +1,100 @@
+.root {
+  position: relative;
+}
+
+.root:before,
+.root:after {
+  content: '';
+  height: 100%;
+  width: 7.8125rem;
+  position: absolute;
+  top: 0;
+  pointer-events: none;
+}
+
+.root:before {
+  left: calc(-1 * var(--size-small));
+  right: auto;
+  background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 100%);
+}
+
+.root:after {
+  right: calc(-1 * var(--size-small));
+  left: auto;
+  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 100%);
+}
+
+.left:before {
+  content: none;
+}
+
+.right:after {
+  content: none;
+}
+
+.listWrapper {
+  max-width: 38.25rem;
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+.list {
+  list-style-type: none;
+  width: 56.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  display: block;
+  float: left;
+  width: auto;
+}
+
+.link {
+  display: block;
+  composes: fontSmallI from '../../../globals/typography.css';
+  font-weight: var(--fontweight-demi);
+  text-transform: uppercase;
+  color: var(--color-greyLight);
+  text-decoration: none;
+  padding: var(--size-medium) var(--size-small);
+}
+
+.link:hover {
+  color: var(--color-greyDarker);
+}
+
+.activeLink {
+  color: var(--color-greyDarker);
+}
+
+.centered .listWrapper {
+  max-width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+  overflow-x: hidden;
+}
+
+.centered .list {
+  list-style-type: none;
+  width: auto;
+}
+
+.centered .item {
+  display: inline-block;
+  float: none;
+  width: auto;
+}
+
+.centered .item a {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.centered .item + .item {
+  margin-left: var(--space-96);
+}

components/ScrollableNavBar/ScrollableNavBar.js → components/Navigation/HorizontalOverflowBar/HorizontalOverflowBar.js

@@ -3,10 +3,10 @@ import cx from 'classnames';
 import throttle from 'lodash/fp/throttle';
 import { canUseDOM } from 'exenv';
 
-import m from '../../globals/modifiers.css';
-import css from './ScrollableNavBar.css';
+import m from '../../../globals/modifiers.css';
+import css from './HorizontalOverflowBar.css';
 
-export default class ScrollableNavBar extends Component {
+export default class HorizontalOverflowBar extends Component {
   static propTypes = {
     children: PropTypes.func.isRequired,
     threshold: PropTypes.number,

components/ScrollableNavBar/ScrollableNavBar.story.js → components/Navigation/HorizontalOverflowBar/HorizontalOverflowBar.story.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 import { applyContainerQuery } from 'react-container-query';
 
-import ScrollableNavBar from './ScrollableNavBar';
-import navcss from './ScrollableNavBar.css';
+import HorizontalOverflowBar from './HorizontalOverflowBar';
+import navcss from './HorizontalOverflowBar.css';
 
 
-const CenteredProgressSteps = applyContainerQuery(ScrollableNavBar, {
+const CenteredProgressSteps = applyContainerQuery(HorizontalOverflowBar, {
   [navcss.centered]: {
     minWidth: 750,
   },
@@ -31,19 +31,19 @@ const links = [{
   active: false,
 }];
 
-storiesOf('ScrollableNavBar', module)
-  .add('ScrollableNavBar', () => (
+storiesOf('HorizontalOverflowBar', module)
+  .add('HorizontalOverflowBar', () => (
     <div>
-      <ScrollableNavBar>
+      <HorizontalOverflowBar>
         { linkComponent => links.map(link =>
           linkComponent({
             key: link.href,
             ...link,
           })
         ) }
-      </ScrollableNavBar>
+      </HorizontalOverflowBar>
     </div>
-  )).add('CenteredScrollableNavBar', () => (
+  )).add('CenteredHorizontalOverflowBar', () => (
     <div>
       <CenteredProgressSteps>
         { linkComponent => links.map(link =>

components/Navigation/HorizontalOverflowBar/HorizontalOverflowBar.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import HorizontalOverflowBar from './HorizontalOverflowBar';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(
+    <HorizontalOverflowBar>
+      { link => link({ key: 1 }) }
+    </HorizontalOverflowBar>,
+    div
+  );
+});