@noctuatech/uswds 0.0.36 → 0.1.2

package/src/lib/combo-box/combo-box.stories.ts

@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USAComboBoxElement } from "./combo-box.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-combo-box",
+  tags: ["autodocs"],
+  render() {
+    return html`
+      <usa-combo-box>
+        <usa-input
+          placeholder="Select a state"
+          name="state" 
+          slot="input" 
+          autocomplete="off" 
+          detail="sfx">
+          States
+          <usa-icon slot="detail" icon="expand_more"></usa-icon>
+        </usa-input>
+
+        <usa-combo-box-option value="Alabama">
+          <img src="/assets/flags/alabama.svg" alt="Alabama" height="20" /> Alabama
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Alaska">
+          <img src="/assets/flags/alaska.svg" alt="Alaska" height="20" /> Alaska
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Arizona">
+          <img src="/assets/flags/arizona.svg" alt="Arizona" height="20" /> Arizona
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Arkansas">
+          <img src="/assets/flags/arkansas.svg" alt="Arkansas" height="20" /> Arkansas
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="California">
+          <img src="/assets/flags/california.svg" alt="California" height="20" /> California
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Colorado">
+          <img src="/assets/flags/colorado.svg" alt="Colorado" height="20" /> Colorado
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Connecticut">
+          <img src="/assets/flags/connecticut.svg" alt="Connecticut" height="20" /> Connecticut
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Delaware">
+          <img src="/assets/flags/delaware.svg" alt="Delaware" height="20" /> Delaware
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Florida">
+          <img src="/assets/flags/florida.svg" alt="Florida" height="20" /> Florida
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Georgia">
+          <img src="/assets/flags/georgia.svg" alt="Georgia" height="20" /> Georgia
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Hawaii">
+          <img src="/assets/flags/hawaii.svg" alt="Hawaii" height="20" /> Hawaii
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Idaho">
+          <img src="/assets/flags/idaho.svg" alt="Idaho" height="20" /> Idaho
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Illinois">
+          <img src="/assets/flags/illinois.svg" alt="Illinois" height="20" /> Illinois
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Indiana">
+          <img src="/assets/flags/indiana.svg" alt="Indiana" height="20" /> Indiana
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Iowa">
+          <img src="/assets/flags/iowa.svg" alt="Iowa" height="20" /> Iowa
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Kansas">
+          <img src="/assets/flags/kansas.svg" alt="Kansas" height="20" /> Kansas
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Kentucky">
+          <img src="/assets/flags/kentucky.svg" alt="Kentucky" height="20" /> Kentucky
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Louisiana">
+          <img src="/assets/flags/louisiana.svg" alt="Louisiana" height="20" /> Louisiana
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Maine">
+          <img src="/assets/flags/maine.svg" alt="Maine" height="20" /> Maine
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Maryland">
+          <img src="/assets/flags/maryland.svg" alt="Maryland" height="20" /> Maryland
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Massachusetts">
+          <img src="/assets/flags/massachusetts.svg" alt="Massachusetts" height="20" /> Massachusetts
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Michigan">
+          <img src="/assets/flags/michigan.svg" alt="Michigan" height="20" /> Michigan
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Minnesota">
+          <img src="/assets/flags/minnesota.svg" alt="Minnesota" height="20" /> Minnesota
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Mississippi">
+          <img src="/assets/flags/mississippi.svg" alt="Mississippi" height="20" /> Mississippi
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Missouri">
+          <img src="/assets/flags/missouri.svg" alt="Missouri" height="20" /> Missouri
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Montana">
+          <img src="/assets/flags/montana.svg" alt="Montana" height="20" /> Montana
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Nebraska">
+          <img src="/assets/flags/nebraska.svg" alt="Nebraska" height="20" /> Nebraska
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Nevada">
+          <img src="/assets/flags/nevada.svg" alt="Nevada" height="20" /> Nevada
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="New Hampshire">
+          <img src="/assets/flags/new_hampshire.svg" alt="New Hampshire" height="20" /> New Hampshire
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="New Jersey">
+          <img src="/assets/flags/new_jersey.svg" alt="New Jersey" height="20" /> New Jersey
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="New Mexico">
+          <img src="/assets/flags/new_mexico.svg" alt="New Mexico" height="20" /> New Mexico
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="New York">
+          <img src="/assets/flags/new_york.svg" alt="New York" height="20" /> New York
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="North Carolina">
+          <img src="/assets/flags/north_carolina.svg" alt="North Carolina" height="20" /> North Carolina
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="North Dakota">
+          <img src="/assets/flags/north_dakota.svg" alt="North Dakota" height="20" /> North Dakota
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Ohio">
+          <img src="/assets/flags/ohio.svg" alt="Ohio" height="20" /> Ohio
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Oklahoma">
+          <img src="/assets/flags/oklahoma.svg" alt="Oklahoma" height="20" /> Oklahoma
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Oregon">
+          <img src="/assets/flags/oregon.svg" alt="Oregon" height="20" /> Oregon
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Pennsylvania">
+          <img src="/assets/flags/pennsylvania.svg" alt="Pennsylvania" height="20" /> Pennsylvania
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Rhode Island">
+          <img src="/assets/flags/rhode_island.svg" alt="Rhode Island" height="20" /> Rhode Island
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="South Carolina">
+          <img src="/assets/flags/south_carolina.svg" alt="South Carolina" height="20" /> South Carolina
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="South Dakota">
+          <img src="/assets/flags/south_dakota.svg" alt="South Dakota" height="20" /> South Dakota
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Tennessee">
+          <img src="/assets/flags/tennessee.svg" alt="Tennessee" height="20" /> Tennessee
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Texas">
+          <img src="/assets/flags/texas.svg" alt="Texas" height="20" /> Texas
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Utah">
+          <img src="/assets/flags/utah.svg" alt="Utah" height="20" /> Utah
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Vermont">
+          <img src="/assets/flags/vermont.svg" alt="Vermont" height="20" /> Vermont
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Virginia">
+          <img src="/assets/flags/virginia.svg" alt="Virginia" height="20" /> Virginia
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Washington">
+          <img src="/assets/flags/washington.svg" alt="Washington" height="20" /> Washington
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="West Virginia">
+          <img src="/assets/flags/west_virginia.svg" alt="West Virginia" height="20" /> West Virginia
+        </usa-combo-box-option>
+
+        <usa-combo-box-option value="Wisconsin">
+          <img src="/assets/flags/wisconsin.svg" alt="Wisconsin" height="20" /> Wisconsin
+        </usa-combo-box-option>
+        
+        <usa-combo-box-option value="Wyoming">
+          <img src="/assets/flags/wyoming.svg" alt="Wyoming" height="20" /> Wyoming
+        </usa-combo-box-option>
+      </usa-combo-box>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAComboBoxElement>;
+
+export default meta;
+
+type Story = StoryObj<USAComboBoxElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/combo-box/combo-box.test.ts

@@ -0,0 +1,150 @@
+import "./combo-box.element.js";
+import "./combo-box-option/combo-box-option.element.js";
+import "../input/input.element.js";
+
+import { assert, fixture, html } from "@open-wc/testing";
+
+import type { USATextInputElement } from "../input/input.element.js";
+import type { USAComboBoxElement } from "./combo-box.element.js";
+
+describe("usa-combo-box", () => {
+  let autocomplete: USAComboBoxElement;
+  let input: USATextInputElement;
+
+  beforeEach(async () => {
+    autocomplete = await fixture<USAComboBoxElement>(html`
+      <usa-combo-box>
+        <usa-input slot="input" name="search"></usa-input>
+
+        <usa-combo-box-option value="Apple"></usa-combo-box-option>
+        <usa-combo-box-option value="Banana"></usa-combo-box-option>
+        <usa-combo-box-option value="Blueberry"></usa-combo-box-option>
+        <usa-combo-box-option value="Cherry"></usa-combo-box-option>
+      </usa-combo-box>
+    `);
+
+    const inputElement = autocomplete.querySelector("usa-input");
+
+    if (!inputElement) {
+      throw new Error("Input element not found");
+    }
+
+    input = inputElement;
+  });
+
+  it("should filter items based on input", async () => {
+    input.value = "b";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    const suggestions = autocomplete.listItems();
+
+    assert.equal(suggestions.length, 2);
+    assert.equal(suggestions[0].dataset.value, "Banana");
+    assert.equal(suggestions[1].dataset.value, "Blueberry");
+  });
+
+  it("should show all suggestions when input is empty", async () => {
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    const suggestions = autocomplete.listItems();
+    assert.equal(suggestions.length, 4);
+  });
+
+  it("should handle case-insensitive search", async () => {
+    input.value = "B";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    const suggestions = autocomplete.listItems();
+    assert.equal(suggestions.length, 2);
+    assert.equal(suggestions[0].dataset.value, "Banana");
+    assert.equal(suggestions[1].dataset.value, "Blueberry");
+  });
+
+  it("should navigate suggestions with arrow keys", async () => {
+    // select item from list
+    input.value = "b";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    // Arrow down
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    );
+    assert.equal(
+      autocomplete.currentItemEl?.getAttribute("data-value"),
+      "Banana",
+    );
+
+    // Arrow down again
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    );
+    assert.equal(
+      autocomplete.currentItemEl?.getAttribute("data-value"),
+      "Blueberry",
+    );
+  });
+
+  it("should select suggestion with enter key", async () => {
+    input.value = "b";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    // Navigate to first suggestion
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    );
+
+    // Select suggestion
+    const firstSuggestion = autocomplete.listItems()[0];
+
+    firstSuggestion?.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+    );
+
+    assert.equal(input.value, "Banana");
+    assert.equal(autocomplete.list().innerHTML, "");
+  });
+
+  it("should focus back on the input if no other items", async () => {
+    input.value = "b";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    );
+
+    // Try to go up from first suggestion
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true }),
+    );
+
+    assert.equal(autocomplete.currentItemEl, null);
+  });
+
+  it("should not go below last suggestion with arrow down", async () => {
+    input.value = "b";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    // Navigate to last suggestion
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    );
+
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    );
+
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    );
+
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    );
+
+    assert.equal(
+      autocomplete.currentItemEl?.getAttribute("data-value"),
+      "Blueberry",
+    );
+  });
+});

package/src/lib/combo-box/context.ts

@@ -0,0 +1,10 @@
+import { StaticToken } from "@joist/di";
+
+export interface ComboBoxContainer extends Node {
+  addOption(el: HTMLLIElement): void;
+  removeOption(el: HTMLLIElement): void;
+}
+
+export const COMBO_BOX_CTX = new StaticToken<ComboBoxContainer>(
+  "COMBO_BOX_CTX",
+);

package/src/lib/define.ts

@@ -33,3 +33,6 @@ import "./textarea/textarea.element.js";
 import "./collection/collection.element.js";
 import "./collection/collection-item/collection-item.element.js";
 import "./checkbox/checkbox-group/checkbox-group.element.js";
+import "./range-slider/range-slider.element.js";
+import "./combo-box/combo-box.element.js";
+import "./combo-box/combo-box-option/combo-box-option.element.js";

package/src/lib/input/input.element.ts

@@ -163,6 +163,10 @@ export class USATextInputElement
     this.#syncFormState();
   }
 
+  focus(options?: FocusOptions): void {
+    this.#input().focus(options);
+  }
+
   @effect()
   onChange() {
     const { value, selectionStart, selectionEnd } = this;

package/src/lib/input/input.test.ts

@@ -1,7 +1,7 @@
 import "./input.element.js";
 
-import { fireEvent } from "@noctuatech-uswds/testing";
 import { assert, fixture, html } from "@open-wc/testing";
+import { userEvent } from "@testing-library/user-event";
 
 describe("usa-input", () => {
   it("should be accessible", async () => {
@@ -39,9 +39,7 @@ describe("usa-input", () => {
     const nativeInput = input?.shadowRoot?.querySelector("input");
 
     if (nativeInput) {
-      nativeInput.value = "Bar";
-
-      await fireEvent.input(nativeInput, { bubbles: true });
+      await userEvent.type(nativeInput, "Bar");
     }
 
     const value = new FormData(form);

package/src/lib/radio/radio-option/radio-option.element.ts

@@ -1,6 +1,6 @@
+import { inject, injectable, injected } from "@joist/di";
 import { attr, css, element, html, query } from "@joist/element";
 
-import { inject, injectable, injected } from "@joist/di";
 import { RADIO_CTX } from "../context.js";
 
 declare global {
@@ -50,11 +50,7 @@ export class USARadioOptionElement extends HTMLElement {
   });
 
   attributeChangedCallback() {
-    this.#input({
-      value: this.value,
-      disabled: this.disabled,
-    });
-
+    this.#input({ value: this.value, disabled: this.disabled });
     this.#slot({ name: this.value });
 
     this.slot = this.value;

package/src/lib/radio/radio.element.ts

@@ -1,5 +1,5 @@
 import { injectable } from "@joist/di";
-import { attr, css, element, html, listen, query } from "@joist/element";
+import { attr, css, element, html, listen } from "@joist/element";
 
 import { RADIO_CTX, type RadioContainer } from "./context.js";
 

package/src/lib/radio/radio.stories.ts

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
-import { when } from "lit/directives/when.js";
 import type { USARadioElement } from "./radio.element.js";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories

package/src/lib/range-slider/range-slider.element.ts

@@ -0,0 +1,111 @@
+import { attr, css, element, html, listen, query } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-range-slider": USARangeSliderElement;
+  }
+}
+
+@element({
+  tagName: "usa-range-slider",
+  shadowDom: [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        max-width: 30rem;
+      }
+
+      input {
+        height: 2.5rem;
+        -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+        width: 100%; /* Specific width is required for Firefox. */
+        background: transparent; /* Otherwise white in Chrome */
+        border-radius: 0;
+        color: #1b1b1b;
+        display: block;
+        margin-top: .5rem;
+      }
+
+      input:focus {
+        outline: .25rem solid #2491ff;
+        outline-offset: 0;
+      }
+
+      input::-webkit-slider-thumb {
+        height: 1.25rem;
+        border-radius: 99rem;
+        width: 1.25rem;
+        background: #f0f0f0;
+        border: 0;
+        box-shadow: 0 0 0 2px #757575;
+        cursor: pointer;
+        -webkit-appearance: none;
+        appearance: none;
+        margin-top: -.19rem;
+      }
+
+      input::-webkit-slider-runnable-track {
+        background-color: #f0f0f0;
+        border-radius: 99rem;
+        border: 1px solid #757575;
+        cursor: pointer;
+        height: 1rem;
+        width: 100%;
+      }
+    `,
+    html`
+      <label>
+        <slot></slot>
+      </label>
+
+      <input type="range">
+    `,
+  ],
+})
+export class USARangeSliderElement extends HTMLElement {
+  static formAssociated = true;
+
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor value = "0";
+
+  @attr()
+  accessor min = "0";
+
+  @attr()
+  accessor max = "100";
+
+  @attr()
+  accessor step = "1";
+
+  #label = query("label");
+  #input = query("input");
+  #internals = this.attachInternals();
+
+  attributeChangedCallback() {
+    this.#label({
+      htmlFor: this.name,
+    });
+
+    this.#input({
+      name: this.name,
+      value: this.value,
+      min: this.min,
+      max: this.max,
+      step: this.step,
+      id: this.name,
+    });
+
+    this.#internals.setFormValue(this.value);
+  }
+
+  @listen("change")
+  onInputChange() {
+    const input = this.#input();
+
+    this.value = input.value;
+  }
+}

package/src/lib/range-slider/range-slider.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USARangeSliderElement } from "./range-slider.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-range-slider",
+  tags: ["autodocs"],
+  render(args) {
+    return html`<usa-range-slider name="test" value="50">Hello World</usa-range-slider>`;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USARangeSliderElement>;
+
+export default meta;
+
+type Story = StoryObj<USARangeSliderElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/range-slider/range-slider.test.ts

@@ -0,0 +1,52 @@
+import "./range-slider.element.js";
+
+import { assert, fixture, html } from "@open-wc/testing";
+import { userEvent } from "@testing-library/user-event";
+
+import type { USARangeSliderElement } from "./range-slider.element.js";
+
+describe("usa-range-slider", () => {
+  it("should be accessible", async () => {
+    const rangeSlider = await fixture<USARangeSliderElement>(html`
+      <usa-range-slider name="slider" value="0">Hello World</usa-range-slider>
+    `);
+
+    return assert.isAccessible(rangeSlider);
+  });
+
+  it("should submit form with default values", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-range-slider name="slider" value="50">Hello World</usa-range-slider>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const value = new FormData(form);
+
+    assert.equal(value.get("slider"), "50");
+  });
+
+  it("should update form value as input value changed", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <usa-range-slider name="slider" value="50">Hello World</usa-range-slider>
+  
+          <button>Submit</button>
+        </form>
+      `);
+
+    const input = form.querySelector("usa-input");
+    const nativeInput = input?.shadowRoot?.querySelector("input");
+
+    if (nativeInput) {
+      nativeInput.value = "75";
+      nativeInput.dispatchEvent(new Event("change"));
+    }
+
+    const value = new FormData(form);
+
+    assert.equal(value.get("slider"), "50");
+  });
+});

package/src/lib/select/select.stories.ts

@@ -7,7 +7,7 @@ import type { USASelectElement } from "./select.element.js";
 const meta = {
   title: "usa-select",
   tags: ["autodocs"],
-  render(args) {
+  render() {
     return html`
       <usa-select value="third">
         Hello World