Better styles for navigation. Fixes #205

components/link/Link.jsx

@@ -4,7 +4,10 @@ import style from './style';
 import FontIcon from '../font_icon';
 
 const Link = (props) => {
-  const className = ClassNames(style.root, props.className);
+  const className = ClassNames(style.root, {
+    [style.active]: props.active
+  }, props.className);
+
   return (
     <a {...props} data-react-toolbox='link'className={className}>
       {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
@@ -15,6 +18,7 @@ const Link = (props) => {
 };
 
 Link.propTypes = {
+  active: React.PropTypes.bool,
   className: React.PropTypes.string,
   count: React.PropTypes.number,
   icon: React.PropTypes.string,
@@ -22,6 +26,7 @@ Link.propTypes = {
 };
 
 Link.defaultProps = {
+  active: false,
   className: ''
 };
 

components/navigation/_config.scss

@@ -1,3 +1,2 @@
-$navigation-space: $unit;
+$navigation-space: $unit !default;
 $navigation-color: $color-black !default;
-$navigation-background: $color-white !default;

components/navigation/readme.md

@@ -5,21 +5,20 @@ This component is intended to be a common wrapper for a group of links or button
 <!-- example -->
 ```jsx
 import Navigation from 'react-toolbox/lib/navigation';
-
+import Link from 'react-toolbox/lib/link';
-const links = [
-  { href: 'http://', icon: 'person', label: 'Profile' },
-  { href: 'http://', icon: 'inbox', label: 'Inbox'}
-];
 
 const actions = [
-  { label: 'Alarm', raised: true, icon: 'access-alarm'},
+  { label: 'Alarm', raised: true, icon: 'access_alarm'},
   { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 
 const NavigationTest = () => (
   <div>
     <Navigation type='horizontal' actions={actions} />
-    <Navigation type='horizontal' routes={links} />
+    <Navigation type='vertical'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
   </div>
 );
 ```

components/navigation/style.scss

@@ -2,41 +2,23 @@
 @import "./config";
 
 .horizontal {
-  padding-top: $navigation-space;
+  > [data-react-toolbox='button'], > [data-react-toolbox='link'] {
-  padding-bottom: $navigation-space;
-
-  > .link, > .button {
     display: inline-block;
-    margin-right: $navigation-space;
+    margin: 0 $navigation-space / 2;
-    font-size: $font-size-normal;
-    font-weight: $font-weight-normal;
-    color: $navigation-color;
-    > small {
-      padding: 0 $navigation-space;
-      margin-left: $navigation-space;
-      font-weight: $font-weight-bold;
-      color: $navigation-color;
-      background-color: $navigation-background;
-      border-radius: $navigation-space;
-    }
   }
 }
 
 .vertical {
-  padding-top: $navigation-space;
+  > [data-react-toolbox='button'], > [data-react-toolbox='link'] {
-  padding-bottom: $navigation-space;
-
-  > .link, > .button {
     display: block;
-    padding: 0 $navigation-space;
+    margin: $navigation-space / 2;
-    line-height: $unit;
+  }
-    transition-property: box-shadow, opacity;
+}
-    &.active {
+
-      box-shadow: inset 10 * $unit 0 $navigation-background;
+.vertical, .horizontal {
-    }
+  padding: $navigation-space / 2;
-    > small {
+
-      float: right;
+  > [data-react-toolbox='link'] {
-      opacity: .5;
+    color: $navigation-color;
-    }
   }
 }

docs/app/components/layout/main/modules/examples/navigation_example_1.txt

@@ -1,8 +1,3 @@
-const links = [
-  { href: '#/components/navigation', icon: 'person', label: 'Profile' },
-    { href: '#/components/navigation', icon: 'inbox', label: 'Inbox'}
-];
-
 const actions = [
   { label: 'Alarm', raised: true, icon: 'access_alarm'},
   { label: 'Location', raised: true, accent: true, icon: 'room'}
@@ -11,7 +6,10 @@ const actions = [
 const NavigationTest = () => (
   <div>
     <Navigation type='horizontal' actions={actions} />
-    <Navigation type='horizontal' routes={links} />
+    <Navigation type='vertical'>
+      <Link href='http://' label='Inbox' icon='inbox' />
+      <Link href='http://' active label='Profile' icon='person' />
+    </Navigation>
   </div>
 );
 

spec/components/navigation.jsx

@@ -1,24 +1,22 @@
 import React from 'react';
 import Navigation from '../../components/navigation';
+import Link from '../../components/link';
 
-class NavigationTest extends React.Component {
+const actions = [
-  state = {
+  { label: 'Alarm', raised: true, icon: 'access_alarm'},
-    routes: [
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
-      { label: 'Github', route: 'http://www.github.com', icon: 'bookmark' },
+];
-      { label: 'Mail', route: 'http://mail.google.com', icon: 'inbox' }
-    ]
-  };
 
-  render () {
+const NavigationTest = () => (
-    return (
+  <section>
-      <section>
+    <h5>Navigation</h5>
-        <h5>Navigation</h5>
+    <p>lorem ipsum...</p>
-        <p>lorem ipsum...</p>
+    <Navigation type='horizontal' actions={actions} />
-
+    <Navigation type='vertical'>
-        <Navigation type='vertical' routes={this.state.routes} />
+      <Link href='http://' label='Inbox' icon='inbox' />
-      </section>
+      <Link href='http://' active label='Profile' icon='person' />
-    );
+    </Navigation>
-  }
+  </section>
-}
+);
 
 export default NavigationTest;