Merge branch 'main' into dependabot/npm_and_yarn/npm_and_yarn-f3d0fab7e4

department-of-veterans-affairs · Dec 4, 2024 · 6e771a1 · 6e771a1
2 parents 655371f + 28824e7
commit 6e771a1
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 7 deletions.
diff --git a/packages/storybook/stories/va-process-list-uswds.stories.jsx b/packages/storybook/stories/va-process-list-uswds.stories.jsx
@@ -80,6 +80,23 @@ const StatusTemplate = (defaultArgs) => {
   );
 };
 
+const CustomStatusTextTemplate = (defaultArgs) => {
+  return (
+    <va-process-list>
+      <va-process-list-item checkmark header='Checkmark Icon' status-text="Done">  
+        <p>Add the prop <code>checkmark</code> to make the list icon a checkmark.</p>
+      </va-process-list-item>
+      <va-process-list-item active header='Active Icon' status-text="Current">
+        <p>Add the prop <code>active</code> to make the list icon and header blue.</p>
+      </va-process-list-item>
+      <va-process-list-item pending header='Pending Icon' status-text="Incomplete">
+        <p>Add the prop <code>pending</code> to make the list item and icon grayed out.</p>
+      </va-process-list-item>
+      <va-process-list-item header='Default Icon' />
+    </va-process-list>
+  );
+};
+
 
 const HeaderSizeTemplate = (defaultArgs) => {
   return (
@@ -145,6 +162,9 @@ Default.argTypes = propStructure(processListDocs);
 export const Status = StatusTemplate.bind(null);
 Status.args = { ...defaultArgs };
 
+export const CustomStatusText = CustomStatusTextTemplate.bind(null);
+Status.args = { ...defaultArgs };
+
 export const HeaderSize = HeaderSizeTemplate.bind(null);
 HeaderSize.args = { ...defaultArgs };
 

diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -1166,6 +1166,10 @@ export namespace Components {
           * Whether or not the item is pending
          */
         "pending"?: boolean;
+        /**
+          * Text to display in the eyebrow of an item if active, pending, or checkmark is true. Defaults to "Active", "Pending", or "Complete"
+         */
+        "statusText"?: string;
     }
     /**
      * @componentName Progress bar - activity
@@ -4404,6 +4408,10 @@ declare namespace LocalJSX {
           * Whether or not the item is pending
          */
         "pending"?: boolean;
+        /**
+          * Text to display in the eyebrow of an item if active, pending, or checkmark is true. Defaults to "Active", "Pending", or "Complete"
+         */
+        "statusText"?: string;
     }
     /**
      * @componentName Progress bar - activity

diff --git a/packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts b/packages/web-components/src/components/va-process-list/test/va-process-list-item.e2e.ts
@@ -65,7 +65,7 @@ describe('va-process-list-item', () => {
 
     await axeCheck(page);
   });
-  it('renders the right status text for checkmark status', async () => {
+  it('renders the default status text for checkmark status', async () => {
     const page = await newE2EPage();
     await page.setContent(`
       <ol>
@@ -77,7 +77,7 @@ describe('va-process-list-item', () => {
     const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
     expect(element.innerText).toEqual('Complete');
   })
-  it('renders the right status text for active status', async () => {
+  it('renders the default status text for active status', async () => {
     const page = await newE2EPage();
     await page.setContent(`
       <ol>
@@ -89,7 +89,7 @@ describe('va-process-list-item', () => {
     const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
     expect(element.innerText).toEqual('Active');
   })
-  it('renders the right status text for pending status', async () => {
+  it('renders the default status text for pending status', async () => {
     const page = await newE2EPage();
     await page.setContent(`
       <ol>
@@ -101,6 +101,45 @@ describe('va-process-list-item', () => {
     const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
     expect(element.innerText).toEqual('Pending');
   })
+
+  it('renders custom status text for checkmark status', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <ol>
+        <va-process-list-item header="Heading" checkmark status-text="Done">
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
+    expect(element.innerText).toEqual('Done');
+  })
+  it('renders custom status text for active status', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <ol>
+        <va-process-list-item header="Heading" active status-text="Current">
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
+    expect(element.innerText).toEqual('Current');
+  })
+  it('renders custom status text for pending status', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <ol>
+        <va-process-list-item header="Heading" pending status-text="Next">
+          <p>Some content</p>
+        </va-process-list>
+      </ol>
+    `);
+    const element = await page.find('va-process-list-item .usa-process-list__heading-eyebrow');
+    expect(element.innerText).toEqual('Next');
+  })
+
+
   it('does not render the status text by default', async () => {
     const page = await newE2EPage();
     await page.setContent(`

diff --git a/packages/web-components/src/components/va-process-list/va-process-list-item.tsx b/packages/web-components/src/components/va-process-list/va-process-list-item.tsx
@@ -38,15 +38,20 @@ export class VaProcessListItem {
   */
   @Prop() checkmark?: boolean = false;
 
+  /**
+  * Text to display in the eyebrow of an item if active, pending, or checkmark is true. Defaults to "Active", "Pending", or "Complete"
+  */
+  @Prop() statusText?: string;
+
   render() { 
-    const {header, level, checkmark, active, pending} = this;
+    const {header, level, checkmark, active, pending, statusText} = this;
     // eslint-disable-next-line i18next/no-literal-string
     const HeaderTag = `h${level}`;
     const status = checkmark ? 'checkmark' : active ? 'active' : pending ? 'pending' : null;
     const statusTextMap = {
-      checkmark: 'Complete',
-      active: 'Active',
-      pending: 'Pending'
+      checkmark: statusText || 'Complete',
+      active: statusText || 'Active',
+      pending: statusText || 'Pending'
     }
 
     return (