Merge pull request #164 from airbnb/pw--add-storybook-css-interface

Add storybook css interface (4/7)

Author: philipfweiss

.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, '../')
+      }
+    ]
+  }
+}

package.json

@@ -14,6 +14,8 @@
     "prepublish": "in-publish && safe-publish-latest && npm run build || not-in-publish",
     "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