Migrate Link to themr

components/link/Link.js

@@ -1,19 +1,19 @@
 import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import classnames from 'classnames';
 import FontIcon from '../font_icon';
+import { themr } from 'react-css-themr';
 
-const Link = ({children, ...props}) => {
-  const className = ClassNames(style.root, {
-    [style.active]: props.active
-  }, props.className);
+const Link = ({active, children, className, count, icon, label, theme, ...others}) => {
+  const _className = classnames(theme.link, {
+    [theme.active]: active
+  }, className);
 
   return (
-    <a {...props} data-react-toolbox='link'className={className}>
-      {props.icon ? <FontIcon className={style.icon} value={props.icon} /> : null}
-      {props.label ? <abbr>{props.label}</abbr> : null}
-      {props.count && parseInt(props.count) !== 0 ? <small>{props.count}</small> : null}
-      {children ? children : null}
+    <a data-react-toolbox='link' className={_className} {...others}>
+      {icon ? <FontIcon className={theme.icon} value={icon} /> : null}
+      {label ? <abbr>{label}</abbr> : null}
+      {count && parseInt(count) !== 0 ? <small>{count}</small> : null}
+      {children}
     </a>
   );
 };
@@ -27,7 +27,12 @@ Link.propTypes = {
     React.PropTypes.string,
     React.PropTypes.element
   ]),
-  label: React.PropTypes.string
+  label: React.PropTypes.string,
+  theme: React.PropTypes.shape({
+    active: React.PropTypes.string.isRequired,
+    icon: React.PropTypes.string.isRequired,
+    link: React.PropTypes.string.isRequired
+  })
 };
 
 Link.defaultProps = {
@@ -35,4 +40,4 @@ Link.defaultProps = {
   className: ''
 };
 
-export default Link;
+export default themr('ToolboxLink')(Link);

components/link/readme.md

@@ -5,12 +5,13 @@ 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' />
-    <Link href="/#/components/link" label="Blog" icon='speaker_notes' />
-    <Link href="/#/components/link" label="Explore" icon='explore' />
+    <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} />
   </nav>
 );
 ```
@@ -26,3 +27,13 @@ You can add as many properties as you want to be directly transferred to the out
 | `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:
+
+| Name     | Description|
+|:---------|:-----------|
+| `active` | Added to the root element if the Link is active.|
+| `icon`  | Used for the icon element if it's present.|
+| `link`   | Used for the root element.|

components/link/theme.scss

@@ -5,7 +5,7 @@
   font-size: 1.8 * $unit;
 }
 
-.root {
+.link {
   position: relative;
   display: flex;
   flex-direction: row;

spec/theme.js

@@ -11,6 +11,7 @@ import ToolboxDialog from '../components/dialog/theme.scss';
 import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxInput from '../components/input/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
+import ToolboxLink from '../components/link/theme.scss';
 import ToolboxOverlay from '../components/overlay/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 import ToolboxTimePicker from '../components/time_picker/theme.scss';
@@ -28,6 +29,7 @@ export default defineTheme({
   ToolboxDrawer,
   ToolboxInput,
   ToolboxLayout,
+  ToolboxLink,
   ToolboxOverlay,
   ToolboxRipple,
   ToolboxTimePicker