Skip to content

P
paragon
Commit afe06b15 by Ari Rizzitano Committed by GitHub
Options

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

parents 6cebf74c 7677df1d
Showing with 126 additions and 130 deletions
.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 0 → 100644
# 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>
......
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
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