-
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 gender id pattern edit form tckt-365
- Loading branch information
kalasgarov
committed
Nov 27, 2024
1 parent
b6ddf13
commit 4fafc9d
Showing
8 changed files
with
334 additions
and
0 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
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
159 changes: 159 additions & 0 deletions
159
...n/src/FormManager/FormEdit/components/GenderIdPatternEdit/GenderIdPatternEdit.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,159 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { userEvent, expect } from '@storybook/test'; | ||
| import { within } from '@testing-library/react'; | ||
|
|
||
| import { type GenderIdPattern } from '@atj/forms'; | ||
| import { createPatternEditStoryMeta } from '../common/story-helper.js'; | ||
| import FormEdit from '../../index.js'; | ||
| import { enLocale as message } from '@atj/common'; | ||
|
|
||
| const pattern: GenderIdPattern = { | ||
| id: 'gender-identity-1', | ||
| type: 'gender-id', | ||
| data: { | ||
| label: message.patterns.genderId.displayName, | ||
| required: false, | ||
| hint: undefined, | ||
| preferNotToAnswerText: message.patterns.genderId.preferNotToAnswerTextLabel, | ||
| }, | ||
| }; | ||
|
|
||
| const storyConfig: Meta = { | ||
| title: 'Edit components/GenderIdPattern', | ||
| ...createPatternEditStoryMeta({ | ||
| pattern, | ||
| }), | ||
| } as Meta<typeof FormEdit>; | ||
|
|
||
| export default storyConfig; | ||
|
|
||
| export const Basic: StoryObj<typeof FormEdit> = { | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| const updatedLabel = 'Gender identity update'; | ||
| const updatedHint = 'Updated hint for Gender identity'; | ||
| const updatedPreferNotToAnswerText = | ||
| 'Updated prefer not to share my gender identity text'; | ||
|
|
||
| await userEvent.click( | ||
| canvas.getByText(message.patterns.genderId.displayName) | ||
| ); | ||
|
|
||
| const labelInput = canvas.getByLabelText( | ||
| message.patterns.genderId.fieldLabel | ||
| ); | ||
| await userEvent.clear(labelInput); | ||
| await userEvent.type(labelInput, updatedLabel); | ||
|
|
||
| const hintInput = canvas.getByLabelText( | ||
| message.patterns.genderId.hintLabel | ||
| ); | ||
| await userEvent.clear(hintInput); | ||
| await userEvent.type(hintInput, updatedHint); | ||
|
|
||
| const preferNotToAnswerInput = canvas.getByLabelText( | ||
| message.patterns.genderId.preferNotToAnswerTextLabel | ||
| ); | ||
| await userEvent.clear(preferNotToAnswerInput); | ||
| await userEvent.type(preferNotToAnswerInput, updatedPreferNotToAnswerText); | ||
|
|
||
| const form = labelInput?.closest('form'); | ||
| form?.requestSubmit(); | ||
|
|
||
| await expect(await canvas.findByText(updatedLabel)).toBeInTheDocument(); | ||
| await expect(await canvas.findByText(updatedHint)).toBeInTheDocument(); | ||
| await expect( | ||
| await canvas.findByText(updatedPreferNotToAnswerText) | ||
| ).toBeInTheDocument(); | ||
| }, | ||
| }; | ||
|
|
||
| export const WithoutHint: StoryObj<typeof FormEdit> = { | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| const updatedLabel = 'Gender identity update'; | ||
| const updatedPreferNotToAnswerText = | ||
| 'Prefer not to update my gender identity'; | ||
|
|
||
| await userEvent.click( | ||
| canvas.getByText(message.patterns.genderId.displayName) | ||
| ); | ||
|
|
||
| const labelInput = canvas.getByLabelText( | ||
| message.patterns.genderId.fieldLabel | ||
| ); | ||
| await userEvent.clear(labelInput); | ||
| await userEvent.type(labelInput, updatedLabel); | ||
|
|
||
| const preferNotToAnswerInput = canvas.getByLabelText( | ||
| message.patterns.genderId.preferNotToAnswerTextLabel | ||
| ); | ||
| await userEvent.clear(preferNotToAnswerInput); | ||
| await userEvent.type(preferNotToAnswerInput, updatedPreferNotToAnswerText); | ||
|
|
||
| const form = labelInput?.closest('form'); | ||
| form?.requestSubmit(); | ||
|
|
||
| await expect(await canvas.findByText(updatedLabel)).toBeInTheDocument(); | ||
| await expect( | ||
| await canvas.findByText(updatedPreferNotToAnswerText) | ||
| ).toBeInTheDocument(); | ||
| await expect( | ||
| await canvas.queryByLabelText(message.patterns.genderId.hintLabel) | ||
| ).toBeNull(); | ||
| }, | ||
| }; | ||
|
|
||
| export const WithoutCheckbox: StoryObj<typeof FormEdit> = { | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| const updatedLabel = 'Gender identity update'; | ||
| const updatedHint = 'Updated hint for Gender identity'; | ||
|
|
||
| await userEvent.click( | ||
| canvas.getByText(message.patterns.genderId.displayName) | ||
| ); | ||
|
|
||
| const labelInput = canvas.getByLabelText( | ||
| message.patterns.genderId.fieldLabel | ||
| ); | ||
| await userEvent.clear(labelInput); | ||
| await userEvent.type(labelInput, updatedLabel); | ||
|
|
||
| const hintInput = canvas.getByLabelText( | ||
| message.patterns.genderId.hintLabel | ||
| ); | ||
| await userEvent.clear(hintInput); | ||
| await userEvent.type(hintInput, updatedHint); | ||
|
|
||
| const form = labelInput?.closest('form'); | ||
| form?.requestSubmit(); | ||
|
|
||
| await expect(await canvas.findByText(updatedLabel)).toBeInTheDocument(); | ||
| await expect( | ||
| await canvas.queryByLabelText(message.patterns.genderId.hintLabel) | ||
| ).toBeNull(); | ||
| }, | ||
| }; | ||
|
|
||
| export const Error: StoryObj<typeof FormEdit> = { | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
|
|
||
| await userEvent.click( | ||
| canvas.getByText(message.patterns.genderId.displayName) | ||
| ); | ||
|
|
||
| const labelInput = canvas.getByLabelText( | ||
| message.patterns.genderId.fieldLabel | ||
| ); | ||
| await userEvent.clear(labelInput); | ||
| labelInput.blur(); | ||
|
|
||
| await expect( | ||
| await canvas.findByText( | ||
| message.patterns.selectDropdown.errorTextMustContainChar | ||
| ) | ||
| ).toBeInTheDocument(); | ||
| }, | ||
| }; |
7 changes: 7 additions & 0 deletions
7
...sign/src/FormManager/FormEdit/components/GenderIdPatternEdit/GenderIdPatternEdit.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 './GenderIdPatternEdit.stories.js'; | ||
|
|
||
| describeStories(meta, stories); |
136 changes: 136 additions & 0 deletions
136
packages/design/src/FormManager/FormEdit/components/GenderIdPatternEdit/index.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,136 @@ | ||
| import classnames from 'classnames'; | ||
| import React from 'react'; | ||
|
|
||
| import { type GenderIdProps } from '@atj/forms'; | ||
| import { type GenderIdPattern } from '@atj/forms'; | ||
|
|
||
| import GenderId from '../../../../Form/components/GenderId/index.js'; | ||
| import { PatternEditComponent } from '../../types.js'; | ||
|
|
||
| import { PatternEditActions } from '../common/PatternEditActions.js'; | ||
| import { PatternEditForm } from '../common/PatternEditForm.js'; | ||
| import { usePatternEditFormContext } from '../common/hooks.js'; | ||
| import { enLocale as message } from '@atj/common'; | ||
| import styles from '../../formEditStyles.module.css'; | ||
|
|
||
| const GenderIdPatternEdit: PatternEditComponent<GenderIdProps> = ({ | ||
| focus, | ||
| previewProps, | ||
| }) => { | ||
| return ( | ||
| <> | ||
| {focus ? ( | ||
| <PatternEditForm | ||
| pattern={focus.pattern} | ||
| editComponent={<EditComponent pattern={focus.pattern} />} | ||
| ></PatternEditForm> | ||
| ) : ( | ||
| <div | ||
| className={`${styles.genderIdPattern} padding-left-3 padding-bottom-3 padding-right-3`} | ||
| > | ||
| <GenderId {...previewProps} /> | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const EditComponent = ({ pattern }: { pattern: GenderIdPattern }) => { | ||
| const { fieldId, getFieldState, register } = | ||
| usePatternEditFormContext<GenderIdPattern>(pattern.id); | ||
| const label = getFieldState('label'); | ||
| const hint = getFieldState('hint'); | ||
| const preferNotToAnswerText = getFieldState('preferNotToAnswerText'); | ||
|
|
||
| return ( | ||
| <div className="grid-row grid-gap"> | ||
| <div className="tablet:grid-col-6 mobile-lg:grid-col-12 margin-bottom-2"> | ||
| <label | ||
| className={classnames('usa-label', { | ||
| 'usa-label--error': label.error, | ||
| })} | ||
| > | ||
| {message.patterns.genderId.fieldLabel} | ||
| {label.error ? ( | ||
| <span className="usa-error-message" role="alert"> | ||
| {label.error.message} | ||
| </span> | ||
| ) : null} | ||
| <input | ||
| className="usa-input" | ||
| id={fieldId('label')} | ||
| defaultValue={pattern.data.label} | ||
| {...register('label')} | ||
| type="text" | ||
| autoFocus | ||
| /> | ||
| </label> | ||
| </div> | ||
| <div className="tablet:grid-col-6 mobile-lg:grid-col-12 margin-bottom-2"> | ||
| <label | ||
| className={classnames('usa-label', { | ||
| 'usa-label--error': hint.error, | ||
| })} | ||
| > | ||
| {message.patterns.genderId.hintLabel} | ||
| {hint.error ? ( | ||
| <span className="usa-error-message" role="alert"> | ||
| {hint.error.message} | ||
| </span> | ||
| ) : null} | ||
| <input | ||
| className="usa-input" | ||
| id={fieldId('hint')} | ||
| defaultValue={pattern.data.hint} | ||
| {...register('hint')} | ||
| type="text" | ||
| /> | ||
| </label> | ||
| </div> | ||
| <div className="tablet:grid-col-6 mobile-lg:grid-col-12 margin-bottom-2"> | ||
| <label | ||
| className={classnames('usa-label', { | ||
| 'usa-label--error': preferNotToAnswerText.error, | ||
| })} | ||
| > | ||
| {message.patterns.genderId.preferNotToAnswerTextLabel} | ||
| {preferNotToAnswerText.error ? ( | ||
| <span className="usa-error-message" role="alert"> | ||
| {preferNotToAnswerText.error.message} | ||
| </span> | ||
| ) : null} | ||
| <input | ||
| className="usa-input" | ||
| id={fieldId('preferNotToAnswerText')} | ||
| defaultValue={''} | ||
| {...register('preferNotToAnswerText')} | ||
| type="text" | ||
| /> | ||
| </label> | ||
| </div> | ||
| <div className="grid-col-12"> | ||
| <PatternEditActions> | ||
| <span className="usa-checkbox"> | ||
| <input | ||
| style={{ display: 'inline-block' }} | ||
| className="usa-checkbox__input bg-primary-lighter" | ||
| type="checkbox" | ||
| id={fieldId('required')} | ||
| {...register('required')} | ||
| defaultChecked={pattern.data.required} | ||
| /> | ||
| <label | ||
| style={{ display: 'inline-block' }} | ||
| className="usa-checkbox__label" | ||
| htmlFor={fieldId('required')} | ||
| > | ||
| Required | ||
| </label> | ||
| </span> | ||
| </PatternEditActions> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GenderIdPatternEdit; |
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
4 changes: 4 additions & 0 deletions
4
packages/design/src/FormManager/FormEdit/images/gender-id-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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