Autoinject theme for Link

components/identifiers.js

@@ -9,6 +9,7 @@ export const DIALOG = 'RTDialog';
 export const DROPDOWN = 'RTDropdown';
 export const INPUT = 'RTInput';
 export const LAYOUT = 'RTLayout';
+export const LINK = 'RTLink';
 export const OVERLAY = 'RTOverlay';
 export const PROGRESS_BAR = 'RTProgressBar';
 export const RIPPLE = 'RTRipple';

components/link/Link.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
-import FontIcon from '../font_icon';
 import { themr } from 'react-css-themr';
+import { LINK } from '../identifiers.js';
+import FontIcon from '../font_icon/FontIcon.js';
 
 const Link = ({active, children, className, count, icon, label, theme, ...others}) => {
   const _className = classnames(theme.link, {
@@ -19,19 +20,19 @@ const Link = ({active, children, className, count, icon, label, theme, ...others
 };
 
 Link.propTypes = {
-  active: React.PropTypes.bool,
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  count: React.PropTypes.number,
-  icon: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.element
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  count: PropTypes.number,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element
   ]),
-  label: React.PropTypes.string,
-  theme: React.PropTypes.shape({
-    active: React.PropTypes.string.isRequired,
-    icon: React.PropTypes.string.isRequired,
-    link: React.PropTypes.string.isRequired
+  label: PropTypes.string,
+  theme: PropTypes.shape({
+    active: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired
   })
 };
 
@@ -40,4 +41,5 @@ Link.defaultProps = {
   className: ''
 };
 
-export default themr('ToolboxLink')(Link);
+export default themr(LINK)(Link);
+export { Link };

components/link/index.js

@@ -1 +1,9 @@
-export default from './Link';
+import { themr } from 'react-css-themr';
+import { LINK } from '../identifiers.js';
+import { Link } from './Link.js';
+import theme from './theme.scss';
+
+const ThemedLink = themr(LINK, theme)(Link);
+
+export default ThemedLink;
+export { ThemedLink as Link };

components/link/readme.md

@@ -5,32 +5,31 @@ The link is a very simple component that acts mostly as a wrapper for the HTML a
 <!-- example -->
 ```jsx
 import Link from 'react-toolbox/lib/link';
-import theme from 'react-toolbox/lib/link/theme';
 
 const LinksTest = () => (
   <nav>
-    <Link active href="/#/components/link" label="Work" count={4} icon='business' theme={theme} />
-    <Link href="/#/components/link" label="Blog" icon='speaker_notes' theme={theme} />
-    <Link href="/#/components/link" label="Explore" icon='explore' theme={theme} />
+    <Link active href="/#/components/link" label="Work" count={4} icon='business' />
+    <Link href="/#/components/link" label="Blog" icon='speaker_notes' />
+    <Link href="/#/components/link" label="Explore" icon='explore' />
   </nav>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTLink`.
+
 ## Properties
 
 You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:
 
 | Name            | Type                  | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `active`        | `Boolean`             | `false`         | If true, adds active style to link.|
-| `className`     | `String`              | `''`            | Sets a custom class name to add styles to the link.|
-| `count`         | `Number`              |                 | Sets a count number.|
-| `icon`          | `String` or `Element` |                 | An icon key string to include a `FontIcon` component in front of the text.|
-| `label`         | `String`              |                 | The text string used for the text content of the link.|
+| `active`     | `Boolean`             | `false`         | If true, adds active style to link.|
+| `className`  | `String`              | `''`            | Sets a custom class name to add styles to the link.|
+| `count`      | `Number`              |                 | Sets a count number.|
+| `icon`       | `String` or `Element` |                 | An icon key string to include a `FontIcon` component in front of the text.|
+| `label`      | `String`              |                 | The text string used for the text content of the link.|
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxLink`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|

spec/theme.js

@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxLink from '../components/link/theme.scss';
 import ToolboxList from '../components/list/theme.scss';
 import ToolboxMenu from '../components/menu/theme.scss';
 import ToolboxNavigation from '../components/navigation/theme.scss';
@@ -15,7 +14,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxLink,
   ToolboxList,
   ToolboxMenu,
   ToolboxNavigation,