Web-components: Create usa-identifier web component
#21
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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} | ||
|
There was a problem hiding this comment. Seeing slot here, I'd expect to see Example <!-- Our template - [`identifier/index.js`] -->
<slot name="logo"></slot>
<!-- User overrides in markup -->
<span slot="logo">
<img src="logo-1.svg" />
<img src="logo-2.svg" />
<img src="logo-3.svg" />
</span> |
||
| ${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}"> | ||
|
amyleadem marked this conversation as resolved.
Outdated
|
||
| <a href="">${required_links.about} ${primary_agency.shortname}</a> | ||
|
amyleadem marked this conversation as resolved.
Outdated
|
||
| <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 = { | ||
|
amyleadem marked this conversation as resolved.
Outdated
|
||
| 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 = {}; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 { | ||
|
There was a problem hiding this comment. Lit recommends using component props as input. Source → We should leverage reactive props if we're able to for defaults / configurable settings. |
||
| 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> | ||
| `; | ||
| } | ||
| } | ||
|
amyleadem marked this conversation as resolved.
Outdated
|
||
|
|
||
| render() { | ||
| return html` | ||
| <div class="usa-identifier"> | ||
| ${this.mastheadTemplate()} ${this.linksTemplate()} | ||
| ${this.usagovTemplate()} | ||
| </div> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| window.customElements.define("usa-identifier", UsaIdentifier); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.