feat(header-navigation): add implementation

rfcs/header-navigation-component.md

@@ -6,7 +6,7 @@
 
 ```javascript
 import * as React from 'react';
-import {HeaderNavigation, NavigationItem, NavigationList} from 'baseui/header-navigation';
+import {HeaderNavigation, StyledNavigationItem as NavigationItem, StyledNavigationList as NavigationList} from 'baseui/header-navigation';
 import {Button, KIND} from 'baseui/button';
 
 export default () => <HeaderNavigation>
@@ -25,7 +25,7 @@ export default () => <HeaderNavigation>
 
 ```javascript
 import * as React from 'react';
-import {HeaderNavigation, NavigationItem, NavigationList} from 'baseui/header-navigation';
+import {HeaderNavigation, StyledNavigationItem as NavigationItem, StyledNavigationList as NavigationList} from 'baseui/header-navigation';
 import {Button, KIND} from 'baseui/button';
 import {StatefulMenu as Menu} from 'baseui/menu';
 const ITEMS = [{label: 'menu item 1'}, {label: 'menu item 2'}];
@@ -54,8 +54,8 @@ export default (props) => <HeaderNavigation
 ## Exports
 
 * `HeaderNavigation`
-* `NavigationItem`
-* `NavigationList`
+* `StyledNavigationItem`
+* `StyledNavigationList`
 * `StyledRoot`
 * `ALIGN`
 
@@ -64,14 +64,14 @@ export default (props) => <HeaderNavigation
 * `children: React$Node` - Required.
   All the children of header navigation. It accepts any components, but it is useful to use `NavigationList` and `NavigationItem` to align and follow style guides.
 
-## `NavigationList` API
+## `StyledNavigationList` API
 
 * `align: ALIGN.right | ALIGN.left | ALIGN.center` - Optional.
   Alignment of elements inside of navigation list
 * `children: React$Node` - Required.
   All the children of NavigationList.  
 
-## `NavigationItem` API
+## `StyledNavigationItem` API
 
 * `children: React$Node` - Required.
   All the children of NavigationItem.

src/header-navigation/__tests__/__snapshots__/header-navigation.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stateless header navigation should render component: Component has correct render 1`] = `
+<HeaderNavigation
+  overrides={Object {}}
+>
+  <MockStyledComponent
+    role="navigation"
+  >
+    <nav
+      role="navigation"
+      styled-component="true"
+    >
+      Some tag
+    </nav>
+  </MockStyledComponent>
+</HeaderNavigation>
+`;

src/header-navigation/__tests__/__snapshots__/styled-components.test.js.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header Navigation styled components NavigationItem NavigationItem: NavigationItem has correct styles 1`] = `
+Object {
+  "alignSelf": "center",
+  "paddingLeft": "$theme.sizing.scale800",
+}
+`;
+
+exports[`Header Navigation styled components NavigationList NavigationList: NavigationList has correct styles when set to align center 1`] = `
+Array [
+  "align",
+]
+`;
+
+exports[`Header Navigation styled components NavigationList NavigationList: NavigationList has correct styles when set to align flex-end 1`] = `
+Array [
+  "align",
+]
+`;
+
+exports[`Header Navigation styled components NavigationList NavigationList: NavigationList has correct styles when set to align flex-start 1`] = `
+Array [
+  "align",
+]
+`;
+
+exports[`Header Navigation styled components StyledRoot Root: StyledRoot has correct styles 1`] = `
+Object {
+  "borderBottom": "1px solid $theme.colors.border",
+  "cursor": "pointer",
+  "display": "flex",
+  "fontFamily": "$theme.typography.font400.fontFamily",
+  "fontSize": "$theme.typography.font400.fontSize",
+  "fontWeight": "$theme.typography.font400.fontWeight",
+  "lineHeight": "$theme.typography.font400.lineHeight",
+  "paddingBottom": "$theme.sizing.scale500",
+  "paddingTop": "$theme.sizing.scale500",
+}
+`;

src/header-navigation/__tests__/header-navigation.test.js

@@ -0,0 +1,42 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import React from 'react';
+import {mount} from 'enzyme';
+import {styled} from '../../styles';
+import {HeaderNavigation} from '../index';
+
+describe('Stateless header navigation', function() {
+  let wrapper, children;
+  let allProps: any = {};
+
+  beforeEach(function() {
+    children = 'Some tag';
+  });
+
+  afterEach(function() {
+    jest.restoreAllMocks();
+    wrapper && wrapper.unmount();
+  });
+
+  test('should render component', function() {
+    wrapper = mount(
+      <HeaderNavigation {...allProps}>{children}</HeaderNavigation>,
+    );
+    expect(wrapper).toMatchSnapshot('Component has correct render');
+  });
+
+  test('should replace overriden root', function() {
+    const newRoot = styled('div', {color: 'red'});
+    allProps.overrides = {Root: newRoot};
+    wrapper = mount(
+      <HeaderNavigation {...allProps}>{children}</HeaderNavigation>,
+    );
+    const renderedRoot = wrapper.find(allProps.overrides.Root);
+    expect(renderedRoot).toHaveLength(1);
+  });
+});

src/header-navigation/__tests__/styled-components.test.js

@@ -0,0 +1,60 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import {
+  StyledRoot,
+  StyledNavigationList,
+  StyledNavigationItem,
+  ALIGN,
+} from '../index';
+
+describe('Header Navigation styled components', () => {
+  describe('StyledRoot', function() {
+    test('Root', () => {
+      const component = shallow(
+        <StyledRoot>
+          <div />
+        </StyledRoot>,
+      );
+      expect(component.instance().getStyles()).toMatchSnapshot(
+        'StyledRoot has correct styles',
+      );
+    });
+  });
+  describe('NavigationList', function() {
+    test('NavigationList', () => {
+      const component = mount(
+        <StyledNavigationList>
+          <div />
+        </StyledNavigationList>,
+      );
+      Object.values(ALIGN).forEach(align => {
+        component.setProps({
+          align,
+        });
+        expect(component.instance().getStyles()).toMatchSnapshot(
+          // $FlowFixMe
+          `NavigationList has correct styles when set to align ${align}`,
+        );
+      });
+    });
+  });
+  describe('NavigationItem', function() {
+    test('NavigationItem', () => {
+      const component = shallow(
+        <StyledNavigationItem>
+          <div />
+        </StyledNavigationItem>,
+      );
+      expect(component.instance().getStyles()).toMatchSnapshot(
+        'NavigationItem has correct styles',
+      );
+    });
+  });
+});

src/header-navigation/constants.js

@@ -0,0 +1,13 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+export const ALIGN = {
+  right: 'flex-end',
+  left: 'flex-start',
+  center: 'center',
+};

src/header-navigation/examples-icons.js

@@ -0,0 +1,11 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+export function HamburgerIcon(stroke: string = 'black') {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="24" stroke="${stroke}"><g transform="translate(-250 -3)" ><g><g transform="translate(254 14)"><path id="npath0_fill" d="M0 1a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" /></g><g transform="translate(254 8)"><path id="npath0_fill" d="M0 1a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" /></g><g transform="translate(254 20)"><path id="npath0_fill" d="M0 1a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z" /></g></g></g></svg>`;
+}

src/header-navigation/examples-list.js

@@ -0,0 +1,17 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+/* eslint-env node */
+/* eslint-disable flowtype/require-valid-file-annotation */
+module.exports = {
+  HEADER_NAVIGATION_WITH_MENU_ELEMENT: 'With Dropdown Menu',
+  HEADER_NAVIGATION_WITH_RIGHT_MENU: 'With Right Menu',
+  HEADER_NAVIGATION_WITH_OVERRIDES: 'With changed styles',
+  HEADER_NAVIGATION_DIFFERENT_ALIGNMENTS: 'With alignments',
+  HEADER_NAVIGATION_SEARCH_BAR: 'With search bar',
+  HEADER_NAVIGATION_STYLED_NAV_LIST: 'With different styled Navigstion List',
+};