diff --git a/e2e/src/create.spec.ts b/e2e/src/create.spec.ts index d01e09b5..8078a35f 100644 --- a/e2e/src/create.spec.ts +++ b/e2e/src/create.spec.ts @@ -9,11 +9,11 @@ const createNewForm = async (page: Page) => { } const addQuestions = async (page: Page) => { - const menuButton = page.getByRole('button', { name: 'Question', exact: true }); + const menuButton = page.getByRole('button', { name: 'Add element', exact: true }); await menuButton.click(); - await page.getByRole('button', { name: 'Short Answer' }).click(); + await page.getByRole('button', { name: 'Short answer' }).click(); await menuButton.click(); - await page.getByRole('button', { name: 'Radio Buttons' }).click(); + await page.getByRole('button', { name: 'Multiple choice' }).click(); } test('Create form from scratch', async ({ page }) => { @@ -41,7 +41,7 @@ test('Add questions', async ({ page }) => { // Create locators for both elements const fields = page.locator('.usa-label'); const element1 = fields.filter({ hasText: 'Field label' }); - const element2 = fields.filter({ hasText: 'Radio group label' }); + const element2 = fields.filter({ hasText: 'Multiple choice question label' }); expect(element1.first()).toBeTruthy(); expect(element2.first()).toBeTruthy(); diff --git a/packages/common/src/locales/en/app.ts b/packages/common/src/locales/en/app.ts index 1e4bb864..b40bf2d8 100644 --- a/packages/common/src/locales/en/app.ts +++ b/packages/common/src/locales/en/app.ts @@ -22,7 +22,7 @@ export const en = { }, fieldset: { ...defaults, - displayName: 'Fieldset', + displayName: 'Question set', errorTextMustContainChar: 'String must contain at least 1 character(s)', }, input: { @@ -57,28 +57,28 @@ export const en = { }, radioGroup: { ...defaults, - displayName: 'Radio group label', - fieldLabel: 'Radio group label', + displayName: 'Multiple choice question label', + fieldLabel: 'Multiple choice question label', errorTextMustContainChar: 'String must contain at least 1 character(s)', }, selectDropdown: { ...defaults, - displayName: 'Select dropdown label', - fieldLabel: 'Select dropdown label', + displayName: 'Dropdown label', + fieldLabel: 'Dropdown label', errorTextMustContainChar: 'String must contain at least 1 character(s)', }, dateOfBirth: { ...defaults, displayName: 'Date of birth label', fieldLabel: 'Date of birth label', - hintLabel: 'Date of Birth Hint label', + hintLabel: 'Date of birth Hint label', hint: 'For example: January 19 2000', errorTextMustContainChar: 'String must contain at least 1 character(s)', }, emailInput: { ...defaults, - displayName: 'Email Input label', - fieldLabel: 'Email Input label', + displayName: 'Email label', + fieldLabel: 'Email label', errorTextMustContainChar: 'String must contain at least 1 character(s)', }, phoneNumber: { @@ -87,20 +87,21 @@ export const en = { fieldLabel: 'Phone number label', hintLabel: 'Phone number hint label', hint: '10-digit, U.S. only, for example 999-999-9999', + errorTextMustContainChar: 'String must contain at least 1 character(s)', }, ssn: { ...defaults, - displayName: 'Social Security Number label', - fieldLabel: 'Social Security Number label', - hintLabel: 'Social Security Number hint label', + displayName: 'Social Security number label', + fieldLabel: 'Social Security number label', + hintLabel: 'Social Security number hint label', hint: 'For example, 555-11-0000', errorTextMustContainChar: 'String must contain at least 1 character(s)', }, genderId: { ...defaults, - displayName: 'Gender Identity label', - fieldLabel: 'Gender Identity label', - hintLabel: 'Gender Identity hint label', + displayName: 'Gender identity label', + fieldLabel: 'Gender identity label', + hintLabel: 'Gender identity hint label', hint: 'For example, man, woman, non-binary', errorTextMustContainChar: 'String must contain at least 1 character(s)', preferNotToAnswerTextLabel: diff --git a/packages/design/src/Form/components/RadioGroup/RadioGroup.stories.tsx b/packages/design/src/Form/components/RadioGroup/RadioGroup.stories.tsx index 03fb98d8..7ee4301f 100644 --- a/packages/design/src/Form/components/RadioGroup/RadioGroup.stories.tsx +++ b/packages/design/src/Form/components/RadioGroup/RadioGroup.stories.tsx @@ -29,7 +29,7 @@ export const Default = { _patternId: '', type: 'radio-group', groupId: 'radio-group-1', - legend: 'This is a radio group', + legend: 'This is a multiple choice question', options: [ { id: 'option-1', diff --git a/packages/design/src/Form/components/Repeater/Repeater.stories.tsx b/packages/design/src/Form/components/Repeater/Repeater.stories.tsx index 2e8c66b1..676c4997 100644 --- a/packages/design/src/Form/components/Repeater/Repeater.stories.tsx +++ b/packages/design/src/Form/components/Repeater/Repeater.stories.tsx @@ -21,7 +21,7 @@ const mockChildComponents = (index: number, withError = false) => [ props: { _patternId: `3fdb2cb6-5d65-4de1-b773-3fb8636f5d09.${index}.a6c217f0-fe84-44ef-b606-69142ecb3365`, type: 'date-of-birth', - label: 'Date of Birth', + label: 'Date of birth', hint: 'For example: January 19 2000', dayId: `3fdb2cb6-5d65-4de1-b773-3fb8636f5d09.${index}.a6c217f0-fe84-44ef-b606-69142ecb3365.day`, monthId: `3fdb2cb6-5d65-4de1-b773-3fb8636f5d09.${index}.a6c217f0-fe84-44ef-b606-69142ecb3365.month`, @@ -40,7 +40,7 @@ const mockChildComponents = (index: number, withError = false) => [ props: { _patternId: `3fdb2cb6-5d65-4de1-b773-3fb8636f5d09.${index}.7d5df1c1-ca92-488c-81ca-8bb180f952b6`, type: 'email-input', - label: 'Email Input', + label: 'Email', emailId: `3fdb2cb6-5d65-4de1-b773-3fb8636f5d09.${index}.7d5df1c1-ca92-488c-81ca-8bb180f952b6.email`, required: false, error: withError @@ -105,10 +105,10 @@ export const WithContents = { const listItems = canvas.getAllByRole('list'); expect(listItems.length).toBe(1); - const dobLabel = await canvas.findByText('Date of Birth'); + const dobLabel = await canvas.findByText('Date of birth'); expect(dobLabel).toBeInTheDocument(); - const emailLabel = await canvas.findByText('Email Input'); + const emailLabel = await canvas.findByText('Email'); expect(emailLabel).toBeInTheDocument(); }, } satisfies StoryObj; diff --git a/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.stories.tsx b/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.stories.tsx index 8979759c..4c52c2a9 100644 --- a/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.stories.tsx +++ b/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.stories.tsx @@ -28,7 +28,7 @@ export default meta; export const Default: StoryObj = { args: { ssnId: 'ssn', - label: 'Social Security Number', + label: 'Social Security number', required: false, }, }; @@ -36,7 +36,7 @@ export const Default: StoryObj = { export const WithRequired: StoryObj = { args: { ssnId: 'ssn', - label: 'Social Security Number', + label: 'Social Security number', required: true, }, }; @@ -44,7 +44,7 @@ export const WithRequired: StoryObj = { export const WithError: StoryObj = { args: { ssnId: 'ssn', - label: 'Social Security Number with error', + label: 'Social Security number with error', required: true, error: { type: 'custom', @@ -56,7 +56,7 @@ export const WithError: StoryObj = { export const WithHint: StoryObj = { args: { ssnId: 'ssn', - label: 'Social Security Number', + label: 'Social Security number', hint: 'For example, 555-11-0000', required: true, }, @@ -65,7 +65,7 @@ export const WithHint: StoryObj = { export const WithHintAndError: StoryObj = { args: { ssnId: 'ssn', - label: 'Social Security Number', + label: 'Social Security number', hint: 'For example, 555-11-0000', required: true, error: { diff --git a/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx b/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx index 5e0c9624..586efc22 100644 --- a/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx +++ b/packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.tsx @@ -34,7 +34,7 @@ export const SocialSecurityNumberPattern: PatternComponent< })} htmlFor={ssnId} > - {label || 'Social Security Number'} + {label || 'Social Security number'} {required && *} {hint && ( diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx index 5be8d9e3..37a0d71e 100644 --- a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx +++ b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx @@ -2,47 +2,51 @@ import React, { useState, useRef, useEffect } from 'react'; import { defaultFormConfig, type PatternConfig } from '@gsa-tts/forms-core'; import { useFormManagerStore } from '../store.js'; import styles from './formEditStyles.module.css'; -import attachmentIcon from './images/page-icon.svg'; import blockIcon from './images/block-icon.svg'; import checkboxIcon from './images/checkbox-icon.svg'; -import dateIcon from './images/date-icon.svg'; -import dropDownIcon from './images/dropdown-icon.svg'; -import dropDownOptionIcon from './images/dropdownoption-icon.svg'; -import emailInputIcon from './images/email-icon.svg'; -import genderId from './images/gender-id-icon.svg'; -import longanswerIcon from './images/longanswer-icon.svg'; +import longAnswerIcon from './images/long-answer-icon.svg'; import pageIcon from './images/page-icon.svg'; -import phoneIcon from './images/phone-icon.svg'; -import richTextIcon from './images/richtext-icon.svg'; -import shortanswerIcon from './images/shortanswer-icon.svg'; -import ssnIcon from './images/ssn-icon.svg'; -import singleselectIcon from './images/singleselect-icon.svg'; +import shortAnswerIcon from './images/short-answer-icon.svg'; +import multipleChoiceIcon from './images/radio-options-icon.svg'; import templateIcon from './images/template-icon.svg'; import classNames from 'classnames'; // eslint-disable-next-line @typescript-eslint/no-explicit-any const icons: Record = { - 'attachment-icon.svg': attachmentIcon, + 'attachment-icon.svg': 'img/sprite.svg#attach_file', 'block-icon.svg': blockIcon, 'checkbox-icon.svg': checkboxIcon, - 'date-icon.svg': dateIcon, - 'dropdown-icon.svg': dropDownIcon, - 'dropdownoption-icon.svg': dropDownOptionIcon, - 'email-icon.svg': emailInputIcon, - 'gender-id-icon.svg': genderId, - 'longanswer-icon.svg': longanswerIcon, + 'date-icon.svg': 'img/sprite.svg#calendar_today', + 'dropdown-icon.svg': 'img/sprite.svg#expand_more', + 'dropdownoption-icon.svg': 'img/sprite.svg#expand_more', + 'email-icon.svg': 'img/sprite.svg#alternate_email', + 'gender-id-icon.svg': 'img/sprite.svg#person', + 'long-answer-icon.svg': longAnswerIcon, + 'list-icon.svg': 'img/sprite.svg#list', 'page-icon.svg': pageIcon, - 'phone-icon.svg': phoneIcon, - 'richtext-icon.svg': richTextIcon, - 'shortanswer-icon.svg': shortanswerIcon, - 'ssn-icon.svg': ssnIcon, - 'singleselect-icon.svg': singleselectIcon, + 'phone-icon.svg': 'img/sprite.svg#phone', + 'richtext-icon.svg': 'img/sprite.svg#text_fields', + 'short-answer-icon.svg': shortAnswerIcon, + 'ssn-icon.svg': 'img/sprite.svg#person', + 'radio-options-icon.svg': multipleChoiceIcon, 'template-icon.svg': templateIcon, }; -const getIconPath = (iconPath: string) => { - return Object.values(icons[iconPath])[0] as string; +const getIconPath = (iconPath: string): string => { + const { uswdsRoot } = useFormManagerStore(state => ({ + uswdsRoot: state.context.uswdsRoot, + })); + + const iconValue = icons[iconPath]; + + if (!iconValue) { + return ''; + } + + return typeof iconValue === 'string' + ? `${uswdsRoot}${iconValue}` + : (Object.values(iconValue)[0] as string); }; interface PatternMenuProps { @@ -51,7 +55,7 @@ interface PatternMenuProps { } export const AddPatternMenu = () => { - const { addPage, addPattern } = useFormManagerStore(state => ({ + const { addPattern } = useFormManagerStore(state => ({ addPage: state.addPage, addPattern: state.addPattern, })); @@ -60,83 +64,74 @@ export const AddPatternMenu = () => {
-

- Add Element -

    • -
  • - -
); }; -const MenuItemButton = ({ - title, - onClick, - iconPath, -}: { - title: string; - onClick: () => void; - iconPath: string; -}) => ( - -); - -type DropdownPattern = [string, PatternConfig]; +type DropdownPattern = [string, PatternConfig, string]; const sidebarPatterns: DropdownPattern[] = [ - ['checkbox', defaultFormConfig.patterns['checkbox']], - ['date-of-birth', defaultFormConfig.patterns['date-of-birth']], - ['email-input', defaultFormConfig.patterns['email-input']], - ['fieldset', defaultFormConfig.patterns['fieldset']], - ['form-summary', defaultFormConfig.patterns['form-summary']], - ['gender-id', defaultFormConfig.patterns['gender-id']], - ['input', defaultFormConfig.patterns['input']], - ['text-area', defaultFormConfig.patterns['text-area']], - ['package-download', defaultFormConfig.patterns['package-download']], - ['paragraph', defaultFormConfig.patterns['paragraph']], - ['phone-number', defaultFormConfig.patterns['phone-number']], - ['radio-group', defaultFormConfig.patterns['radio-group']], - ['rich-text', defaultFormConfig.patterns['rich-text']], - ['select-dropdown', defaultFormConfig.patterns['select-dropdown']], - ['attachment', defaultFormConfig.patterns['attachment']], + ['radio-group', defaultFormConfig.patterns['radio-group'], 'Choice'], + ['checkbox', defaultFormConfig.patterns['checkbox'], 'Choice'], + ['select-dropdown', defaultFormConfig.patterns['select-dropdown'], 'Choice'], + ['input', defaultFormConfig.patterns['input'], 'Freeform answer'], + ['text-area', defaultFormConfig.patterns['text-area'], 'Freeform answer'], + ['paragraph', defaultFormConfig.patterns['paragraph'], 'Freeform answer'], + [ + 'email-input', + defaultFormConfig.patterns['email-input'], + 'Personal information', + ], + [ + 'phone-number', + defaultFormConfig.patterns['phone-number'], + 'Personal information', + ], + [ + 'date-of-birth', + defaultFormConfig.patterns['date-of-birth'], + 'Personal information', + ], [ 'social-security-number', defaultFormConfig.patterns['social-security-number'], + 'Personal information', ], - ['repeater', defaultFormConfig.patterns['repeater']], + [ + 'gender-id', + defaultFormConfig.patterns['gender-id'], + 'Personal information', + ], + ['fieldset', defaultFormConfig.patterns['fieldset'], 'Form structure'], + ['repeater', defaultFormConfig.patterns['repeater'], 'Form structure'], + ['page', defaultFormConfig.patterns['page'], 'Form structure'], + [ + 'form-summary', + defaultFormConfig.patterns['form-summary'], + 'Form structure', + ], + ['rich-text', defaultFormConfig.patterns['rich-text'], 'Other'], + ['attachment', defaultFormConfig.patterns['attachment'], 'Other'], + ['package-download', defaultFormConfig.patterns['package-download'], 'Other'], ] as const; + export const compoundFieldChildPatterns: DropdownPattern[] = - sidebarPatterns.filter(([key]) => key !== 'fieldset' && key !== 'repeater'); + sidebarPatterns.filter( + ([key]) => + key !== 'fieldset' && + key !== 'repeater' && + key !== 'page' && + key !== 'form-summary' + ); export const SidebarAddPatternMenuItem = ({ patternSelected, @@ -160,9 +155,7 @@ export const SidebarAddPatternMenuItem = ({ > - + {title} - + @@ -308,33 +302,95 @@ const AddPatternDropdownContent = ({ availablePatterns: DropdownPattern[]; patternSelected: (patternType: string) => void; }) => { + const { addPage } = useFormManagerStore(state => ({ + addPage: state.addPage, + })); + + // Group patterns by category + const patternsByCategory = availablePatterns.reduce( + (acc, [patternType, pattern, patternCategory]) => { + if (!acc[patternCategory]) { + acc[patternCategory] = []; + } + acc[patternCategory].push([patternType, pattern]); + return acc; + }, + {} as Record + ); + return ( -
    - {availablePatterns.map(([patternType, pattern], index) => ( -
  • - -
    • - ))} -
+
+
    + {Object.entries(patternsByCategory).map( + ([category, patterns], categoryIndex) => ( + + {categoryIndex > 0 && ( +
    + )} +
  • + + {category} + +
      + {patterns.map(([patternType, pattern], index) => { + const iconPath = getIconPath( + pattern.iconPath ?? 'block-icon.svg' + ); + const pagePattern = patternType === 'page'; + return ( +
    • + +
      • + ); + })} +
    +
    • +     + ) + )} +
+
); }; diff --git a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx index aa0842f3..92033545 100644 --- a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx +++ b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx @@ -56,7 +56,7 @@ export const FormEditAddPattern: StoryObj = { // Get the initial count of inputs const initialCount = (await canvas.findAllByRole('textbox')).length; - const select = canvas.getAllByText('Add Element'); + const select = canvas.getAllByText('Add element'); await userEvent.click(canvas.getByText('Pattern 1')); //await userEvent.selectOptions(select, 'Text input'); @@ -83,7 +83,7 @@ const editFieldLabel = async ( // Enter new text for first field const input = canvas.getByLabelText('Field label'); - const select = canvas.getAllByText('Add Element'); + const select = canvas.getAllByText('Add element'); await userEvent.clear(input); await userEvent.type(input, updatedLabel); @@ -110,12 +110,10 @@ export const FormEditReorderPattern: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const grabber = canvas.getAllByRole('button')[3]; - await grabber.focus(); + const grabber = canvas.getAllByRole('button')[2]; // Enter reordering mode with the spacebar await userEvent.type(grabber, ' '); - await new Promise(r => setTimeout(r, 1000)); // Press the arrow down, to move the first pattern to the second position await userEvent.type(grabber, '[ArrowDown]'); @@ -128,6 +126,7 @@ export const FormEditReorderPattern: StoryObj = { // Pattern 1 should be after pattern 2 in the document const pattern1 = canvas.getByText('Pattern 1'); const pattern2 = canvas.getByText('Pattern 2'); + expect(pattern2.compareDocumentPosition(pattern1)).toBe( Node.DOCUMENT_POSITION_FOLLOWING ); diff --git a/packages/design/src/FormManager/FormEdit/components/DateOfBirthPatternEdit/DateOfBirthPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/DateOfBirthPatternEdit/DateOfBirthPatternEdit.stories.tsx index 1d934af4..98d91df6 100644 --- a/packages/design/src/FormManager/FormEdit/components/DateOfBirthPatternEdit/DateOfBirthPatternEdit.stories.tsx +++ b/packages/design/src/FormManager/FormEdit/components/DateOfBirthPatternEdit/DateOfBirthPatternEdit.stories.tsx @@ -29,8 +29,8 @@ export default storyConfig; export const Basic: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const updatedLabel = 'Date of Birth update'; - const updatedHint = 'Updated hint for Date of Birth'; + const updatedLabel = 'Date of birth update'; + const updatedHint = 'Updated hint for Date of birth'; await userEvent.click( canvas.getByText(message.patterns.dateOfBirth.displayName) @@ -59,7 +59,7 @@ export const Basic: StoryObj = { export const WithoutHint: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const updatedLabel = 'Date of Birth update'; + const updatedLabel = 'Date of birth update'; await userEvent.click( canvas.getByText(message.patterns.dateOfBirth.displayName) diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit/FieldsetEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit/FieldsetEdit.stories.tsx index 6ee56e72..16aba319 100644 --- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit/FieldsetEdit.stories.tsx +++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit/FieldsetEdit.stories.tsx @@ -16,7 +16,7 @@ const pattern: FieldsetPattern = { id: '1', type: 'fieldset', data: { - legend: 'Fieldset pattern description', + legend: 'Question set pattern description', patterns: [], }, }; @@ -34,9 +34,9 @@ export const Basic: StoryObj = { const canvas = within(canvasElement); await testUpdateFormFieldOnSubmitByElement( canvasElement, - await canvas.findByText('Fieldset pattern description'), + await canvas.findByText('Question set pattern description'), 'Legend Text Element', - 'Updated fieldset pattern' + 'Updated question set pattern' ); }, }; @@ -46,7 +46,7 @@ export const Error: StoryObj = { const canvas = within(canvasElement); await testEmptyFormLabelErrorByElement( canvasElement, - await canvas.findByText('Fieldset pattern description'), + await canvas.findByText('Question set pattern description'), 'Legend Text Element', message.patterns.fieldset.errorTextMustContainChar ); @@ -70,13 +70,13 @@ export const AddPattern: StoryObj = { // Submit new field's edit form const input = await canvas.findByLabelText('Field label'); await userEvent.clear(input); - await userEvent.type(input, 'Fieldset short question'); + await userEvent.type(input, 'Question set short question'); const form = input?.closest('form'); form?.requestSubmit(); // Confirm that the "short answer" field exists const updatedElement = await canvas.findAllByText( - 'Fieldset short question' + 'Question set short question' ); await expect(updatedElement.length).toBeGreaterThan(0); }, @@ -89,7 +89,7 @@ export const RemovePattern: StoryObj = { // Confirm that the expected fieldset legend exists expect( canvas.queryAllByRole('group', { - name: /Fieldset pattern description/i, + name: /Question set pattern description/i, }) ).toHaveLength(1); @@ -101,7 +101,7 @@ export const RemovePattern: StoryObj = { // Confirm that the fieldset was removed const test = await canvas.queryAllByRole('group', { - name: /Fieldset pattern description/i, + name: /Question set pattern description/i, }); expect(test).toHaveLength(0); }, diff --git a/packages/design/src/FormManager/FormEdit/components/PhoneNumberPatternEdit/PhoneNumberPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/PhoneNumberPatternEdit/PhoneNumberPatternEdit.stories.tsx index 56bfccc3..59156938 100644 --- a/packages/design/src/FormManager/FormEdit/components/PhoneNumberPatternEdit/PhoneNumberPatternEdit.stories.tsx +++ b/packages/design/src/FormManager/FormEdit/components/PhoneNumberPatternEdit/PhoneNumberPatternEdit.stories.tsx @@ -29,8 +29,8 @@ export default storyConfig; export const Basic: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const updatedLabel = 'Phone Number update'; - const updatedHint = 'Updated hint for Phone Number'; + const updatedLabel = 'Phone number update'; + const updatedHint = 'Updated hint for phone number'; await userEvent.click( canvas.getByText(message.patterns.phoneNumber.displayName) @@ -59,7 +59,7 @@ export const Basic: StoryObj = { export const WithoutHint: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const updatedLabel = 'Phone Number update'; + const updatedLabel = 'Phone number update'; await userEvent.click( canvas.getByText(message.patterns.phoneNumber.displayName) @@ -97,7 +97,7 @@ export const Error: StoryObj = { await expect( await canvas.findByText( - message.patterns.selectDropdown.errorTextMustContainChar + message.patterns.phoneNumber.errorTextMustContainChar ) ).toBeInTheDocument(); }, diff --git a/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit/RadioGroupPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit/RadioGroupPatternEdit.stories.tsx index d110f30a..e8c964a2 100644 --- a/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit/RadioGroupPatternEdit.stories.tsx +++ b/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit/RadioGroupPatternEdit.stories.tsx @@ -33,7 +33,7 @@ export default storyConfig; export const Basic: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const updatedLabel = 'Radio group update'; + const updatedLabel = 'Multiple choice update'; await userEvent.click( canvas.getByText(message.patterns.radioGroup.displayName) diff --git a/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.stories.tsx index 3a3e986d..9fd6850b 100644 --- a/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.stories.tsx +++ b/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.stories.tsx @@ -16,7 +16,7 @@ const pattern: RepeaterPattern = { id: '1', type: 'repeater', data: { - legend: 'Repeater pattern description', + legend: 'Repeater question set pattern description', patterns: [], }, }; @@ -34,7 +34,7 @@ export const Basic: StoryObj = { const canvas = within(canvasElement); await testUpdateFormFieldOnSubmitByElement( canvasElement, - await canvas.findByText('Repeater pattern description'), + await canvas.findByText('Repeater question set pattern description'), 'Legend Text Element', 'Updated repeater pattern' ); @@ -46,7 +46,7 @@ export const Error: StoryObj = { const canvas = within(canvasElement); await testEmptyFormLabelErrorByElement( canvasElement, - await canvas.findByText('Repeater pattern description'), + await canvas.findByText('Repeater question set pattern description'), 'Legend Text Element', message.patterns.repeater.errorTextMustContainChar ); @@ -73,12 +73,12 @@ export const AddPattern: StoryObj = { await userEvent.type(input, 'Repeater short question'); const addQuestionToRepeaterButton = canvas.getByRole('button', { - name: /Add question to repeater/, + name: /Add question to repeater set/, }); await userEvent.click(addQuestionToRepeaterButton); const dateOfBirthButton = canvas.getByRole('button', { - name: /Date of Birth/, + name: /Date of birth/, }); await userEvent.click(dateOfBirthButton); @@ -90,8 +90,8 @@ export const AddPattern: StoryObj = { }); await expect(fieldLabel).toBeInTheDocument(); - // Confirm that the "Date of Birth" legend exists - const dateOfBirthLegend = await canvas.findByText('Date of Birth', { + // Confirm that the "Date of birth" legend exists + const dateOfBirthLegend = await canvas.findByText('Date of birth', { selector: 'legend', }); await expect(dateOfBirthLegend).toBeInTheDocument(); @@ -105,7 +105,7 @@ export const RemovePattern: StoryObj = { // Confirm that the expected repeater legend exists expect( canvas.queryAllByRole('group', { - name: /Repeater pattern description/i, + name: /Repeater question set pattern description/i, }) ).toHaveLength(1); @@ -117,7 +117,7 @@ export const RemovePattern: StoryObj = { // Confirm that the repeater was removed const test = await canvas.queryAllByRole('group', { - name: /Repeater pattern description/i, + name: /Repeater question set pattern description/i, }); expect(test).toHaveLength(0); }, diff --git a/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.tsx index 8f6119b0..879d47b3 100644 --- a/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.tsx @@ -99,7 +99,7 @@ const RepeaterPreview: PatternComponent = props => { >
addPatternToCompoundField(patternType, props._patternId) } diff --git a/packages/design/src/FormManager/FormEdit/components/SelectDropdownPatternEdit/SelectDropdownPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/SelectDropdownPatternEdit/SelectDropdownPatternEdit.stories.tsx index e4134a3e..256bbd1d 100644 --- a/packages/design/src/FormManager/FormEdit/components/SelectDropdownPatternEdit/SelectDropdownPatternEdit.stories.tsx +++ b/packages/design/src/FormManager/FormEdit/components/SelectDropdownPatternEdit/SelectDropdownPatternEdit.stories.tsx @@ -34,7 +34,7 @@ export default storyConfig; export const Basic: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const updatedLabel = 'Select Dropdown update'; + const updatedLabel = 'Dropdown update'; await userEvent.click( canvas.getByText(message.patterns.selectDropdown.displayName) diff --git a/packages/design/src/FormManager/FormEdit/components/SocialSecurityNumberPatternEdit/SocialSecurityNumberPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/SocialSecurityNumberPatternEdit/SocialSecurityNumberPatternEdit.stories.tsx index dfd12309..79d5d870 100644 --- a/packages/design/src/FormManager/FormEdit/components/SocialSecurityNumberPatternEdit/SocialSecurityNumberPatternEdit.stories.tsx +++ b/packages/design/src/FormManager/FormEdit/components/SocialSecurityNumberPatternEdit/SocialSecurityNumberPatternEdit.stories.tsx @@ -29,8 +29,8 @@ export default storyConfig; export const Basic: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const updatedLabel = 'Social Security Number update'; - const updatedHint = 'Updated hint for Social Security Number'; + const updatedLabel = 'Social Security number update'; + const updatedHint = 'Updated hint for Social Security number'; await userEvent.click(canvas.getByText(message.patterns.ssn.displayName)); @@ -53,7 +53,7 @@ export const Basic: StoryObj = { export const WithoutHint: StoryObj = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); - const updatedLabel = 'Social Security Number update'; + const updatedLabel = 'Social Security number update'; await userEvent.click(canvas.getByText(message.patterns.ssn.displayName)); @@ -82,9 +82,7 @@ export const Error: StoryObj = { labelInput.blur(); await expect( - await canvas.findByText( - message.patterns.selectDropdown.errorTextMustContainChar - ) + await canvas.findByText(message.patterns.ssn.errorTextMustContainChar) ).toBeInTheDocument(); }, }; diff --git a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css index fe72a96b..7ccfde5a 100644 --- a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css +++ b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css @@ -12,6 +12,9 @@ background-color: #fff; font-weight: bold; } +.dropdownButton:focus { + outline: none; +} .dropdownMenu:hover li, .dropdownItem:hover { @@ -199,3 +202,24 @@ left: 32px; } } + +.addPatternDropdown ul, +.addPatternDropdown li { + list-style: none; + margin: 0; + padding: 0; +} + +.category-list { + display: flex; + flex-direction: column; +} + +.dropdownItem { + margin-left: 0; +} + +.categoryDivider { + border-top: 1px solid #ccc; /* Increase thickness for visibility */ + margin: 0.5rem 0; +} diff --git a/packages/design/src/FormManager/FormEdit/images/date-icon.svg b/packages/design/src/FormManager/FormEdit/images/date-icon.svg deleted file mode 100644 index 9abf333f..00000000 --- a/packages/design/src/FormManager/FormEdit/images/date-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design/src/FormManager/FormEdit/images/dropdown-icon.svg b/packages/design/src/FormManager/FormEdit/images/dropdown-icon.svg deleted file mode 100644 index 31ada018..00000000 --- a/packages/design/src/FormManager/FormEdit/images/dropdown-icon.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/packages/design/src/FormManager/FormEdit/images/dropdownoption-icon.svg b/packages/design/src/FormManager/FormEdit/images/dropdownoption-icon.svg deleted file mode 100644 index 556b37e1..00000000 --- a/packages/design/src/FormManager/FormEdit/images/dropdownoption-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design/src/FormManager/FormEdit/images/email-icon.svg b/packages/design/src/FormManager/FormEdit/images/email-icon.svg deleted file mode 100644 index 46bc2d51..00000000 --- a/packages/design/src/FormManager/FormEdit/images/email-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/design/src/FormManager/FormEdit/images/gender-id-icon.svg b/packages/design/src/FormManager/FormEdit/images/gender-id-icon.svg deleted file mode 100644 index a3682540..00000000 --- a/packages/design/src/FormManager/FormEdit/images/gender-id-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - GI - \ No newline at end of file diff --git a/packages/design/src/FormManager/FormEdit/images/longanswer-icon.svg b/packages/design/src/FormManager/FormEdit/images/long-answer-icon.svg similarity index 100% rename from packages/design/src/FormManager/FormEdit/images/longanswer-icon.svg rename to packages/design/src/FormManager/FormEdit/images/long-answer-icon.svg diff --git a/packages/design/src/FormManager/FormEdit/images/phone-icon.svg b/packages/design/src/FormManager/FormEdit/images/phone-icon.svg deleted file mode 100644 index a047f931..00000000 --- a/packages/design/src/FormManager/FormEdit/images/phone-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/packages/design/src/FormManager/FormEdit/images/singleselect-icon.svg b/packages/design/src/FormManager/FormEdit/images/radio-options-icon.svg similarity index 100% rename from packages/design/src/FormManager/FormEdit/images/singleselect-icon.svg rename to packages/design/src/FormManager/FormEdit/images/radio-options-icon.svg diff --git a/packages/design/src/FormManager/FormEdit/images/richtext-icon.svg b/packages/design/src/FormManager/FormEdit/images/richtext-icon.svg deleted file mode 100644 index 21232361..00000000 --- a/packages/design/src/FormManager/FormEdit/images/richtext-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/design/src/FormManager/FormEdit/images/shortanswer-icon.svg b/packages/design/src/FormManager/FormEdit/images/short-answer-icon.svg similarity index 100% rename from packages/design/src/FormManager/FormEdit/images/shortanswer-icon.svg rename to packages/design/src/FormManager/FormEdit/images/short-answer-icon.svg diff --git a/packages/design/src/FormManager/FormEdit/images/ssn-icon.svg b/packages/design/src/FormManager/FormEdit/images/ssn-icon.svg deleted file mode 100644 index dbacd843..00000000 --- a/packages/design/src/FormManager/FormEdit/images/ssn-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/forms/src/builder/builder.test.ts b/packages/forms/src/builder/builder.test.ts index 8ee7c087..8f262d2a 100644 --- a/packages/forms/src/builder/builder.test.ts +++ b/packages/forms/src/builder/builder.test.ts @@ -292,7 +292,7 @@ describe('form builder', () => { type: 'fieldset', id: 'fieldset-1', data: { - legend: 'Fieldset pattern description', + legend: 'Question set pattern description', patterns: ['element-2'], }, }, @@ -300,7 +300,7 @@ describe('form builder', () => { type: 'radio-group', id: 'radio-group-1', data: { - label: 'Radio group label', + label: 'Multiple choice question label', options: [ { id: 'option-1', label: 'Option 1' }, { id: 'option-2', label: 'Option 2' }, @@ -373,7 +373,7 @@ describe('form builder', () => { type: 'fieldset', id: 'fieldset-1', data: { - legend: 'Fieldset pattern description', + legend: 'Question set pattern description', patterns: ['element-2'], }, }, @@ -381,7 +381,7 @@ describe('form builder', () => { type: 'radio-group', id: 'radio-group-1', data: { - label: 'Radio group label', + label: 'Multiple choice question label', options: [ { id: 'option-1', label: 'Option 1' }, { id: 'option-2', label: 'Option 2' }, @@ -456,7 +456,7 @@ describe('form builder', () => { type: 'fieldset', id: 'fieldset-1', data: { - legend: 'Fieldset pattern description', + legend: 'Question set pattern description', patterns: ['element-2'], }, }, @@ -464,7 +464,7 @@ describe('form builder', () => { type: 'radio-group', id: 'radio-group-1', data: { - label: 'Radio group label', + label: 'Multiple choice question label', options: [ { id: 'option-1', label: 'Option 1' }, { id: 'option-2', label: 'Option 2' }, @@ -476,7 +476,7 @@ describe('form builder', () => { id: newPattern.id, data: { legend: expect.stringMatching( - /^\(\s*Copy\s+\d{1,2}\/\d{1,2}\/\d{4},\s+\d{1,2}:\d{2}:\d{2}\s+[AP]M\)\s*Fieldset pattern description/ + /^\(\s*Copy\s+\d{1,2}\/\d{1,2}\/\d{4},\s+\d{1,2}:\d{2}:\d{2}\s+[AP]M\)\s*Question set pattern description/ ), patterns: ['element-2'], }, @@ -486,7 +486,7 @@ describe('form builder', () => { }); }); - it('copy radio group pattern', () => { + it('copy multiple choice pattern', () => { const initial = createTestBlueprintMultipleFieldsets(); const builder = new BlueprintBuilder(defaultFormConfig, initial); const parentPattern = getPattern(initial, 'page-1'); @@ -535,7 +535,7 @@ describe('form builder', () => { type: 'fieldset', id: 'fieldset-1', data: { - legend: 'Fieldset pattern description', + legend: 'Question set pattern description', patterns: ['element-2'], }, }, @@ -543,7 +543,7 @@ describe('form builder', () => { type: 'radio-group', id: 'radio-group-1', data: { - label: 'Radio group label', + label: 'Multiple choice question label', options: [ { id: 'option-1', label: 'Option 1' }, { id: 'option-2', label: 'Option 2' }, @@ -555,7 +555,7 @@ describe('form builder', () => { id: newPattern.id, data: { label: expect.stringMatching( - /^\(\s*Copy\s+\d{1,2}\/\d{1,2}\/\d{4},\s+\d{1,2}:\d{2}:\d{2}\s+[AP]M\)\s*Radio group label/ + /^\(\s*Copy\s+\d{1,2}\/\d{1,2}\/\d{4},\s+\d{1,2}:\d{2}:\d{2}\s+[AP]M\)\s*Multiple choice question label/ ), options: [ { id: 'option-1', label: 'Option 1' }, @@ -767,7 +767,7 @@ export const createTestBlueprintMultipleFieldsets = () => { type: 'fieldset', id: 'fieldset-1', data: { - legend: 'Fieldset pattern description', + legend: 'Question set pattern description', patterns: ['element-2'], }, } satisfies FieldsetPattern, @@ -775,7 +775,7 @@ export const createTestBlueprintMultipleFieldsets = () => { type: 'radio-group', id: 'radio-group-1', data: { - label: 'Radio group label', + label: 'Multiple choice question label', options: [ { id: 'option-1', label: 'Option 1' }, { id: 'option-2', label: 'Option 2' }, diff --git a/packages/forms/src/patterns/attachment/index.ts b/packages/forms/src/patterns/attachment/index.ts index 53b37acc..caa5d996 100644 --- a/packages/forms/src/patterns/attachment/index.ts +++ b/packages/forms/src/patterns/attachment/index.ts @@ -12,7 +12,7 @@ export const attachmentConfig: PatternConfig< AttachmentPatternOutput > = { displayName: message.patterns.attachment.displayName, - iconPath: 'shortanswer-icon.svg', + iconPath: 'attachment-icon.svg', initial: { label: 'File upload', required: true, diff --git a/packages/forms/src/patterns/date-of-birth/date-of-birth.test.ts b/packages/forms/src/patterns/date-of-birth/date-of-birth.test.ts index 77204553..44f2466c 100644 --- a/packages/forms/src/patterns/date-of-birth/date-of-birth.test.ts +++ b/packages/forms/src/patterns/date-of-birth/date-of-birth.test.ts @@ -44,7 +44,7 @@ describe('DateOfBirthPattern tests', () => { type: 'date-of-birth', id: 'test', data: { - label: 'Test Date of Birth', + label: 'Test Date of birth', required: true, hint: 'Enter your date of birth', }, @@ -67,7 +67,7 @@ describe('DateOfBirthPattern tests', () => { type: 'date-of-birth', id: 'test', data: { - label: 'Test Date of Birth', + label: 'Test Date of birth', required: true, hint: 'Enter your date of birth', }, @@ -87,7 +87,7 @@ describe('DateOfBirthPattern tests', () => { it('should parse config data correctly', () => { const obj = { - label: 'Test Date of Birth', + label: 'Test Date of birth', required: true, hint: 'Enter your date of birth', }; @@ -97,7 +97,7 @@ describe('DateOfBirthPattern tests', () => { } const result = dateOfBirthConfig.parseConfigData(obj); if (result.success) { - expect(result.data.label).toBe('Test Date of Birth'); + expect(result.data.label).toBe('Test Date of birth'); expect(result.data.required).toBe(true); expect(result.data.hint).toBe('Enter your date of birth'); } else { diff --git a/packages/forms/src/patterns/date-of-birth/date-of-birth.ts b/packages/forms/src/patterns/date-of-birth/date-of-birth.ts index 8bd3a302..82457af0 100644 --- a/packages/forms/src/patterns/date-of-birth/date-of-birth.ts +++ b/packages/forms/src/patterns/date-of-birth/date-of-birth.ts @@ -71,10 +71,10 @@ export const dateOfBirthConfig: PatternConfig< DateOfBirthPattern, DateOfBirthPatternOutput > = { - displayName: 'Date of Birth', + displayName: 'Date of birth', iconPath: 'date-icon.svg', initial: { - label: 'Date of Birth', + label: 'Date of birth', required: false, hint: 'For example: January 19 2000', }, diff --git a/packages/forms/src/patterns/email-input/email-input.test.ts b/packages/forms/src/patterns/email-input/email-input.test.ts index 69d13416..2d74e563 100644 --- a/packages/forms/src/patterns/email-input/email-input.test.ts +++ b/packages/forms/src/patterns/email-input/email-input.test.ts @@ -9,7 +9,7 @@ describe('EmailInputPattern tests', () => { describe('createEmailSchema', () => { it('should create schema for required email input', () => { const data: EmailInputPattern['data'] = { - label: 'Test Email Input Label', + label: 'Test Email Label', required: true, }; @@ -27,7 +27,7 @@ describe('EmailInputPattern tests', () => { it('should create schema for optional email input', () => { const data: EmailInputPattern['data'] = { - label: 'Test Email Input Label', + label: 'Test Email Label', required: false, }; @@ -46,7 +46,7 @@ describe('EmailInputPattern tests', () => { type: 'email-input', id: 'test', data: { - label: 'Test Email Input Label', + label: 'Test Email Label', required: true, }, }; @@ -68,7 +68,7 @@ describe('EmailInputPattern tests', () => { type: 'email-input', id: 'test', data: { - label: 'Test Email Input Label', + label: 'Test Email Label', required: true, }, }; @@ -87,7 +87,7 @@ describe('EmailInputPattern tests', () => { it('should parse config data correctly', () => { const obj = { - label: 'Test Email Input Label', + label: 'Test Email Label', required: true, }; @@ -96,7 +96,7 @@ describe('EmailInputPattern tests', () => { } const result = emailInputConfig.parseConfigData(obj); if (result.success) { - expect(result.data.label).toBe('Test Email Input Label'); + expect(result.data.label).toBe('Test Email Label'); expect(result.data.required).toBe(true); } else { expect.fail('Unexpected validation failure'); diff --git a/packages/forms/src/patterns/email-input/email-input.ts b/packages/forms/src/patterns/email-input/email-input.ts index d3274155..4fd9c029 100644 --- a/packages/forms/src/patterns/email-input/email-input.ts +++ b/packages/forms/src/patterns/email-input/email-input.ts @@ -54,10 +54,10 @@ export const emailInputConfig: PatternConfig< EmailInputPattern, EmailInputPatternOutput > = { - displayName: 'Email Input', + displayName: 'Email', iconPath: 'email-icon.svg', initial: { - label: 'Email Input', + label: 'Email', required: false, }, diff --git a/packages/forms/src/patterns/fieldset/index.ts b/packages/forms/src/patterns/fieldset/index.ts index 2e4dd1a2..762e59fa 100644 --- a/packages/forms/src/patterns/fieldset/index.ts +++ b/packages/forms/src/patterns/fieldset/index.ts @@ -3,8 +3,8 @@ import { type FieldsetPattern, parseConfigData } from './config.js'; import { createPrompt } from './prompt.js'; export const fieldsetConfig: PatternConfig = { - displayName: 'Fieldset', - iconPath: 'block-icon.svg', + displayName: 'Question set', + iconPath: 'list-icon.svg', initial: { legend: 'Default Heading', patterns: [], diff --git a/packages/forms/src/patterns/form-summary.ts b/packages/forms/src/patterns/form-summary.ts index 8c551639..55864f54 100644 --- a/packages/forms/src/patterns/form-summary.ts +++ b/packages/forms/src/patterns/form-summary.ts @@ -11,7 +11,7 @@ const configSchema = z.object({ export type FormSummaryPattern = Pattern>; export const formSummaryConfig: PatternConfig = { - displayName: 'Form summary', + displayName: 'Title', iconPath: 'block-icon.svg', initial: { title: 'Form title', diff --git a/packages/forms/src/patterns/gender-id/gender-id.test.ts b/packages/forms/src/patterns/gender-id/gender-id.test.ts index 9d61c91e..cb2aaea4 100644 --- a/packages/forms/src/patterns/gender-id/gender-id.test.ts +++ b/packages/forms/src/patterns/gender-id/gender-id.test.ts @@ -10,7 +10,7 @@ describe('GenderIdPattern tests', () => { describe('createGenderIdSchema', () => { it('should create schema for required gender identity input', () => { const data: GenderIdPattern['data'] = { - label: 'Test Gender Identity Label', + label: 'Test Gender identity Label', required: true, preferNotToAnswerText: 'Prefer not to share my gender identity', }; @@ -29,7 +29,7 @@ describe('GenderIdPattern tests', () => { it('should create schema for optional gender identity input', () => { const data: GenderIdPattern['data'] = { - label: 'Test Gender Identity Label', + label: 'Test Gender identity Label', required: false, }; @@ -48,7 +48,7 @@ describe('GenderIdPattern tests', () => { id: 'gender-identity-1', type: 'gender-id', data: { - label: 'Test Gender Identity Label', + label: 'Test Gender identity Label', required: true, preferNotToAnswerText: 'Prefer not to share my gender identity', }, @@ -71,7 +71,7 @@ describe('GenderIdPattern tests', () => { id: 'gender-identity-1', type: 'gender-id', data: { - label: 'Test Gender Identity Label', + label: 'Test Gender identity Label', required: true, preferNotToAnswerText: 'Prefer not to share my gender identity', }, @@ -91,7 +91,7 @@ describe('GenderIdPattern tests', () => { it('should parse config data correctly', () => { const obj = { - label: 'Test Gender Identity Label', + label: 'Test Gender identity Label', required: true, hint: 'For example, man, woman, non-binary', preferNotToAnswerText: 'Prefer not to share my gender identity', @@ -102,7 +102,7 @@ describe('GenderIdPattern tests', () => { } const result = genderIdConfig.parseConfigData(obj); if (result.success) { - expect(result.data.label).toBe('Test Gender Identity Label'); + expect(result.data.label).toBe('Test Gender identity Label'); expect(result.data.required).toBe(true); expect(result.data.hint).toBe('For example, man, woman, non-binary'); expect(result.data.preferNotToAnswerText).toBe( diff --git a/packages/forms/src/patterns/gender-id/gender-id.ts b/packages/forms/src/patterns/gender-id/gender-id.ts index d5f69732..de77f9da 100644 --- a/packages/forms/src/patterns/gender-id/gender-id.ts +++ b/packages/forms/src/patterns/gender-id/gender-id.ts @@ -47,7 +47,7 @@ export const genderIdConfig: PatternConfig< GenderIdPattern, GenderIdPatternOutput > = { - displayName: 'Gender Identity', + displayName: 'Gender identity', iconPath: 'gender-id-icon.svg', initial: { label: 'Gender identity', diff --git a/packages/forms/src/patterns/input/index.ts b/packages/forms/src/patterns/input/index.ts index afdbe814..93c7e0e3 100644 --- a/packages/forms/src/patterns/input/index.ts +++ b/packages/forms/src/patterns/input/index.ts @@ -8,7 +8,7 @@ import { type InputPatternOutput, parseUserInput } from './response.js'; export const inputConfig: PatternConfig = { displayName: message.patterns.input.displayName, - iconPath: 'shortanswer-icon.svg', + iconPath: 'short-answer-icon.svg', initial: { label: message.patterns.input.fieldLabel, initial: '', diff --git a/packages/forms/src/patterns/paragraph.ts b/packages/forms/src/patterns/paragraph.ts index 103aa765..526fb295 100644 --- a/packages/forms/src/patterns/paragraph.ts +++ b/packages/forms/src/patterns/paragraph.ts @@ -11,7 +11,7 @@ export type ParagraphPattern = Pattern>; export const paragraphConfig: PatternConfig = { displayName: 'Paragraph', - iconPath: 'longanswer-icon.svg', + iconPath: 'long-answer-icon.svg', initial: { text: 'Paragraph text...', }, diff --git a/packages/forms/src/patterns/phone-number/phone-number.ts b/packages/forms/src/patterns/phone-number/phone-number.ts index 585b87b1..68149c3a 100644 --- a/packages/forms/src/patterns/phone-number/phone-number.ts +++ b/packages/forms/src/patterns/phone-number/phone-number.ts @@ -43,10 +43,10 @@ export const phoneNumberConfig: PatternConfig< PhoneNumberPattern, PhoneNumberPatternOutput > = { - displayName: 'Phone Number', + displayName: 'Phone number', iconPath: 'phone-icon.svg', initial: { - label: 'Phone Number', + label: 'Phone number', required: false, hint: 'Enter a 10-digit U.S. phone number, e.g., 999-999-9999', }, diff --git a/packages/forms/src/patterns/radio-group.ts b/packages/forms/src/patterns/radio-group.ts index e7bdce16..80fc2a8c 100644 --- a/packages/forms/src/patterns/radio-group.ts +++ b/packages/forms/src/patterns/radio-group.ts @@ -28,10 +28,10 @@ type PatternOutput = z.infer; export const radioGroupConfig: PatternConfig = { - displayName: 'Radio Buttons', - iconPath: 'singleselect-icon.svg', + displayName: 'Multiple choice', + iconPath: 'radio-options-icon.svg', initial: { - label: 'Radio group label', + label: 'Multiple choice question label', options: [ { id: 'option-1', label: 'Option 1' }, { id: 'option-2', label: 'Option 2' }, diff --git a/packages/forms/src/patterns/repeater/index.ts b/packages/forms/src/patterns/repeater/index.ts index 9f5016d0..cb9a136e 100644 --- a/packages/forms/src/patterns/repeater/index.ts +++ b/packages/forms/src/patterns/repeater/index.ts @@ -74,8 +74,8 @@ interface RepeaterFailure { type RepeaterResult = RepeaterSuccess | RepeaterFailure; export const repeaterConfig: PatternConfig = { - displayName: 'Repeater', - iconPath: 'block-icon.svg', + displayName: 'Repeater question set', + iconPath: 'list-icon.svg', initial: { legend: 'Default Heading', patterns: [], diff --git a/packages/forms/src/patterns/select-dropdown/select-dropdown.ts b/packages/forms/src/patterns/select-dropdown/select-dropdown.ts index 6bf7a89c..79138df6 100644 --- a/packages/forms/src/patterns/select-dropdown/select-dropdown.ts +++ b/packages/forms/src/patterns/select-dropdown/select-dropdown.ts @@ -65,10 +65,10 @@ export const selectDropdownConfig: PatternConfig< SelectDropdownPattern, SelectDropdownPatternOutput > = { - displayName: 'Select Dropdown', + displayName: 'Dropdown', iconPath: 'dropdown-icon.svg', initial: { - label: 'Select-dropdown-label', + label: 'Dropdown-label', required: false, options: [ { value: 'value1', label: 'Option-1' }, diff --git a/packages/forms/src/patterns/social-security-number/social-security-number.test.ts b/packages/forms/src/patterns/social-security-number/social-security-number.test.ts index fad769be..e9e582ab 100644 --- a/packages/forms/src/patterns/social-security-number/social-security-number.test.ts +++ b/packages/forms/src/patterns/social-security-number/social-security-number.test.ts @@ -22,7 +22,7 @@ describe('SocialSecurityNumberPattern tests', () => { const invalidResult = schema.safeParse(invalidInput); expect(invalidResult.success).toBe(false); expect(invalidResult.error?.issues[0].message).toBe( - 'Social Security Number must have exactly 9 digits' + 'Social Security number must have exactly 9 digits' ); }); @@ -43,7 +43,7 @@ describe('SocialSecurityNumberPattern tests', () => { const invalidResult = schema.safeParse(invalidInput); expect(invalidResult.success).toBe(false); expect(invalidResult.error?.issues[0].message).toBe( - 'Social Security Number must have exactly 9 digits' + 'Social Security number must have exactly 9 digits' ); }); @@ -59,7 +59,7 @@ describe('SocialSecurityNumberPattern tests', () => { const shortInputResult = schema.safeParse(shortInput); expect(shortInputResult.success).toBe(false); expect(shortInputResult.error?.issues[0].message).toBe( - 'Social Security Number must have exactly 9 digits' + 'Social Security number must have exactly 9 digits' ); }); @@ -76,7 +76,7 @@ describe('SocialSecurityNumberPattern tests', () => { const result = schema.safeParse(ssn); expect(result.success).toBe(false); expect(result.error?.issues[0].message).toBe( - 'Social Security Number must start with a valid prefix (not 9, 666, or 000)' + 'Social Security number must start with a valid prefix (not 9, 666, or 000)' ); }); }); @@ -96,11 +96,11 @@ describe('SocialSecurityNumberPattern tests', () => { const errorMessage = result.error?.issues[0].message; if (ssn === '555-00-6789') { expect(errorMessage).toBe( - 'Social Security Number must have a valid middle segment (not 00)' + 'Social Security number must have a valid middle segment (not 00)' ); } else if (ssn === '555-12-0000') { expect(errorMessage).toBe( - 'Social Security Number must have a valid suffix (not 0000)' + 'Social Security number must have a valid suffix (not 0000)' ); } }); @@ -154,7 +154,7 @@ describe('SocialSecurityNumberPattern tests', () => { if (!result.success) { expect(result.error).toBeDefined(); expect(result.error?.message).toContain( - 'Social Security Number must have exactly 9 digits' + 'Social Security number must have exactly 9 digits' ); } else { expect.fail('Unexpected validation success'); diff --git a/packages/forms/src/patterns/social-security-number/social-security-number.ts b/packages/forms/src/patterns/social-security-number/social-security-number.ts index e9fdf4d6..b1a5c527 100644 --- a/packages/forms/src/patterns/social-security-number/social-security-number.ts +++ b/packages/forms/src/patterns/social-security-number/social-security-number.ts @@ -51,7 +51,7 @@ export const createSSNSchema = (data: SocialSecurityNumberPattern['data']) => { } if (issues.length > 0) { - let enhancedMessage = 'Social Security Number must '; + let enhancedMessage = 'Social Security number must '; if (issues.length === 1) { enhancedMessage += issues[0]; } else if (issues.length === 2) { @@ -88,10 +88,10 @@ export const socialSecurityNumberConfig: PatternConfig< SocialSecurityNumberPattern, SocialSecurityNumberPatternOutput > = { - displayName: 'Social Security Number', + displayName: 'Social Security number', iconPath: 'ssn-icon.svg', initial: { - label: 'Social Security Number', + label: 'Social Security number', required: false, hint: 'For example, 555-11-0000', }, diff --git a/packages/forms/src/patterns/text-area/text-area.ts b/packages/forms/src/patterns/text-area/text-area.ts index 65a6f5e8..9a52ac2f 100644 --- a/packages/forms/src/patterns/text-area/text-area.ts +++ b/packages/forms/src/patterns/text-area/text-area.ts @@ -47,7 +47,7 @@ export const textAreaConfig: PatternConfig< TextAreaPatternOutput > = { displayName: message.patterns.textarea.displayName, - iconPath: 'longanswer-icon.svg', + iconPath: 'long-answer-icon.svg', initial: { label: message.patterns.textarea.fieldLabel, initial: '',