@noctuatech/uswds 0.0.1

package/src/lib/checkbox/checkbox.element.ts

@@ -0,0 +1,166 @@
+import { attr, css, element, html, listen, query } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-checkbox": USACheckboxElement;
+  }
+}
+
+@element({
+  tagName: "usa-checkbox",
+  shadowDom: [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: inline-block;
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+      }
+
+      :host([tiled]) label {
+        background-color: #fff;
+        border: 2px solid #c9c9c9;
+        border-radius: 0.25rem;
+        color: #1b1b1b;
+        padding: 0.75rem 1rem 0.75rem 0.75rem;
+      }
+
+      label {
+        display: inline-flex;
+        cursor: pointer;
+        font-size: 1.06rem;
+        line-height: 1.3;
+        flex-wrap: wrap;
+      }
+
+      .checkbox {
+        background: #fff;
+        box-shadow: 0 0 0 2px #1b1b1b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 1.25rem;
+        width: 1.25rem;
+        border-radius: 2px;
+        position: relative;
+        margin-right: 0.75rem;
+      }
+
+      input:checked + .checkbox {
+        background-color: #005ea2;
+        box-shadow: 0 0 0 2px #005ea2;
+      }
+
+      input:checked + .checkbox::after {
+        content: " ";
+        display: block;
+        height: 1rem;
+        width: 0.5rem;
+        border-right: 4px solid rgb(255, 255, 255);
+        border-bottom: 4px solid rgb(255, 255, 255);
+        transform: rotate(45deg) scale(0.65);
+      }
+
+      input {
+        height: 0;
+        width: 0;
+        position: absolute;
+        left: -999em;
+        right: auto;
+      }
+
+      input:focus + .checkbox {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0.25rem;
+      }
+
+      .description {
+        display: block;
+        font-size: 0.93rem;
+        margin-top: 0.5rem;
+      }
+
+      .break {
+        flex-basis: 100%;
+        height: 0;
+      }
+
+      .spacer {
+        height: 1.25rem;
+        width: 1.25rem;
+        margin-right: 0.75rem;
+      }
+
+      :host([tiled]) label:has(input:checked) {
+        background-color: rgba(0, 94, 162, 0.1);
+        border-color: #005ea2;
+      }
+    `,
+    html`
+      <label>
+        <input type="checkbox" />
+
+        <div class="checkbox"></div>
+
+        <div class="title">
+          <slot></slot>
+        </div>
+      </label>
+    `,
+  ],
+})
+export class USACheckboxElement extends HTMLElement {
+  static formAssociated = true;
+
+  @attr()
+  accessor checked = false;
+
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor value = "";
+
+  @attr()
+  accessor tiled = false;
+
+  #checkbox = query("input");
+  #internals = this.attachInternals();
+
+  connectedCallback() {
+    const checkbox = this.#checkbox();
+
+    if (this.checked) {
+      this.#internals.setFormValue(this.value);
+    }
+
+    checkbox.checked = this.checked;
+    checkbox.name = this.name;
+  }
+
+  attributeChangedCallback() {
+    const checkbox = this.#checkbox();
+
+    checkbox.checked = this.checked;
+    checkbox.name = this.name;
+  }
+
+  @listen("change", "input[type=checkbox]")
+  onCheckboxChange() {
+    const checkbox = this.#checkbox();
+
+    if (checkbox.checked) {
+      this.#internals.setFormValue(this.value);
+    } else {
+      this.#internals.setFormValue(null);
+    }
+  }
+}

package/src/lib/checkbox/checkbox.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
+
+import type { USACheckboxElement } from "./checkbox.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-checkbox",
+  tags: ["autodocs"],
+  render(args) {
+    return html`
+      <usa-checkbox
+        name=${args.name}
+        value=${ifDefined(args.value)}
+        checked=${ifDefined(args.checked)}
+        ?tiled=${args.tiled}
+      >
+        Hello World
+        ${when(
+          args.description,
+          () => html`<usa-description>${args.description}</usa-description>`
+        )}
+      </usa-checkbox>
+    `;
+  },
+  argTypes: {
+    name: {
+      control: "text",
+    },
+    value: {
+      control: "text",
+    },
+    description: {
+      control: "text",
+    },
+    tiled: {
+      control: "boolean",
+    },
+  },
+  args: {
+    name: "toc",
+    value: "agree",
+    tiled: false,
+  },
+} satisfies Meta<USACheckboxElement & { description: string }>;
+
+export default meta;
+
+type Story = StoryObj<USACheckboxElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/checkbox/checkbox.test.ts

@@ -0,0 +1,47 @@
+import "./checkbox.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+describe("usa-checkbox", () => {
+  it("should be accessible", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <usa-checkbox name="fname" value="Foo">Hello World</usa-checkbox>
+    `);
+
+    return assert.isAccessible(form);
+  });
+
+  it("should submit form with default values", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-checkbox name="enabled" value="test" checked>
+          Hello World
+        </usa-checkbox>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const value = new FormData(form);
+
+    assert.equal(value.get("enabled"), "test");
+  });
+
+  it("should update form value as input value changed", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-checkbox name="enabled" value="test">Hello World</usa-checkbox>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const checkbox = form.querySelector("usa-checkbox")!;
+    const nativeInput = checkbox.shadowRoot!.querySelector("input")!;
+    nativeInput.click();
+
+    const value = new FormData(form);
+
+    assert.equal(value.get("enabled"), "test");
+  });
+});

package/src/lib/config/config.element.ts

@@ -0,0 +1,31 @@
+import { inject, injectable, Injector } from "@joist/di";
+import { attr, css, element, html } from "@joist/element";
+
+export class USAConfig {
+  spriteSheet = "";
+}
+
+@element({
+  tagName: "usa-config",
+  shadowDom: [
+    css`
+      :host {
+        display: contents;
+      }
+    `,
+    html`<slot></slot>`,
+  ],
+})
+@injectable()
+export class USAConfigElement extends HTMLElement implements USAConfig {
+  @attr()
+  accessor spriteSheet = "/assets/img/sprite.svg";
+
+  #injector = inject(Injector);
+
+  connectedCallback() {
+    const { providers } = this.#injector();
+
+    providers.push({ provide: USAConfig, factory: () => this });
+  }
+}

package/src/lib/config/config.test.ts

@@ -0,0 +1,15 @@
+import "./config.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { USAConfigElement } from "./config.element.js";
+
+describe("usa-config", () => {
+  it("should be accessible", async () => {
+    const config = await fixture<USAConfigElement>(html`
+      <usa-config>Hello World</usa-config>
+    `);
+
+    return assert.isAccessible(config);
+  });
+});

package/src/lib/define.ts

@@ -0,0 +1,14 @@
+import "./config/config.element.js";
+import "./alert/alert.element.js";
+import "./button/button.element.js";
+import "./checkbox/checkbox.element.js";
+import "./description/description.element.js";
+import "./file-input/file-input-preview.element.js";
+import "./icon/icon.element.js";
+import "./input/input.element.js";
+import "./input-mask/input-mask.element.js";
+import "./link/link.element.js";
+import "./radio/radio.element.js";
+import "./radio/radio-option.element.js";
+import "./select/select-option.element.js";
+import "./tag/tag.element.js";

package/src/lib/description/description.element.ts

@@ -0,0 +1,22 @@
+import { css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-description": USADescriptionElement;
+  }
+}
+
+@element({
+  tagName: "usa-description",
+  shadowDom: [
+    css`
+      :host {
+        display: block;
+        font-size: 0.93rem;
+        margin-top: 0.5rem;
+      }
+    `,
+    html` <slot></slot> `,
+  ],
+})
+export class USADescriptionElement extends HTMLElement {}

package/src/lib/description/description.test.ts

@@ -0,0 +1,15 @@
+import "./description.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { USADescriptionElement } from "./description.element.js";
+
+describe("usa-description", () => {
+  it("should be accessible", async () => {
+    const description = await fixture<USADescriptionElement>(html`
+      <usa-description>Hello World</usa-description>
+    `);
+
+    return assert.isAccessible(description);
+  });
+});

package/src/lib/file-input/file-input-preview.element.ts

@@ -0,0 +1,121 @@
+import { css, element, html, query } from "@joist/element";
+import { effect, observe } from "@joist/observable";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-file-input-preview": USAFileInputPreviewElement;
+  }
+}
+
+@element({
+  tagName: "usa-file-input-preview",
+  shadowDom: [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        font-size: 0.87rem;
+        pointer-events: none;
+        position: relative;
+        text-align: left;
+        word-wrap: anywhere;
+        z-index: 3;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      img {
+        border: 0;
+        display: block;
+        height: 2.5rem;
+        margin-right: 0.5rem;
+        -o-object-fit: contain;
+        object-fit: contain;
+        width: 2.5rem;
+      }
+
+      .preview-heading {
+        align-items: center;
+        background: #d9e8f6;
+        display: flex;
+        pointer-events: none;
+        position: relative;
+        z-index: 3;
+        font-weight: 700;
+        justify-content: space-between;
+        padding: 0.5rem;
+        text-align: left;
+      }
+
+      .preview-item {
+        align-items: center;
+        background: #d9e8f6;
+        display: flex;
+        padding: 0.5rem;
+        width: 100%;
+        margin-top: 1px;
+      }
+    `,
+    html`<slot class="preview-heading"></slot>`,
+  ],
+})
+export class USAFileInputPreviewElement extends HTMLElement {
+  @observe()
+  accessor files: FileList | null = null;
+
+  #items = new Map<string, HTMLElement>();
+
+  connectedCallback() {
+    this.onChange();
+  }
+
+  @effect()
+  onChange() {
+    if (this.files) {
+      this.hidden = false;
+
+      let names = new Set<string>();
+
+      for (let file of this.files) {
+        names.add(file.name);
+
+        if (!this.#items.has(file.name)) {
+          const item = document.createElement("div");
+          item.id = file.name;
+          item.className = "preview-item";
+
+          const img = createImagePreview(file);
+
+          item.append(img, document.createTextNode(file.name));
+
+          this.shadowRoot!.append(item);
+          this.#items.set(file.name, item);
+        }
+      }
+
+      for (let [name, item] of this.#items) {
+        if (!names.has(name)) {
+          item.remove();
+          this.#items.delete(name);
+        }
+      }
+    } else {
+      this.hidden = true;
+    }
+  }
+}
+
+function createImagePreview(file: File) {
+  const img = new Image();
+  img.height = 40;
+  img.width = 40;
+  img.src = URL.createObjectURL(file);
+  img.ariaHidden = "true";
+
+  return img;
+}

package/src/lib/file-input/file-input-preview.test.ts

@@ -0,0 +1,95 @@
+import "./file-input-preview.element.js";
+import "../link/link.element.js";
+
+import { assert, fixture, html } from "@open-wc/testing";
+
+import { USAFileInputPreviewElement } from "./file-input-preview.element.js";
+
+describe("usa-file-input-preview", () => {
+  it("should be accessible with no files", async () => {
+    const fileInputPreview = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    return assert.isAccessible(fileInputPreview);
+  });
+
+  it("should be accessible with files", async () => {
+    const data = new DataTransfer();
+    data.items.add(new File([], "image1.jpg"));
+    data.items.add(new File([], "image2.jpg"));
+
+    const fileInputPreview = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview .files=${data.files}>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    return assert.isAccessible(fileInputPreview);
+  });
+
+  it("should display file preview for images", async () => {
+    const data = new DataTransfer();
+    data.items.add(new File([], "image1.jpg"));
+    data.items.add(new File([], "image2.jpg"));
+
+    const { shadowRoot } = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview .files=${data.files}>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    const previewItems = Array.from(
+      shadowRoot!.querySelectorAll(".preview-item")
+    ).map((item) => item.textContent);
+
+    assert.deepEqual(previewItems, ["image1.jpg", "image2.jpg"]);
+  });
+
+  it("should display fewer previews when the number of items decreases", async () => {
+    const data = new DataTransfer();
+    data.items.add(new File([], "image1.jpg"));
+    data.items.add(new File([], "image2.jpg"));
+
+    const fileInputPreview = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview .files=${data.files}>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    const data2 = new DataTransfer();
+    data2.items.add(new File([], "image1.jpg"));
+
+    fileInputPreview.files = data2.files;
+
+    // need this to wait for effects to resolve
+    await Promise.resolve();
+
+    const previewItems = Array.from(
+      fileInputPreview.shadowRoot!.querySelectorAll(".preview-item")
+    ).map((item) => item.textContent);
+
+    assert.deepEqual(previewItems, ["image1.jpg"]);
+  });
+
+  it("should create preview images for each file", async () => {
+    const data = new DataTransfer();
+    data.items.add(new File(["Image1"], "image1.jpg"));
+    data.items.add(new File(["Image2"], "image2.jpg"));
+
+    const { shadowRoot } = await fixture<USAFileInputPreviewElement>(html`
+      <usa-file-input-preview .files=${data.files}>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `);
+
+    const [first, second] = Array.from(
+      shadowRoot!.querySelectorAll<HTMLImageElement>(".preview-item img")
+    ).map((item) => item.src.substring(29));
+
+    // we are just testing that the two hashes are in fact different
+    assert.isFalse(first === second);
+  });
+});