Merge branch 'master' into greenkeeper/react-transition-group-2.0.2

.storybook/__snapshots__/Storyshots.test.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots CheckBox basic usage 1`] = `
-<label
-  htmlFor="checkbox1"
+<div
+  className="form-group"
 >
   <input
     aria-checked={false}
-    aria-describedby="checkbox"
     defaultChecked={false}
-    disabled={undefined}
-    id="checkbox1"
+    disabled={false}
+    id="asInput1"
     name="checkbox"
-    onClick={[Function]}
-    tabIndex="0"
+    onChange={[Function]}
     type="checkbox"
   />
-  check me out!
-</label>
+  <label
+    htmlFor="asInput1"
+  >
+    check me out!
+  </label>
+</div>
 `;
 
 exports[`Storyshots CheckBox call a function 1`] = `
-<label
-  htmlFor="checkbox4"
+<div
+  className="form-group"
 >
   <input
     aria-checked={false}
-    aria-describedby="checkbox"
     defaultChecked={false}
-    disabled={undefined}
-    id="checkbox4"
+    disabled={false}
+    id="asInput4"
     name="checkbox"
-    onClick={[Function]}
-    tabIndex="0"
+    onChange={[Function]}
     type="checkbox"
   />
-  check out the console
-</label>
+  <label
+    htmlFor="asInput4"
+  >
+    check out the console
+  </label>
+</div>
 `;
 
 exports[`Storyshots CheckBox default checked 1`] = `
-<label
-  htmlFor="checkbox3"
+<div
+  className="form-group"
 >
   <input
     aria-checked={true}
-    aria-describedby="checkbox"
     defaultChecked={true}
-    disabled={undefined}
-    id="checkbox3"
+    disabled={false}
+    id="asInput3"
     name="checkbox"
-    onClick={[Function]}
-    tabIndex="0"
+    onChange={[Function]}
     type="checkbox"
   />
-  (un)check me out
-</label>
+  <label
+    htmlFor="asInput3"
+  >
+    (un)check me out
+  </label>
+</div>
 `;
 
 exports[`Storyshots CheckBox disabled 1`] = `
-<label
-  htmlFor="checkbox2"
+<div
+  className="form-group"
 >
   <input
     aria-checked={false}
-    aria-describedby="checkbox"
     defaultChecked={false}
     disabled={true}
-    id="checkbox2"
+    id="asInput2"
     name="checkbox"
-    onClick={[Function]}
-    tabIndex="0"
+    onChange={[Function]}
     type="checkbox"
   />
-  you cannot check me out
-</label>
+  <label
+    htmlFor="asInput2"
+  >
+    you cannot check me out
+  </label>
+</div>
 `;
 
 exports[`Storyshots Dropdown basic usage 1`] = `

.storybook/addons.js

 import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';

.storybook/config.js

@@ -7,7 +7,7 @@ import CssJail from '../src/CssJail';
 setOptions({
   name: '💎 PARAGON',
   url: 'https://github.com/edx/paragon',
-  showDownPanel: false,
+  showDownPanel: true,
 });
 
 const req = require.context('../src', true, /\.stories\.jsx$/);

README.md

@@ -6,7 +6,7 @@ Paragon provides accessible React components for use within the Open edX platfor
 
 <img src="http://i.imgur.com/uxTl3L3.gif" width="200" alt="sparkly 8-bit diamond" />
 
-Components' markup, keyboard triggers, and behavior are based on the [WAI-ARIA 1.1 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/). Components are styled with [Bootstrap 4](https://v4-alpha.getbootstrap.com/) via CSS Modules. Documentation/demo site is available at http://paragon.cool.
+Components' markup, keyboard triggers, and behavior are based on the [WAI-ARIA 1.1 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/). Components are styled with [Bootstrap 4](https://v4-alpha.getbootstrap.com/) via CSS Modules. Documentation/demo site is available at http://edx.github.io/paragon.
 
 ## Development
 

package.json

@@ -24,9 +24,10 @@
     "react-dom": "^15.5.4"
   },
   "devDependencies": {
+    "@storybook/addon-knobs": "^3.2.0",
     "@storybook/addon-options": "^3.1.6",
     "@storybook/addon-storyshots": "^3.1.7",
-    "@storybook/react": "3.1.8",
+    "@storybook/react": "3.2.8",
     "@storybook/storybook-deployer": "^2.0.0",
     "babel-cli": "^6.24.1",
     "babel-jest": "^20.0.3",
@@ -40,9 +41,9 @@
     "coveralls": "^2.13.1",
     "css-loader": "^0.28.4",
     "enzyme": "^2.8.2",
-    "eslint": "^3.19.0",
+    "eslint": "^4.5.0",
     "eslint-config-airbnb": "^15.0.1",
-    "eslint-config-edx": "^3.0.0",
+    "eslint-config-edx": "^4.0.0",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-jsx-a11y": "^5.1.0",
     "eslint-plugin-react": "^7.1.0",

src/CheckBox/CheckBox.stories.jsx

@@ -2,41 +2,36 @@
 /* eslint-disable no-console */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 
 import CheckBox from './index';
 
 storiesOf('CheckBox', module)
+  .addDecorator(withKnobs)
   .add('basic usage', () => (
     <CheckBox
       name="checkbox"
-      describedBy="checkbox"
       label="check me out!"
-      checked="false"
     />
   ))
   .add('disabled', () => (
     <CheckBox
       name="checkbox"
-      describedBy="checkbox"
       label="you cannot check me out"
-      checked="false"
-      disabled
+      disabled={boolean('disabled', true)}
     />
   ))
   .add('default checked', () => (
     <CheckBox
       name="checkbox"
-      describedBy="checkbox"
       label="(un)check me out"
-      checked="true"
+      checked
     />
   ))
   .add('call a function', () => (
     <CheckBox
       name="checkbox"
-      describedBy="checkbox"
       label="check out the console"
-      checked="false"
       onChange={() => console.log('the checkbox changed state')}
     />
   ));

src/CheckBox/CheckBox.test.jsx

 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import CheckBox from './index';
 
 describe('<CheckBox />', () => {
   it('attributes are set correctly', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <CheckBox
         name="checkbox"
-        describedBy="this is a checkbox"
         label="check me out!"
-        checked="false"
       />,
-  );
+    );
 
     expect(wrapper.find('[name="checkbox"]').exists()).toEqual(true);
     expect(wrapper.find('[type="checkbox"]').exists()).toEqual(true);
     expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-describedby="this is a checkbox"]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[tabIndex="0"]').exists()).toEqual(true);
   });
 
   it('aria-label changes after click', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <CheckBox
         name="checkbox"
-        descibedBy="checkbox"
         label="check me out!"
-        checked="false"
       />,
-      );
+    );
 
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
 
-    wrapper.find('input').simulate('click');
+    wrapper.find('[type="checkbox"]').simulate('change');
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(false);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
 
-    wrapper.find('input').simulate('click');
+    wrapper.find('[type="checkbox"]').simulate('change');
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(false);
   });
 
   it('check that callback function is triggered when clicked', () => {
     const spy = jest.fn();
-    const wrapper = shallow(
+    const wrapper = mount(
       <CheckBox
         name="checkbox"
-        descibedBy="checkbox"
         label="check me out!"
-        checked="false"
         onChange={spy}
       />,
     );
 
     expect(spy).toHaveBeenCalledTimes(0);
-    wrapper.find('input').simulate('click');
+    wrapper.find('input').simulate('change');
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('checks if start state can be set to checked', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <CheckBox
         name="checkbox"
-        describedBy="checkbox"
         label="I start checked"
-        checked="true"
+        checked
       />,
     );
 
     expect(wrapper.find('[defaultChecked=true]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
 
-    wrapper.find('input').simulate('click');
+    wrapper.find('input').simulate('change');
     expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
   });
@@ -82,18 +73,14 @@ describe('<CheckBox />', () => {
     const wrapper = mount(
       <CheckBox
         name="checkbox"
-        describedBy="checkbox"
         label="I am disabled"
-        checked="false"
         disabled
       />,
     );
 
-    expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+    expect(wrapper.props().disabled).toEqual(true);
 
-    wrapper.find('input').simulate('click');
-    expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
-    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+    wrapper.find('input').simulate('change');
+    expect(wrapper.props().disabled).toEqual(true);
   });
 });

src/CheckBox/README.md

+# Checkbox Component
+
+Checkbox based off of the [WAI-ARIA authoring guidelines for the checkbox component](https://www.w3.org/TR/wai-aria-1.1/#checkbox). The checkbox is an HTMl input element with added attributes to ensure proper functionality and accessibility. The checkbox is wrapped in an `asInput` component. The `asInput` wrapper is passed the input element as well as a second parameter set to `false` to ensure that the label is placed to the right of the checkbox.
+
+The following parameters should be passed into every checkbox component:
+* `name` (`String`): `name` attribute
+* `label` (`String`): label to be placed next to the checkbox
+
+The following parameters can optionally be passed into a checkbox component:
+* `checked` (`Boolean`): `true` if the default state should be checked, `false` otherwise
+* `disabled` (`Boolean`): `true` if the checkbox should be disabled, `false` otherwise
+* `onChange`: function to be called when the checkbox changes state
+
+The implementation of the checkbox contains the following functions:
+* `constructor()`: The constructor sets the `id` for the checkbox and sets whether the initial state should be checked or unchecked
+* `handleClick()`: Switches the state of the checkbox; also calls the `onChangeState()` function if one has been passed in
+* '`render()`: Returns the checkbox as an input element with seven attributes: `id`, `type`, `name`, `defaultChecked`, `aria-checked`, `onClick`, and `disabled`.

src/CheckBox/index.jsx

 import React from 'react';
+import PropTypes from 'prop-types';
 
-import { inputProps } from '../asInput';
-import newId from '../utils/newId';
+import asInput from '../asInput';
 
-class CheckBox extends React.Component {
+class Check extends React.Component {
   constructor(props) {
     super(props);
 
-    this.handleClick = this.handleClick.bind(this);
-    if (this.props.onChange) {
-      this.onChange = this.props.onChange.bind(this);
-    }
+    this.onChange = this.onChange.bind(this);
 
-    const id = newId('checkbox');
-    if (props.checked === 'true') {
-      this.state = {
-        id,
-        checked: true,
-      };
-    } else {
-      this.state = {
-        id,
-        checked: false,
-      };
-    }
+    this.state = {
+      checked: props.checked || false,
+    };
   }
 
-  handleClick() {
-    if (this.state.checked === true) {
-      this.setState({
-        checked: false,
-      });
-    } else {
-      this.setState({
-        checked: true,
-      });
-    }
-    if (this.onChange) {
-      this.onChange();
-    }
+  onChange(event) {
+    this.setState({
+      checked: !this.state.checked,
+    });
+    this.props.onChange(event);
   }
 
 
@@ -46,24 +26,29 @@ class CheckBox extends React.Component {
     const props = { ...this.props };
 
     return (
-      <label htmlFor={this.state.id}>
-        <input
-          id={this.state.id}
-          name={props.name}
-          type="checkbox"
-          defaultChecked={this.state.checked}
-          aria-describedby={props.describedBy}
-          aria-checked={this.state.checked}
-          tabIndex="0"
-          onClick={this.handleClick}
-          disabled={props.disabled}
-        />
-        {props.label}
-      </label>
+      <input
+        id={props.id}
+        type="checkbox"
+        name={props.name}
+        defaultChecked={this.state.checked}
+        aria-checked={this.state.checked}
+        onChange={this.onChange}
+        disabled={props.disabled}
+      />
     );
   }
 }
 
-CheckBox.propTypes = inputProps;
+Check.propTypes = {
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+Check.defaultProps = {
+  checked: false,
+  onChange: () => {},
+};
+
+const CheckBox = asInput(Check, false);
 
 export default CheckBox;

src/Dropdown/index.jsx

@@ -120,7 +120,7 @@ class Dropdown extends React.Component {
       <div
         className={classNames([
           styles.dropdown,
-        { [styles.show]: this.state.open },
+          { [styles.show]: this.state.open },
         ])}
         ref={(container) => { this.container = container; }}
       >

src/InputText/InputText.stories.jsx

 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { withKnobs, text } from '@storybook/addon-knobs';
 
 import InputText from './index';
 
 storiesOf('InputText', module)
+  .addDecorator(withKnobs)
   .add('minimal usage', () => (
     <InputText
       name="name"
-      label="First Name"
+      label={text('label', 'First Name')}
       value="Foo Bar"
     />
   ))
@@ -16,7 +18,7 @@ storiesOf('InputText', module)
     <InputText
       name="username"
       label="Username"
-      description="The unique name that identifies you throughout the site."
+      description={text('description', 'The unique name that identifies you throughout the site.')}
       validator={(value) => {
         let feedback = { isValid: true };
         if (value.length < 3) {

src/asInput/index.jsx

@@ -24,7 +24,7 @@ export const inputProps = {
   className: PropTypes.arrayOf(PropTypes.string),
 };
 
-const asInput = (WrappedComponent) => {
+const asInput = (WrappedComponent, labelFirst = true) => {
   class NewComponent extends React.Component {
     constructor(props) {
       super(props);
@@ -85,10 +85,9 @@ const asInput = (WrappedComponent) => {
 
     render() {
       const { description, error, describedBy } = this.getDescriptions();
-
       return (
         <div className={styles['form-group']}>
-          <label htmlFor={this.state.id}>{this.props.label}</label>
+          {labelFirst && <label htmlFor={this.state.id}>{this.props.label}</label>}
           <WrappedComponent
             {...this.props}
             {...this.state}
@@ -100,6 +99,7 @@ const asInput = (WrappedComponent) => {
             onChange={this.handleChange}
             onBlur={this.handleBlur}
           />
+          {!labelFirst && <label htmlFor={this.state.id}>{this.props.label}</label>}
           {error}
           {description}
         </div>