From 28824e76e934428eeb217e81d3e73988c2aa83a3 Mon Sep 17 00:00:00 2001 From: Kerry Powell <1776069+powellkerry@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:17:37 -0700 Subject: [PATCH] va-process-list: add ability to customize eyebrow status text (#1422) * va-process-list: add ability to customize eyebrow status text * add tests for custom status text --- .../stories/va-process-list-uswds.stories.jsx | 20 +++++++++ packages/web-components/src/components.d.ts | 8 ++++ .../test/va-process-list-item.e2e.ts | 45 +++++++++++++++++-- .../va-process-list/va-process-list-item.tsx | 13 ++++-- 4 files changed, 79 insertions(+), 7 deletions(-) diff --git a/packages/storybook/stories/va-process-list-uswds.stories.jsx b/packages/storybook/stories/va-process-list-uswds.stories.jsx index a49365064..0d5e8f6ca 100644 --- 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 ( + + +

Add the prop checkmark to make the list icon a checkmark.

+ + +

Add the prop active to make the list icon and header blue.

+ + +

Add the prop pending to make the list item and icon grayed out.

+ + + + ); +}; + 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 index 97a5a80a6..79ceb561c 100644 --- 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 index 259b85719..1b9db88d7 100644 --- 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(`
    @@ -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(`
      @@ -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(`
        @@ -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(` +
          + +

          Some content

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

          Some content

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

          Some content

          + +
        + `); + 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 index aa877c71d..be4c898af 100644 --- 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 (