USWDS - Web components: Beta 2 banner additions

.storybook/preview.js

@@ -20,6 +20,9 @@ import "../storybook/index.css";
 // Documentation overrides.
 import "./index.css";
 
+// USWDS Core props.
+import "../src/core/index.css";
+
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {
   parameters: {

custom-elements.json

@@ -38,7 +38,7 @@
         {
           "kind": "class",
           "description": "",
-          "name": "R",
+          "name": "I",
           "members": [
             {
               "kind": "method",
@@ -54,10 +54,6 @@
               "name": "_actionText",
               "readonly": true
             },
-            {
-              "kind": "method",
-              "name": "svgLock"
-            },
             {
               "kind": "method",
               "name": "domainTemplate",
@@ -67,6 +63,10 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "lockIcon"
+            },
             {
               "kind": "method",
               "name": "httpsTemplate",
@@ -110,7 +110,7 @@
             }
           ],
           "superclass": {
-            "name": "oe",
+            "name": "re",
             "package": "lit"
           },
           "tagName": "usa-banner",
@@ -122,15 +122,15 @@
           "kind": "custom-element-definition",
           "name": "usa-banner",
           "declaration": {
-            "name": "R",
+            "name": "I",
             "module": "dist/components/usa-banner.js"
           }
         },
         {
           "kind": "js",
           "name": "UsaBanner",
           "declaration": {
-            "name": "R",
+            "name": "I",
             "module": "dist/components/usa-banner.js"
           }
         }
@@ -208,6 +208,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/usa-banner/banner.spec.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/usa-banner/banner.stories.js",
@@ -220,21 +226,13 @@
           },
           "default": "{}"
         },
-        {
-          "kind": "variable",
-          "name": "CustomAriaLabel",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ args: { label: \"A custom aria label\", }, }"
-        },
         {
           "kind": "variable",
           "name": "CustomContent",
           "type": {
             "text": "object"
           },
-          "default": "{ args: { bannerText: \"Un site Web officiel du gouvernement américain\", bannerAction: \"Voici comment vous le savez\", domainHeading: \"Les sites Web officiels utilisent\", domainText: \"Un site Web .gov appartient à une organisation gouvernementale officielle aux États-Unis.\", httpsHeading: \"Les sites Web .gov sécurisés utilisent HTTPS\", httpsText: `Un verrou ou (lock) https:// signifie que vous êtes connecté(e) en toute sécurité au site Web .gov. Assurez-vous de ne partager des informations sensibles que sur des sites Web officiels et sécurisés.`, }, render: ({ bannerText, bannerAction, domainHeading, domainText, httpsHeading, httpsText, }) => html` <usa-banner> <span slot=\"banner-text\">${bannerText}</span> <span slot=\"banner-action\">${bannerAction}</span> <span slot=\"domain-heading\">${domainHeading}</span> <span slot=\"domain-text\">${domainText}</span> <span slot=\"https-heading\">${httpsHeading}</span> <span slot=\"https-text\">${httpsText}</span> </usa-banner> `, }"
+          "default": "{ argTypes: { tld: { table: { disable: true } }, lang: { table: { disable: true } }, }, args: { label: \"Un site Web officiel du gouvernement américain\", bannerText: \"Un site Web officiel du gouvernement américain\", bannerAction: \"Voici comment vous le savez\", domainHeading: \"Les sites Web officiels utilisent\", domainText: \"Un site Web .gov appartient à une organisation gouvernementale officielle aux États-Unis.\", httpsHeading: \"Les sites Web .gov sécurisés utilisent HTTPS\", httpsText: `Un <strong>verrou</strong> (<span class=\"usa-banner__icon-lock\" role=\"img\" aria-label=\"Locked padlock icon\"></span>) ou <strong>https://</strong> signifie que vous êtes connecté(e) en toute sécurité au site Web .gov. Assurez-vous de ne partager des informations sensibles que sur des sites Web officiels et sécurisés.`, tld: \"mil\", }, render: ({ label, bannerText, bannerAction, domainHeading, domainText, httpsHeading, httpsText, }) => html` <usa-banner label=${label || nothing}> <span slot=\"banner-text\">${bannerText}</span> <span slot=\"banner-action\">${bannerAction}</span> <span slot=\"domain-heading\">${domainHeading}</span> <span slot=\"domain-text\">${domainText}</span> <span slot=\"https-heading\">${httpsHeading}</span> <span slot=\"https-text\">${unsafeHTML(httpsText)}</span> </usa-banner> `, }"
         },
         {
           "kind": "variable",
@@ -285,14 +283,6 @@
             "module": "src/components/usa-banner/banner.stories.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "CustomAriaLabel",
-          "declaration": {
-            "name": "CustomAriaLabel",
-            "module": "src/components/usa-banner/banner.stories.js"
-          }
-        },
         {
           "kind": "js",
           "name": "CustomContent",
@@ -343,6 +333,50 @@
           "kind": "class",
           "description": "",
           "name": "UsaBanner",
+          "cssProperties": [
+            {
+              "description": "Sets banner background color.",
+              "name": "--theme-banner-background-color"
+            },
+            {
+              "description": "Sets banner font family.",
+              "name": "--theme-banner-font-family"
+            },
+            {
+              "description": "Sets the default link color.",
+              "name": "--theme-banner-link-color"
+            },
+            {
+              "description": "Sets the default link color.",
+              "name": "--theme-banner-link-hover-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The text for official government website text.",
+              "name": "banner-text"
+            },
+            {
+              "description": "Action text label \"Here's how you know.\"",
+              "name": "banner-action"
+            },
+            {
+              "description": "Heading text for the domain section.",
+              "name": "domain-heading"
+            },
+            {
+              "description": "Body text for domain section.",
+              "name": "domain-text"
+            },
+            {
+              "description": "Heading for HTTPs section.",
+              "name": "https-heading"
+            },
+            {
+              "description": "Body text for HTTPs section.",
+              "name": "https-text"
+            }
+          ],
           "members": [
             {
               "kind": "method",
@@ -358,10 +392,6 @@
               "name": "_actionText",
               "readonly": true
             },
-            {
-              "kind": "method",
-              "name": "svgLock"
-            },
             {
               "kind": "method",
               "name": "domainTemplate",
@@ -371,6 +401,10 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "lockIcon"
+            },
             {
               "kind": "method",
               "name": "httpsTemplate",
@@ -388,7 +422,8 @@
                 "text": "string"
               },
               "default": "\"en\"",
-              "attribute": "lang"
+              "attribute": "lang",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -438,46 +473,50 @@
           ],
           "attributes": [
             {
-              "name": "lang",
               "type": {
                 "text": "string"
               },
+              "description": "The element's language.",
+              "name": "lang",
               "default": "\"en\"",
               "fieldName": "lang"
             },
             {
-              "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "isOpen"
-            },
-            {
-              "name": "classes",
-              "fieldName": "classes"
-            },
-            {
-              "name": "label",
               "type": {
                 "text": "string"
               },
+              "description": "The custom aria label users can override.",
+              "name": "label",
               "fieldName": "label"
             },
             {
-              "name": "tld",
               "type": {
                 "text": "string"
               },
+              "description": "The top level domain for the site.",
+              "name": "tld",
               "default": "\"gov\"",
               "fieldName": "tld"
+            },
+            {
+              "name": "isOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "isOpen"
+            },
+            {
+              "name": "classes",
+              "fieldName": "classes"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
           "tagName": "usa-banner",
+          "summary": "The usa-banner component.",
           "customElement": true
         }
       ],
@@ -510,7 +549,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[ unsafeCSS(usaBannerStyle), css` * { box-sizing: border-box; } .usa-banner__inner { flex-wrap: nowrap; } .usa-accordion__button { cursor: pointer; } `, //* In USWDS close icon is set via max-width media query, flipped it here. css` .usa-banner__button::after, .usa-banner__header-action::after { background-image: url(${unsafeCSS(expandMore)}); mask-image: url(${unsafeCSS(expandMore)}); } .usa-banner__button[aria-expanded=\"true\"]::after { background-image: url(${unsafeCSS(close)}); mask-image: url(${unsafeCSS(close)}); } @media all and (min-width: 40em) { .usa-banner__button[aria-expanded=\"true\"]::after { background-image: url(${unsafeCSS(expandLess)}); mask-image: url(${unsafeCSS(expandLess)}); } } `, ]"
+          "default": "[ unsafeCSS(usaBannerStyle), css` :host { --theme-banner-background-color: var(--usa-base-lightest, #f0f0f0); --theme-banner-font-family: var(--usa-font-ui, system-ui, sans-serif); --theme-banner-link-color: var(--theme-link-color, #005ea2); --theme-banner-link-color-hover: var(--theme-link-hover-color, #1a4480); // Missing theme-banner-max-width because we can't pass custom property to media queries. } * { box-sizing: border-box; } .usa-banner { background-color: var(--theme-banner-background-color); font-family: var(--theme-banner-font-family); } .usa-banner__inner { flex-wrap: nowrap; } /* Allows banner action to inherit font variable. */ .usa-banner .usa-accordion { font-family: inherit; } .usa-banner__button { color: var(--theme-banner-link-color); cursor: pointer; font-family: inherit; } .usa-banner__button:hover { color: var(--theme-banner-link-hover-color); } /* In USWDS close icon is set via max-width media query, flipped it here. */ .usa-banner__button::after, .usa-banner__header-action::after { background-image: url(\"${unsafeCSS(expandMore)}\"); mask-image: url(\"${unsafeCSS(expandMore)}\"); } .usa-banner__button[aria-expanded=\"true\"]::after { background-image: url(\"${unsafeCSS(close)}\"); mask-image: url(\"${unsafeCSS(close)}\"); } /** * HTTPS section lock icon. * * Rewrote styles to avoid reliance of SASS mixins & functions. * * Height and width taken from calculated output in USWDS 3 banner. */ .usa-banner__icon-lock { background-image: url(\"${unsafeCSS(lock)}\"); background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; height: 1.5ex; mask-image: url(\"${unsafeCSS(lock)}\"); mask-position: center; mask-repeat: no-repeat; mask-size: cover; vertical-align: middle; width: 1.21875ex; } @media all and (min-width: 40em) { .usa-banner__button[aria-expanded=\"true\"]::after { background-image: url(\"${unsafeCSS(expandLess)}\"); mask-image: url(\"${unsafeCSS(expandLess)}\"); } } `, ]"
         }
       ],
       "exports": [

eslint.config.js

@@ -1,4 +1,15 @@
 import js from "@eslint/js";
 import eslintConfigPrettierRecommended from "eslint-config-prettier";
+import vitest from "vitest";
 
-export default [js.configs.recommended, eslintConfigPrettierRecommended];
+export default [
+  js.configs.recommended,
+  eslintConfigPrettierRecommended,
+  {
+    files: ["**/*.spec.js"],
+    plugins: { vitest },
+    rules: {
+      ...vitest.configs.recommended.rules,
+    },
+  },
+];