From 17cefe5ab1364aabd6137686cb267563d561c2a1 Mon Sep 17 00:00:00 2001 From: Jami Gibbs Date: Tue, 27 Feb 2024 09:35:48 -0600 Subject: [PATCH] va-breadcrumbs: first breadcrumb label defaults to "VA.gov home" (#1066) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update breadcrumb home link labels * add logic to make first anchor “VA.gov home” * add prop for displaying VA.gov home label * update version --- .../stories/va-breadcrumbs-uswds.stories.jsx | 10 +-- .../stories/va-breadcrumbs.stories.jsx | 6 +- packages/web-components/package.json | 2 +- packages/web-components/src/components.d.ts | 8 +++ .../va-breadcrumbs/test/va-breadcrumbs.e2e.ts | 70 +++++++++++++++++-- .../va-breadcrumbs/va-breadcrumbs.tsx | 19 ++++- 6 files changed, 100 insertions(+), 15 deletions(-) diff --git a/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx b/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx index 1089aef56..a9c1d9684 100644 --- a/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx +++ b/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx @@ -16,7 +16,7 @@ export default { }, }; const dataArray = [ - { label: 'Level one', href: '#one' }, + { label: 'VA.gov home', href: '#one' }, { label: 'Level two', href: '#two' }, { label: 'Level three', href: '#three' }, ]; @@ -35,7 +35,7 @@ const DynamicCrumbsTemplate = ({ 'disable-analytics': disableAnalytics, }) => { const breadcrumbs = [ - { label: 'Level 1', href: '/#1' }, + { label: 'VA.gov home', href: '/#1' }, { label: 'Level 2', href: '/#2' }, { label: 'Level 3', href: '/#3' }, ]; @@ -87,7 +87,7 @@ const WrappingCrumbsTemplate = ({ wrapping, }) => { const breadcrumbs = [ - { label: 'Home', href: '/#1' }, + { label: 'VA.gov home', href: '/#1' }, { label: 'Federal Contracting', href: '/#2' }, { label: 'Contracting assistance programs', href: '/#3' }, { @@ -116,7 +116,7 @@ const WithRouterTemplate = ({ wrapping }) => { const breadcrumbs = [ - { label: 'Home', href: '/#1' }, + { label: 'VA.gov home', href: '/#1' }, { label: 'Federal Contracting', href: '/#2', isRouterLink: true }, { label: 'Contracting assistance programs', href: '/#3', isRouterLink: true }, { @@ -183,7 +183,7 @@ const defaultArgs = { 'uswds': true, 'label': 'Breadcrumb', 'breadcrumb-list': - '[{ "label": "Level One", "href": "#one" }, { "label": "Level two", "href": "#two" }, { "label": "Current", "href": "#current" }]', + '[{ "label": "VA.gov home", "href": "#one" }, { "label": "Level two", "href": "#two" }, { "label": "Current", "href": "#current" }]', 'disable-analytics': false, 'wrapping': false, }; diff --git a/packages/storybook/stories/va-breadcrumbs.stories.jsx b/packages/storybook/stories/va-breadcrumbs.stories.jsx index 58f6c1b15..5f7b916fe 100644 --- a/packages/storybook/stories/va-breadcrumbs.stories.jsx +++ b/packages/storybook/stories/va-breadcrumbs.stories.jsx @@ -16,7 +16,7 @@ export default { const Template = ({ label, 'disable-analytics': disableAnalytics }) => ( - Home + VA.gov home Level one Level two @@ -27,13 +27,13 @@ const DynamicCrumbsTemplate = ({ 'disable-analytics': disableAnalytics }) => { const breadcrumbs = [ - {label: 'Level 1', path: '/#1'}, + {label: 'VA.gov home', path: '/#1'}, {label: 'Level 2', path: '/#2'}, {label: 'Level 3', path: '/#3'}, ]; const breadcrumbs2 = [ - {label: 'First Link', path: '#example1'}, + {label: 'VA.gov home', path: '#example1'}, {label: 'Second Link', path: '#example2'}, {label: 'Third Link', path: '#example3'}, {label: 'Fourth Link', path: '#example4'}, diff --git a/packages/web-components/package.json b/packages/web-components/package.json index be218efad..8500044f1 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@department-of-veterans-affairs/web-components", - "version": "5.0.5", + "version": "5.1.0", "description": "Stencil Component Starter", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 2f0fa6d57..393784a8a 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -169,6 +169,10 @@ export namespace Components { * Analytics tracking function(s) will not be called */ "disableAnalytics"?: boolean; + /** + * When true, the first breadcrumb label will be "VA.gov home". + */ + "homeVeteransAffairs"?: boolean; /** * Adds an aria-label attribute to the
  • - Home + VA.gov home
  • Level One @@ -144,6 +144,38 @@ describe('va-breadcrumbs', () => { expect(analyticsSpy).toHaveReceivedEventTimes(0); }); + it('updates first anchor link label to "VA.gov home"', async () => { + const page = await newE2EPage(); + await page.setContent(` + + not the right label + Level One + Level Two + + `); + + const anchorElements = await page.findAll('pierce/a'); + const firstAnchorText = anchorElements[0].innerText; + + expect(firstAnchorText).toBe('VA.gov home'); + }); + + it('does not update first anchor link label to "VA.gov home" when homeVeteransAffairs prop is false', async () => { + const page = await newE2EPage(); + await page.setContent(` + + home + Level One + Level Two + + `); + + const anchorElements = await page.findAll('pierce/a'); + const firstAnchorText = anchorElements[0].innerText; + + expect(firstAnchorText).toBe('home'); + }); + /** Begin USWDS v3 Tests */ it('uswds - renders', async () => { @@ -158,7 +190,7 @@ describe('va-breadcrumbs', () => {
    1. - Home + VA.gov home
    2. @@ -207,7 +239,7 @@ describe('va-breadcrumbs', () => { action: 'linkClick', componentName: 'va-breadcrumbs', details: { - clickLabel: 'Level One', + clickLabel: 'VA.gov home', clickLevel: 1, totalLevels: 3, }, @@ -240,7 +272,7 @@ describe('va-breadcrumbs', () => {
      1. - One + VA.gov home
      2. @@ -290,4 +322,32 @@ describe('va-breadcrumbs', () => { expect(routeChangeSpy).not.toHaveReceivedEvent(); }); + it('uswds - updates first anchor link to "VA.gov home"', async () => { + const page = await newE2EPage(); + await page.setContent(` + + `); + + const anchorElements = await page.findAll('va-breadcrumbs >>> a'); + const firstAnchorLabel = await anchorElements[0].getProperty('innerText'); + + expect(firstAnchorLabel).toBe('VA.gov home'); + }); + + it('uswds - does not update first anchor link label to "VA.gov home" when homeVeteransAffairs prop is false', async () => { + const page = await newE2EPage(); + await page.setContent(` + + home + Level One + Level Two + + `); + + const anchorElements = await page.findAll('pierce/a'); + const firstAnchorText = anchorElements[0].innerText; + + expect(firstAnchorText).toBe('home'); + }); + }); diff --git a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx index 33891dfad..a2da01432 100644 --- a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx +++ b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx @@ -40,6 +40,12 @@ export class VaBreadcrumbs { * Represents a list of breadcrumbs. Use an array of objects with label and href properties, and then use JSON.stringify() to convert to a string. This prop is available when `uswds` is set to `true`. */ @Prop() breadcrumbList?: any; + + /** + * When true, the first breadcrumb label will be "VA.gov home". + */ + @Prop() homeVeteransAffairs?: boolean = true; + /** * * Represents an internal state of the component which stores the list of breadcrumbs parsed from the 'breadcrumbList' prop. @@ -94,6 +100,12 @@ export class VaBreadcrumbs { * @private */ private updateBreadCrumbList(breadcrumbList: Array<{ label: string; href: string; isRouterLink?: boolean }> | string) { + const firstBreadcrumb = breadcrumbList[0] as { label: string; href: string } + + if (firstBreadcrumb && this.homeVeteransAffairs) { + firstBreadcrumb.label = 'VA.gov home'; + } + this.formattedBreadcrumbs = typeof breadcrumbList === 'string' ? JSON.parse(breadcrumbList) : breadcrumbList; } @@ -220,13 +232,18 @@ export class VaBreadcrumbs { node.classList.add('va-breadcrumbs-li'); } const anchor = node.querySelector('a'); + + if (index === 0 && anchor && this.homeVeteransAffairs) { + anchor.innerText = 'VA.gov home'; + } + const isAriaCurrent = anchor?.getAttribute('aria-current'); if (isAriaCurrent && index !== slotNodes.length - 1) { anchor.removeAttribute('aria-current'); } - if(this.uswds) { + if (this.uswds) { const span = document.createElement('span'); span.textContent = anchor.textContent; anchor.innerHTML = '';