Web-components: Create usa-identifier web component

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`
+    <usa-identifier aria-label="${main_aria_label}">
+      ${logo1 ? html`
+      <a slot="logo" href="${primary_agency.url}">
+        <img src="${logo1}" alt="${primary_agency.name} logo" />
+      </a>`: null}
+      ${logo2 ? html`
+      <a slot="logo" href="${secondary_agency.url}">
+        <img src="${logo2}" alt="${secondary_agency.name} logo" />
+      </a>`: null}
+      <p slot="disclaimer" aria-label="${masthead.aria_label}">
+        ${masthead.disclaimer}
+        <a href="${primary_agency.url}">${primary_agency.name}</a>
+        ${secondary_agency ? html`${masthead.conjunction} <a href="${secondary_agency.url}">${secondary_agency.name}</a>`: null}${taxpayer ? html`.
+        ${taxpayer}` : null}
+      </p>
+      <nav slot="links" aria-label="${required_links.aria_label}">
+        <a href="">${required_links.about} ${primary_agency.shortname}</a>
+        <a href="">${required_links.accessibility}</a>
+        <a href="">${required_links.foia}</a>
+        <a href="">${required_links.no_FEAR}</a>
+        <a href="">${required_links.oig}</a>
+        <a href="">${required_links.performance}</a>
+        <a href="">${required_links.privacy}</a>
+      </nav>
+      <div slot="usagov">
+        ${usagov.text} <a href="${usagov.link_url}">${usagov.link_label}</a>
+      </div>
+    </usa-identifier>
+  `,
+};
+
+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 = {};

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`
+        <div class="usa-identifier__logos">
+          ${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}`;
+          })}
+        </div>
+      `;
+    }
+  }
+
+  // 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",
+        '<span aria-hidden="true">An</span> official'
+      );
+    }
+
+    if (this.disclaimer || this.domain) {
+      return html`
+        <section
+          class="usa-identifier__identity"
+          aria-label="Agency description"
+        >
+          ${this.domain} ${this.disclaimer}
+        </section>
+      `;
+    }
+  }
+
+  // Render the logos and text in the masthead
+  mastheadTemplate() {
+    if (this.domain || this.disclaimer || this.logos.length > 0) {
+      return html`
+        <section
+          class="usa-identifier__section usa-identifier__section--masthead"
+          aria-label="Agency identifier"
+        >
+          <div class="usa-identifier__container">
+            ${this.mastheadLogosTemplate()} ${this.mastheadTextTemplate()}
+          </div>
+        </section>
+      `;
+    }
+  }
+
+  // Render the list of links
+  linksTemplate() {
+    if (this.links && this.links.length > 0) {
+      return html`
+        <nav
+          class="usa-identifier__section usa-identifier__section--required-links"
+          aria-label="Important links"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__logos">
+              <ul class="usa-identifier__required-links-list">
+                ${this.links.map((link) => {
+                  link.classList.add("usa-identifier__required-link");
+                  return html`<li class="usa-identifier__required-links-item">
+                    ${link}
+                  </li>`;
+                })}
+              </ul>
+            </div>
+          </div>
+        </nav>
+      `;
+    }
+  }
+
+  // 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`
+        <section
+          class="usa-identifier__section usa-identifier__section--usagov"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__usagov-description">${this.usagov}</div>
+          </div>
+        </section>
+      `;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="usa-identifier">
+        ${this.mastheadTemplate()} ${this.linksTemplate()}
+        ${this.usagovTemplate()}
+      </div>
+    `;
+  }
+}
+
+window.customElements.define("usa-identifier", UsaIdentifier);

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"
+}