Migrate checkbox to themr

components/checkbox/Check.js

@@ -1,25 +1,32 @@
 import React, { PropTypes } from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Ripple from '../ripple';
-import style from './style';
 
-const Check = ({checked, children, onMouseDown}) => {
-  const className = ClassNames(style.check, {
-    [style.checked]: checked
-  });
-
-  return <div data-react-toolbox='check' onMouseDown={onMouseDown} className={className}>{children}</div>;
-};
+const Check = ({checked, children, onMouseDown, theme}) => (
+  <div
+    data-react-toolbox='check'
+    className={classnames(theme.check, { [theme.checked]: checked })}
+    onMouseDown={onMouseDown}
+  >
+    {children}
+  </div>
+);
 
 Check.propTypes = {
   checked: PropTypes.bool,
   children: PropTypes.any,
-  onMouseDown: PropTypes.func
+  onMouseDown: PropTypes.func,
+  theme: React.PropTypes.shape({
+    check: React.PropTypes.string.isRequired,
+    checked: React.PropTypes.string.isRequired
+  })
 };
 
-export default Ripple({
-  className: style.ripple,
+const RawCheck = themr('ToolboxCheckbox')(Check);
+export default themr('ToolboxCheckbox')(Ripple({
   spread: 2.6,
   centered: true
-})(Check);
-export {Check as RawCheck};
+})(Check));
+
+export {RawCheck as RawCheck};

components/checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
 import Check from './Check';
-import style from './style';
 
 class Checkbox extends React.Component {
   static propTypes = {
@@ -9,7 +9,13 @@ class Checkbox extends React.Component {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     label: React.PropTypes.any,
-    onChange: React.PropTypes.func
+    onChange: React.PropTypes.func,
+    theme: React.PropTypes.shape({
+      disabled: React.PropTypes.string.isRequired,
+      field: React.PropTypes.string.isRequired,
+      input: React.PropTypes.string.isRequired,
+      ripple: React.PropTypes.string.isRequired
+    })
   };
 
   static defaultProps = {
@@ -34,26 +40,26 @@ class Checkbox extends React.Component {
   }
 
   render () {
-    const { onChange, ...others } = this.props; //eslint-disable-line no-unused-vars
-    const className = ClassNames(style.field, {
-      [style.disabled]: this.props.disabled
+    const { onChange, theme, ...others } = this.props; //eslint-disable-line no-unused-vars
+    const className = classnames(theme.field, {
+      [theme.disabled]: this.props.disabled
     }, this.props.className);
 
     return (
       <label data-react-toolbox='checkbox' className={className}>
         <input
           {...others}
-          className={style.input}
+          className={theme.input}
           onClick={this.handleToggle}
           readOnly
           ref='input'
           type='checkbox'
         />
-        <Check checked={this.props.checked} disabled={this.props.disabled}/>
-        {this.props.label ? <span data-react-toolbox='label' className={style.text}>{this.props.label}</span> : null}
+        <Check rippleClassName={theme.ripple} checked={this.props.checked} disabled={this.props.disabled}/>
+        {this.props.label ? <span data-react-toolbox='label' className={theme.text}>{this.props.label}</span> : null}
       </label>
     );
   }
 }
 
-export default Checkbox;
+export default themr('ToolboxCheckbox')(Checkbox);

components/checkbox/readme.md

@@ -5,6 +5,7 @@
 <!-- example -->
 ```jsx
 import Checkbox from 'react-toolbox/lib/checkbox';
+import theme from 'react-toolbox/lib/checkbox/theme';
 
 class TestCheckbox extends React.Component {
   state = { check1: true, check2: false };
@@ -20,16 +21,19 @@ class TestCheckbox extends React.Component {
           checked={this.state.check1}
           label="Checked option"
           onChange={this.handleChange.bind(this, 'check1')}
+          theme={theme}
         />
         <Checkbox
           checked={this.state.check2}
           label="Unchecked option"
           onChange={this.handleChange.bind(this, 'check2')}
+          theme={theme}
         />
         <Checkbox
           checked
           disabled
           label="Disabled checkbox"
+          theme={theme}
         />
       </div>
     );
@@ -50,9 +54,16 @@ class TestCheckbox extends React.Component {
 | `onChange`      | `Function`      |                 | Callback called when the checkbox value is changed.|
 | `onFocus`       | `Function`      |                 | Callback called when the checkbox is focused |
 
-## Methods
+## Theming
 
-This component exposes methods to communicate with the `input` DOM component:
+You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxCheckbox`, it should implement the following interface:
 
-- `blur` to blur the input.
-- `focus` to focus the input.
+| Name     | Description|
+|:---------|:-----------|
+| `check`  | Used as root in the check element.|
+| `checked`  | Used for the check element when it's checked.|
+| `disabled`   | Used when the component is disabled.|
+| `field`   | Used as the root class of the component.|
+| `input`   | Used for the input element.|
+| `ripple`   | Used for the ripple component.|
+| `text`   | Used for the text label.|

components/checkbox/theme.scss

@@ -8,6 +8,11 @@
   margin-bottom: $checkbox-field-margin-bottom;
   white-space: nowrap;
   vertical-align: middle;
+  .ripple {
+    background-color: $checkbox-color;
+    opacity: .3;
+    transition-duration: $checkbox-ripple-duration;
+  }
 }
 
 .text {
@@ -81,12 +86,6 @@
   }
 }
 
-.ripple {
-  background-color: $checkbox-color;
-  opacity: .3;
-  transition-duration: $checkbox-ripple-duration;
-}
-
 .disabled {
   > .text {
     color: $checkbox-disabled-color;

spec/theme.js

@@ -3,6 +3,7 @@ import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxButton from '../components/button/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
+import ToolboxCheckbox from '../components/checkbox/theme.scss';
 import ToolboxChip from '../components/chip/theme.scss';
 import ToolboxRipple from '../components/ripple/theme.scss';
 
@@ -11,6 +12,7 @@ export default defineTheme({
   ToolboxAvatar,
   ToolboxButton,
   ToolboxCard,
+  ToolboxCheckbox,
   ToolboxChip,
   ToolboxRipple
 });