Skip to content

Commit 83478e5

Browse files
rsarisrsaris
authored
Merge pull request #21 from user-interviews/feature/UIDS-20-radio-button-component
UIDS 20 Add RadioButton component
2 parents 7be2922 + a00b5b2 commit 83478e5

File tree

19 files changed

+319
-40
lines changed

19 files changed

+319
-40
lines changed

‎.eslintrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333
"no-alert": 0,
3434
"react/destructuring-assignment": 0,
3535
"react/forbid-prop-types": 0,
36+
"react/jsx-props-no-spreading": [2, {
37+
"html": "ignore"
38+
}],
3639
"react/jsx-no-target-blank": 1,
3740
"react/jsx-no-undef": 0,
3841
"react/jsx-one-expression-per-line": 0,

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 135 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,98 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Storyshots Design System/Buttons/Radio Button Default 1`] = `
4+
<div
5+
style={
6+
Object {
7+
"padding": "1rem",
8+
}
9+
}
10+
>
11+
<input
12+
className="RadioButton"
13+
disabled={false}
14+
id="default"
15+
name=""
16+
type="radio"
17+
/>
18+
</div>
19+
`;
20+
21+
exports[`Storyshots Design System/Buttons/Radio Button Disabled 1`] = `
22+
<div
23+
style={
24+
Object {
25+
"padding": "1rem",
26+
}
27+
}
28+
>
29+
<input
30+
className="RadioButton"
31+
disabled={true}
32+
id="disabled"
33+
name=""
34+
type="radio"
35+
/>
36+
</div>
37+
`;
38+
339
exports[`Storyshots Design System/Card all cards 1`] = `
4-
<div>
5-
<div
6-
className="card"
7-
>
40+
<div
41+
style={
42+
Object {
43+
"padding": "1rem",
44+
}
45+
}
46+
>
47+
<div>
848
<div
9-
className="card-body"
49+
className="card"
1050
>
1151
<div
12-
className="card-title h5"
52+
className="card-body"
1353
>
14-
Test Card
15-
</div>
16-
<div>
17-
Some quick example text to build on the card title and make up the bulk of the card&#39;s content.
54+
<div
55+
className="card-title h5"
56+
>
57+
Test Card
58+
</div>
59+
<div>
60+
Some quick example text to build on the card title and make up the bulk of the card&#39;s content.
61+
</div>
1862
</div>
1963
</div>
2064
</div>
2165
</div>
2266
`;
2367

68+
exports[`Storyshots Design System/Form Control Label Radio 1`] = `
69+
<div
70+
style={
71+
Object {
72+
"padding": "1rem",
73+
}
74+
}
75+
>
76+
<label
77+
className="FormControlLabel"
78+
htmlFor="radio"
79+
>
80+
<span
81+
className="FormControlLabel__control"
82+
>
83+
<input
84+
className="RadioButton"
85+
disabled={false}
86+
id="radio"
87+
name="radio"
88+
type="radio"
89+
/>
90+
</span>
91+
Labeled radio button
92+
</label>
93+
</div>
94+
`;
95+
2496
exports[`Storyshots Design System/Form Default 1`] = `
2597
<div
2698
style={
@@ -39,7 +111,7 @@ exports[`Storyshots Design System/Form Default 1`] = `
39111
id="first-name"
40112
>
41113
<label
42-
className="FormLabel"
114+
className="InputLabel"
43115
htmlFor="first-name"
44116
>
45117
First name
@@ -55,12 +127,12 @@ exports[`Storyshots Design System/Form Default 1`] = `
55127
id="last-name"
56128
>
57129
<label
58-
className="FormLabel"
130+
className="InputLabel"
59131
htmlFor="last-name"
60132
>
61133
Last name
62134
<span
63-
className="FormLabel__helper-text"
135+
className="InputLabel__helper-text"
64136
>
65137
 (required)
66138
</span>
@@ -76,7 +148,7 @@ exports[`Storyshots Design System/Form Default 1`] = `
76148
id="email"
77149
>
78150
<label
79-
className="FormLabel"
151+
className="InputLabel"
80152
htmlFor="email"
81153
>
82154
Email
@@ -92,12 +164,12 @@ exports[`Storyshots Design System/Form Default 1`] = `
92164
id="phone"
93165
>
94166
<label
95-
className="FormLabel"
167+
className="InputLabel"
96168
htmlFor="phone"
97169
>
98170
Phone
99171
<span
100-
className="FormLabel__helper-text"
172+
className="InputLabel__helper-text"
101173
>
102174
 (required)
103175
</span>
@@ -113,6 +185,45 @@ exports[`Storyshots Design System/Form Default 1`] = `
113185
Invalid phone number
114186
</div>
115187
</div>
188+
<div
189+
className="RadioButtonGroup"
190+
name="radio-buttons"
191+
>
192+
<label
193+
className="FormControlLabel"
194+
htmlFor=""
195+
>
196+
<span
197+
className="FormControlLabel__control"
198+
>
199+
<input
200+
className="RadioButton"
201+
disabled={false}
202+
id="first"
203+
name="radio-buttons"
204+
type="radio"
205+
/>
206+
</span>
207+
first choice
208+
</label>
209+
<label
210+
className="FormControlLabel"
211+
htmlFor=""
212+
>
213+
<span
214+
className="FormControlLabel__control"
215+
>
216+
<input
217+
className="RadioButton"
218+
disabled={false}
219+
id="second"
220+
name="radio-buttons"
221+
type="radio"
222+
/>
223+
</span>
224+
second choice
225+
</label>
226+
</div>
116227
<button
117228
className="btn btn-primary"
118229
type="submit"
@@ -157,12 +268,12 @@ exports[`Storyshots Design System/Form Group Required 1`] = `
157268
id="with-required"
158269
>
159270
<label
160-
className="FormLabel"
271+
className="InputLabel"
161272
htmlFor=""
162273
>
163274
Form Group with label
164275
<span
165-
className="FormLabel__helper-text"
276+
className="InputLabel__helper-text"
166277
>
167278
 (required)
168279
</span>
@@ -188,7 +299,7 @@ exports[`Storyshots Design System/Form Group With Errors 1`] = `
188299
id="with-errors"
189300
>
190301
<label
191-
className="FormLabel"
302+
className="InputLabel"
192303
htmlFor=""
193304
>
194305
Form Group with errors
@@ -225,7 +336,7 @@ exports[`Storyshots Design System/Form Group With Label 1`] = `
225336
id="with-label"
226337
>
227338
<label
228-
className="FormLabel"
339+
className="InputLabel"
229340
htmlFor="input"
230341
>
231342
Form Group with label
@@ -257,7 +368,7 @@ exports[`Storyshots Design System/Form Inline 1`] = `
257368
id="first-name"
258369
>
259370
<label
260-
className="FormLabel"
371+
className="InputLabel"
261372
htmlFor="first-name"
262373
>
263374
First name
@@ -273,12 +384,12 @@ exports[`Storyshots Design System/Form Inline 1`] = `
273384
id="last-name"
274385
>
275386
<label
276-
className="FormLabel"
387+
className="InputLabel"
277388
htmlFor="last-name"
278389
>
279390
Last name
280391
<span
281-
className="FormLabel__helper-text"
392+
className="InputLabel__helper-text"
282393
>
283394
 (required)
284395
</span>
@@ -294,7 +405,7 @@ exports[`Storyshots Design System/Form Inline 1`] = `
294405
id="description"
295406
>
296407
<label
297-
className="FormLabel"
408+
className="InputLabel"
298409
htmlFor="description"
299410
>
300411
Description

‎src/Form/Form.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
order: 1;
1212
}
1313

14-
.FormLabel {
14+
.InputLabel {
1515
flex-grow: 1;
1616
margin-left: 1rem;
1717
order: 2;

‎src/FormControlLabel/FormControlLabel.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import './FormControlLabel.scss';
5+
6+
export default function FormControlLabel(props) {
7+
return (
8+
<label
9+
className="FormControlLabel"
10+
htmlFor={props.labelHtmlFor}
11+
>
12+
<span className="FormControlLabel__control">
13+
{props.children}
14+
</span>
15+
16+
{props.text}
17+
</label>
18+
);
19+
}
20+
21+
FormControlLabel.propTypes = {
22+
children: PropTypes.node.isRequired,
23+
labelHtmlFor: PropTypes.string,
24+
text: PropTypes.string.isRequired,
25+
};
26+
27+
FormControlLabel.defaultProps = {
28+
labelHtmlFor: '',
29+
};

‎src/FormControlLabel/FormControlLabel.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.FormControlLabel {
2+
display: flex;
3+
4+
&__control {
5+
margin-right: .25rem;
6+
}
7+
}

‎src/FormGroup/FormGroup.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
44

5-
import FormLabel from '../FormLabel/FormLabel';
5+
import InputLabel from '../InputLabel/InputLabel';
66

77
import './FormGroup.scss';
88

@@ -31,7 +31,7 @@ export default function FormGroup(props) {
3131
id={props.id}
3232
>
3333
{props.label && (
34-
<FormLabel
34+
<InputLabel
3535
className={props.labelClassName}
3636
labelHtmlFor={props.labelHtmlFor}
3737
required={props.required}

src/FormLabel/FormLabel.jsx renamed to src/InputLabel/InputLabel.jsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,28 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
44

5-
import './FormLabel.scss';
5+
import './InputLabel.scss';
66

7-
export default function FormLabel(props) {
7+
export default function InputLabel(props) {
88
return (
99
<label
10-
className={classNames('FormLabel', props.className)}
10+
className={classNames('InputLabel', props.className)}
1111
htmlFor={props.labelHtmlFor}
1212
>
1313
{props.text}
14-
{props.required && <span className="FormLabel__helper-text">&nbsp;(required)</span>}
14+
{props.required && <span className="InputLabel__helper-text">&nbsp;(required)</span>}
1515
</label>
1616
);
1717
}
1818

19-
FormLabel.propTypes = {
19+
InputLabel.propTypes = {
2020
className: PropTypes.string,
2121
labelHtmlFor: PropTypes.string,
2222
required: PropTypes.bool,
2323
text: PropTypes.string.isRequired,
2424
};
2525

26-
FormLabel.defaultProps = {
26+
InputLabel.defaultProps = {
2727
className: '',
2828
labelHtmlFor: '',
2929
required: false,

src/FormLabel/FormLabel.scss renamed to src/InputLabel/InputLabel.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../../scss/theme';
22

3-
.FormLabel {
3+
.InputLabel {
44
@include font-type-200;
55
font-weight: $headings-font-weight;
66
margin-bottom: 0.5rem;

0 commit comments

Comments
 (0)