From 44495b45b323d163053d018b074922d76622b2d7 Mon Sep 17 00:00:00 2001 From: amyleadem Date: Mon, 17 Jun 2024 08:29:38 -0700 Subject: [PATCH 01/58] Add identifier component in storybook --- .../usa-identifier/identifier.stories.js | 164 ++++++++++++++++++ .../src/components/usa-identifier/index.js | 156 +++++++++++++++++ .../components/usa-identifier/package.json | 12 ++ 3 files changed, 332 insertions(+) create mode 100644 web-components/src/components/usa-identifier/identifier.stories.js create mode 100644 web-components/src/components/usa-identifier/index.js create mode 100644 web-components/src/components/usa-identifier/package.json diff --git a/web-components/src/components/usa-identifier/identifier.stories.js b/web-components/src/components/usa-identifier/identifier.stories.js new file mode 100644 index 00000000..b4427bcf --- /dev/null +++ b/web-components/src/components/usa-identifier/identifier.stories.js @@ -0,0 +1,164 @@ +import "./index"; +import { html } from "lit"; + +export default { + title: "Components/Identifier", + component: "usa-identifier", + argTypes: { + primary_agency: { name: "Primary agency information" }, + logo1: { control: "text", name: "Primary agency logo" }, + secondary_agency: { name: "Secondary agency information" }, + logo2: { control: "text", name: "Secondary agency logo" }, + masthead: { name: "Masthead content" }, + taxpayer: { name: "Taxpayer disclaimer" }, + required_links: { name: "Required links" }, + usagov: { name: "USA.gov information" }, + main_aria_label: { name: "Component aria-label" }, + }, + args: { + main_aria_label: "Agency identifier", + primary_agency: { + name: "[Parent agency]", + shortname: "[Agency shortname]", + url: "javascipt:void(0)", + }, + logo1: "https://designsystem.digital.gov/assets/img/circle-gray-20.svg", + secondary_agency: { + name: "[Other agency]", + url: "javascipt:void(0)", + }, + logo2: "https://designsystem.digital.gov/assets/img/circle-gray-20.svg", + masthead: { + aria_label: "Agency description", + conjunction: "and", + domain: "[domain.gov]", + disclaimer: "An official website of the", + }, + taxpayer: "Produced and published at taxpayer expense.", + required_links: { + aria_label: "Important links", + about: "About", + accessibility: "Accessibility statement", + foia: "FOIA requests", + no_FEAR: "No FEAR Act data", + oig: "Office of the Inspector General", + performance: "Performance reports", + privacy: "Privacy policy", + }, + usagov: { + text: "Looking for U.S. government information and services?", + link_label: "Visit USA.gov", + link_url: "https://www.usa.gov/", + }, + }, + render: ({ + primary_agency, + secondary_agency, + logo1, + logo2, + masthead, + taxpayer, + required_links, + usagov, + main_aria_label, + }) => html` + + ${logo1 ? html` + + ${primary_agency.name} logo + `: null} + ${logo2 ? html` + + ${secondary_agency.name} logo + `: null} +

+ ${masthead.disclaimer} + ${primary_agency.name} + ${secondary_agency ? html`${masthead.conjunction} ${secondary_agency.name}`: null}${taxpayer ? html`. + ${taxpayer}` : null} +

+ +
+ ${usagov.text} ${usagov.link_label} +
+ + `, +}; + +export const Default = {}; + +export const DefaultSpanish = { + args: { + main_aria_label: "Identificador de la agencia", + masthead: { + aria_label: "Descripción de la agencia", + conjunction: "y", + domain: "[domain.gov]", + disclaimer: "Un sitio web oficial de", + }, + taxpayer: + "Producido y publicado con dinero de los contribuyentes de impuestos.", + required_links: { + aria_label: "Enlaces importantes", + about: "Acerca de", + accessibility: "Declaración de accesibilidad", + foia: "Solicitud a través de FOIA", + no_FEAR: "Datos de la ley No FEAR", + oig: "Oficina del Inspector General", + performance: "Informes de desempeño", + privacy: "Política de privacidad", + }, + usagov: { + text: "¿Necesita información y servicios del Gobierno?", + link_label: "Visite USA.gov en Español", + link_url: "https://www.usa.gov/espanol/", + }, + }, +}; + +export const oneAgency = { + args: { + logo2: false, + secondary_agency: false, + taxpayer: false, + }, + argTypes: { + logo2: { table: { disable: true } }, + secondary_agency: { table: { disable: true } }, + taxpayer: { table: { disable: true } }, + }, +}; + +export const MultipleAgencies = { + args: { + taxpayer: false, + }, + argTypes: { + taxpayer: { table: { disable: true } }, + }, +}; + +export const NoLogo = { + args: { + logo1: false, + logo2: false, + secondary_agency: false, + taxpayer: false, + }, + argTypes: { + logo1: { table: { disable: true } }, + logo2: { table: { disable: true } }, + secondary_agency: { table: { disable: true } }, + taxpayer: { table: { disable: true } }, + }, +}; + +export const TaxpayerDisclaimer = {}; diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js new file mode 100644 index 00000000..0504602a --- /dev/null +++ b/web-components/src/components/usa-identifier/index.js @@ -0,0 +1,156 @@ +import { LitElement, html, css, unsafeCSS } from "lit"; +import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline"; +import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline"; + +export class UsaIdentifier extends LitElement { + static styles = [ + unsafeCSS(usaIdentifierStyle), + unsafeCSS(uswdsCoreStyle), + css` + .usa-identifier__usagov-description { + display: block; + } + `, + ]; + + connectedCallback() { + super.connectedCallback(); + this.domain = this.querySelector('[slot="domain"]'); + this.logos = [...this.querySelectorAll('[slot="logo"]')]; + this.links = [...this.querySelector('[slot="links"]').children]; + this.domain = this.querySelector('[slot="domain"]'); + this.disclaimer = this.querySelector('[slot="disclaimer"]'); + this.usagov = this.querySelector('[slot="usagov"]'); + } + + // Render the logo(s) for the masthead + mastheadLogosTemplate() { + if (this.logos.length > 0) { + return html` +
+ ${this.logos.map((logo) => { + const logoImage = logo.querySelector("img"); + logo.classList.add("usa-identifier__logo"); + logoImage.classList.add("usa-identifier__logo-img"); + return html`${logo}`; + })} +
+ `; + } + } + + // Render the text for the masthead + mastheadTextTemplate() { + /** + * Scaffold domain text: + * Add necessary classes for styling + */ + if (this.domain) { + this.domain.classList.add("usa-identifier__identity-domain"); + } + /** + * Scaffold disclaimer text: + * Add necessary classes for styling + * Wrap "An" in aria-hidden span + */ + if (this.disclaimer) { + this.disclaimer.classList.add("usa-identifier__identity-disclaimer"); + } + /** + * For English implementations, wrap "An" in an aria-hidden span + * This prevents "An official" from sounding like "Unofficial" in audible readouts + */ + if (this.disclaimer.innerHTML.includes("An official")) { + this.disclaimer.innerHTML = this.disclaimer.innerHTML.replace( + "An official", + ' official' + ); + } + + if (this.disclaimer || this.domain) { + return html` +
+ ${this.domain} ${this.disclaimer} +
+ `; + } + } + + // Render the logos and text in the masthead + mastheadTemplate() { + if (this.domain || this.disclaimer || this.logos.length > 0) { + return html` +
+
+ ${this.mastheadLogosTemplate()} ${this.mastheadTextTemplate()} +
+
+ `; + } + } + + // Render the list of links + linksTemplate() { + if (this.links && this.links.length > 0) { + return html` + + `; + } + } + + // Render the footer USA.gov text + usagovTemplate() { + /** + * Scaffold usagov text: + * Add necessary classes for styling + */ + if (this.usagov) { + const usagovLink = this.usagov.querySelector("a"); + this.usagov.classList.add("usa-identifier__usagov-description"); + usagovLink.classList.add("usa-link"); + + return html` +
+
+
${this.usagov}
+
+
+ `; + } + } + + render() { + return html` +
+ ${this.mastheadTemplate()} ${this.linksTemplate()} + ${this.usagovTemplate()} +
+ `; + } +} + +window.customElements.define("usa-identifier", UsaIdentifier); diff --git a/web-components/src/components/usa-identifier/package.json b/web-components/src/components/usa-identifier/package.json new file mode 100644 index 00000000..861cd2f4 --- /dev/null +++ b/web-components/src/components/usa-identifier/package.json @@ -0,0 +1,12 @@ +{ + "name": "usa-identifier", + "version": "0.0.1", + "description": "USWDS identifier component", + "main": "index.js", + "devDependencies": {}, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "SEE LICENSE IN LICENSE.md" +} From 299b123e603839ab8ab1edf548933bd6a570a8df Mon Sep 17 00:00:00 2001 From: amyleadem Date: Tue, 18 Jun 2024 12:42:27 -0700 Subject: [PATCH 02/58] Comment out "an official" wrapper to prevent storybook error --- .../src/components/usa-identifier/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js index 0504602a..22be27e6 100644 --- a/web-components/src/components/usa-identifier/index.js +++ b/web-components/src/components/usa-identifier/index.js @@ -60,12 +60,12 @@ export class UsaIdentifier extends LitElement { * For English implementations, wrap "An" in an aria-hidden span * This prevents "An official" from sounding like "Unofficial" in audible readouts */ - if (this.disclaimer.innerHTML.includes("An official")) { - this.disclaimer.innerHTML = this.disclaimer.innerHTML.replace( - "An official", - ' official' - ); - } + // if (this.disclaimer.innerHTML.includes("An official")) { + // this.disclaimer.innerHTML = this.disclaimer.innerHTML.replace( + // "An official", + // ' official' + // ); + // } if (this.disclaimer || this.domain) { return html` From 973de1147a5d436c4e7c8531834607a588cc90e0 Mon Sep 17 00:00:00 2001 From: James Mejia Date: Wed, 19 Jun 2024 12:09:04 -0500 Subject: [PATCH 03/58] Use latest vite config to fix SCSS import errors --- web-components/vite.config.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web-components/vite.config.js b/web-components/vite.config.js index 5c7108aa..e8993258 100644 --- a/web-components/vite.config.js +++ b/web-components/vite.config.js @@ -1,6 +1,13 @@ import { defineConfig } from "vite"; export default defineConfig({ + css: { + preprocessorOptions: { + scss: { + includePaths: ["./node_modules/@uswds/uswds/packages"], + }, + }, + }, test: { globals: true, environment: "jsdom", From e25ca9775891df4f976a25b506780116fa74457c Mon Sep 17 00:00:00 2001 From: amyleadem Date: Fri, 21 Jun 2024 07:39:41 -0700 Subject: [PATCH 04/58] Add css preprocessor to vite config --- web-components/vite.config.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web-components/vite.config.js b/web-components/vite.config.js index 5c7108aa..e8993258 100644 --- a/web-components/vite.config.js +++ b/web-components/vite.config.js @@ -1,6 +1,13 @@ import { defineConfig } from "vite"; export default defineConfig({ + css: { + preprocessorOptions: { + scss: { + includePaths: ["./node_modules/@uswds/uswds/packages"], + }, + }, + }, test: { globals: true, environment: "jsdom", From 26b04971242c50b636238a30a8eb01f2bfbf7272 Mon Sep 17 00:00:00 2001 From: amyleadem Date: Fri, 21 Jun 2024 08:01:33 -0700 Subject: [PATCH 05/58] Create indiv link objects in storybook; rename stories --- .../usa-identifier/identifier.stories.js | 123 +++++++++++++----- 1 file changed, 92 insertions(+), 31 deletions(-) diff --git a/web-components/src/components/usa-identifier/identifier.stories.js b/web-components/src/components/usa-identifier/identifier.stories.js index b4427bcf..79fcd3e8 100644 --- a/web-components/src/components/usa-identifier/identifier.stories.js +++ b/web-components/src/components/usa-identifier/identifier.stories.js @@ -11,7 +11,14 @@ export default { logo2: { control: "text", name: "Secondary agency logo" }, masthead: { name: "Masthead content" }, taxpayer: { name: "Taxpayer disclaimer" }, - required_links: { name: "Required links" }, + links_aria_label: { name: "Aria label for required links section" }, + link_about: { name: "Required link - About" }, + link_accessibility: { name: "Required link - Accessibility statement" }, + link_foia: { name: "Required link - FOIA requests" }, + link_no_FEAR: { name: "Required link - No FEAR Act data" }, + link_oig: { name: "Required link - Office of the Inspector General" }, + link_performance: { name: "Required link - Performance reports" }, + link_privacy: { name: "Required link - Privacy policy" }, usagov: { name: "USA.gov information" }, main_aria_label: { name: "Component aria-label" }, }, @@ -35,15 +42,34 @@ export default { disclaimer: "An official website of the", }, taxpayer: "Produced and published at taxpayer expense.", - required_links: { - aria_label: "Important links", - about: "About", - accessibility: "Accessibility statement", - foia: "FOIA requests", - no_FEAR: "No FEAR Act data", - oig: "Office of the Inspector General", - performance: "Performance reports", - privacy: "Privacy policy", + links_aria_label: "Important links", + link_about: { + label: "About", + url: "javascipt:void(0)" + }, + link_accessibility: { + label: "Accessibility statement", + url: "javascipt:void(0)" + }, + link_foia: { + label: "FOIA requests", + url: "javascipt:void(0)" + }, + link_no_FEAR: { + label: "No FEAR Act data", + url: "javascipt:void(0)" + }, + link_oig: { + label: "Office of the Inspector General", + url: "javascipt:void(0)" + }, + link_performance: { + label: "Performance reports", + url: "javascipt:void(0)" + }, + link_privacy: { + label: "Privacy policy", + url: "javascipt:void(0)" }, usagov: { text: "Looking for U.S. government information and services?", @@ -58,7 +84,14 @@ export default { logo2, masthead, taxpayer, - required_links, + links_aria_label, + link_about, + link_accessibility, + link_foia, + link_oig, + link_no_FEAR, + link_performance, + link_privacy, usagov, main_aria_label, }) => html` @@ -77,14 +110,14 @@ export default { ${secondary_agency ? html`${masthead.conjunction} ${secondary_agency.name}`: null}${taxpayer ? html`. ${taxpayer}` : null}

- -
- ${usagov.text} ${usagov.link_label} -
`, }; @@ -130,50 +131,8 @@ export const Default = {}; export const DefaultSpanish = { args: { - main_aria_label: "Identificador de la agencia", - masthead: { - aria_label: "Descripción de la agencia", - conjunction: "y", - domain: "[domain.gov]", - disclaimer: "Un sitio web oficial de", - }, - taxpayer: - "Producido y publicado con dinero de los contribuyentes de impuestos.", - links_aria_label: "Enlaces importantes", - link_about: { - label: "Acerca de", - url: "javascipt:void(0)" - }, - link_accessibility: { - label: "Declaración de accesibilidad", - url: "javascipt:void(0)" - }, - link_foia: { - label: "Solicitud a través de FOIA", - url: "javascipt:void(0)" - }, - link_no_FEAR: { - label: "Datos de la ley No FEAR", - url: "javascipt:void(0)" - }, - link_oig: { - label: "Oficina del Inspector General", - url: "javascipt:void(0)" - }, - link_performance: { - label: "Informes de desempeño", - url: "javascipt:void(0)" - }, - link_privacy: { - label: "Política de privacidad", - url: "javascipt:void(0)" - }, - usagov: { - text: "¿Necesita información y servicios del Gobierno?", - link_label: "Visite USA.gov en Español", - link_url: "https://www.usa.gov/espanol/", - }, - }, + lang: "es" + } }; export const oneParentAgency = { diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js index 22be27e6..f8981c62 100644 --- a/web-components/src/components/usa-identifier/index.js +++ b/web-components/src/components/usa-identifier/index.js @@ -3,6 +3,11 @@ import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline"; import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline"; export class UsaIdentifier extends LitElement { + static properties = { + lang: { type: String }, + classes: {}, + }; + static styles = [ unsafeCSS(usaIdentifierStyle), unsafeCSS(uswdsCoreStyle), @@ -15,12 +20,66 @@ export class UsaIdentifier extends LitElement { connectedCallback() { super.connectedCallback(); + this.lang; this.domain = this.querySelector('[slot="domain"]'); this.logos = [...this.querySelectorAll('[slot="logo"]')]; this.links = [...this.querySelector('[slot="links"]').children]; this.domain = this.querySelector('[slot="domain"]'); this.disclaimer = this.querySelector('[slot="disclaimer"]'); this.usagov = this.querySelector('[slot="usagov"]'); + this.data = { + en: { + aria_label: "Agency identifier", + masthead: { + description: html` official website of the`, + agencyConjunction: "and", + }, + taxpayer: "Produced and published at taxpayer expense.", + required_links: { + aria_label: "Important links", + about: "About", + accessibility: "Accessibility statement", + foia: "FOIA requests", + no_fear: "No FEAR Act data", + oig: "Office of the Inspector General", + performance: "Performance reports", + privacy: "Privacy policy", + }, + usagov: { + description: "Looking for U.S. government information and services?", + link_label: "Visit USA.gov", + link_url: "https://www.usa.gov/" + } + }, + es: { + aria_label: "Identificador de la agencia", + masthead: { + description: "Un sitio web oficial de", + agencyConjunction: "y", + }, + taxpayer: "Producido y publicado con dinero de los contribuyentes de impuestos.", + required_links: { + aria_label: "Enlaces importantes", + about: "Acerca de", + accessibility: "Declaración de accesibilidad", + foia: "Solicitud a través de FOIA", + no_fear: "Datos de la ley No FEAR", + oig: "Oficina del Inspector General", + performance: "Informes de desempeño", + privacy: "Política de privacidad", + }, + usagov: { + description: "¿Necesita información y servicios del Gobierno?", + link_label: "Visite USA.gov en Español", + link_url: "https://www.usa.gov/espanol/" + } + } + } + } + + get _identifierText() { + const content = this.data[this.lang] || this.data["en"]; + return content; } // Render the logo(s) for the masthead @@ -39,7 +98,6 @@ export class UsaIdentifier extends LitElement { } } - // Render the text for the masthead mastheadTextTemplate() { /** * Scaffold domain text: @@ -122,33 +180,43 @@ export class UsaIdentifier extends LitElement { // Render the footer USA.gov text usagovTemplate() { + const { usagov } = this._identifierText; + let usagovContent = html`${ usagov.description } ${ usagov.link_label }`; + /** - * Scaffold usagov text: + * If custom text is included in the usagov slot, scaffold that text: * Add necessary classes for styling */ if (this.usagov) { const usagovLink = this.usagov.querySelector("a"); - this.usagov.classList.add("usa-identifier__usagov-description"); usagovLink.classList.add("usa-link"); + usagovContent = this.usagov; + } - return html` -
-
-
${this.usagov}
+ return html` +
+
+
+ ${usagovContent}
-
- `; - } +
+
+ `; } + + render() { + const { aria_label } = this._identifierText; + const componentAriaLabel = this.getAttribute("aria-label") || aria_label; return html` -
- ${this.mastheadTemplate()} ${this.linksTemplate()} +
+ ${this.mastheadTemplate()} + ${this.linksTemplate()} ${this.usagovTemplate()} -
+ `; } } From 5fd129e9d6d428f5c3e8a3317a1d022fca36312a Mon Sep 17 00:00:00 2001 From: amyleadem Date: Tue, 25 Jun 2024 15:21:59 -0700 Subject: [PATCH 09/58] Add custom content usagov; move lang data to json --- .../components/usa-identifier/identifier.json | 48 ++++++++++++++++ .../usa-identifier/identifier.stories.js | 20 ++++++- .../src/components/usa-identifier/index.js | 55 +------------------ 3 files changed, 70 insertions(+), 53 deletions(-) create mode 100644 web-components/src/components/usa-identifier/identifier.json diff --git a/web-components/src/components/usa-identifier/identifier.json b/web-components/src/components/usa-identifier/identifier.json new file mode 100644 index 00000000..d3c4d22c --- /dev/null +++ b/web-components/src/components/usa-identifier/identifier.json @@ -0,0 +1,48 @@ +{ + "en": { + "aria_label": "Agency identifier", + "masthead": { + "description": " official website of the", + "agencyConjunction": "and" + }, + "taxpayer": "Produced and published at taxpayer expense.", + "required_links": { + "aria_label": "Important links", + "about": "About", + "accessibility": "Accessibility statement", + "foia": "FOIA requests", + "no_fear": "No FEAR Act data", + "oig": "Office of the Inspector General", + "performance": "Performance reports", + "privacy": "Privacy policy" + }, + "usagov": { + "description": "Looking for U.S. government information and services?", + "link_label": "Visit USA.gov", + "link_url": "https://www.usa.gov/" + } + }, + "es": { + "aria_label": "Identificador de la agencia", + "masthead": { + "description": "Un sitio web oficial de", + "agencyConjunction": "y" + }, + "taxpayer": "Producido y publicado con dinero de los contribuyentes de impuestos.", + "required_links": { + "aria_label": "Enlaces importantes", + "about": "Acerca de", + "accessibility": "Declaración de accesibilidad", + "foia": "Solicitud a través de FOIA", + "no_fear": "Datos de la ley No FEAR", + "oig": "Oficina del Inspector General", + "performance": "Informes de desempeño", + "privacy": "Política de privacidad" + }, + "usagov": { + "description": "¿Necesita información y servicios del Gobierno?", + "link_label": "Visite USA.gov en Español", + "link_url": "https://www.usa.gov/espanol/" + } + } + } \ No newline at end of file diff --git a/web-components/src/components/usa-identifier/identifier.stories.js b/web-components/src/components/usa-identifier/identifier.stories.js index 7d4c5284..f79b0a0b 100644 --- a/web-components/src/components/usa-identifier/identifier.stories.js +++ b/web-components/src/components/usa-identifier/identifier.stories.js @@ -1,5 +1,6 @@ import "./index"; import { html } from "lit"; +import usaIdentifierContent from "./identifier.json"; export default { title: "Components/Identifier", @@ -77,7 +78,7 @@ export default { url: "javascipt:void(0)" }, usagov: { - include: true + include: false, }, }, render: ({ @@ -123,6 +124,10 @@ export default { ${link_performance.label} ${link_privacy.label} + ${usagov.include ? html` +
+ ${usagov.text} ${usagov.link_label} +
`: null} `, }; @@ -135,6 +140,19 @@ export const DefaultSpanish = { } }; +export const DefaultCustomContent = { + args: { + lang: "", + usagov: { + include: true, + text: "[French] Looking for U.S. government information and services?", + link_label: "[French] Visit USA.gov", + link_url: "[French]https://www.usa.gov/", + }, + }, +} + + export const oneParentAgency = { args: { logo2: false, diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js index f8981c62..f91bb08d 100644 --- a/web-components/src/components/usa-identifier/index.js +++ b/web-components/src/components/usa-identifier/index.js @@ -1,6 +1,7 @@ import { LitElement, html, css, unsafeCSS } from "lit"; import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline"; import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline"; +import usaIdentifierContent from "./identifier.json"; export class UsaIdentifier extends LitElement { static properties = { @@ -27,58 +28,10 @@ export class UsaIdentifier extends LitElement { this.domain = this.querySelector('[slot="domain"]'); this.disclaimer = this.querySelector('[slot="disclaimer"]'); this.usagov = this.querySelector('[slot="usagov"]'); - this.data = { - en: { - aria_label: "Agency identifier", - masthead: { - description: html` official website of the`, - agencyConjunction: "and", - }, - taxpayer: "Produced and published at taxpayer expense.", - required_links: { - aria_label: "Important links", - about: "About", - accessibility: "Accessibility statement", - foia: "FOIA requests", - no_fear: "No FEAR Act data", - oig: "Office of the Inspector General", - performance: "Performance reports", - privacy: "Privacy policy", - }, - usagov: { - description: "Looking for U.S. government information and services?", - link_label: "Visit USA.gov", - link_url: "https://www.usa.gov/" - } - }, - es: { - aria_label: "Identificador de la agencia", - masthead: { - description: "Un sitio web oficial de", - agencyConjunction: "y", - }, - taxpayer: "Producido y publicado con dinero de los contribuyentes de impuestos.", - required_links: { - aria_label: "Enlaces importantes", - about: "Acerca de", - accessibility: "Declaración de accesibilidad", - foia: "Solicitud a través de FOIA", - no_fear: "Datos de la ley No FEAR", - oig: "Oficina del Inspector General", - performance: "Informes de desempeño", - privacy: "Política de privacidad", - }, - usagov: { - description: "¿Necesita información y servicios del Gobierno?", - link_label: "Visite USA.gov en Español", - link_url: "https://www.usa.gov/espanol/" - } - } - } } get _identifierText() { - const content = this.data[this.lang] || this.data["en"]; + const content = usaIdentifierContent[this.lang] || usaIdentifierContent["en"]; return content; } @@ -181,7 +134,7 @@ export class UsaIdentifier extends LitElement { // Render the footer USA.gov text usagovTemplate() { const { usagov } = this._identifierText; - let usagovContent = html`${ usagov.description } ${ usagov.link_label }`; + let usagovContent = this.usagov || html`${ usagov.description } ${ usagov.link_label }`; /** * If custom text is included in the usagov slot, scaffold that text: @@ -206,8 +159,6 @@ export class UsaIdentifier extends LitElement { `; } - - render() { const { aria_label } = this._identifierText; const componentAriaLabel = this.getAttribute("aria-label") || aria_label; From 21c5c2309b8810dbd88f1bacb0872c3d1ebe27d1 Mon Sep 17 00:00:00 2001 From: amyleadem Date: Tue, 25 Jun 2024 16:27:24 -0700 Subject: [PATCH 10/58] Create default link; add taxpayer attribute --- .../usa-identifier/identifier.stories.js | 92 ++++++++++--------- .../src/components/usa-identifier/index.js | 90 +++++++++++++----- 2 files changed, 115 insertions(+), 67 deletions(-) diff --git a/web-components/src/components/usa-identifier/identifier.stories.js b/web-components/src/components/usa-identifier/identifier.stories.js index f79b0a0b..d1c0c20c 100644 --- a/web-components/src/components/usa-identifier/identifier.stories.js +++ b/web-components/src/components/usa-identifier/identifier.stories.js @@ -1,5 +1,5 @@ import "./index"; -import { html } from "lit"; +import { html, nothing } from "lit"; import usaIdentifierContent from "./identifier.json"; export default { @@ -29,7 +29,7 @@ export default { }, args: { lang: "en", - main_aria_label: "Agency identifier", + main_aria_label: "", primary_agency: { name: "[Parent agency]", shortname: "[Agency shortname]", @@ -47,34 +47,29 @@ export default { domain: "[domain.gov]", disclaimer: "An official website of the", }, + showTaxpayer: false, taxpayer: "Produced and published at taxpayer expense.", links_aria_label: "Important links", link_about: { - label: "About", + shortname: "[Agency shortname]", url: "javascipt:void(0)" }, link_accessibility: { - label: "Accessibility statement", url: "javascipt:void(0)" }, link_foia: { - label: "FOIA requests", url: "javascipt:void(0)" }, link_no_FEAR: { - label: "No FEAR Act data", url: "javascipt:void(0)" }, link_oig: { - label: "Office of the Inspector General", url: "javascipt:void(0)" }, link_performance: { - label: "Performance reports", url: "javascipt:void(0)" }, link_privacy: { - label: "Privacy policy", url: "javascipt:void(0)" }, usagov: { @@ -88,6 +83,7 @@ export default { logo1, logo2, masthead, + showTaxpayer, taxpayer, links_aria_label, link_about, @@ -100,7 +96,7 @@ export default { usagov, main_aria_label, }) => html` - + ${logo1 ? html` ${primary_agency.name} logo @@ -112,17 +108,17 @@ export default {

${masthead.disclaimer} ${primary_agency.name} - ${secondary_agency ? html`${masthead.conjunction} ${secondary_agency.name}`: null}${taxpayer ? html`. + ${secondary_agency ? html`${masthead.conjunction} ${secondary_agency.name}`: null}${showTaxpayer ? html`. ${taxpayer}` : null}

${usagov.include ? html`
@@ -143,6 +139,38 @@ export const DefaultSpanish = { export const DefaultCustomContent = { args: { lang: "", + links_aria_label: "[French] Important links", + link_about: { + shortname: "[Agency shortname]", + label: "[French] About", + url: "javascipt:void(0)" + }, + showTaxpayer: true, + taxpayer: "[French] Produced and published at taxpayer expense.", + link_accessibility: { + label: "[French] Accessibility statement", + url: "javascipt:void(0)" + }, + link_foia: { + label: "[French] FOIA requests", + url: "javascipt:void(0)" + }, + link_no_FEAR: { + label: "[French] No FEAR Act data", + url: "javascipt:void(0)" + }, + link_oig: { + label: "[French] Office of the Inspector General", + url: "javascipt:void(0)" + }, + link_performance: { + label: "[French] Performance reports", + url: "javascipt:void(0)" + }, + link_privacy: { + label: "[French] Privacy policy", + url: "javascipt:void(0)" + }, usagov: { include: true, text: "[French] Looking for U.S. government information and services?", @@ -152,41 +180,20 @@ export const DefaultCustomContent = { }, } - export const oneParentAgency = { args: { logo2: false, secondary_agency: false, - taxpayer: false, - }, - argTypes: { - logo2: { table: { disable: true } }, - secondary_agency: { table: { disable: true } }, - taxpayer: { table: { disable: true } }, }, }; -export const MultipleParentAgencies = { - args: { - taxpayer: false, - }, - argTypes: { - taxpayer: { table: { disable: true } }, - }, -}; +export const MultipleParentAgencies = {}; export const NoLogo = { args: { logo1: false, logo2: false, secondary_agency: false, - taxpayer: false, - }, - argTypes: { - logo1: { table: { disable: true } }, - logo2: { table: { disable: true } }, - secondary_agency: { table: { disable: true } }, - taxpayer: { table: { disable: true } }, }, }; @@ -194,9 +201,6 @@ export const TaxpayerDisclaimer = { args: { logo2: false, secondary_agency: false, - }, - argTypes: { - logo2: { table: { disable: true } }, - secondary_agency: { table: { disable: true } }, + showTaxpayer: true, }, }; diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js index f91bb08d..4f464743 100644 --- a/web-components/src/components/usa-identifier/index.js +++ b/web-components/src/components/usa-identifier/index.js @@ -6,6 +6,7 @@ import usaIdentifierContent from "./identifier.json"; export class UsaIdentifier extends LitElement { static properties = { lang: { type: String }, + taxpayer: {type: Boolean }, classes: {}, }; @@ -24,7 +25,13 @@ export class UsaIdentifier extends LitElement { this.lang; this.domain = this.querySelector('[slot="domain"]'); this.logos = [...this.querySelectorAll('[slot="logo"]')]; - this.links = [...this.querySelector('[slot="links"]').children]; + this.linkAbout = this.querySelector('[slot="link_about"]'); + this.linkAccessibility = this.querySelector('[slot="link_accessibility"]'); + this.linkFOIA = this.querySelector('[slot="link_foia"]'); + this.linkNoFEAR = this.querySelector('[slot="link_fear"]'); + this.linkOIG = this.querySelector('[slot="link_oig"]'); + this.linkPerformance = this.querySelector('[slot="link_performance"]'); + this.linkPrivacy = this.querySelector('[slot="link_privacy"]'); this.domain = this.querySelector('[slot="domain"]'); this.disclaimer = this.querySelector('[slot="disclaimer"]'); this.usagov = this.querySelector('[slot="usagov"]'); @@ -108,33 +115,70 @@ export class UsaIdentifier extends LitElement { // Render the list of links linksTemplate() { - if (this.links && this.links.length > 0) { - return html` - - `; - } + const { required_links } = this._identifierText; + const requiredLinkItemClass = "usa-identifier__required-links-item"; + const requiredLinkClass = "usa-identifier__required-link usa-link"; + const linksLabel = required_links.aria_label; + const aboutText = this.linkAbout.textContent || required_links.about; + const agencyShortname = this.linkAbout.getAttribute("shortname") || this.primaryAgency ; + const accessibilityText = this.linkAccessibility.textContent || required_links.accessibility; + const foiaText = this.linkFOIA.textContent || required_links.foia; + const noFearText = this.linkNoFEAR.textContent || required_links.no_fear; + const oigText = this.linkOIG.textContent || required_links.oig; + const performanceText = this.linkPerformance.textContent || required_links.performance; + const privacyText = this.linkPrivacy.textContent || required_links.privacy; + return html` + + ` } // Render the footer USA.gov text usagovTemplate() { const { usagov } = this._identifierText; - let usagovContent = this.usagov || html`${ usagov.description } ${ usagov.link_label }`; + let usagovContent = html`${ usagov.description } ${ usagov.link_label }`; /** * If custom text is included in the usagov slot, scaffold that text: From 0ae101ee135025ddabb484d4441854d55f776de1 Mon Sep 17 00:00:00 2001 From: amyleadem Date: Tue, 25 Jun 2024 17:19:36 -0700 Subject: [PATCH 11/58] Consolidate aria-labels; rename controls --- .../components/usa-identifier/identifier.json | 14 +- .../usa-identifier/identifier.stories.js | 142 +++++++++--------- .../src/components/usa-identifier/index.js | 8 +- 3 files changed, 89 insertions(+), 75 deletions(-) diff --git a/web-components/src/components/usa-identifier/identifier.json b/web-components/src/components/usa-identifier/identifier.json index d3c4d22c..372ef9f5 100644 --- a/web-components/src/components/usa-identifier/identifier.json +++ b/web-components/src/components/usa-identifier/identifier.json @@ -1,13 +1,11 @@ { "en": { - "aria_label": "Agency identifier", "masthead": { "description": " official website of the", "agencyConjunction": "and" }, "taxpayer": "Produced and published at taxpayer expense.", "required_links": { - "aria_label": "Important links", "about": "About", "accessibility": "Accessibility statement", "foia": "FOIA requests", @@ -20,17 +18,20 @@ "description": "Looking for U.S. government information and services?", "link_label": "Visit USA.gov", "link_url": "https://www.usa.gov/" + }, + "aria_labels": { + "main": "Agency identifier", + "links": "Important links", + "masthead": "Agency description" } }, "es": { - "aria_label": "Identificador de la agencia", "masthead": { "description": "Un sitio web oficial de", "agencyConjunction": "y" }, "taxpayer": "Producido y publicado con dinero de los contribuyentes de impuestos.", "required_links": { - "aria_label": "Enlaces importantes", "about": "Acerca de", "accessibility": "Declaración de accesibilidad", "foia": "Solicitud a través de FOIA", @@ -43,6 +44,11 @@ "description": "¿Necesita información y servicios del Gobierno?", "link_label": "Visite USA.gov en Español", "link_url": "https://www.usa.gov/espanol/" + }, + "aria_labels": { + "main": "Identificador de la agencia", + "links": "Enlaces importantes", + "masthead": "Identificador de la agencia" } } } \ No newline at end of file diff --git a/web-components/src/components/usa-identifier/identifier.stories.js b/web-components/src/components/usa-identifier/identifier.stories.js index d1c0c20c..84a57a42 100644 --- a/web-components/src/components/usa-identifier/identifier.stories.js +++ b/web-components/src/components/usa-identifier/identifier.stories.js @@ -10,13 +10,19 @@ export default { options: ['en', 'es'], control: { type: 'radio' } }, - primary_agency: { name: "Primary agency information" }, - logo1: { control: "text", name: "Primary agency logo" }, - secondary_agency: { name: "Secondary agency information" }, - logo2: { control: "text", name: "Secondary agency logo" }, - masthead: { name: "Masthead content" }, - taxpayer: { name: "Taxpayer disclaimer" }, - links_aria_label: { name: "Aria label for required links section" }, + domain: { name: "Site domain" }, + primary_agency_name: { name: "Primary agency name" }, + primary_agency_url: { name: "Primary agency url" }, + primary_agency_shortname: { name: "Primary agency shortname" }, + primary_agency_logo_show: { name: "Add primary agency logo" }, + primary_agency_logo: { control: "text", name: "Primary agency logo", control: 'text', if: { arg: 'primary_agency_logo_show' } }, + secondary_agency_show: { name: "Add secondary agency" }, + secondary_agency_name: { name: "Secondary agency name", control: 'text', if: { arg: 'secondary_agency_show' } }, + secondary_agency_logo: { control: "text", name: "Secondary agency logo", control: 'text', if: { arg: 'secondary_agency_show' } }, + secondary_agency_url: { name: "Secondary agency url", control: 'text', if: { arg: 'secondary_agency_show' } }, + secondary_agency_conjunction: { name: "Secondary agency conjunction", control: 'text', if: { arg: 'secondary_agency_show' } }, + taxpayer_show: { name: "Add taxpayer disclaimer"}, + taxpayer: { name: "Taxpayer disclaimer content", control: 'text', if: { arg: 'taxpayer_show' } }, link_about: { name: "Required link - About" }, link_accessibility: { name: "Required link - Accessibility statement" }, link_foia: { name: "Required link - FOIA requests" }, @@ -25,33 +31,25 @@ export default { link_performance: { name: "Required link - Performance reports" }, link_privacy: { name: "Required link - Privacy policy" }, usagov: { name: "USA.gov information" }, - main_aria_label: { name: "Component aria-label" }, + aria_labels: { name: "Aria labels"} }, args: { lang: "en", - main_aria_label: "", - primary_agency: { - name: "[Parent agency]", - shortname: "[Agency shortname]", - url: "javascipt:void(0)", - }, - logo1: "https://designsystem.digital.gov/assets/img/circle-gray-20.svg", - secondary_agency: { - name: "[Other agency]", - url: "javascipt:void(0)", - }, - logo2: "https://designsystem.digital.gov/assets/img/circle-gray-20.svg", - masthead: { - aria_label: "Agency description", - conjunction: "and", - domain: "[domain.gov]", - disclaimer: "An official website of the", - }, - showTaxpayer: false, - taxpayer: "Produced and published at taxpayer expense.", - links_aria_label: "Important links", + domain: "[domain.gov]", + primary_agency_name: "[Parent agency]", + primary_agency_shortname: "[Agency shortname]", + primary_agency_url: "javascipt:void(0)", + primary_agency_logo_show: true, + primary_agency_logo: "https://designsystem.digital.gov/assets/img/circle-gray-20.svg", + secondary_agency_show: false, + secondary_agency_name: "[Other agency]", + secondary_agency_logo: "https://designsystem.digital.gov/assets/img/circle-gray-20.svg", + secondary_agency_url: "javascipt:void(0)", + secondary_agency_conjunction: "", + masthead_disclaimer: "An official website of the", + taxpayer_show: false, + taxpayer: "", link_about: { - shortname: "[Agency shortname]", url: "javascipt:void(0)" }, link_accessibility: { @@ -75,17 +73,28 @@ export default { usagov: { include: false, }, + aria_labels: { + main: "", + links: "", + masthead: "" + } }, render: ({ lang, - primary_agency, - secondary_agency, - logo1, - logo2, - masthead, - showTaxpayer, + primary_agency_name, + primary_agency_url, + primary_agency_shortname, + primary_agency_logo, + primary_agency_logo_show, + secondary_agency_show, + secondary_agency_logo, + secondary_agency_name, + secondary_agency_url, + secondary_agency_conjunction, + domain, + masthead_disclaimer, + taxpayer_show, taxpayer, - links_aria_label, link_about, link_accessibility, link_foia, @@ -94,25 +103,26 @@ export default { link_performance, link_privacy, usagov, - main_aria_label, + aria_labels }) => html` - - ${logo1 ? html` - - ${primary_agency.name} logo + + ${primary_agency_logo_show ? html` + + ${primary_agency_name} logo `: null} - ${logo2 ? html` - - ${secondary_agency.name} logo + ${secondary_agency_show ? html` + + ${secondary_agency_name} logo `: null} -

- ${masthead.disclaimer} - ${primary_agency.name} - ${secondary_agency ? html`${masthead.conjunction} ${secondary_agency.name}`: null}${showTaxpayer ? html`. +

${domain}

+

+ ${masthead_disclaimer} + ${primary_agency_name} + ${secondary_agency_show ? html`${secondary_agency_conjunction} ${secondary_agency_name}`: null}${taxpayer_show ? html`. ${taxpayer}` : null}

-