diff --git a/components/link/Link.js b/components/link/Link.js
index 8500bd1d..15810dcb 100644
--- a/components/link/Link.js
+++ b/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 (
-
- {props.icon ? : null}
- {props.label ? {props.label} : null}
- {props.count && parseInt(props.count) !== 0 ? {props.count} : null}
- {children ? children : null}
+
+ {icon ? : null}
+ {label ? {label} : null}
+ {count && parseInt(count) !== 0 ? {count} : null}
+ {children}
);
};
@@ -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);
diff --git a/components/link/readme.md b/components/link/readme.md
index fa8dff1b..5a6e0ec2 100644
--- a/components/link/readme.md
+++ b/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
```jsx
import Link from 'react-toolbox/lib/link';
+import theme from 'react-toolbox/lib/link/theme';
const LinksTest = () => (
);
```
@@ -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.|
diff --git a/components/link/style.scss b/components/link/theme.scss
similarity index 98%
rename from components/link/style.scss
rename to components/link/theme.scss
index 4981c596..b973fb8a 100644
--- a/components/link/style.scss
+++ b/components/link/theme.scss
@@ -5,7 +5,7 @@
font-size: 1.8 * $unit;
}
-.root {
+.link {
position: relative;
display: flex;
flex-direction: row;
diff --git a/spec/theme.js b/spec/theme.js
index 3219a380..035c4dee 100644
--- a/spec/theme.js
+++ b/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