Skip to content

Commit

Permalink
chore: update Field stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@dougfabris
dougfabris committed Dec 1, 2023
1 parent 36e75f7 commit c1bee25
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 362 deletions.
165 changes: 62 additions & 103 deletions packages/fuselage/src/components/Field/Field.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';

import {
CheckBox,
Field,
FieldDescription,
FieldError,
FieldHint,
FieldRow,
FieldLabel,
InputBox,
ToggleSwitch,
FieldLink,
TextInput,
TextAreaInput,
RadioButton,
CheckBox,
} from '../..';
import { FieldLabelInfo } from './FieldLabelInfo';

Expand All @@ -30,150 +32,107 @@ export default {
<Title />
<Description />
<Primary />
<Stories title={'Field Patterns'} />
<Stories />
</>
),
},
},
} as ComponentMeta<typeof Field>;

export const Default: ComponentStory<typeof Field> = () => (
export const WithTextInput: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldRow>
<InputBox.Skeleton />
</FieldRow>
<FieldError>Error</FieldError>
<FieldHint>Hint</FieldHint>
</Field>
);
export const WithLabelInfo: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel htmlFor='label-info-id'>
<FieldLabel required htmlFor='fieldWithText'>
Label
<FieldLabelInfo id='info-id' title='this is a info label' />
<FieldLabelInfo id='fieldWithTextInfo' title='this is a info label' />
</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldRow>
<InputBox id='label-info-id' type='text' aria-describedby='info-id' />
<TextInput id='fieldWithText' aria-describedby='fieldWithTextInfo' />
</FieldRow>
<FieldError>Error feedback</FieldError>
<FieldRow>
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
<FieldError>Error</FieldError>
<FieldHint>Hint</FieldHint>
</Field>
);
export const RequiredWithLabelInfo: ComponentStory<typeof Field> = () => (
export const WithTextArea: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel required htmlFor='label-required-id'>
<FieldLabel required htmlFor='fieldWithTextArea'>
Label
<FieldLabelInfo id='required-info-id' title='this is a info label' />
<FieldLabelInfo id='fieldWithTextAreaInfo' title='this is a info label' />
</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldRow>
<InputBox
id='label-required-id'
type='text'
aria-describedby='required-info-id'
<TextAreaInput
id='fieldWithTextArea'
aria-describedby='fieldWithTextAreaInfo'
/>
</FieldRow>
<FieldError>Error</FieldError>
<FieldHint>Hint</FieldHint>
</Field>
);

export const WithCheckBox: ComponentStory<typeof Field> = () => (
<Field>
<FieldRow>
<CheckBox id='check-box' />
<FieldLabel htmlFor='check-box'>Label</FieldLabel>
</FieldRow>
</Field>
);

export const WithToggleSwitch: ComponentStory<typeof Field> = () => (
<Field>
<FieldError>Error feedback</FieldError>
<FieldRow>
<ToggleSwitch id='toggle-switch' />
<FieldLabel htmlFor='toggle-switch'>Label</FieldLabel>
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
</Field>
);

export const WithDescription: ComponentStory<typeof Field> = () => (
export const WithRadioButton: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>
Descriptions should add useful and relevant additional information about
what is required of the user for the related input. Its content is
strictly composed by plain text.
</FieldDescription>
<FieldRow>
<InputBox.Skeleton />
<FieldLabel required htmlFor='fieldWithRadio'>
Label
<FieldLabelInfo id='fieldWithRadioInfo' title='this is a info label' />
</FieldLabel>
<RadioButton id='fieldWithRadio' aria-describedby='fieldWithRadioInfo' />
</FieldRow>
</Field>
);

export const WithError: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldError>Error feedback</FieldError>
<FieldRow>
<InputBox.Skeleton />
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
<FieldError>
Error text appears when the user has inputted an invalid response to a
field and let's the user know exactly what the issue is, so as to let them
remedy the error as easily as possible.
</FieldError>
</Field>
);

export const WithHint: ComponentStory<typeof Field> = () => (
export const WithToggleSwitch: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldRow>
<InputBox.Skeleton />
<FieldLabel required htmlFor='fieldWithToggle'>
Label
<FieldLabelInfo id='fieldWithToggleInfo' title='this is a info label' />
</FieldLabel>
<ToggleSwitch
id='fieldWithToggle'
aria-describedby='fieldWithToggleInfo'
/>
</FieldRow>
<FieldHint>
Hint fields help by explaining technical terms or concepts related to
third-party apps and integrations.
</FieldHint>
</Field>
);

export const WithHintAndError: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldError>Error feedback</FieldError>
<FieldRow>
<InputBox.Skeleton />
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
<FieldError>Error must be above.</FieldError>
<FieldHint>Hint must be below.</FieldHint>
</Field>
);

export const WithLink: ComponentStory<typeof Field> = () => (
export const WithCheckbox: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldRow>
<InputBox.Skeleton />
</FieldRow>
<FieldRow justifyContent='end'>
<FieldLink href='#'>
Link is used for external resources or documentation.
</FieldLink>
<FieldLabel required htmlFor='fieldWithCheckbox'>
Label
<FieldLabelInfo
id='fieldWithCheckboxInfo'
title='this is a info label'
/>
</FieldLabel>
<CheckBox
id='fieldWithCheckbox'
aria-describedby='fieldWithCheckboxInfo'
/>
</FieldRow>
</Field>
);

export const WithHintAndLink: ComponentStory<typeof Field> = () => (
<Field>
<FieldLabel>Label</FieldLabel>
<FieldDescription>Description</FieldDescription>
<FieldError>Error feedback</FieldError>
<FieldRow>
<InputBox.Skeleton />
</FieldRow>
<FieldRow justifyContent='space-between'>
<FieldHint>Same line as Link in the left</FieldHint>
<FieldLink href='#'>Same line as Hint in the right</FieldLink>
<FieldHint>Hint</FieldHint>
<FieldLink href='#'>Link</FieldLink>
</FieldRow>
</Field>
);
4 changes: 0 additions & 4 deletions packages/fuselage/src/components/Field/Field.styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,6 @@
margin-block-end: lengths.margin(2);

color: colors.font(secondary-info);

& .rcx-field__label {
padding-inline-start: lengths.padding(8);
}
}

&__hint {
Expand Down
Loading

0 comments on commit c1bee25

Please sign in to comment.