Skip to content

P
paragon
Unverified Commit e55f1939 by Jae Bradley Committed by GitHub
Options

Merge pull request #101 from edx/add-default-props-for-input-text 

fix(input-text): add prop types for the inner Text component
parents 7986fc94 a307b218
Showing with 159 additions and 92 deletions
.storybook/__snapshots__/Storyshots.test.js.snap
......@@ -226,15 +226,15 @@ exports[`Storyshots InputSelect basic usage 1`] = `
className="form-group"
>
<label
htmlFor="asInput2"
id="label-asInput2"
htmlFor="asInput1"
id="label-asInput1"
>
Fruits
</label>
<select
aria-describedby="error-asInput2"
aria-describedby="error-asInput1"
className="form-control"
id="asInput2"
id="asInput1"
name="fruits"
onBlur={[Function]}
onChange={[Function]}
......@@ -265,7 +265,7 @@ exports[`Storyshots InputSelect basic usage 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput2"
id="error-asInput1"
>
<span />
</div>
......@@ -277,15 +277,15 @@ exports[`Storyshots InputSelect separate labels and values 1`] = `
className="form-group"
>
<label
htmlFor="asInput2"
id="label-asInput2"
htmlFor="asInput1"
id="label-asInput1"
>
New England States
</label>
<select
aria-describedby="error-asInput2"
aria-describedby="error-asInput1"
className="form-control"
id="asInput2"
id="asInput1"
name="new-england-states"
onBlur={[Function]}
onChange={[Function]}
......@@ -326,7 +326,7 @@ exports[`Storyshots InputSelect separate labels and values 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput2"
id="error-asInput1"
>
<span />
</div>
......@@ -338,15 +338,15 @@ exports[`Storyshots InputSelect separate option groups 1`] = `
className="form-group"
>
<label
htmlFor="asInput2"
id="label-asInput2"
htmlFor="asInput1"
id="label-asInput1"
>
Northeast States
</label>
<select
aria-describedby="error-asInput2"
aria-describedby="error-asInput1"
className="form-control"
id="asInput2"
id="asInput1"
name="northeast-states"
onBlur={[Function]}
onChange={[Function]}
......@@ -435,7 +435,7 @@ exports[`Storyshots InputSelect separate option groups 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput2"
id="error-asInput1"
>
<span />
</div>
......@@ -447,15 +447,15 @@ exports[`Storyshots InputSelect with validation 1`] = `
className="form-group"
>
<label
htmlFor="asInput2"
id="label-asInput2"
htmlFor="asInput1"
id="label-asInput1"
>
Favorite Color
</label>
<select
aria-describedby="error-asInput2"
aria-describedby="error-asInput1"
className="form-control"
id="asInput2"
id="asInput1"
name="color"
onBlur={[Function]}
onChange={[Function]}
......@@ -501,7 +501,7 @@ exports[`Storyshots InputSelect with validation 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput2"
id="error-asInput1"
>
<span />
</div>
......@@ -575,17 +575,17 @@ exports[`Storyshots InputText minimal usage 1`] = `
className="form-group"
>
<label
htmlFor="asInput3"
id="label-asInput3"
htmlFor="asInput1"
id="label-asInput1"
>
First Name
</label>
<input
aria-describedby="error-asInput3"
aria-describedby="error-asInput1"
aria-invalid={false}
className="form-control"
disabled={false}
id="asInput3"
id="asInput1"
name="name"
onBlur={[Function]}
onChange={[Function]}
......@@ -598,7 +598,7 @@ exports[`Storyshots InputText minimal usage 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput3"
id="error-asInput1"
>
<span />
</div>
......@@ -651,17 +651,17 @@ exports[`Storyshots InputText validation with danger theme 1`] = `
className="form-group"
>
<label
htmlFor="asInput3"
id="label-asInput3"
htmlFor="asInput1"
id="label-asInput1"
>
Username
</label>
<input
aria-describedby="error-asInput3 description-asInput3"
aria-describedby="error-asInput1 description-asInput1"
aria-invalid={false}
className="form-control"
disabled={false}
id="asInput3"
id="asInput1"
name="username"
onBlur={[Function]}
onChange={[Function]}
......@@ -678,13 +678,13 @@ exports[`Storyshots InputText validation with danger theme 1`] = `
<div
aria-live="polite"
className="form-control-feedback invalid-feedback"
id="error-asInput3"
id="error-asInput1"
>
<span />
</div>
<small
className="form-text"
id="description-asInput3"
id="description-asInput1"
>
The unique name that identifies you throughout the site.
</small>
......@@ -693,7 +693,7 @@ exports[`Storyshots InputText validation with danger theme 1`] = `
exports[`Storyshots Modal basic usage 1`] = `
<div
aria-labelledby="id5"
aria-labelledby="id2"
aria-modal={true}
className="modal show modal-open"
role="dialog"
......@@ -709,7 +709,7 @@ exports[`Storyshots Modal basic usage 1`] = `
>
<h5
className="modal-title"
id="id5"
id="id2"
>
Modal title.
</h5>
......@@ -755,7 +755,7 @@ exports[`Storyshots Modal basic usage 1`] = `
exports[`Storyshots Modal configurable buttons 1`] = `
<div
aria-labelledby="id6"
aria-labelledby="id3"
aria-modal={true}
className="modal show modal-open"
role="dialog"
......@@ -771,7 +771,7 @@ exports[`Storyshots Modal configurable buttons 1`] = `
>
<h5
className="modal-title"
id="id6"
id="id3"
>
Modal title.
</h5>
......@@ -844,7 +844,7 @@ exports[`Storyshots Modal configurable buttons 1`] = `
exports[`Storyshots Modal configurable buttons that perform actions 1`] = `
<div
aria-labelledby="id8"
aria-labelledby="id5"
aria-modal={true}
className="modal show modal-open"
role="dialog"
......@@ -860,7 +860,7 @@ exports[`Storyshots Modal configurable buttons that perform actions 1`] = `
>
<h5
className="modal-title"
id="id8"
id="id5"
>
Modal title.
</h5>
......@@ -915,7 +915,7 @@ exports[`Storyshots Modal configurable buttons that perform actions 1`] = `
exports[`Storyshots Modal configurable close button 1`] = `
<div
aria-labelledby="id9"
aria-labelledby="id6"
aria-modal={true}
className="modal show modal-open"
role="dialog"
......@@ -931,7 +931,7 @@ exports[`Storyshots Modal configurable close button 1`] = `
>
<h5
className="modal-title"
id="id9"
id="id6"
>
Modal title.
</h5>
......@@ -977,7 +977,7 @@ exports[`Storyshots Modal configurable close button 1`] = `
exports[`Storyshots Modal configurable title and body 1`] = `
<div
aria-labelledby="id7"
aria-labelledby="id4"
aria-modal={true}
className="modal show modal-open"
role="dialog"
......@@ -993,7 +993,7 @@ exports[`Storyshots Modal configurable title and body 1`] = `
>
<h5
className="modal-title"
id="id7"
id="id4"
>
Custom title!
</h5>
......@@ -1049,7 +1049,7 @@ exports[`Storyshots Modal configurable title and body 1`] = `
exports[`Storyshots Modal modal invoked via a button 1`] = `
<div>
<div
aria-labelledby="id10"
aria-labelledby="id7"
aria-modal={true}
className="modal show"
role="dialog"
......@@ -1065,7 +1065,7 @@ exports[`Storyshots Modal modal invoked via a button 1`] = `
>
<h5
className="modal-title"
id="id10"
id="id7"
>
I am the modal!
</h5>
......@@ -1121,7 +1121,7 @@ exports[`Storyshots Modal modal invoked via a button 1`] = `
exports[`Storyshots Modal modal with element body 1`] = `
<div
aria-labelledby="id11"
aria-labelledby="id8"
aria-modal={true}
className="modal show modal-open"
role="dialog"
......@@ -1137,7 +1137,7 @@ exports[`Storyshots Modal modal with element body 1`] = `
>
<h5
className="modal-title"
id="id11"
id="id8"
>
Modal title.
</h5>
......@@ -1167,17 +1167,17 @@ exports[`Storyshots Modal modal with element body 1`] = `
className="form-group"
>
<label
htmlFor="asInput3"
id="label-asInput3"
htmlFor="asInput1"
id="label-asInput1"
>
E-Mail Address
</label>
<input
aria-describedby="error-asInput3"
aria-describedby="error-asInput1"
aria-invalid={false}
className="form-control"
disabled={false}
id="asInput3"
id="asInput1"
name="e-mail"
onBlur={[Function]}
onChange={[Function]}
......@@ -1190,7 +1190,7 @@ exports[`Storyshots Modal modal with element body 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput3"
id="error-asInput1"
>
<span />
</div>
......@@ -2072,10 +2072,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
>
<li
className="nav-item"
id="tab-label-tabInterface12-0"
id="tab-label-tabInterface9-0"
>
<a
aria-controls="tab-panel-tabInterface12-0"
aria-controls="tab-panel-tabInterface9-0"
aria-selected={true}
className="nav-link active"
onClick={[Function]}
......@@ -2087,10 +2087,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
</li>
<li
className="nav-item"
id="tab-label-tabInterface12-1"
id="tab-label-tabInterface9-1"
>
<a
aria-controls="tab-panel-tabInterface12-1"
aria-controls="tab-panel-tabInterface9-1"
aria-selected={false}
className="nav-link"
onClick={[Function]}
......@@ -2102,10 +2102,10 @@ exports[`Storyshots Tabs basic usage 1`] = `
</li>
<li
className="nav-item"
id="tab-label-tabInterface12-2"
id="tab-label-tabInterface9-2"
>
<a
aria-controls="tab-panel-tabInterface12-2"
aria-controls="tab-panel-tabInterface9-2"
aria-selected={false}
className="nav-link"
onClick={[Function]}
......@@ -2121,9 +2121,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
>
<div
aria-hidden={false}
aria-labelledby="tab-label-tabInterface12-0"
aria-labelledby="tab-label-tabInterface9-0"
className="tab-pane active"
id="tab-panel-tabInterface12-0"
id="tab-panel-tabInterface9-0"
role="tabpanel"
>
<div>
......@@ -2132,9 +2132,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
</div>
<div
aria-hidden={true}
aria-labelledby="tab-label-tabInterface12-1"
aria-labelledby="tab-label-tabInterface9-1"
className="tab-pane"
id="tab-panel-tabInterface12-1"
id="tab-panel-tabInterface9-1"
role="tabpanel"
>
<div>
......@@ -2143,9 +2143,9 @@ exports[`Storyshots Tabs basic usage 1`] = `
</div>
<div
aria-hidden={true}
aria-labelledby="tab-label-tabInterface12-2"
aria-labelledby="tab-label-tabInterface9-2"
className="tab-pane"
id="tab-panel-tabInterface12-2"
id="tab-panel-tabInterface9-2"
role="tabpanel"
>
<div>
......@@ -2161,17 +2161,17 @@ exports[`Storyshots Textarea minimal usage 1`] = `
className="form-group"
>
<label
htmlFor="asInput4"
id="label-asInput4"
htmlFor="asInput1"
id="label-asInput1"
>
First Name
</label>
<textarea
aria-describedby="error-asInput4"
aria-describedby="error-asInput1"
aria-invalid={false}
className="form-control"
disabled={false}
id="asInput4"
id="asInput1"
name="name"
onBlur={[Function]}
onChange={[Function]}
......@@ -2187,7 +2187,7 @@ exports[`Storyshots Textarea minimal usage 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput4"
id="error-asInput1"
>
<span />
</div>
......@@ -2199,17 +2199,17 @@ exports[`Storyshots Textarea scrollable 1`] = `
className="form-group"
>
<label
htmlFor="asInput4"
id="label-asInput4"
htmlFor="asInput1"
id="label-asInput1"
>
Information
</label>
<textarea
aria-describedby="error-asInput4"
aria-describedby="error-asInput1"
aria-invalid={false}
className="form-control"
disabled={false}
id="asInput4"
id="asInput1"
name="name"
onBlur={[Function]}
onChange={[Function]}
......@@ -2225,7 +2225,7 @@ exports[`Storyshots Textarea scrollable 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput4"
id="error-asInput1"
>
<span />
</div>
......@@ -2237,17 +2237,17 @@ exports[`Storyshots Textarea validation 1`] = `
className="form-group"
>
<label
htmlFor="asInput4"
id="label-asInput4"
htmlFor="asInput1"
id="label-asInput1"
>
Username
</label>
<textarea
aria-describedby="error-asInput4 description-asInput4"
aria-describedby="error-asInput1 description-asInput1"
aria-invalid={false}
className="form-control"
disabled={false}
id="asInput4"
id="asInput1"
name="username"
onBlur={[Function]}
onChange={[Function]}
......@@ -2263,13 +2263,13 @@ exports[`Storyshots Textarea validation 1`] = `
<div
aria-live="polite"
className="form-control-feedback"
id="error-asInput4"
id="error-asInput1"
>
<span />
</div>
<small
className="form-text"
id="description-asInput4"
id="description-asInput1"
>
The unique name that identifies you throughout the site.
</small>
......
src/InputText/InputText.test.jsx 0 → 100644
import React from 'react';
import { mount } from 'enzyme';
import InputText from './index';
describe('<InputText />', () => {
const label = 'label';
const name = 'name';
const props = {
label,
name,
};
describe('rendering', () => {
it('should render with default type when type is not defined', () => {
const wrapper = mount(<InputText {...props} />);
expect(wrapper.find('input')).toHaveLength(1);
const input = wrapper.find('input').at(0);
expect(input.prop('type')).toEqual('text');
});
it('should render with default type when type is defined as undefined', () => {
const wrapper = mount(<InputText {...props} type={undefined} />);
expect(wrapper.find('input')).toHaveLength(1);
const input = wrapper.find('input').at(0);
expect(input.prop('type')).toEqual('text');
});
it('should render with default type when type is defined as null', () => {
const wrapper = mount(<InputText {...props} type={null} />);
expect(wrapper.find('input')).toHaveLength(1);
const input = wrapper.find('input').at(0);
expect(input.prop('type')).toEqual('text');
});
it('should render with specified type when type is defined', () => {
const type = 'foobar';
const wrapper = mount(<InputText {...props} type={type} />);
expect(wrapper.find('input')).toHaveLength(1);
const input = wrapper.find('input').at(0);
expect(input.prop('type')).toEqual(type);
});
});
});
src/InputText/index.jsx
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import asInput, { inputProps } from '../asInput';
import asInput, { inputProps, defaultProps } from '../asInput';
function Text(props) {
return (
......@@ -24,7 +26,22 @@ function Text(props) {
);
}
Text.propTypes = inputProps;
const textPropTypes = {
type: PropTypes.string,
describedBy: PropTypes.string,
isValid: PropTypes.bool,
inputRef: PropTypes.func,
};
const textDefaultProps = {
type: 'text',
describedBy: '',
isValid: true,
inputRef: () => {},
};
Text.propTypes = { ...textPropTypes, ...inputProps };
Text.defaultProps = { ...textDefaultProps, ...defaultProps };
const InputText = asInput(Text);
......
src/asInput/index.jsx
......@@ -28,6 +28,19 @@ export const inputProps = {
themes: PropTypes.arrayOf(PropTypes.string),
};
export const defaultProps = {
onChange: () => {},
onBlur: () => {},
id: newId('asInput'),
value: '',
description: undefined,
disabled: false,
required: false,
validator: undefined,
className: [],
themes: [],
};
const asInput = (WrappedComponent, labelFirst = true) => {
class NewComponent extends React.Component {
constructor(props) {
......@@ -162,18 +175,7 @@ const asInput = (WrappedComponent, labelFirst = true) => {
NewComponent.propTypes = inputProps;
NewComponent.defaultProps = {
onChange: () => {},
onBlur: () => {},
id: newId('asInput'),
value: '',
description: undefined,
disabled: false,
required: false,
validator: undefined,
className: [],
themes: [],
};
NewComponent.defaultProps = defaultProps;
return NewComponent;
};
......
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