Remove css modules

components/autocomplete/index.jsx

@@ -3,10 +3,9 @@
 import { addons } from 'react/addons';
 import utils from '../utils';
 import Input from '../input';
-import CSSModules from 'react-css-modules';
 import style from './style';
 
-const Autocomplete = React.createClass({
+export default React.createClass({
   mixins: [addons.PureRenderMixin],
 
   displayName: 'Autocomplete',
@@ -163,27 +162,32 @@ const Autocomplete = React.createClass({
       return (
         <ul data-flex='horizontal wrap' onClick={this.handleUnselect}>
           {[...this.state.values].map(([key, value]) => {
-            return (<li styleName='value' key={key} id={key}>{value}</li>);
+            return (<li className={style.value} key={key} id={key}>{value}</li>);
           })}
         </ul>
       );
     }
   },
 
-  render () {
-    let suggestionsStyle = this.state.focus ? 'suggestions-visible' : 'suggestions';
-    let suggestions = [...this._getSuggestions()].map(([key, value]) => {
-      let styleName = this.state.active !== key ? 'suggestion' : 'suggestion-active';
-      return <li id={key} key={key} styleName={styleName}>{value}</li>;
+  renderSuggestions () {
+    return [...this._getSuggestions()].map(([key, value]) => {
+      let className = style[this.state.active !== key ? 'suggestion' : 'suggestion-active'];
+      return <li id={key} key={key} className={className}>{value}</li>;
     });
+  },
+
+  render () {
+    let containerClassName = style.container;
+    let suggestionsClassName = style[this.state.focus ? 'suggestions-active' : 'suggestions'];
+    if (this.props.className) containerClassName += ` ${this.props.className}`;
 
     return (
-      <div data-toolbox='autocomplete' styleName='container' className={this.props.className}>
-        {this.props.label ? (<label styleName='label'>{this.props.label}</label>) : ''}
+      <div data-toolbox='autocomplete' className={containerClassName}>
+        {this.props.label ? <label className={style.label}>{this.props.label}</label> : ''}
         {this.renderSelected()}
         <Input
-          {...this.props}
           ref='input'
+          {...this.props}
           label=''
           value=''
           onBlur={this.handleBlur}
@@ -192,15 +196,13 @@ const Autocomplete = React.createClass({
           onKeyUp={this.handleKeyPress} />
         <ul
           ref='suggestions'
-          styleName={suggestionsStyle}
+          className={suggestionsClassName}
           onMouseDown={this.handleSelect}
           onMouseOver={this.handleHover}
         >
-          {suggestions}
+          {this.renderSuggestions()}
         </ul>
       </div>
     );
   }
 });
-
-export default CSSModules(Autocomplete, style);

components/autocomplete/style.scss

@@ -48,7 +48,7 @@ $autocomplete-suggestion-active-background: unquote("rgb(#{$palette-grey-200})")
   transform: translateY(- $unit);
 }
 
-.suggestions-visible {
+.suggestions-active {
   @extend .suggestions;
   height: auto;
   box-shadow: $zdepth-shadow-1;

components/button/index.jsx

@@ -3,10 +3,9 @@
 import { addons } from 'react/addons';
 import FontIcon from '../font_icon';
 import Ripple from '../ripple';
-import CSSModules from 'react-css-modules';
 import style from './style.scss';
 
-const Button = React.createClass({
+export default React.createClass({
   mixins: [addons.PureRenderMixin],
 
   displayName: 'Button',
@@ -40,19 +39,22 @@ const Button = React.createClass({
   },
 
   render () {
+    let className = style[this.props.type];
+    if (this.props.className) className += ` ${this.props.className}`;
+
     return (
       <button
         {...this.props}
         type=''
         label=''
         data-toolbox='button'
-        styleName={this.props.type}
+        className={className}
         disabled={this.props.disabled || this.state.loading}
         onMouseDown={this.handleMouseDown}
       >
         { this.props.ripple ? <Ripple ref='ripple' loading={this.props.loading}/> : null }
-        { this.props.icon ? <FontIcon styleName='icon' value={this.props.icon}/> : null }
-        { this.props.label ? <abbr styleName='label'>{this.props.label}</abbr> : null }
+        { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon}/> : null }
+        { this.props.label ? <abbr className={style.label}>{this.props.label}</abbr> : null }
       </button>
     );
   },
@@ -61,5 +63,3 @@ const Button = React.createClass({
     this.setState({loading: value});
   }
 });
-
-export default CSSModules(Button, style);

components/drawer/index.jsx

@@ -1,10 +1,9 @@
 /* global React */
 
 import { addons } from 'react/addons';
-import CSSModules from 'react-css-modules';
 import style from './style.scss';
 
-const Drawer = React.createClass({
+export default React.createClass({
   mixins: [addons.PureRenderMixin],
 
   displayName: 'Drawer',
@@ -34,13 +33,14 @@ const Drawer = React.createClass({
   },
 
   render () {
-    let styleName = 'drawer';
-    if (this.state.active) styleName += '-active';
+    let className = `${style.drawer} ${style[this.props.type]}`;
+    if (this.state.active) className += ` ${style.active}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <div styleName={`${styleName} ${this.props.type}`} className={this.props.className}>
-        <div styleName='overlay' onClick={this.handleOverlayClick}></div>
-        <aside styleName='content'>
+      <div className={className}>
+        <div className={style.overlay} onClick={this.handleOverlayClick}></div>
+        <aside className={style.content}>
           { this.props.children }
         </aside>
       </div>
@@ -55,5 +55,3 @@ const Drawer = React.createClass({
     this.setState({active: false});
   }
 });
-
-export default CSSModules(Drawer, style, { allowMultiple: true });

components/drawer/style.scss

@@ -22,8 +22,7 @@ $drawer-transition-delay: .1s;
   pointer-events: none;
 }
 
-.drawer-active {
-  @extend .drawer;
+.active {
   pointer-events: all;
 
   > .content {
@@ -42,7 +41,7 @@ $drawer-transition-delay: .1s;
     border-right: 1px solid $drawer-border-color;
   }
 
-  &:not(.drawer-active) > .content {
+  &:not(.active) > .content {
     transform: translateX(- $drawer-width);
   }
 }
@@ -53,7 +52,7 @@ $drawer-transition-delay: .1s;
     border-left: 1px solid $drawer-border-color;
   }
 
-  &:not(.drawer-active) > .content {
+  &:not(.active) > .content {
     transform: translateX($drawer-width);
   }
 }

components/ripple/index.jsx

@@ -1,23 +1,26 @@
 /* global React */
 
 import { addons } from 'react/addons';
-import CSSModules from 'react-css-modules';
 import style from './style.scss';
 
-const Ripple = React.createClass({
+export default React.createClass({
   mixins: [addons.PureRenderMixin],
 
   displayName: 'Ripple',
 
   propTypes: {
+    centered: React.PropTypes.bool,
     className: React.PropTypes.string,
-    loading: React.PropTypes.bool
+    loading: React.PropTypes.bool,
+    spread: React.PropTypes.number
   },
 
   getDefaultProps () {
     return {
+      centered: false,
       className: '',
-      loading: false
+      loading: false,
+      spread: 2
     };
   },
 
@@ -46,33 +49,26 @@ const Ripple = React.createClass({
   },
 
   _getDescriptor (pageX, pageY) {
-    let { left, top, width } = this.getDOMNode().getBoundingClientRect();
+    let { left, top, height, width } = this.getDOMNode().getBoundingClientRect();
     return {
-      left: pageX - left,
-      top: pageY - top,
-      width: width * 2.5
+      left: this.props.centered ? width / 2 : pageX - left,
+      top: this.props.centered ? height / 2 : pageY - top,
+      width: width * this.props.spread
     };
   },
 
   render () {
     let { left, top, width } = this.state;
-    let className = this.props.className;
-    let styleName = this.props.loading ? 'loading' : 'normal';
+    let rippleStyle = {left: left, top: top, width: width, height: width};
+    let className = style[this.props.loading ? 'loading' : 'normal'];
     if (this.state.active) className += ` ${style.active}`;
     if (this.state.restarting) className += ` ${style.restarting}`;
+    if (this.props.className) className += ` ${this.props.className}`;
 
     return (
-      <span styleName='wrapper'>
-        <span
-          ref="ripple"
-          data-toolbox='ripple'
-          className={className}
-          styleName={styleName}
-          style={{left: left, top: top, width: width, height: width}}>
-        </span>
+      <span react-toolbox='ripple' className={style.wrapper}>
+        <span ref="ripple" role='ripple' className={className} style={rippleStyle} />
       </span>
     );
   }
 });
-
-export default CSSModules(Ripple, style);

components/ripple/style.scss

@@ -33,7 +33,7 @@ $ripple-size: 15 * $unit;
 
   &:not(.active) {
     opacity: 0;
-    transition-property: opacity, height, width;
+    transition-property: height, width, opacity;
 
     &.restarting {
       transition-property: none;