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