Navigation: Updated styling and some reorganization (tbd.)

.storybook/preview-head.html

@@ -1,3 +1,8 @@
 <style>
     @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600|Titillium+Web:400,600');
+
+    body {
+        font-family: var(--font-family-primary);
+        font-size: var(--font-size-normal);
+    }
 </style>

src/components/Navigation/NavBar.scss

@@ -1,7 +1,7 @@
 @import '../../themes/oneui/oneui.scss';
 
 .NavBar {
-    background-color: var(--color-neutral);
+    background-color: var(--color-neutral-10);
     color: var(--color-brand);
     width: 100%;
     height: var(--navigation-height);
@@ -18,8 +18,4 @@
         align-items: flex-start;
         align-content: center;
     }
-
-    a {
-        text-decoration: none;
-    }
 }

src/components/Navigation/NavItem/NavItem.scss

@@ -0,0 +1,36 @@
+@import '../../../themes/oneui/oneui.scss';
+
+.NavItem {
+    color: var(--link-color-normal);
+    display: flex;
+    align-items: center;
+    height: 100%;
+    font: {
+        size: var(--font-size-large);
+        weight: var(--font-weight-bold);
+    }
+    box-sizing: border-box;
+    padding: 0 var(--spacing-5x);
+    transition: all var(--transition-duration);
+    text-decoration: none;
+
+    &:hover {
+        color: var(--link-color-hover);
+        box-shadow: inset 0 -3px 0 var(--color-neutral-25);
+    }
+
+    &__active,
+    &--active {
+        color: var(--color-foreground);
+        box-shadow: inset 0 -3px 0 var(--color-primary);
+
+        &:hover {
+            color: var(--color-foreground);
+            box-shadow: inset 0 -3px 0 var(--color-primary-40);
+        }
+    }
+
+    &--pullRight {
+        margin-left: auto;
+    }
+}

src/components/Navigation/NavItem/index.js

@@ -0,0 +1 @@
+export { default } from './NavItem';

src/components/Navigation/NavLinkItem.js → src/components/Navigation/NavLinkItem/NavLinkItem.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import bem from 'bem';
-import styles from './NavItem.scss';
+import styles from '../NavItem/NavItem.scss';
 
 const { block, elem } = bem({
     name: 'NavItem',

src/components/Navigation/NavLinkItem/index.js

@@ -0,0 +1 @@
+export { default } from './NavLinkItem';

src/components/Navigation/index.js

@@ -1,3 +1 @@
-export { default as NavBar } from './NavBar';
-export { default as NavItem } from './NavItem';
-export { default as NavLinkItem } from './NavLinkItem';
+export { default } from './NavBar';

src/index.js

@@ -10,7 +10,9 @@ export { default as Heading } from './components/Heading';
 export { default as Input } from './components/Input';
 export { default as Link } from './components/Link';
 export { default as LoadingSpinner } from './components/LoadingSpinner';
-export * from './components/Navigation';
+export { default as NavItem } from './components/Navigation/NavItem';
+export { default as NavLinkItem } from './components/Navigation/NavLinkItem';
+export { default as NavBar } from './components/Navigation';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as RadioButton } from './components/RadioButton';
 export { default as Tab } from './components/Tabs/Tab';

src/themes/oneui/base-variables/_colors.scss

@@ -42,7 +42,7 @@ $color-bad:         #F42534 !default;
         warning: $color-warning,
         bad: $color-bad
     ) {
-        @each $factor in (20, 50) {
+        @each $factor in (20, 50, 80) {
             --color-#{ $context }-#{ 50 - ($factor / 2) }: #{ mix($color-background, $value, $factor) };
             --color-#{ $context }-#{ 50 + ($factor / 2) }: #{ mix($color-foreground, $value, $factor) };
         }

stories/Navigation.js

@@ -10,25 +10,25 @@ storiesOf('Navigation', module)
         <NavBar>
             <NavItem href="/">Home</NavItem>
             <NavItem href="/" active={boolean('active', true)}>
-                Else
+                Another item
             </NavItem>
             <NavItem href="/" pullRight={boolean('pullRight', true)}>
-                On the right
+                Item on the right
             </NavItem>
-            <NavItem href="/">Other</NavItem>
+            <NavItem href="/">Yet another item</NavItem>
         </NavBar>
     ))
-    .add('react navigation', () => (
+    .add('With React Router', () => (
         <BrowserRouter>
             <NavBar>
                 <NavLinkItem exact to="/">
                     Home
                 </NavLinkItem>
-                <NavLinkItem to="/">Else</NavLinkItem>
-                <NavLinkItem to="/right" pullRight={boolean('pullRight', true)}>
-                    On the right
+                <NavLinkItem to="/another">Another item</NavLinkItem>
+                <NavLinkItem to="/on-right" pullRight={boolean('pullRight', true)}>
+                    Item on the right
                 </NavLinkItem>
-                <NavLinkItem to="/else">Other</NavLinkItem>
+                <NavLinkItem to="/yet-another">Yet another item</NavLinkItem>
             </NavBar>
         </BrowserRouter>
     ));