-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: create email input pattern tckt-362 (#377)
* feat: add email input pattern -tckt-362 * feat: add email input pattern form edit tckt-362 * feat: create email input icon for question dropdown tckt-362 * chore: update error message path for dob storybook tckt-362 * test: add unit tests for email-input config file tckt-362 * test: refactor test failure assertions tckt-362 --------- Co-authored-by: kalasgarov <[email protected]>
- Loading branch information
1 parent
4f3d810
commit 5ee1c8c
Showing
19 changed files
with
545 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/design/src/Form/components/EmailInput/EmailInput.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
| import { FormProvider, useForm } from 'react-hook-form'; | ||
| import { type Meta, type StoryObj } from '@storybook/react'; | ||
|
|
||
| import { EmailInputPattern } from './EmailInput.js'; | ||
|
|
||
| const meta: Meta<typeof EmailInputPattern> = { | ||
| title: 'patterns/EmailInputPattern', | ||
| component: EmailInputPattern, | ||
| decorators: [ | ||
| (Story, args) => { | ||
| const FormDecorator = () => { | ||
| const formMethods = useForm({ | ||
| defaultValues: { | ||
| email: '', | ||
| }, | ||
| }); | ||
| return ( | ||
| <FormProvider {...formMethods}> | ||
| <Story {...args} /> | ||
| </FormProvider> | ||
| ); | ||
| }; | ||
| return <FormDecorator />; | ||
| }, | ||
| ], | ||
| tags: ['autodocs'], | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| export const Default: StoryObj<typeof EmailInputPattern> = { | ||
| args: { | ||
| emailId: 'email', | ||
| label: 'Email address', | ||
| required: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const WithoutRequired: StoryObj<typeof EmailInputPattern> = { | ||
| args: { | ||
| emailId: 'email', | ||
| label: 'Email address', | ||
| required: false, | ||
| }, | ||
| }; | ||
|
|
||
| export const WithError: StoryObj<typeof EmailInputPattern> = { | ||
| args: { | ||
| emailId: 'email', | ||
| label: 'Email address with error', | ||
| required: true, | ||
| error: { | ||
| type: 'custom', | ||
| message: 'This field has an error', | ||
| }, | ||
| }, | ||
| }; |
7 changes: 7 additions & 0 deletions
7
packages/design/src/Form/components/EmailInput/EmailInput.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| /** | ||
| * @vitest-environment jsdom | ||
| */ | ||
| import { describeStories } from '../../../test-helper.js'; | ||
| import meta, * as stories from './EmailInput.stories.js'; | ||
|
|
||
| describeStories(meta, stories); |
37 changes: 37 additions & 0 deletions
37
packages/design/src/Form/components/EmailInput/EmailInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { useFormContext } from 'react-hook-form'; | ||
| import { type EmailInputProps } from '@atj/forms'; | ||
| import { type PatternComponent } from '../../index.js'; | ||
|
|
||
| export const EmailInputPattern: PatternComponent<EmailInputProps> = ({ | ||
| emailId, | ||
| label, | ||
| required, | ||
| error, | ||
| }) => { | ||
| const { register } = useFormContext(); | ||
|
|
||
| return ( | ||
| <fieldset className="usa-fieldset"> | ||
| <div className="usa-form-group"> | ||
| <label className="usa-label" htmlFor={emailId}> | ||
| {label} | ||
| {required && <span className="required-indicator">*</span>} | ||
| </label> | ||
| <input | ||
| className="usa-input margin-bottom-1" | ||
| id={emailId} | ||
| type="email" | ||
| autoCapitalize="off" | ||
| autoCorrect="off" | ||
| {...register(emailId, { required })} | ||
| /> | ||
| </div> | ||
| {error && ( | ||
| <span className="error-message" style={{ color: 'red' }}> | ||
| {error.message} | ||
| </span> | ||
| )} | ||
| </fieldset> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { EmailInputPattern } from './EmailInput.js'; | ||
|
|
||
| export default EmailInputPattern; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
packages/design/src/FormManager/FormEdit/components/EmailInputPatternEdit.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { expect, userEvent } from '@storybook/test'; | ||
| import { within } from '@testing-library/react'; | ||
|
|
||
| import { type EmailInputPattern } from '@atj/forms'; | ||
| import { createPatternEditStoryMeta } from './common/story-helper.js'; | ||
| import FormEdit from '../index.js'; | ||
| import { enLocale as message } from '@atj/common'; | ||
|
|
||
| const pattern: EmailInputPattern = { | ||
| id: 'email-input-1', | ||
| type: 'email-input', | ||
| data: { | ||
| label: message.patterns.emailInput.displayName, | ||
| required: false, | ||
| }, | ||
| }; | ||
|
|
||
| const storyConfig: Meta = { | ||
| title: 'Edit components/EmailInputPattern', | ||
| ...createPatternEditStoryMeta({ | ||
| pattern, | ||
| }), | ||
| } as Meta<typeof FormEdit>; | ||
|
|
||
| export default storyConfig; | ||
|
|
||
| export const Basic: StoryObj<typeof FormEdit> = { | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| const updatedLabel = 'Test Email Update Label'; | ||
|
|
||
| await userEvent.click( | ||
| canvas.getByText(message.patterns.emailInput.displayName) | ||
| ); | ||
|
|
||
| const labelInput = canvas.getByLabelText( | ||
| message.patterns.emailInput.fieldLabel | ||
| ); | ||
| await userEvent.clear(labelInput); | ||
| await userEvent.type(labelInput, updatedLabel); | ||
|
|
||
| const form = labelInput?.closest('form'); | ||
| form?.requestSubmit(); | ||
|
|
||
| await expect(await canvas.findByText(updatedLabel)).toBeInTheDocument(); | ||
| }, | ||
| }; | ||
|
|
||
| export const Error: StoryObj<typeof FormEdit> = { | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
|
|
||
| await userEvent.click( | ||
| canvas.getByText(message.patterns.emailInput.displayName) | ||
| ); | ||
|
|
||
| const labelInput = canvas.getByLabelText( | ||
| message.patterns.emailInput.fieldLabel | ||
| ); | ||
| await userEvent.clear(labelInput); | ||
| labelInput.blur(); | ||
|
|
||
| await expect( | ||
| await canvas.findByText( | ||
| message.patterns.emailInput.errorTextMustContainChar | ||
| ) | ||
| ).toBeInTheDocument(); | ||
| }, | ||
| }; |
7 changes: 7 additions & 0 deletions
7
packages/design/src/FormManager/FormEdit/components/EmailInputPatternEdit.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| /** | ||
| * @vitest-environment jsdom | ||
| */ | ||
| import { describeStories } from '../../../test-helper.js'; | ||
| import meta, * as stories from './EmailInputPatternEdit.stories.js'; | ||
|
|
||
| describeStories(meta, stories); |
Oops, something went wrong.