Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Adds validation styles to datepicker #2398

Merged
merged 8 commits into from
May 23, 2023
Merged

fix: Adds validation styles to datepicker #2398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b19e350
added validationStatus to DatePicker
werdnanoslen May 11, 2023
c025e1f
added validationStatus control to DatePicker story
werdnanoslen May 11, 2023
31f2607
added validationStatus test, refactored renders
werdnanoslen May 11, 2023
1287e55
Update src/components/forms/DatePicker/DatePicker.test.tsx
werdnanoslen May 12, 2023
6ee6af3
fix typo
werdnanoslen May 22, 2023
a68c0f6
Merge branch 'main' into an-datepickervalidation-2263
brandonlenz May 23, 2023
7e6a97f
Merge branch 'main' into an-datepickervalidation-2263
werdnanoslen May 23, 2023
c11703e
Merge branch 'main' into an-datepickervalidation-2263
werdnanoslen May 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions src/components/forms/DatePicker/DatePicker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@ export default {
argTypes: {
onSubmit: { action: 'submitted' },
disabled: { control: { type: 'boolean' } },
validationStatus: {
control: {
type: 'select',
options: [undefined, 'success', 'error'],
},
defaultValue: undefined,
}
},
parameters: {
docs: {
Expand Down Expand Up @@ -45,14 +52,15 @@ We may find that we want to expose props for custom event handlers or even a ref
type StorybookArguments = {
onSubmit: React.FormEventHandler<HTMLFormElement>
disabled?: boolean
validationStatus: 'success' | 'error' | undefined
}

export const completeDatePicker = (
argTypes: StorybookArguments
): React.ReactElement => (
<Form onSubmit={argTypes.onSubmit}>
<FormGroup>
<Label id="appointment-date-label" htmlFor="appointment-date">
<FormGroup error={argTypes.validationStatus === 'error'}>
<Label id="appointment-date-label" htmlFor="appointment-date" error={argTypes.validationStatus === 'error'}>
Appointment date
</Label>
<div className="usa-hint" id="appointment-date-hint">
Expand All @@ -64,10 +72,11 @@ export const completeDatePicker = (
aria-describedby="appointment-date-hint"
aria-labelledby="appointment-date-label"
disabled={argTypes.disabled}
validationStatus={argTypes.validationStatus}
/>
<Label htmlFor="otherInput">Another unrelated input</Label>
<TextInput id="otherInput" name="otherInput" type="text" />
</FormGroup>
<Label htmlFor="otherInput">Another unrelated input</Label>
<TextInput id="otherInput" name="otherInput" type="tel" />
</Form>
)

Expand Down
Loading