Autoinject Navigation theme

components/identifiers.js

@@ -11,6 +11,7 @@ export const INPUT = 'RTInput';
 export const LAYOUT = 'RTLayout';
 export const LINK = 'RTLink';
 export const LIST = 'RTList';
+export const NAVIGATION = 'RTNavigation';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';

components/navigation/Navigation.js

@@ -1,47 +1,55 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import Button from '../button';
-import Link from '../link';
+import { NAVIGATION } from '../identifiers.js';
+import InjectButton from '../button/Button.js';
+import InjectLink from '../link/Link.js';
 
-const Navigation = ({ actions, children, className, routes, theme, type }) => {
-  const _className = classnames(theme[type], className);
-  const buttons = actions.map((action, index) => {
-    return <Button className={theme.button} key={index} {...action} />;
-  });
+const factory = (Button, Link) => {
+  const Navigation = ({ actions, children, className, routes, theme, type }) => {
+    const _className = classnames(theme[type], className);
+    const buttons = actions.map((action, index) => {
+      return <Button className={theme.button} key={index} {...action} />;
+    });
 
-  const links = routes.map((route, index) => {
-    return <Link className={theme.link} key={index} {...route} />;
-  });
+    const links = routes.map((route, index) => {
+      return <Link className={theme.link} key={index} {...route} />;
+    });
 
-  return (
-    <nav data-react-toolbox='navigation' className={_className}>
-      {links}
-      {buttons}
-      {children}
-    </nav>
-  );
+    return (
+      <nav data-react-toolbox='navigation' className={_className}>
+        {links}
+        {buttons}
+        {children}
+      </nav>
+    );
+  };
+
+  Navigation.propTypes = {
+    actions: PropTypes.array,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    routes: PropTypes.array,
+    theme: PropTypes.shape({
+      button: PropTypes.string.isRequired,
+      horizontal: PropTypes.string.isRequired,
+      link: PropTypes.string.isRequired,
+      vertical: PropTypes.string.isRequired
+    }),
+    type: PropTypes.oneOf(['vertical', 'horizontal'])
+  };
+
+  Navigation.defaultProps = {
+    actions: [],
+    className: '',
+    type: 'horizontal',
+    routes: []
+  };
+
+  return Navigation;
 };
 
-Navigation.propTypes = {
-  actions: React.PropTypes.array,
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  routes: React.PropTypes.array,
-  theme: React.PropTypes.shape({
-    button: React.PropTypes.string.isRequired,
-    horizontal: React.PropTypes.string.isRequired,
-    link: React.PropTypes.string.isRequired,
-    vertical: React.PropTypes.string.isRequired
-  }),
-  type: React.PropTypes.oneOf(['vertical', 'horizontal'])
-};
-
-Navigation.defaultProps = {
-  actions: [],
-  className: '',
-  type: 'horizontal',
-  routes: []
-};
-
-export default themr('ToolboxNavigation')(Navigation);
+const Navigation = factory(InjectButton, InjectLink);
+export default themr(NAVIGATION)(Navigation);
+export { factory as navigationFactory };
+export { Navigation };

components/navigation/index.js

@@ -1 +1,10 @@
-export default from './Navigation';
+import { themr } from 'react-css-themr';
+import { NAVIGATION } from '../identifiers.js';
+import { navigationFactory } from './Navigation.js';
+import { Button } from '../button';
+import { Link } from '../link';
+import theme from './theme.scss';
+
+const ThemedNavigation = themr(NAVIGATION, theme)(navigationFactory(Button, Link));
+export default ThemedNavigation;
+export { ThemedNavigation as Navigation };

components/navigation/readme.md

@@ -2,13 +2,10 @@
 
 This component is intended to be a common wrapper for a group of links or buttons. It sets a minimal layout, semantic markup and spacing for each of those elements.
 
-The theming for this component can be provided using the key `ToolboxNavigation`.
-
 <!-- example -->
 ```jsx
 import Navigation from 'react-toolbox/lib/navigation';
 import Link from 'react-toolbox/lib/link';
-// Remember to provide themes using ThemeProvider
 
 const actions = [
   { label: 'Alarm', raised: true, icon: 'access_alarm'},
@@ -26,6 +23,8 @@ const NavigationTest = () => (
 );
 ```
 
+The theming for this component can be provided using the key `RTNavigation`.
+
 ## Properties
 
 | Name            | Type          | Default         | Description|

spec/theme.js

@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxNavigation from '../components/navigation/theme.scss';
 import ToolboxProgress from '../components/progress_bar/theme.scss';
 import ToolboxRadio from '../components/radio/theme.scss';
 import ToolboxSlider from '../components/slider/theme.scss';
@@ -12,7 +11,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxNavigation,
   ToolboxProgress,
   ToolboxRadio,
   ToolboxSlider,