Skip to content

Commit

Permalink
Merge pull request #602 from WestpacGEL/form-stories-dev
Browse files Browse the repository at this point in the history 
link label, hint and error message with input field
  • Loading branch information
@kenjishiromajp
kenjishiromajp authored Dec 20, 2023
2 parents 1c1fc3f + cb3b48c commit bf140da
Showing 1 changed file with 61 additions and 31 deletions.
92 changes: 61 additions & 31 deletions packages/ui/src/components/form/form.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,30 +33,42 @@ export const Default: Story = {
<Form.Section>
<Form.Group>
<Form.Label htmlFor="example-default-1">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-default-1" />
<Form.Hint id="example-default-1-hint">This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" id="example-default-1-error" />
<Input
name="example-default-1"
id="example-default-1"
aria-describedby="example-default-1-hint example-default-1-error"
/>
</Form.Group>

<Form.Group>
<Form.Label htmlFor="example-default-2">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-default-2" />
<Form.Hint id="example-default-2-hint">This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" id="example-default-2-error" />
<Input
name="example-default-2"
id="example-default-2"
aria-describedby="example-default-2-hint example-default-2-error"
/>
</Form.Group>
</Form.Section>

<Form.Section>
<Form.Group>
<Form.Label htmlFor="example-default-3">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-default-3" />
<Form.Hint id="example-default-3-hint">This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" id="example-default-3-error" />
<Input
name="example-default-3"
id="example-default-3"
aria-describedby="example-default-3-hint example-default-3-error"
/>
</Form.Group>
</Form.Section>
</Form>

<hr />
<hr className="my-4 border-t border-t-border" />

<h2 className="typography-body-7 my-4 font-bold">Large size with large spacing</h2>
<Form spacing="large">
Expand All @@ -70,25 +82,40 @@ export const Default: Story = {
<Form.Section>
<Form.Group>
<Form.Label htmlFor="example-large-1">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-large-1" size="large" />
<Form.Hint id="example-large-1-hint">This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" id="example-large-1-error" />
<Input
name="example-large-1"
size="large"
id="example-large-1"
aria-describedby="example-large-1-hint example-large-1-error"
/>
</Form.Group>

<Form.Group>
<Form.Label htmlFor="example-large-2">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-large-2" size="large" />
<Form.Hint id="example-large-2-hint">This is a hint</Form.Hint>
<Form.ErrorMessage id="example-large-2-error" message="This is an error message" />
<Input
name="example-large-2"
size="large"
id="example-large-2"
aria-describedby="example-large-2-hint example-large-2-error"
/>
</Form.Group>
</Form.Section>

<Form.Section>
<Form.Group>
<Form.Label htmlFor="example-large-3">This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input name="example-large-3" size="large" />
<Form.Hint id="example-large-3-hint">This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" id="example-large-3-error" />
<Input
name="example-large-3"
size="large"
id="example-large-3"
aria-describedby="example-large-3-hint example-large-3-error"
/>
</Form.Group>
</Form.Section>
</Form>
Expand All @@ -105,10 +132,13 @@ export const MultipleErrors: Story = {
render: () => {
return (
<Form>
<Form.Label>This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message={['This is an error message', 'another error message']} />
<Input />
<Form.Label htmlFor="example-m-errors">This is a label</Form.Label>
<Form.Hint id="example-m-errors-hint">This is a hint</Form.Hint>
<Form.ErrorMessage
message={['This is an error message', 'another error message']}
id="example-m-errors-message"
/>
<Input id="example-m-errors" aria-describedby="example-m-errors-hint example-m-errors-message" />
</Form>
);
},
Expand All @@ -124,10 +154,10 @@ export const Size: Story = {
<div className="flex flex-col gap-3">
<Form>
<h3>Sizing is currently handled on the child level. See example of size prop on Input component in code.</h3>
<Form.Label>This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input size="large" />
<Form.Label htmlFor="example-size">This is a label</Form.Label>
<Form.Hint id="example-size-hint">This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" id="example-size-error" />
<Input size="large" id="example-size" aria-describedby="example-size-hint example-size-error" />
</Form>
</div>
);
Expand All @@ -145,10 +175,10 @@ export const AllSpacings: Story = {
{(['medium', 'large'] as const).map(size => (
<Form spacing={size}>
<h3>Form with Spacing:{size}. Sets spacing between label, hint and form groups.</h3>
<Form.Label>This is a label</Form.Label>
<Form.Hint>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" />
<Input />
<Form.Label htmlFor={`space-${size}`}>This is a label</Form.Label>
<Form.Hint id={`space-${size}-hint`}>This is a hint</Form.Hint>
<Form.ErrorMessage message="This is an error message" id={`space-${size}-error`} />
<Input id={`space-${size}`} aria-describedby={`space-${size}-hint space-${size}-error`} />
</Form>
))}
</div>
Expand Down

0 comments on commit bf140da

Please sign in to comment.