Skip to content

Commit 7c8d509

Browse files
colinrotherhamcolinrotherham
committed
Consolidate <FormGroup> to support fieldsets and legends
1 parent 0918814 commit 7c8d509

File tree

18 files changed

+476
-609
lines changed

18 files changed

+476
-609
lines changed

‎src/components/form-elements/checkboxes/Checkboxes.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
import React, { HTMLProps, useEffect, useRef, useState } from 'react';
44
import classNames from 'classnames';
55
import { FormElementProps } from '@util/types/FormTypes';
6-
import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
6+
import FormGroup from '@components/utils/FormGroup';
77
import CheckboxContext, { ICheckboxContext } from './CheckboxContext';
88
import CheckboxesItem from './components/Item';
99
import CheckboxesDivider from './components/Divider';
1010
import { generateRandomName } from '@util/RandomID';
1111
import { Checkboxes } from 'nhsuk-frontend';
1212

13-
interface CheckboxesProps extends HTMLProps<HTMLDivElement>, FormElementProps {
13+
interface CheckboxesProps
14+
extends HTMLProps<HTMLDivElement>,
15+
Omit<FormElementProps, 'label' | 'labelProps'> {
1416
idPrefix?: string;
1517
}
1618

@@ -60,7 +62,7 @@ const CheckboxesComponent = ({ children, idPrefix, ...rest }: CheckboxesProps) =
6062
};
6163

6264
return (
63-
<SingleInputFormGroup<CheckboxesProps> inputType="checkboxes" {...rest}>
65+
<FormGroup<CheckboxesProps> inputType="checkboxes" {...rest}>
6466
{/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
6567
{({ className, name, id, idPrefix, error, ...restRenderProps }) => {
6668
resetCheckboxIds();
@@ -82,7 +84,7 @@ const CheckboxesComponent = ({ children, idPrefix, ...rest }: CheckboxesProps) =
8284
</div>
8385
);
8486
}}
85-
</SingleInputFormGroup>
87+
</FormGroup>
8688
);
8789
};
8890

‎src/components/form-elements/date-input/DateInput.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import React, { HTMLProps, ChangeEvent, useEffect, useState } from 'react';
44
import classNames from 'classnames';
55
import { DayInput, MonthInput, YearInput } from './components/IndividualDateInputs';
6-
import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
6+
import FormGroup from '@components/utils/FormGroup';
77
import DateInputContext, { IDateInputContext } from './DateInputContext';
88
import { FormElementProps } from '@util/types/FormTypes';
99

@@ -18,8 +18,8 @@ export type DateInputChangeEvent = ChangeEvent<
1818
>;
1919

2020
interface DateInputProps
21-
extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'defaultValue'>,
22-
FormElementProps {
21+
extends Omit<HTMLProps<HTMLDivElement>, 'value' | 'defaultValue' | 'label'>,
22+
Omit<FormElementProps, 'label' | 'labelProps'> {
2323
value?: Partial<DateInputValue>;
2424
defaultValue?: Partial<DateInputValue>;
2525
onChange?: (e: DateInputChangeEvent) => void;
@@ -69,7 +69,7 @@ const DateInputComponent = ({
6969
};
7070

7171
return (
72-
<SingleInputFormGroup<Omit<DateInputProps, 'value' | 'defaultValue'>>
72+
<FormGroup<Omit<DateInputProps, 'value' | 'defaultValue'>>
7373
fieldsetProps={{ role: 'group' }}
7474
inputType="dateinput"
7575
{...rest}
@@ -98,7 +98,7 @@ const DateInputComponent = ({
9898
</div>
9999
);
100100
}}
101-
</SingleInputFormGroup>
101+
</FormGroup>
102102
);
103103
};
104104

‎src/components/form-elements/date-input/__tests__/__snapshots__/DateInput.test.tsx.snap‎

Lines changed: 63 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -5,80 +5,85 @@ exports[`DateInput matches snapshot 1`] = `
55
<div
66
class="nhsuk-form-group"
77
>
8-
<div
9-
class="nhsuk-date-input"
10-
id="testInput"
8+
<fieldset
9+
class="nhsuk-fieldset"
10+
role="group"
1111
>
1212
<div
13-
class="nhsuk-date-input__item"
13+
class="nhsuk-date-input"
14+
id="testInput"
1415
>
1516
<div
16-
class="nhsuk-form-group"
17+
class="nhsuk-date-input__item"
1718
>
18-
<label
19-
class="nhsuk-label nhsuk-date-input__label"
20-
for="testInput-day"
21-
id="testInput-day--label"
19+
<div
20+
class="nhsuk-form-group"
2221
>
23-
Day
24-
</label>
25-
<input
26-
class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2"
27-
id="testInput-day"
28-
inputmode="numeric"
29-
name="testInput-day"
30-
type="text"
31-
value=""
32-
/>
22+
<label
23+
class="nhsuk-label nhsuk-date-input__label"
24+
for="testInput-day"
25+
id="testInput-day--label"
26+
>
27+
Day
28+
</label>
29+
<input
30+
class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2"
31+
id="testInput-day"
32+
inputmode="numeric"
33+
name="testInput-day"
34+
type="text"
35+
value=""
36+
/>
37+
</div>
3338
</div>
34-
</div>
35-
<div
36-
class="nhsuk-date-input__item"
37-
>
3839
<div
39-
class="nhsuk-form-group"
40+
class="nhsuk-date-input__item"
4041
>
41-
<label
42-
class="nhsuk-label nhsuk-date-input__label"
43-
for="testInput-month"
44-
id="testInput-month--label"
42+
<div
43+
class="nhsuk-form-group"
4544
>
46-
Month
47-
</label>
48-
<input
49-
class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2"
50-
id="testInput-month"
51-
inputmode="numeric"
52-
name="testInput-month"
53-
type="text"
54-
value=""
55-
/>
45+
<label
46+
class="nhsuk-label nhsuk-date-input__label"
47+
for="testInput-month"
48+
id="testInput-month--label"
49+
>
50+
Month
51+
</label>
52+
<input
53+
class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2"
54+
id="testInput-month"
55+
inputmode="numeric"
56+
name="testInput-month"
57+
type="text"
58+
value=""
59+
/>
60+
</div>
5661
</div>
57-
</div>
58-
<div
59-
class="nhsuk-date-input__item"
60-
>
6162
<div
62-
class="nhsuk-form-group"
63+
class="nhsuk-date-input__item"
6364
>
64-
<label
65-
class="nhsuk-label nhsuk-date-input__label"
66-
for="testInput-year"
67-
id="testInput-year--label"
65+
<div
66+
class="nhsuk-form-group"
6867
>
69-
Year
70-
</label>
71-
<input
72-
class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4"
73-
id="testInput-year"
74-
inputmode="numeric"
75-
name="testInput-year"
76-
type="text"
77-
value=""
78-
/>
68+
<label
69+
class="nhsuk-label nhsuk-date-input__label"
70+
for="testInput-year"
71+
id="testInput-year--label"
72+
>
73+
Year
74+
</label>
75+
<input
76+
class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4"
77+
id="testInput-year"
78+
inputmode="numeric"
79+
name="testInput-year"
80+
type="text"
81+
value=""
82+
/>
83+
</div>
7984
</div>
8085
</div>
81-
</div>
86+
</fieldset>
8287
</div>
8388
</div>
8489
`;

‎src/components/form-elements/radios/Radios.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import React, { HTMLProps, useEffect, useRef, useState } from 'react';
22
import classNames from 'classnames';
33
import { FormElementProps } from '@util/types/FormTypes';
44
import { RadiosContext, IRadiosContext } from './RadioContext';
5-
import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
5+
import FormGroup from '@components/utils/FormGroup';
66
import RadiosDivider from './components/Divider';
77
import RadiosItem from './components/Item';
88
import { generateRandomName } from '@util/RandomID';
99
import { Radios } from 'nhsuk-frontend';
1010

11-
interface RadiosProps extends HTMLProps<HTMLDivElement>, FormElementProps {
11+
interface RadiosProps
12+
extends HTMLProps<HTMLDivElement>,
13+
Omit<FormElementProps, 'label' | 'labelProps'> {
1214
inline?: boolean;
1315
idPrefix?: string;
1416
}
@@ -65,7 +67,7 @@ const RadiosComponent = ({ children, idPrefix, ...rest }: RadiosProps) => {
6567
};
6668

6769
return (
68-
<SingleInputFormGroup<RadiosProps> inputType="radios" {...rest}>
70+
<FormGroup<RadiosProps> inputType="radios" {...rest}>
6971
{/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
7072
{({ className, inline, name, id, error, ...restRenderProps }) => {
7173
resetRadioIds();
@@ -90,7 +92,7 @@ const RadiosComponent = ({ children, idPrefix, ...rest }: RadiosProps) => {
9092
</div>
9193
);
9294
}}
93-
</SingleInputFormGroup>
95+
</FormGroup>
9496
);
9597
};
9698

‎src/components/form-elements/select/Select.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { FC, HTMLProps, MutableRefObject } from 'react';
22

33
import classNames from 'classnames';
44
import { FormElementProps } from '@util/types/FormTypes';
5-
import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
5+
import FormGroup from '@components/utils/FormGroup';
66

77
// SelectProps = HTMLProps<HTMLSelectElement> & FormElementProps;
88
interface ISelectProps extends HTMLProps<HTMLSelectElement>, FormElementProps {
@@ -14,7 +14,7 @@ interface ISelect extends FC<ISelectProps> {
1414
}
1515

1616
const SelectComponent: ISelect = ({ children, ...rest }) => (
17-
<SingleInputFormGroup<ISelectProps> inputType="select" {...rest}>
17+
<FormGroup<ISelectProps> inputType="select" {...rest}>
1818
{({ className, error, selectRef, ...restRenderProps }) => (
1919
<select
2020
className={classNames('nhsuk-select', { 'nhsuk-select--error': error }, className)}
@@ -24,7 +24,7 @@ const SelectComponent: ISelect = ({ children, ...rest }) => (
2424
{children}
2525
</select>
2626
)}
27-
</SingleInputFormGroup>
27+
</FormGroup>
2828
);
2929

3030
const Option: FC<HTMLProps<HTMLOptionElement>> = (props) => <option {...props} />;

‎src/components/form-elements/text-input/TextInput.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { FC, HTMLProps, MutableRefObject } from 'react';
22
import classNames from 'classnames';
3-
import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
3+
import FormGroup from '@components/utils/FormGroup';
44
import { InputWidth } from '@util/types/NHSUKTypes';
55
import { FormElementProps } from '@util/types/FormTypes';
66

@@ -25,7 +25,7 @@ const TextInputSuffix: FC<{ suffix: string }> = ({ suffix }) => (
2525
);
2626

2727
const TextInputComponent: FC<TextInputProps> = (props) => (
28-
<SingleInputFormGroup<TextInputProps> {...props} inputType="input">
28+
<FormGroup<TextInputProps> {...props} inputType="input">
2929
{({ width, className, error, inputRef, type = 'text', prefix, suffix, ...rest }) => {
3030
const Input = (
3131
<input
@@ -51,7 +51,7 @@ const TextInputComponent: FC<TextInputProps> = (props) => (
5151
Input
5252
);
5353
}}
54-
</SingleInputFormGroup>
54+
</FormGroup>
5555
);
5656

5757
export default TextInputComponent;

‎src/components/form-elements/textarea/Textarea.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React, { FC, HTMLProps, MutableRefObject } from 'react';
22
import classNames from 'classnames';
33
import { FormElementProps } from '@util/types/FormTypes';
4-
import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
4+
import FormGroup from '@components/utils/FormGroup';
55

66
type TextareaProps = HTMLProps<HTMLTextAreaElement> &
77
FormElementProps & { textareaRef?: MutableRefObject<HTMLTextAreaElement | null> };
88

99
const TextareaComponent: FC<TextareaProps> = (props) => (
10-
<SingleInputFormGroup<TextareaProps> inputType="textarea" {...props}>
10+
<FormGroup<TextareaProps> inputType="textarea" {...props}>
1111
{({ className, error, textareaRef, ...rest }) => (
1212
<textarea
1313
className={classNames('nhsuk-textarea', { 'nhsuk-textarea--error': error }, className)}
1414
ref={textareaRef}
1515
{...rest}
1616
/>
1717
)}
18-
</SingleInputFormGroup>
18+
</FormGroup>
1919
);
2020

2121
export default TextareaComponent;

0 commit comments

Comments
 (0)