Skip to content

Commit bfae9b3

Browse files
lukepearsonlukepearson
authored
Merge pull request #37 from oss6/bug/GH-32/radios-conditional-content
GH-32 Fix radios conditional content when checked is false
2 parents 3bf62c9 + 051b7fb commit bfae9b3

File tree

4 files changed

+199
-2
lines changed

4 files changed

+199
-2
lines changed

‎src/components/radios/__tests__/Radios.test.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { mount } from 'enzyme';
2+
import React from 'react';
3+
import Radios from '../Radios';
4+
5+
describe('Radios', () => {
6+
it('matches snapshot', () => {
7+
const element = mount(
8+
<Radios id="example" name="example">
9+
<Radios.Radio id="example-1" value="yes">
10+
Yes
11+
</Radios.Radio>
12+
<Radios.Radio id="example-2" value="no">
13+
No
14+
</Radios.Radio>
15+
</Radios>,
16+
);
17+
expect(element).toMatchSnapshot();
18+
element.unmount();
19+
});
20+
21+
it('does not render the conditional content if checked is false', () => {
22+
const element = mount(
23+
<Radios id="example" name="example">
24+
<Radios.Radio
25+
id="example-1"
26+
value="yes"
27+
checked={false}
28+
conditional={<p className="conditional-test">Test</p>}
29+
>
30+
Yes
31+
</Radios.Radio>
32+
<Radios.Radio id="example-2" value="no">
33+
No
34+
</Radios.Radio>
35+
</Radios>,
36+
);
37+
element.find('input#example-1').simulate('change');
38+
expect(element.exists('.conditional-test')).toBeFalsy();
39+
element.unmount();
40+
});
41+
42+
it('renders the conditional content if the radio reference = selected radio', () => {
43+
const element = mount(
44+
<Radios id="example" name="example">
45+
<Radios.Radio
46+
id="example-1"
47+
value="yes"
48+
conditional={<p className="conditional-test">Test</p>}
49+
>
50+
Yes
51+
</Radios.Radio>
52+
<Radios.Radio id="example-2" value="no">
53+
No
54+
</Radios.Radio>
55+
</Radios>,
56+
);
57+
element.find('input#example-1').simulate('change');
58+
expect(element.exists('.conditional-test')).toBeTruthy();
59+
element.unmount();
60+
});
61+
});

‎src/components/radios/__tests__/__snapshots__/Radios.test.tsx.snap‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Radios matches snapshot 1`] = `
4+
<Radios
5+
id="example"
6+
name="example"
7+
role="radiogroup"
8+
>
9+
<FormGroup
10+
id="example"
11+
inputType="radios"
12+
name="example"
13+
role="radiogroup"
14+
>
15+
<div
16+
className="nhsuk-form-group"
17+
>
18+
<div
19+
className="nhsuk-radios"
20+
id="example"
21+
role="radiogroup"
22+
>
23+
<Radio
24+
id="example-1"
25+
type="radio"
26+
value="yes"
27+
>
28+
<div
29+
className="nhsuk-radios__item"
30+
>
31+
<input
32+
aria-labelledby="example-1--label"
33+
className="nhsuk-radios__input"
34+
id="example-1"
35+
name="example"
36+
onChange={[Function]}
37+
type="radio"
38+
value="yes"
39+
/>
40+
<Label
41+
className="nhsuk-radios__label"
42+
htmlFor="example-1"
43+
id="example-1--label"
44+
>
45+
<BaseLabel
46+
className="nhsuk-radios__label"
47+
htmlFor="example-1"
48+
id="example-1--label"
49+
>
50+
<label
51+
className="nhsuk-label nhsuk-radios__label"
52+
htmlFor="example-1"
53+
id="example-1--label"
54+
>
55+
Yes
56+
</label>
57+
</BaseLabel>
58+
</Label>
59+
</div>
60+
</Radio>
61+
<Radio
62+
id="example-2"
63+
type="radio"
64+
value="no"
65+
>
66+
<div
67+
className="nhsuk-radios__item"
68+
>
69+
<input
70+
aria-labelledby="example-2--label"
71+
className="nhsuk-radios__input"
72+
id="example-2"
73+
name="example"
74+
onChange={[Function]}
75+
type="radio"
76+
value="no"
77+
/>
78+
<Label
79+
className="nhsuk-radios__label"
80+
htmlFor="example-2"
81+
id="example-2--label"
82+
>
83+
<BaseLabel
84+
className="nhsuk-radios__label"
85+
htmlFor="example-2"
86+
id="example-2--label"
87+
>
88+
<label
89+
className="nhsuk-label nhsuk-radios__label"
90+
htmlFor="example-2"
91+
id="example-2--label"
92+
>
93+
No
94+
</label>
95+
</BaseLabel>
96+
</Label>
97+
</div>
98+
</Radio>
99+
</div>
100+
</div>
101+
</FormGroup>
102+
</Radios>
103+
`;

‎src/components/radios/components/Radio.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const Radio: React.FC<RadioProps> = ({
3939
} = useContext<IRadiosContext>(RadiosContext);
4040
const [radioReference] = useState<string>(leaseReference());
4141
const inputID = id || getRadioId(radioReference);
42+
const shouldShowConditional = selectedRadio === radioReference && checked !== false;
4243

4344
useEffect(() => () => unleaseReference(radioReference));
4445

@@ -88,7 +89,7 @@ const Radio: React.FC<RadioProps> = ({
8889
</Hint>
8990
) : null}
9091
</div>
91-
{conditional && (selectedRadio === radioReference || forceShowConditional) ? (
92+
{conditional && (shouldShowConditional || forceShowConditional) ? (
9293
<div
9394
className="nhsuk-radios__conditional"
9495
id={`${inputID}--conditional`}

‎stories/Radios.stories.tsx‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { MouseEvent } from 'react';
33
import { storiesOf } from '@storybook/react';
44
import centered from '@storybook/addon-centered';
5-
import { Radios, Form, Fieldset, Button, Input } from '../src';
5+
import { Radios, Fieldset, Button, Input, Checkboxes } from '../src';
66

77
const stories = storiesOf('Radios', module);
88

@@ -57,6 +57,38 @@ stories
5757
</Radios>
5858
</Fieldset>
5959
))
60+
.add('With conditional content', () => {
61+
const impairmentsForm = (
62+
<Checkboxes name="impairments" id="impairments">
63+
<Checkboxes.Box value="autism">Autism</Checkboxes.Box>
64+
<Checkboxes.Box value="developmental-conditions">
65+
Developmental conditions (excluding autism)
66+
</Checkboxes.Box>
67+
<Checkboxes.Box value="dementia">Dementia</Checkboxes.Box>
68+
<Checkboxes.Box value="learning-disability">Learning disability</Checkboxes.Box>
69+
<Checkboxes.Box value="mental-health-condition">Mental Health Condition</Checkboxes.Box>
70+
<Checkboxes.Box value="physical-disability">Physical disability</Checkboxes.Box>
71+
<Checkboxes.Box value="sensory-disability">
72+
Sensory disability - such as sight, hearing or verbal
73+
</Checkboxes.Box>
74+
<Checkboxes.Box value="long-term-condition">Long-term condition</Checkboxes.Box>
75+
</Checkboxes>
76+
);
77+
78+
return (
79+
<Fieldset>
80+
<Fieldset.Legend>Impairment requirement</Fieldset.Legend>
81+
<Radios name="example" id="example-conditional" hint="Select relevant options.">
82+
<Radios.Radio id="hello1" value="yes" conditional={impairmentsForm}>
83+
Patient requires an impairment to be added
84+
</Radios.Radio>
85+
<Radios.Radio id="hello2" value="no">
86+
Patient would prefer not to say
87+
</Radios.Radio>
88+
</Radios>
89+
</Fieldset>
90+
);
91+
})
6092
.add('With a divider', () => (
6193
<Fieldset>
6294
<Fieldset.Legend>How do you want to sign in?</Fieldset.Legend>

0 commit comments

Comments
 (0)