GOT CSS MODULE IMPORTS WORKING YAAASSS

.storybook/webpack.config.js

@@ -5,14 +5,25 @@
 // IMPORTANT
 // When you add this file, we won't add the default configurations which is similar
 // to "React Create App". This only has babel loader to load JavaScript.
+const path = require('path');
 
 module.exports = {
-  plugins: [
-    // your custom plugins
-  ],
   module: {
-    loaders: [
-      // add your custom loaders.
-    ],
+    rules: [{
+      test: /\.scss$/,
+      use: [
+        {loader: 'style-loader'},
+        {loader: 'css-loader'},
+        {
+          loader: 'sass-loader',
+          options: {
+            data: '@import "variables"; @import "mixins";',
+            includePaths: [
+              path.join(__dirname, '../'),
+            ],
+          },
+        },
+      ],
+    }],
   },
 };

dist/paragon.min.js

@@ -671,7 +671,7 @@ module.exports = warning;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-var _createClass=function(){function a(b,c){for(var f,d=0;d<c.length;d++)f=c[d],f.enumerable=f.enumerable||!1,f.configurable=!0,'value'in f&&(f.writable=!0),Object.defineProperty(b,f.key,f)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_classnames=__webpack_require__(9),_classnames2=_interopRequireDefault(_classnames),_propTypes=__webpack_require__(2),_propTypes2=_interopRequireDefault(_propTypes);Object.defineProperty(exports,'__esModule',{value:!0});function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function _inherits(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}var triggerKeys={openMenu:['ArrowDown','Space'],closeMenu:['Escape'],navigateDown:['ArrowDown'],navigateUp:['ArrowUp']},Dropdown=function(a){function b(c){_classCallCheck(this,b);var d=_possibleConstructorReturn(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,c));return d.addEvents=d.addEvents.bind(d),d.handleDocumentClick=d.handleDocumentClick.bind(d),d.handleToggleKeyDown=d.handleToggleKeyDown.bind(d),d.handleMenuKeyDown=d.handleMenuKeyDown.bind(d),d.removeEvents=d.removeEvents.bind(d),d.toggle=d.toggle.bind(d),d.menuItems=[],d.state={open:!1},d}return _inherits(b,a),_createClass(b,[{key:'componentWillUpdate',value:function componentWillUpdate(c,d){d.open?this.addEvents():this.removeEvents()}},{key:'componentDidUpdate',value:function componentDidUpdate(){this.state.open&&this.menuItems[0].focus()}},{key:'addEvents',value:function addEvents(){document.addEventListener('click',this.handleDocumentClick,!0)}},{key:'removeEvents',value:function removeEvents(){document.removeEventListener('click',this.handleDocumentClick,!0)}},{key:'handleDocumentClick',value:function handleDocumentClick(c){this.container.contains(c.target)&&this.container!==c.target||this.toggle()}},{key:'handleMenuKeyDown',value:function handleMenuKeyDown(c){this.state.open&&-1<triggerKeys.closeMenu.indexOf(c.key)&&this.toggle()}},{key:'handleToggleKeyDown',value:function handleToggleKeyDown(c){!this.state.open&&-1<triggerKeys.openMenu.indexOf(c.key)?this.toggle():this.state.open&&-1<triggerKeys.closeMenu.indexOf(c.key)&&(this.toggle(),this.toggleElem.focus())}},{key:'toggle',value:function toggle(){this.setState({open:!this.state.open})}},{key:'generateMenuItems',value:function generateMenuItems(c){var d=this;return c.map(function(f,g){return _react2.default.createElement('li',{className:d.props.classes.menuItem,key:g},_react2.default.createElement('a',{role:'menuitem',href:f.href,onKeyDown:d.handleMenuKeyDown,ref:function ref(h){d.menuItems[g]=h}},f.label))})}},{key:'render',value:function render(){var c=this,d=this.generateMenuItems(this.props.menuItems),f=this.props.classes;return _react2.default.createElement('div',{className:(0,_classnames2.default)([f.dropdown,_defineProperty({},f.show,this.state.open)]),ref:function ref(g){c.container=g}},_react2.default.createElement('button',{'aria-expanded':this.state.open,'aria-haspopup':'true',className:(0,_classnames2.default)([f.toggle,_defineProperty({},f.active,this.state.open)]),onClick:this.toggle,onKeyDown:this.handleToggleKeyDown,type:'button',ref:function ref(g){c.toggleElem=g}},this.props.title),_react2.default.createElement('ul',{'aria-label':this.props.title,'aria-hidden':!this.state.open,className:f.menu,role:'menu'},d))}}]),b}(_react2.default.Component);Dropdown.propTypes={title:_propTypes2.default.string.isRequired,menuItems:_propTypes2.default.arrayOf(_propTypes2.default.shape({label:_propTypes2.default.string,href:_propTypes2.default.string})).isRequired,classes:_propTypes2.default.object},exports.default=Dropdown;
+var _createClass=function(){function a(b,c){for(var f,d=0;d<c.length;d++)f=c[d],f.enumerable=f.enumerable||!1,f.configurable=!0,'value'in f&&(f.writable=!0),Object.defineProperty(b,f.key,f)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),_react=__webpack_require__(1),_react2=_interopRequireDefault(_react),_classnames=__webpack_require__(9),_classnames2=_interopRequireDefault(_classnames),_propTypes=__webpack_require__(2),_propTypes2=_interopRequireDefault(_propTypes);Object.defineProperty(exports,'__esModule',{value:!0});function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(a,b){if(!a)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return b&&('object'==typeof b||'function'==typeof b)?b:a}function _inherits(a,b){if('function'!=typeof b&&null!==b)throw new TypeError('Super expression must either be null or a function, not '+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}var triggerKeys={OPEN_MENU:['ArrowDown','Space'],CLOSE_MENU:['Escape'],NAVIGATE_DOWN:['ArrowDown','Tab'],NAVIGATE_UP:['ArrowUp']},Dropdown=function(a){function b(c){_classCallCheck(this,b);var d=_possibleConstructorReturn(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,c));return d.addEvents=d.addEvents.bind(d),d.handleDocumentClick=d.handleDocumentClick.bind(d),d.handleToggleKeyDown=d.handleToggleKeyDown.bind(d),d.handleMenuKeyDown=d.handleMenuKeyDown.bind(d),d.removeEvents=d.removeEvents.bind(d),d.toggle=d.toggle.bind(d),d.menuItems=[],d.state={open:!1,focusIndex:0},d}return _inherits(b,a),_createClass(b,null,[{key:'isTriggerKey',value:function isTriggerKey(c,d){return-1<triggerKeys[c].indexOf(d)}}]),_createClass(b,[{key:'componentWillUpdate',value:function componentWillUpdate(c,d){d.open?this.addEvents():this.removeEvents()}},{key:'componentDidUpdate',value:function componentDidUpdate(){this.state.open&&this.menuItems[this.state.focusIndex].focus()}},{key:'addEvents',value:function addEvents(){document.addEventListener('click',this.handleDocumentClick,!0)}},{key:'removeEvents',value:function removeEvents(){document.removeEventListener('click',this.handleDocumentClick,!0)}},{key:'handleDocumentClick',value:function handleDocumentClick(c){this.container&&this.container.contains(c.target)&&this.container!==c.target||this.toggle()}},{key:'handleMenuKeyDown',value:function handleMenuKeyDown(c){c.preventDefault(),b.isTriggerKey('CLOSE_MENU',c.key)?this.toggle():b.isTriggerKey('NAVIGATE_DOWN',c.key)?this.setState({focusIndex:(this.state.focusIndex+1)%this.props.menuItems.length}):b.isTriggerKey('NAVIGATE_UP',c.key)&&this.setState({focusIndex:(this.state.focusIndex-1+this.props.menuItems.length)%this.props.menuItems.length})}},{key:'handleToggleKeyDown',value:function handleToggleKeyDown(c){!this.state.open&&b.isTriggerKey('OPEN_MENU',c.key)?this.toggle():this.state.open&&b.isTriggerKey('CLOSE_MENU',c.key)&&(this.toggle(),this.toggleElem.focus())}},{key:'toggle',value:function toggle(){this.setState({open:!this.state.open,focusIndex:0})}},{key:'generateMenuItems',value:function generateMenuItems(c){var d=this;return c.map(function(f,g){return _react2.default.createElement('li',{className:d.props.classes.menuItem,key:g},_react2.default.createElement('a',{role:'menuitem',href:f.href,onKeyDown:d.handleMenuKeyDown,ref:function ref(h){d.menuItems[g]=h},tabIndex:'-1'},f.label))})}},{key:'render',value:function render(){var c=this,d=this.generateMenuItems(this.props.menuItems),f=this.props.classes;return _react2.default.createElement('div',{className:(0,_classnames2.default)([f.dropdown,_defineProperty({},f.show,this.state.open)]),ref:function ref(g){c.container=g}},_react2.default.createElement('button',{'aria-expanded':this.state.open,'aria-haspopup':'true',className:(0,_classnames2.default)([f.toggle,_defineProperty({},f.active,this.state.open)]),onClick:this.toggle,onKeyDown:this.handleToggleKeyDown,type:'button',ref:function ref(g){c.toggleElem=g}},this.props.title),_react2.default.createElement('ul',{'aria-label':this.props.title,'aria-hidden':!this.state.open,className:f.menu,role:'menu'},d))}}]),b}(_react2.default.Component);Dropdown.propTypes={title:_propTypes2.default.string.isRequired,menuItems:_propTypes2.default.arrayOf(_propTypes2.default.shape({label:_propTypes2.default.string,href:_propTypes2.default.string})).isRequired,classes:_propTypes2.default.shape},Dropdown.defaultProps={classes:{dropdown:'dropdown',active:'active',toggle:'btn btn-secondary dropdown-toggle',screenreader:'sr-only',show:'show',menu:'dropdown-menu',menuActive:null,menuItem:'dropdown-item',menuWrapper:null}},exports.default=Dropdown;
 
 /***/ }),
 /* 12 */

package.json

@@ -16,6 +16,7 @@
     "test": "jest --coverage"
   },
   "dependencies": {
+    "bootstrap": "4.0.0-alpha.6",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
@@ -38,6 +39,7 @@
     "babel-preset-react": "^6.24.1",
     "coveralls": "^2.13.1",
     "enzyme": "^2.8.2",
+    "css-loader": "^0.28.4",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-edx": "^2.0.1",
@@ -46,9 +48,12 @@
     "eslint-plugin-react": "^6.10.3",
     "husky": "^0.13.4",
     "jest": "^20.0.4",
+    "node-sass": "^4.5.3",
     "react-router-dom": "^4.1.1",
     "react-test-renderer": "^15.6.1",
+    "sass-loader": "^6.0.5",
     "source-map-loader": "^0.2.1",
+    "style-loader": "^0.18.2",
     "webpack": "^2.4.1",
     "webpack-dev-server": "^2.4.4"
   }

src/Dropdown.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
+import 'bootstrap/scss/_dropdown.scss';
+
 const triggerKeys = {
   OPEN_MENU: ['ArrowDown', 'Space'],
   CLOSE_MENU: ['Escape'],