add storybook css

.gitignore

@@ -7,6 +7,7 @@ coverage
 build
 css/styles.css
 .nyc_output
+css/styles.css
 
 # Only apps should have lockfiles
 yarn.lock

.storybook-css/config.js

@@ -0,0 +1,15 @@
+import { configure } from '@kadira/storybook';
+import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
+import aphroditeInterface from 'react-with-styles-interface-aphrodite';
+import '../css/styles.css';
+import registerCSSInterfaceWithDefaultTheme from '../scripts/utils/registerCSSInterfaceWithDefaultTheme';
+
+
+/* Register react with styles interface */
+registerCSSInterfaceWithDefaultTheme();
+
+function loadStories() {
+  require('../stories/ExampleSlider');
+}
+
+configure(loadStories, module);

.storybook-css/webpack.config.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.css?$/,
+        loaders: [ 'style', 'raw' ],
+        include: path.resolve(__dirname, '../')
+      }
+    ]
+  }
+}

.storybook/config.js

@@ -7,12 +7,8 @@ import DefaultTheme from '../src/themes/DefaultTheme';
 ThemedStyleSheet.registerTheme(DefaultTheme);
 ThemedStyleSheet.registerInterface(aphroditeInterface);
 
-/* Register react with styles interface */
-ThemedStyleSheet.registerTheme(DefaultTheme);
-ThemedStyleSheet.registerInterface(aphroditeInterface);
-
 function loadStories() {
-  require('../stories/ExampleSlider.jsx');
+  require('../stories/ExampleSlider');
 }
 
 configure(loadStories, module);

package.json

@@ -14,6 +14,8 @@
     "prepublish": "npm run build",
     "lint": "eslint --ext .js,.jsx src test stories",
     "storybook": "start-storybook -p 9001",
+    "prestorybook:css": "npm run build:css",
+    "storybook:css": "start-storybook -p 6006 -c .storybook-css",
     "pretest": "npm run build && npm run lint",
     "test": "nyc npm run test:all",
     "tests-only": "npm run test:all",

src/Slider.jsx

@@ -747,15 +747,10 @@ class Rheostat extends React.Component {
     } = this.props;
 
     const {
-      handleDimensions,
       handlePos,
       values,
     } = this.state;
 
-    const handleContainerStyle = orientation === VERTICAL
-      ? { left: 0, bottom: handleDimensions / 2, top: handleDimensions / 2 }
-      : { top: 0, left: handleDimensions / 2, right: handleDimensions / 2 };
-
     return (
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events
       <div
@@ -770,7 +765,6 @@ class Rheostat extends React.Component {
           ref={this.setHandleContainerNode}
           {...css(
             styles.handleContainer,
-            handleContainerStyle,
             styles.rheostat_background,
             orientation === VERTICAL
               ? styles.rheostat_background__vertical