Skip to content

Commit e0aaaa2

Browse files
Add an example of using a input as a page heading (#221)
* Add an example of using a hint as a page heading by @edwardhorsford
1 parent 2d677c5 commit e0aaaa2

File tree

1 file changed

+18
-1
lines changed

1 file changed

+18
-1
lines changed

stories/Form Elements/TextInput.stories.tsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const meta: Meta<typeof TextInput> = {
77
args: {
88
id: 'input-example',
99
name: 'test-name',
10-
label: 'National Insurance Number',
10+
label: 'National Insurance number',
1111
},
1212
argTypes: {
1313
inputRef: { table: { disable: true } },
@@ -24,6 +24,23 @@ export const WithHintText: Story = {
2424
},
2525
};
2626

27+
export const AsPageHeading: Story = {
28+
args: {
29+
labelProps: {
30+
isPageHeading: true,
31+
size: "l"
32+
},
33+
hint: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.',
34+
},
35+
parameters: {
36+
docs: {
37+
description: {
38+
story: 'To be used when the input label should also be a page heading - such as when it is the main question on a page.'
39+
}
40+
}
41+
}
42+
};
43+
2744
export const WithErrorBoolean: Story = {
2845
args: {
2946
error: true,

0 commit comments

Comments
 (0)