Skip to content

Commit 9170054

Browse files
colinrotherhamcolinrotherham
committed
Remove automatic sizing from labels and legends
1 parent d6336c2 commit 9170054

File tree

10 files changed

+189
-59
lines changed

10 files changed

+189
-59
lines changed

‎src/components/form-elements/label/Label.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,10 @@ export interface LabelProps extends Omit<HTMLProps<HTMLLabelElement>, 'size'> {
88
size?: NHSUKSize;
99
}
1010

11-
const Label: FC<LabelProps> = ({ className, bold, size, isPageHeading, ...rest }) => (
11+
const Label: FC<LabelProps> = ({ className, size, ...rest }) => (
1212
// eslint-disable-next-line jsx-a11y/label-has-associated-control
1313
<label
14-
className={classNames(
15-
'nhsuk-label',
16-
{ 'nhsuk-label--s': bold && !size },
17-
{ 'nhsuk-label--xl': isPageHeading && !size },
18-
{ [`nhsuk-label--${size}`]: size },
19-
className,
20-
)}
14+
className={classNames('nhsuk-label', { [`nhsuk-label--${size}`]: size }, className)}
2115
{...rest}
2216
/>
2317
);

‎src/components/form-elements/label/__tests__/Label.test.tsx‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3+
import type { NHSUKSize } from '@util/types/NHSUKTypes';
34
import Label from '../Label';
45

56
describe('Label', () => {
@@ -10,22 +11,44 @@ describe('Label', () => {
1011
expect(container.innerHTML).toBe('<label class="nhsuk-label">Text</label>');
1112
});
1213

13-
it('can render with size m', () => {
14-
const { container } = render(<Label size="m">Text</Label>);
14+
it.each<NHSUKSize>(['s', 'm', 'l', 'xl'])('renders with custom size %s', (size) => {
15+
const { container } = render(<Label size={size}>Text</Label>);
1516

16-
expect(container.textContent).toBe('Text');
17-
expect(container.innerHTML).toBe('<label class="nhsuk-label nhsuk-label--m">Text</label>');
17+
const labelEl = container.querySelector('.nhsuk-label');
18+
19+
expect(labelEl).toHaveTextContent('Text');
20+
expect(labelEl).toHaveClass(`nhsuk-label--${size}`);
1821
});
1922

20-
it('can render with heading prop', () => {
23+
it('renders as page heading', () => {
2124
const { container } = render(<Label isPageHeading>Text</Label>);
2225

23-
expect(container.querySelector('.nhsuk-label.nhsuk-label--xl')?.textContent).toBe('Text');
24-
expect(container.innerHTML).toBe(
25-
'<h1 class="nhsuk-label-wrapper"><label class="nhsuk-label nhsuk-label--xl">Text</label></h1>',
26-
);
26+
const headingEl = container.querySelector('.nhsuk-label-wrapper');
27+
const labelEl = headingEl?.querySelector('.nhsuk-label');
28+
29+
expect(headingEl?.tagName).toBe('H1');
30+
expect(labelEl).toHaveTextContent('Text');
31+
expect(labelEl).not.toHaveClass(`nhsuk-label--xl`);
2732
});
2833

34+
it.each<NHSUKSize>(['s', 'm', 'l', 'xl'])(
35+
'renders as page heading with custom size %s',
36+
(size) => {
37+
const { container } = render(
38+
<Label isPageHeading size={size}>
39+
Text
40+
</Label>,
41+
);
42+
43+
const headingEl = container.querySelector('.nhsuk-label-wrapper');
44+
const labelEl = headingEl?.querySelector('.nhsuk-label');
45+
46+
expect(headingEl?.tagName).toBe('H1');
47+
expect(labelEl).toHaveTextContent('Text');
48+
expect(labelEl).toHaveClass(`nhsuk-label--${size}`);
49+
},
50+
);
51+
2952
it('renders null with no children', () => {
3053
const { container } = render(<Label />);
3154

‎src/components/form-elements/legend/Legend.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ const LegendComponent: FC<LegendProps> = ({
2525
<legend
2626
className={classNames(
2727
'nhsuk-fieldset__legend',
28-
{
29-
'nhsuk-fieldset__legend--xl': isPageHeading && !size,
30-
},
3128
{ [`nhsuk-fieldset__legend--${size}`]: size },
3229
className,
3330
)}

‎src/components/form-elements/legend/__tests__/Legend.test.tsx‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3+
import { NHSUKSize } from '@util/types/NHSUKTypes';
34
import Legend from '..';
45

56
describe('Legend', () => {
@@ -12,10 +13,32 @@ describe('Legend', () => {
1213
it('renders as page heading', () => {
1314
const { container } = render(<Legend isPageHeading>Text</Legend>);
1415

15-
expect(container.querySelector('.nhsuk-fieldset__legend--xl')).toBeTruthy();
16-
expect(container.querySelector('.nhsuk-fieldset__heading')?.textContent).toBe('Text');
16+
const legendEl = container.querySelector('.nhsuk-fieldset__legend');
17+
const headingEl = legendEl?.querySelector('.nhsuk-fieldset__heading');
18+
19+
expect(legendEl).toHaveTextContent('Text');
20+
expect(legendEl).not.toHaveClass('nhsuk-fieldset__legend--xl');
21+
expect(headingEl?.tagName).toBe('H1');
1722
});
1823

24+
it.each<NHSUKSize>(['s', 'm', 'l', 'xl'])(
25+
'renders as page heading with custom size %s',
26+
(size) => {
27+
const { container } = render(
28+
<Legend isPageHeading size={size}>
29+
Text
30+
</Legend>,
31+
);
32+
33+
const legendEl = container.querySelector('.nhsuk-fieldset__legend');
34+
const headingEl = legendEl?.querySelector('.nhsuk-fieldset__heading');
35+
36+
expect(legendEl).toHaveTextContent('Text');
37+
expect(legendEl).toHaveClass(`nhsuk-fieldset__legend--${size}`);
38+
expect(headingEl?.tagName).toBe('H1');
39+
},
40+
);
41+
1942
it('renders null with no children', () => {
2043
const { container } = render(<Legend />);
2144

‎stories/Form Elements/Checkboxes.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export const WithLegendAsPageHeading: Story = {
125125
<form>
126126
<Checkboxes
127127
legend="Which types of waste do you transport regularly?"
128-
legendProps={{ isPageHeading: true }}
128+
legendProps={{ isPageHeading: true, size: 'l' }}
129129
hint="Select all that apply"
130130
id="waste"
131131
name="waste"

‎stories/Form Elements/Fieldset.stories.tsx‎

Lines changed: 59 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { Meta, StoryObj } from '@storybook/react';
2121
* const Element = () => {
2222
* return (
2323
* <Fieldset>
24-
* <Fieldset.Legend>What is your address?</Fieldset.Legend>
24+
* <Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
2525
* </Fieldset>
2626
* );
2727
* }
@@ -30,36 +30,84 @@ import { Meta, StoryObj } from '@storybook/react';
3030
const meta: Meta<typeof Fieldset> = {
3131
title: 'Form Elements/Fieldset',
3232
component: Fieldset,
33-
args: {
34-
children: 'What is your address?',
35-
},
3633
};
3734
export default meta;
3835
type Story = StoryObj<typeof Fieldset>;
3936

40-
export const Standard: Story = {};
37+
export const Standard: Story = {
38+
render: (args) => (
39+
<Fieldset>
40+
<Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
41+
<TextInput
42+
label="Address line 1"
43+
id="address-line-1"
44+
name="addressLine1"
45+
autoComplete="address-line1"
46+
/>
47+
<TextInput
48+
label="Address line 2 (optional)"
49+
id="address-line-2"
50+
name="addressLine2"
51+
autoComplete="address-line2"
52+
/>
53+
<TextInput
54+
label="Town or city"
55+
id="address-town"
56+
name="addressTown"
57+
autoComplete="address-level2"
58+
className="nhsuk-u-width-two-thirds"
59+
/>
60+
<TextInput
61+
label="Postcode"
62+
id="address-postcode"
63+
name="addressPostcode"
64+
autoComplete="postal-code"
65+
className="nhsuk-input--width-10"
66+
/>
67+
</Fieldset>
68+
),
69+
};
4170

42-
export const AsAPageHeading: Story = {
71+
export const WithLegendAsAPageHeading: Story = {
4372
render: (args) => (
4473
<Fieldset>
4574
<Fieldset.Legend isPageHeading>What is your address?</Fieldset.Legend>
4675
</Fieldset>
4776
),
4877
};
4978

50-
export const WithCustomLegendSize: Story = {
79+
export const WithCustomLegendSizeS: Story = {
80+
name: 'With Bold Text (S)',
81+
render: (args) => (
82+
<Fieldset>
83+
<Fieldset.Legend size="s">What is your address?</Fieldset.Legend>
84+
</Fieldset>
85+
),
86+
};
87+
88+
export const WithCustomLegendSizeM: Story = {
89+
name: 'With Custom Size (M)',
5190
render: (args) => (
5291
<Fieldset>
5392
<Fieldset.Legend size="m">What is your address?</Fieldset.Legend>
5493
</Fieldset>
5594
),
5695
};
5796

58-
export const WithFormElement: Story = {
59-
render: () => (
97+
export const WithCustomLegendSizeL: Story = {
98+
name: 'With Custom Size (L)',
99+
render: (args) => (
100+
<Fieldset>
101+
<Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
102+
</Fieldset>
103+
),
104+
};
105+
106+
export const WithCustomLegendSizeXL: Story = {
107+
name: 'With Custom Size (XL)',
108+
render: (args) => (
60109
<Fieldset>
61-
<Fieldset.Legend size="m">Input below</Fieldset.Legend>
62-
<TextInput id="test-input" />
110+
<Fieldset.Legend size="xl">What is your address?</Fieldset.Legend>
63111
</Fieldset>
64112
),
65113
};

‎stories/Form Elements/Label.stories.tsx‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,47 @@ const meta: Meta<typeof Label> = {
77
args: {
88
children: 'National Insurance Number',
99
size: undefined,
10-
bold: false,
1110
isPageHeading: false,
1211
},
12+
argTypes: {
13+
size: { control: 'select', options: [undefined, 's', 'm', 'l', 'xl'] },
14+
},
1315
};
1416
export default meta;
1517
type Story = StoryObj<typeof Label>;
1618

1719
export const Standard: Story = {};
18-
export const BoldLabel: Story = {
20+
21+
export const AsPageHeading: Story = {
1922
args: {
20-
bold: true,
23+
isPageHeading: true,
2124
},
2225
};
23-
export const PageHeadingLabel: Story = {
26+
27+
export const WithCustomSizeS: Story = {
28+
name: 'With Bold Text (S)',
2429
args: {
25-
isPageHeading: true,
30+
size: 's',
2631
},
2732
};
28-
export const CustomSizeLabel: Story = {
33+
34+
export const WithCustomSizeM: Story = {
35+
name: 'With Custom Size (M)',
2936
args: {
3037
size: 'm',
3138
},
3239
};
40+
41+
export const WithCustomSizeL: Story = {
42+
name: 'With Custom Size (L)',
43+
args: {
44+
size: 'l',
45+
},
46+
};
47+
48+
export const WithCustomSizeXL: Story = {
49+
name: 'With Custom Size (XL)',
50+
args: {
51+
size: 'xl',
52+
},
53+
};

‎stories/Form Elements/Select.stories.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof Select>;
1111

1212
export const Standard: Story = {
1313
render: (args) => (
14-
<Select id="select-1" label="Label text goes here">
14+
<Select label="Label text goes here" labelProps={{ size: 'l' }}>
1515
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
1616
<Select.Option value="2" selected>
1717
NHS.UK frontend option 2
@@ -25,7 +25,7 @@ export const Standard: Story = {
2525

2626
export const SelectWithHintText: Story = {
2727
render: (args) => (
28-
<Select label="Label text goes here" hint="Hint text goes here">
28+
<Select label="Label text goes here" labelProps={{ size: 'l' }} hint="Hint text goes here">
2929
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
3030
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
3131
<Select.Option value="3">NHS.UK frontend option 3</Select.Option>
@@ -38,7 +38,7 @@ export const SelectWithErrorBoolean: Story = {
3838
const [error, setError] = useState<boolean>(true);
3939
return (
4040
<>
41-
<Select error={error} label="Label text goes here">
41+
<Select label="Label text goes here" labelProps={{ size: 'l' }} error={error}>
4242
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
4343
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
4444
<Select.Option value="3">NHS.UK frontend option 3</Select.Option>
@@ -63,7 +63,7 @@ export const SelectWithErrorString: Story = {
6363
const [error, setError] = useState<string>('Error message goes here');
6464
return (
6565
<>
66-
<Select error={error} label="Label text goes here">
66+
<Select label="Label text goes here" labelProps={{ size: 'l' }} error={error}>
6767
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
6868
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
6969
<Select.Option value="3">NHS.UK frontend option 3</Select.Option>
@@ -81,7 +81,12 @@ export const SelectWithErrorAndHintString: Story = {
8181
const [error, setError] = useState<string>('Error message goes here');
8282
return (
8383
<>
84-
<Select error={error} label="Label text goes here" hint="Hint text goes here">
84+
<Select
85+
label="Label text goes here"
86+
labelProps={{ size: 'l' }}
87+
hint="Hint text goes here"
88+
error={error}
89+
>
8590
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
8691
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
8792
<Select.Option value="3">NHS.UK frontend option 3</Select.Option>

‎stories/Form Elements/TextInput.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const WithHintText: Story = {
2424
},
2525
};
2626

27-
export const AsPageHeading: Story = {
27+
export const WithLabelAsPageHeading: Story = {
2828
args: {
2929
labelProps: {
3030
isPageHeading: true,

0 commit comments

Comments
 (0)