From 243443be8b793cbadd2b3455b3aacc7c20f68a84 Mon Sep 17 00:00:00 2001 From: Matt Henry Date: Tue, 14 May 2024 13:15:48 -0400 Subject: [PATCH 01/40] add banner markup & sass --- web-components/index.html | 3 +- .../src/components/usa-banner/index.js | 116 ++++++++++++++++++ web-components/vite.config.js | 7 ++ 3 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 web-components/src/components/usa-banner/index.js diff --git a/web-components/index.html b/web-components/index.html index e368772b..cf08a651 100644 --- a/web-components/index.html +++ b/web-components/index.html @@ -6,7 +6,7 @@ USWDS + Lit - + @@ -25,7 +28,29 @@ It's dangerous to go alone. Here, take this. -

Identifier - Minimal markup

+

Minimal markup - one logo

+ + + + General Services Administration logo + +

designsystem.digital.gov

+

An official website of the General Services Administration

+ +
Looking for U.S. government information and services? Visit USA.gov
+ + +

Minimal markup - two logos

@@ -33,6 +58,29 @@

Identifier - Minimal markup

src="https://designsystem.digital.gov/img/gsa-logo.svg" alt="General Services Administration logo"/> + + General Services Administration logo + +

designsystem.digital.gov

+

An official website of the General Services Administration

+ +
Looking for U.S. government information and services? Visit USA.gov
+ + + +

Minimal markup - no logos

+ +

designsystem.digital.gov

An official website of the General Services Administration

-
+
-
- ${this.usagov} -
+
${this.usagov}
@@ -102,4 +107,4 @@ export class UsaIdentifier extends LitElement { } } -window.customElements.define('usa-identifier', UsaIdentifier); +window.customElements.define("usa-identifier", UsaIdentifier); From 516a6debc8609b3bebce7f47f02a80998117665d Mon Sep 17 00:00:00 2001 From: amyleadem Date: Fri, 14 Jun 2024 14:33:11 -0700 Subject: [PATCH 37/40] Update display styles for usagov-description --- .../src/components/usa-identifier/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js index 13668faa..aec669a2 100644 --- a/web-components/src/components/usa-identifier/index.js +++ b/web-components/src/components/usa-identifier/index.js @@ -1,9 +1,17 @@ -import { LitElement, html, unsafeCSS } from "lit"; +import { LitElement, html, unsafeCSS, css } 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)]; + static styles = [ + unsafeCSS(usaIdentifierStyle), + unsafeCSS(uswdsCoreStyle), + css` + .usa-identifier__usagov-description { + display: block; + } + `, + ]; connectedCallback() { super.connectedCallback(); From 21bf54b49e5f5430ec2307a9f80103a3b3751963 Mon Sep 17 00:00:00 2001 From: amyleadem Date: Fri, 14 Jun 2024 16:03:03 -0700 Subject: [PATCH 38/40] Format render code for docs --- .../usa-identifier/identifier.stories.js | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/web-components/src/components/usa-identifier/identifier.stories.js b/web-components/src/components/usa-identifier/identifier.stories.js index 9bd3d6d3..b4427bcf 100644 --- a/web-components/src/components/usa-identifier/identifier.stories.js +++ b/web-components/src/components/usa-identifier/identifier.stories.js @@ -63,24 +63,19 @@ export default { main_aria_label, }) => html` -

${masthead.domain}

- ${logo1 - ? html` - ${primary_agency.name} logo - ` - : null} - ${logo2 - ? html` - ${secondary_agency.name} logo - ` - : null} + ${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} + ${secondary_agency ? html`${masthead.conjunction} ${secondary_agency.name}`: null}${taxpayer ? html`. + ${taxpayer}` : null}

+ `; + } + } + + // 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`
@@ -110,6 +139,16 @@ export class UsaIdentifier extends LitElement {
${this.usagov}
+ `; + } + } + + render() { + return html` +
+ ${this.mastheadTemplate()} + ${this.linksTemplate()} + ${this.usagovTemplate()}
`; } From e7aa5f77d3a3e9c5dc8cd3a0023427825225fa5f Mon Sep 17 00:00:00 2001 From: amyleadem Date: Fri, 14 Jun 2024 16:35:38 -0700 Subject: [PATCH 40/40] Run prettier --- .../src/components/usa-identifier/index.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js index 20a8787b..0504602a 100644 --- a/web-components/src/components/usa-identifier/index.js +++ b/web-components/src/components/usa-identifier/index.js @@ -27,14 +27,14 @@ export class UsaIdentifier extends LitElement { 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}`; - })} -
+
+ ${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}`; + })} +
`; } } @@ -146,8 +146,7 @@ export class UsaIdentifier extends LitElement { render() { return html`
- ${this.mastheadTemplate()} - ${this.linksTemplate()} + ${this.mastheadTemplate()} ${this.linksTemplate()} ${this.usagovTemplate()}
`;