feat: update component names and icons TCKT-464

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();
 

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:

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',

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<typeof Repeater>;

packages/design/src/Form/components/SocialSecurityNumber/SocialSecurityNumber.stories.tsx

@@ -28,23 +28,23 @@ export default meta;
 export const Default: StoryObj<typeof SocialSecurityNumberPattern> = {
   args: {
     ssnId: 'ssn',
-    label: 'Social Security Number',
+    label: 'Social Security number',
     required: false,
   },
 };
 
 export const WithRequired: StoryObj<typeof SocialSecurityNumberPattern> = {
   args: {
     ssnId: 'ssn',
-    label: 'Social Security Number',
+    label: 'Social Security number',
     required: true,
   },
 };
 
 export const WithError: StoryObj<typeof SocialSecurityNumberPattern> = {
   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<typeof SocialSecurityNumberPattern> = {
 export const WithHint: StoryObj<typeof SocialSecurityNumberPattern> = {
   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<typeof SocialSecurityNumberPattern> = {
 export const WithHintAndError: StoryObj<typeof SocialSecurityNumberPattern> = {
   args: {
     ssnId: 'ssn',
-    label: 'Social Security Number',
+    label: 'Social Security number',
     hint: 'For example, 555-11-0000',
     required: true,
     error: {

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 && <span className="required-indicator">*</span>}
         </label>
         {hint && (