Skip to content

P
paragon
Commit 3caa975e by Ari Rizzitano
Options

GOT CSS MODULE IMPORTS WORKING YAAASSS

parent ab97d856
Showing with 25 additions and 7 deletions
.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 */
......
dist/paragon.min.js.map
This source diff could not be displayed because it is too large. You can view the blob instead.
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'],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment