Skip to content

P
paragon
Commit e5ea2130 by Sarah Fischmann
Options

fixed checkbox issues, added parameter to HOC

parent 023cdf3b
Showing with 119 additions and 101 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"
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="asInput7"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
check out the console
</label>
<label
htmlFor="asInput7"
>
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="asInput5"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
(un)check me out
</label>
<label
htmlFor="asInput5"
>
(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="asInput3"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
you cannot check me out
</label>
<label
htmlFor="asInput3"
>
you cannot check me out
</label>
</div>
`;
exports[`Storyshots Dropdown basic usage 1`] = `
......@@ -142,14 +150,14 @@ exports[`Storyshots InputSelect basic usage 1`] = `
className="form-group"
>
<label
htmlFor="asInput5"
htmlFor="asInput9"
>
Fruits
</label>
<select
aria-describedby={undefined}
className="form-control"
id="asInput5"
id="asInput9"
name="fruits"
onBlur={[Function]}
onChange={[Function]}
......@@ -185,14 +193,14 @@ exports[`Storyshots InputSelect separate labels and values 1`] = `
className="form-group"
>
<label
htmlFor="asInput6"
htmlFor="asInput10"
>
New England States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="asInput6"
id="asInput10"
name="new-england-states"
onBlur={[Function]}
onChange={[Function]}
......@@ -238,14 +246,14 @@ exports[`Storyshots InputSelect separate option groups 1`] = `
className="form-group"
>
<label
htmlFor="asInput7"
htmlFor="asInput11"
>
Northeast States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="asInput7"
id="asInput11"
name="northeast-states"
onBlur={[Function]}
onChange={[Function]}
......@@ -339,14 +347,14 @@ exports[`Storyshots InputSelect with validation 1`] = `
className="form-group"
>
<label
htmlFor="asInput8"
htmlFor="asInput12"
>
Favorite Color
</label>
<select
aria-describedby={undefined}
className="form-control"
id="asInput8"
id="asInput12"
name="color"
onBlur={[Function]}
onChange={[Function]}
......@@ -397,7 +405,7 @@ exports[`Storyshots InputText minimal usage 1`] = `
className="form-group"
>
<label
htmlFor="asInput9"
htmlFor="asInput13"
>
First Name
</label>
......@@ -406,7 +414,7 @@ exports[`Storyshots InputText minimal usage 1`] = `
aria-invalid={false}
className="form-control"
disabled={false}
id="asInput9"
id="asInput13"
name="name"
onBlur={[Function]}
onChange={[Function]}
......@@ -423,16 +431,16 @@ exports[`Storyshots InputText validation 1`] = `
className="form-group"
>
<label
htmlFor="asInput10"
htmlFor="asInput14"
>
Username
</label>
<input
aria-describedby="undefined description-asInput10"
aria-describedby="undefined description-asInput14"
aria-invalid={false}
className="form-control"
disabled={false}
id="asInput10"
id="asInput14"
name="username"
onBlur={[Function]}
onChange={[Function]}
......@@ -443,7 +451,7 @@ exports[`Storyshots InputText validation 1`] = `
/>
<small
className="form-text"
id="description-asInput10"
id="description-asInput14"
>
The unique name that identifies you throughout the site.
</small>
......@@ -498,10 +506,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
>
<li
className="nav-item"
id="tab-label-tabInterface11-0"
id="tab-label-tabInterface15-0"
>
<a
aria-controls="tab-panel-tabInterface11-0"
aria-controls="tab-panel-tabInterface15-0"
aria-selected={true}
className="nav-link active"
onClick={[Function]}
......@@ -513,10 +521,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
</li>
<li
className="nav-item"
id="tab-label-tabInterface11-1"
id="tab-label-tabInterface15-1"
>
<a
aria-controls="tab-panel-tabInterface11-1"
aria-controls="tab-panel-tabInterface15-1"
aria-selected={false}
className="nav-link"
onClick={[Function]}
......@@ -528,10 +536,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
</li>
<li
className="nav-item"
id="tab-label-tabInterface11-2"
id="tab-label-tabInterface15-2"
>
<a
aria-controls="tab-panel-tabInterface11-2"
aria-controls="tab-panel-tabInterface15-2"
aria-selected={false}
className="nav-link"
onClick={[Function]}
......@@ -547,9 +555,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
>
<div
aria-hidden={false}
aria-labelledby="tab-label-tabInterface11-0"
aria-labelledby="tab-label-tabInterface15-0"
className="tab-pane active"
id="tab-panel-tabInterface11-0"
id="tab-panel-tabInterface15-0"
role="tabpanel"
>
<div>
......@@ -558,9 +566,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
</div>
<div
aria-hidden={true}
aria-labelledby="tab-label-tabInterface11-1"
aria-labelledby="tab-label-tabInterface15-1"
className="tab-pane"
id="tab-panel-tabInterface11-1"
id="tab-panel-tabInterface15-1"
role="tabpanel"
>
<div>
......@@ -569,9 +577,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
</div>
<div
aria-hidden={true}
aria-labelledby="tab-label-tabInterface11-2"
aria-labelledby="tab-label-tabInterface15-2"
className="tab-pane"
id="tab-panel-tabInterface11-2"
id="tab-panel-tabInterface15-2"
role="tabpanel"
>
<div>
......
src/CheckBox/CheckBox.stories.jsx
......@@ -11,7 +11,6 @@ storiesOf('CheckBox', module)
.add('basic usage', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check me out!"
checked="false"
/>
......@@ -19,7 +18,6 @@ storiesOf('CheckBox', module)
.add('disabled', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="you cannot check me out"
checked="false"
disabled={boolean('disabled', true)}
......@@ -28,7 +26,6 @@ storiesOf('CheckBox', module)
.add('default checked', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="(un)check me out"
checked="true"
/>
......@@ -36,9 +33,8 @@ storiesOf('CheckBox', module)
.add('call a function', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check out the console"
checked="false"
onChange={() => console.log('the checkbox changed state')}
onChangeState={() => 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"
/>,
......@@ -17,16 +16,13 @@ describe('<CheckBox />', () => {
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"
/>,
......@@ -34,24 +30,23 @@ describe('<CheckBox />', () => {
expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
wrapper.find('input').simulate('click');
wrapper.find('[type="checkbox"]').simulate('click');
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('click');
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}
onChangeState={spy}
/>,
);
......@@ -61,10 +56,9 @@ describe('<CheckBox />', () => {
});
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"
/>,
......@@ -82,7 +76,6 @@ describe('<CheckBox />', () => {
const wrapper = mount(
<CheckBox
name="checkbox"
describedBy="checkbox"
label="I am disabled"
checked="false"
disabled
......
src/CheckBox/index.jsx
import React from 'react';
import { inputProps } from '../asInput';
import asInput, { inputProps } from '../asInput';
import newId from '../utils/newId';
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);
if (this.props.onChangeState) {
this.onChangeState = this.props.onChangeState.bind(this);
}
const id = newId('checkbox');
......@@ -36,8 +36,8 @@ class CheckBox extends React.Component {
checked: true,
});
}
if (this.onChange) {
this.onChange();
if (this.onChangeState) {
this.onChangeState();
}
}
......@@ -46,24 +46,26 @@ 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}
onClick={this.handleClick}
disabled={props.disabled}
/>
);
}
}
CheckBox.propTypes = inputProps;
Check.propTypes = inputProps;
const CheckBox = asInput(Check, false);
CheckBox.propTupes = {
...Check.propTypes,
...CheckBox.propTypes,
};
export default CheckBox;
src/asInput/index.jsx
......@@ -24,7 +24,7 @@ export const inputProps = {
className: PropTypes.arrayOf(PropTypes.string),
};
const asInput = (WrappedComponent) => {
const asInput = (WrappedComponent, order = true) => {
class NewComponent extends React.Component {
constructor(props) {
super(props);
......@@ -85,10 +85,28 @@ const asInput = (WrappedComponent) => {
render() {
const { description, error, describedBy } = this.getDescriptions();
if (order) {
return (
<div className={styles['form-group']}>
<label htmlFor={this.state.id}>{this.props.label}</label>
<WrappedComponent
{...this.props}
{...this.state}
className={[
styles['form-control'],
...this.props.className,
]}
describedBy={describedBy}
onChange={this.handleChange}
onBlur={this.handleBlur}
/>
{error}
{description}
</div>
);
}
return (
<div className={styles['form-group']}>
<label htmlFor={this.state.id}>{this.props.label}</label>
<WrappedComponent
{...this.props}
{...this.state}
......@@ -100,6 +118,7 @@ const asInput = (WrappedComponent) => {
onChange={this.handleChange}
onBlur={this.handleBlur}
/>
<label htmlFor={this.state.id}>{this.props.label}</label>
{error}
{description}
</div>
......
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