@noctuatech/uswds 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Noctua Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# USWDS
+
+An implementaiton of the US Web Design System using web components.
+
+https://designsystem.digital.gov/
+
+## Development
+
+### Install
+
+```sh
+npm i
+```
+
+### Run Storybook
+
+```sh
+npm run storybook
+```
+
+### Generate a new element
+
+```sh
+npm run gen element
+```

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@noctuatech/uswds",
+  "version": "0.0.1",
+  "type": "module",
+  "workspaces": [
+    "packages/**"
+  ],
+  "main": "./target/lib.js",
+  "module": "./target/lib.js",
+  "exports": {
+    ".": "./target/lib.js",
+    "./*": "./target/lib/*"
+  },
+  "files": [
+    "src",
+    "target"
+  ],
+  "scripts": {
+    "test": "wireit",
+    "build": "wireit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "wireit",
+    "gen": "plop",
+    "prepare": "husky"
+  },
+  "wireit": {
+    "test": {
+      "command": "wtr",
+      "dependencies": [
+        "tsc"
+      ]
+    },
+    "build": {
+      "dependencies": [
+        "tsc",
+        "build-storybook"
+      ]
+    },
+    "build-storybook": {
+      "command": "storybook build"
+    },
+    "tsc": {
+      "command": "tsc --build --pretty",
+      "clean": "if-file-deleted",
+      "files": [
+        "src/**",
+        "tsconfig.json"
+      ],
+      "output": [
+        "target/**",
+        "tsconfig.tsbuildinfo"
+      ],
+      "dependencies": [
+        "./packages/testing:build"
+      ]
+    }
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@joist/di": "^4.0.0-next.26",
+    "@joist/element": "^4.0.0-next.26",
+    "@joist/observable": "^4.0.0-next.26",
+    "tslib": "2.8.1"
+  },
+  "devDependencies": {
+    "@open-wc/testing": "^4.0.0",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/web-components": "^8.4.4",
+    "@storybook/web-components-vite": "^8.4.4",
+    "@types/mocha": "^10.0.7",
+    "@types/node": "^22.0.0",
+    "@web/test-runner": "^0.19.0",
+    "husky": "^9.0.11",
+    "js-beautify": "^1.15.1",
+    "lint-staged": "^15.2.2",
+    "lit": "^3.2.1",
+    "mocha": "^11.0.0",
+    "plop": "^4.0.1",
+    "prettier": "^3.3.3",
+    "storybook": "^8.4.4",
+    "typescript": "^5.6.3",
+    "wireit": "^0.14.9"
+  },
+  "lint-staged": {
+    "*.{js,ts,css,md}": "prettier --write"
+  }
+}

package/src/lib/alert/alert-types.ts

@@ -0,0 +1,33 @@
+import { USAIcon } from "../icon/icon-types.js";
+
+export const USA_ALERT_TYPES = [
+  "info",
+  "warning",
+  "success",
+  "error",
+  "emergency",
+] as const;
+
+export type USAAlertType = (typeof USA_ALERT_TYPES)[number];
+
+export interface USAAlert {
+  icon: USAIcon;
+}
+
+export const USA_ALERT_CONFIG: Record<USAAlertType, USAAlert> = {
+  info: {
+    icon: "info",
+  },
+  warning: {
+    icon: "warning",
+  },
+  success: {
+    icon: "check_circle",
+  },
+  error: {
+    icon: "error",
+  },
+  emergency: {
+    icon: "error",
+  },
+};

package/src/lib/alert/alert.element.ts

@@ -0,0 +1,105 @@
+import { attr, css, element, html, query } from "@joist/element";
+
+import { USA_ALERT_CONFIG, USAAlertType } from "./alert-types.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-alert": USAAlertElement;
+  }
+}
+
+@element({
+  tagName: "usa-alert",
+  shadowDom: [
+    css`
+      :host {
+        display: block;
+        border-left: 0.5rem solid #adadad;
+        padding: 1rem 1.2rem;
+        color: #1b1b1b;
+        margin-bottom: 1rem;
+      }
+
+      :host([type="info"]) {
+        border-left-color: #00bde3;
+        background-color: #e7f6f8;
+      }
+
+      :host([type="warning"]) {
+        background-color: #faf3d1;
+        border-left-color: #ffbe2e;
+      }
+
+      :host([type="success"]) {
+        background-color: #ecf3ec;
+        border-left-color: #00a91c;
+      }
+
+      :host([type="error"]) {
+        background-color: #f4e3db;
+        border-left-color: #d54309;
+      }
+
+      :host([type="emergency"]) {
+        background-color: #9c3d10;
+        border-left-color: #9c3d10;
+        color: #fff;
+      }
+
+      :host([type="emergency"]) ::slotted(*) {
+        color: #fff;
+      }
+
+      .alert-heading {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+      }
+
+      usa-icon {
+        margin: -0.28rem 0.75rem 0 0;
+      }
+
+      #heading::slotted(*) {
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        font-size: 1.33rem;
+        line-height: 0.9;
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+      }
+    `,
+    html`
+      <div class="alert-heading">
+        <usa-icon icon="check_circle"></usa-icon>
+
+        <div>
+          <slot id="heading" name="heading"></slot>
+        </div>
+
+        <div class="spacer"></div>
+
+        <div>
+          <slot></slot>
+        </div>
+      </div>
+    `,
+  ],
+})
+export class USAAlertElement extends HTMLElement {
+  @attr()
+  accessor type: USAAlertType = "info";
+
+  #icon = query("usa-icon");
+
+  attributeChangedCallback() {
+    const icon = this.#icon();
+
+    icon.icon = USA_ALERT_CONFIG[this.type].icon;
+  }
+}

package/src/lib/alert/alert.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USAAlertElement } from "./alert.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-alert",
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAAlertElement>;
+
+export default meta;
+
+type Story = StoryObj<USAAlertElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  render() {
+    return html`
+      <usa-alert type="info">
+        <h3 slot="heading">Informative status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+
+      <usa-alert type="warning">
+        <h3 slot="heading">Warning status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+
+      <usa-alert type="success">
+        <h3 slot="heading">Success status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+
+      <usa-alert type="error">
+        <h3 slot="heading">Error status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+
+      <usa-alert type="emergency">
+        <h3 slot="heading">Emergency status</h3>
+
+        Lorem ipsum dolor sit amet,&nbsp;
+        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+        eiusmod.
+      </usa-alert>
+    `;
+  },
+};

package/src/lib/alert/alert.test.ts

@@ -0,0 +1,23 @@
+import "./alert.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { USA_ALERT_TYPES } from "./alert-types.js";
+
+describe("usa-alert", () => {
+  for (let alert of USA_ALERT_TYPES) {
+    it(`should be accessible: ${alert}`, async () => {
+      const form = await fixture(html`
+        <usa-alert type=${alert}>
+          <h3 slot="heading">Status</h3>
+
+          Lorem ipsum dolor sit amet,&nbsp;
+          <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
+          eiusmod.
+        </usa-alert>
+      `);
+
+      return assert.isAccessible(form);
+    });
+  }
+});

package/src/lib/button/button.element.ts

@@ -0,0 +1,224 @@
+import { attr, css, element, html, listen, query } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-button": USAButtonElement;
+  }
+}
+
+export const BUTTON_VARIANTS = [
+  "primary",
+  "secondary",
+  "cool",
+  "warm",
+  "outline",
+] as const;
+
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+
+@element({
+  tagName: "usa-button",
+  shadowDom: [
+    css`
+      :host {
+        display: contents;
+      }
+
+      .usa-button {
+        box-sizing: border-box;
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        font-size: 1.06rem;
+        line-height: 0.9;
+        color: white;
+        background-color: #005ea2;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        align-items: center;
+        border: 0;
+        border-radius: 0.25rem;
+        cursor: pointer;
+        -moz-column-gap: 0.5rem;
+        column-gap: 0.5rem;
+        display: inline-flex;
+        font-weight: 700;
+        justify-content: center;
+        padding: 0.75rem 1.25rem;
+        text-align: center;
+        text-decoration: none;
+        width: 100%;
+        cursor: pointer;
+      }
+
+      @media all and (min-width: 30em) {
+        .usa-button {
+          width: auto;
+        }
+      }
+
+      .usa-button:visited {
+        color: white;
+      }
+
+      .usa-button:hover {
+        color: white;
+        background-color: #1a4480;
+        border-bottom: 0;
+        text-decoration: none;
+      }
+
+      .usa-button:active {
+        color: white;
+        background-color: #162e51;
+      }
+
+      .usa-button:not([disabled]):focus {
+        outline-offset: 0.25rem;
+      }
+
+      .usa-button:disabled {
+        color: #454545;
+        background-color: #c9c9c9;
+        cursor: not-allowed;
+        opacity: 1;
+      }
+
+      .usa-button:disabled:hover,
+      .usa-button:disabled:active,
+      .usa-button:disabled:focus {
+        color: #454545;
+        background-color: #c9c9c9;
+      }
+
+      .usa-button:focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+
+      /** Secondary */
+      :host([variant="secondary"]) .usa-button {
+        color: #fff;
+        background-color: #d83933;
+      }
+
+      :host([variant="secondary"]) .usa-button:hover {
+        background-color: #b50909;
+      }
+
+      :host([variant="secondary"]) .usa-button:active {
+        background-color: #8b0a03;
+      }
+
+      /** cool */
+      :host([variant="cool"]) .usa-button {
+        color: #1b1b1b;
+        background-color: #00bde3;
+      }
+
+      :host([variant="cool"]) .usa-button:hover {
+        background-color: #28a0cb;
+      }
+
+      :host([variant="cool"]) .usa-button:active {
+        color: #fff;
+        background-color: #07648d;
+      }
+
+      /** warm */
+      :host([variant="warm"]) .usa-button {
+        color: #1b1b1b;
+        background-color: #fa9441;
+      }
+
+      :host([variant="warm"]) .usa-button:hover {
+        color: #fff;
+        background-color: #c05600;
+      }
+
+      :host([variant="warm"]) .usa-button:active {
+        color: #fff;
+        background-color: #775540;
+      }
+
+      /** outline */
+      :host([variant="outline"]) .usa-button {
+        background-color: transparent;
+        box-shadow: inset 0 0 0 2px #005ea2;
+        color: #005ea2;
+      }
+
+      :host([variant="outline"]) .usa-button:hover {
+        box-shadow: inset 0 0 0 2px #1a4480;
+        color: #1a4480;
+      }
+
+      :host([variant="outline"]) .usa-button:active {
+        box-shadow: inset 0 0 0 2px #162e51;
+        color: #162e51;
+      }
+    `,
+    html`
+      <button class="usa-button">
+        <slot></slot>
+      </button>
+    `,
+  ],
+})
+export class USAButtonElement extends HTMLElement {
+  static formAssociated = true;
+
+  @attr()
+  accessor type: "button" | "submit" | "reset" = "button";
+
+  @attr()
+  accessor disabled = false;
+
+  @attr()
+  accessor variant: ButtonVariant = "primary";
+
+  #internals = this.attachInternals();
+  #button = query("button");
+
+  @listen("keydown", () => document.body)
+  onKeyDown(e: KeyboardEvent) {
+    if (this.type === "submit") {
+      if (e.key.toUpperCase() === "ENTER") {
+        this.#handleForm();
+      }
+    }
+  }
+
+  @listen("click")
+  onInternalClick() {
+    this.#handleForm();
+  }
+
+  attributeChangedCallback() {
+    const button = this.#button();
+    button.type = this.type;
+    button.disabled = this.disabled;
+  }
+
+  #handleForm() {
+    const { form } = this.#internals;
+
+    if (form) {
+      if (this.type === "submit") {
+        const btn = document.createElement("button");
+        btn.type = "submit";
+        form.append(btn);
+
+        btn.click();
+        btn.remove();
+      } else if (this.type === "reset") {
+        form.reset();
+      }
+    }
+  }
+}

package/src/lib/button/button.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { BUTTON_VARIANTS, type USAButtonElement } from "./button.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-button",
+  tags: ["autodocs"],
+  render(args) {
+    return html`
+      <div style="display: inline-flex; flex-direction: column; gap: 1rem">
+        ${BUTTON_VARIANTS.map(
+          (variant, i) =>
+            html`<usa-button variant=${variant}>Hello World</usa-button> ${i ===
+              BUTTON_VARIANTS.length - 1
+                ? ""
+                : "\n\n"}`
+        )}
+      </div>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAButtonElement>;
+
+export default meta;
+
+type Story = StoryObj<USAButtonElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/button/button.test.ts

@@ -0,0 +1,17 @@
+import "./button.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { BUTTON_VARIANTS, USAButtonElement } from "./button.element.js";
+
+describe("usa-button", () => {
+  for (let variant of BUTTON_VARIANTS) {
+    it("should be accessible", async () => {
+      const button = await fixture<USAButtonElement>(html`
+        <usa-button variant=${variant}>Hello World</usa-button>
+      `);
+
+      return assert.isAccessible(button);
+    });
+  }
+});