@noctuatech/uswds 0.0.1

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

@@ -0,0 +1,152 @@
+import { attr, css, element, html, listen, query } from "@joist/element";
+
+import type { USARadioOptionElement } from "./radio-option.element.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-radio": USARadioElement;
+  }
+}
+
+@element({
+  tagName: "usa-radio",
+  shadowDom: [
+    css`
+      :host {
+        display: block;
+      }
+
+      .radios {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      label {
+        display: flex;
+        cursor: pointer;
+        gap: 0.5rem;
+      }
+
+      input {
+        position: absolute;
+        left: -999em;
+        right: auto;
+      }
+
+      label::before {
+        content: " ";
+        display: block;
+        left: 0;
+        height: 1.25rem;
+        border-radius: 99rem;
+        width: 1.25rem;
+        background: #fff;
+        box-shadow: 0 0 0 2px #1b1b1b;
+      }
+
+      label:has(input:checked)::before {
+        background-color: #005ea2;
+        box-shadow:
+          0 0 0 2px #005ea2,
+          inset 0 0 0 2px #fff;
+      }
+
+      label:has(input:focus)::before {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0.25rem;
+      }
+
+      :host([tiled]) .radios {
+        gap: 0.5rem;
+      }
+
+      :host([tiled]) label {
+        background-color: #fff;
+        border: 2px solid #c9c9c9;
+        color: #1b1b1b;
+        border-radius: 0.25rem;
+        padding: 0.75rem 1rem 0.75rem 0.75rem;
+      }
+
+      :host([tiled]) label:has(input:checked) {
+        background-color: rgba(0, 94, 162, 0.1);
+        border-color: #005ea2;
+      }
+    `,
+    html`
+      <slot></slot>
+
+      <div class="radios"></div>
+    `,
+  ],
+})
+export class USARadioElement extends HTMLElement {
+  static formAssociated = true;
+
+  @attr()
+  accessor value = "";
+
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor tiled = false;
+
+  #radios = query(".radios");
+  #internals = this.attachInternals();
+
+  @listen("change")
+  onChange(e: Event) {
+    if (e.target instanceof HTMLInputElement) {
+      if (e.target.checked) {
+        this.value = e.target.value;
+        this.#internals.setFormValue(e.target.value);
+      }
+    }
+  }
+
+  connectedCallback() {
+    if (this.value) {
+      this.#internals.setFormValue(this.value);
+    }
+  }
+
+  attributeChangedCallback() {
+    const radios = this.#radios();
+
+    for (let radio of radios.querySelectorAll("input")) {
+      radio.checked = radio.value === this.value;
+      radio.name = this.name;
+    }
+  }
+
+  onOptionAdded(el: USARadioOptionElement) {
+    const radios = this.#radios();
+
+    const radioLabel = document.createElement("label");
+    radioLabel.id = el.value;
+
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.name = this.name;
+    input.value = el.value;
+    input.checked = this.value === el.value;
+
+    const slot = document.createElement("slot");
+    slot.name = el.value;
+
+    radioLabel.append(input, slot);
+
+    radios.append(radioLabel);
+  }
+
+  onOptionRemoved(el: USARadioOptionElement) {
+    const radios = this.#radios();
+    const option = radios.querySelector(`#${el.value}`);
+
+    if (option) {
+      option.remove();
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USARadioElement } from "./radio.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-radio",
+  tags: ["autodocs"],
+  render(args) {
+    return html`
+      <usa-radio name="historical-figures" value="frederick-douglass" tiled>
+        <usa-radio-option value="sojourner-truth">
+          Sojourner Truth
+        </usa-radio-option>
+
+        <usa-radio-option value="frederick-douglass">
+          Frederick Douglass
+
+          <usa-description>
+            This is optional text that can be used to describe the label in more
+            detail.
+          </usa-description>
+        </usa-radio-option>
+
+        <usa-radio-option value="booker-t-washington">
+          Booker T. Washington
+        </usa-radio-option>
+
+        <usa-radio-option value="george-washington-carver">
+          George Washington Carver
+        </usa-radio-option>
+      </usa-radio>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USARadioElement>;
+
+export default meta;
+
+type Story = StoryObj<USARadioElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/radio/radio.test.ts

@@ -0,0 +1,174 @@
+import "./radio.element.js";
+import "./radio-option.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { USARadioElement } from "./radio.element.js";
+
+describe("usa-radio", () => {
+  it("should be accessible", async () => {
+    const radio = await fixture<USARadioElement>(html`
+      <usa-radio name="historical-figures" value="frederick-douglass" tiled>
+        <usa-radio-option value="sojourner-truth">
+          Sojourner Truth
+        </usa-radio-option>
+
+        <usa-radio-option value="frederick-douglass">
+          Frederick Douglass
+        </usa-radio-option>
+
+        <usa-radio-option value="booker-t-washington">
+          Booker T. Washington
+        </usa-radio-option>
+
+        <usa-radio-option value="george-washington-carver">
+          George Washington Carver
+        </usa-radio-option>
+      </usa-radio>
+    `);
+
+    return assert.isAccessible(radio);
+  });
+
+  it("should create local inputs for each option", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth">
+            Sojourner Truth
+          </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass">
+            Frederick Douglass
+          </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington">
+            Booker T. Washington
+          </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver">
+            George Washington Carver
+          </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+
+    const nativeInputs = form
+      .querySelector("usa-radio")!
+      .shadowRoot!.querySelectorAll("input");
+
+    assert.deepEqual(
+      Array.from(nativeInputs).map((input) => input.value),
+      [
+        "sojourner-truth",
+        "frederick-douglass",
+        "booker-t-washington",
+        "george-washington-carver",
+      ]
+    );
+  });
+
+  it("should remove inputs when options are removed", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth">
+            Sojourner Truth
+          </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass">
+            Frederick Douglass
+          </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington">
+            Booker T. Washington
+          </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver">
+            George Washington Carver
+          </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+
+    const options = form.querySelectorAll("usa-radio-option");
+
+    options[2].remove();
+
+    const nativeInputs = form
+      .querySelector("usa-radio")!
+      .shadowRoot!.querySelectorAll("input");
+
+    assert.deepEqual(
+      Array.from(nativeInputs).map((input) => input.value),
+      ["sojourner-truth", "frederick-douglass", "george-washington-carver"]
+    );
+  });
+
+  it("should submit form with default values", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth">
+            Sojourner Truth
+          </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass">
+            Frederick Douglass
+          </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington">
+            Booker T. Washington
+          </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver">
+            George Washington Carver
+          </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+
+    const value = new FormData(form);
+
+    const nativeInputs = form
+      .querySelector("usa-radio")!
+      .shadowRoot!.querySelectorAll("input");
+
+    assert.equal(nativeInputs[1].checked, true);
+    assert.equal(value.get("historical-figures"), "frederick-douglass");
+  });
+
+  it("should submit form with changed value", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth">
+            Sojourner Truth
+          </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass">
+            Frederick Douglass
+          </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington">
+            Booker T. Washington
+          </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver">
+            George Washington Carver
+          </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+
+    const nativeInputs = form
+      .querySelector("usa-radio")!
+      .shadowRoot!.querySelectorAll("input");
+
+    nativeInputs[3].click();
+
+    const value = new FormData(form);
+
+    assert.equal(value.get("historical-figures"), "george-washington-carver");
+  });
+});

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

@@ -0,0 +1,40 @@
+import { attr, css, element } from "@joist/element";
+
+import { USASelectElement } from "./select.element.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-select-option": USASelecOptionElement;
+  }
+}
+
+@element({
+  tagName: "usa-select-option",
+  shadowDom: [
+    css`
+      :host {
+        display: none;
+      }
+    `,
+  ],
+})
+export class USASelecOptionElement extends HTMLElement {
+  @attr()
+  accessor value = "";
+
+  #parent: USASelectElement | null = null;
+
+  connectedCallback() {
+    if (this.parentElement instanceof USASelectElement) {
+      this.#parent = this.parentElement;
+
+      this.parentElement.onOptionAdded(this);
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.#parent) {
+      this.#parent.onOptionRemoved(this);
+    }
+  }
+}

package/src/lib/select/select.element.ts

@@ -0,0 +1,121 @@
+import { attr, css, element, html, listen, query } from "@joist/element";
+
+import type { USASelecOptionElement } from "./select-option.element.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-select": USASelectElement;
+  }
+}
+
+@element({
+  tagName: "usa-select",
+  shadowDom: [
+    css`
+      :host {
+        display: block;
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        line-height: 1.3;
+        position: relative;
+        width: 100%;
+        max-width: 30rem;
+      }
+
+      select {
+        font-size: 1.06rem;
+        appearance: none;
+        border-width: 1px;
+        border-color: #5c5c5c;
+        border-style: solid;
+        border-radius: 0;
+        color: #1b1b1b;
+        display: block;
+        height: 2.5rem;
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        width: 100%;
+      }
+
+      select:not(:disabled):focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+
+      usa-icon {
+        position: absolute;
+        right: 0.5rem;
+        bottom: 12%;
+        height: 1.5rem;
+        width: 1.5rem;
+      }
+    `,
+    html`
+      <usa-icon icon="unfold_more"></usa-icon>
+
+      <label>
+        <div class="label">
+          <slot></slot>
+        </div>
+
+        <select></select>
+      </label>
+    `,
+  ],
+})
+export class USASelectElement extends HTMLElement {
+  static formAssociated = true;
+
+  @attr()
+  accessor value = "";
+
+  @attr()
+  accessor name = "";
+
+  #select = query("select");
+  #internals = this.attachInternals();
+
+  connectedCallback() {
+    const select = this.#select();
+    select.value = this.value;
+    select.name = this.name;
+
+    this.#internals.setFormValue(this.value);
+  }
+
+  @listen("change")
+  onSelectChange() {
+    const select = this.#select();
+
+    this.#internals.setFormValue(select.value);
+  }
+
+  onOptionAdded(el: USASelecOptionElement) {
+    const option = document.createElement("option");
+    option.value = el.value;
+    option.innerHTML = el.innerHTML;
+    option.id = this.#createId(el.value);
+
+    const select = this.#select();
+
+    select.append(option);
+  }
+
+  onOptionRemoved(el: USASelecOptionElement) {
+    const select = this.#select();
+    const option = select.querySelector(`#${this.#createId(el.value)}`);
+
+    if (option) {
+      option.remove();
+    }
+  }
+
+  #createId(val: string) {
+    return val.split(" ").join("-").toLowerCase();
+  }
+}

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

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

package/src/lib/select/select.test.ts

@@ -0,0 +1,113 @@
+import "./select.element.js";
+import "./select-option.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+import { fireEvent } from "@noctuatech-uswds/testing";
+
+describe("usa-select", () => {
+  it("should be accessible", async () => {
+    const el = await fixture<HTMLFormElement>(html`
+      <usa-select name="example">
+        Hello World
+
+        <usa-select-option value="first">First</usa-select-option>
+        <usa-select-option value="second">Second</usa-select-option>
+        <usa-select-option value="third">Third</usa-select-option>
+      </usa-select>
+    `);
+
+    return assert.isAccessible(el);
+  });
+
+  it("should create local select options", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-select name="example">
+          Hello World
+
+          <usa-select-option value="first">First</usa-select-option>
+          <usa-select-option value="second">Second</usa-select-option>
+          <usa-select-option value="third">Third</usa-select-option>
+        </usa-select>
+      </form>
+    `);
+
+    const nativeInputs = form
+      .querySelector("usa-select")!
+      .shadowRoot!.querySelectorAll("option");
+
+    assert.deepEqual(
+      Array.from(nativeInputs).map((input) => input.value),
+      ["first", "second", "third"]
+    );
+  });
+
+  it("should remove select options when options are removed", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-select name="example">
+          Hello World
+
+          <usa-select-option value="first">First</usa-select-option>
+          <usa-select-option value="second">Second</usa-select-option>
+          <usa-select-option value="third">Third</usa-select-option>
+        </usa-select>
+      </form>
+    `);
+
+    const options = form.querySelectorAll("usa-select-option");
+
+    options[1].remove();
+
+    const nativeInputs = form
+      .querySelector("usa-select")!
+      .shadowRoot!.querySelectorAll("option");
+
+    assert.deepEqual(
+      Array.from(nativeInputs).map((input) => input.value),
+      ["first", "third"]
+    );
+  });
+
+  it("should submit form with default values", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-select name="example" value="second">
+          Hello World
+
+          <usa-select-option value="first">First</usa-select-option>
+          <usa-select-option value="second">Second</usa-select-option>
+          <usa-select-option value="third">Third</usa-select-option>
+        </usa-select>
+      </form>
+    `);
+
+    const value = new FormData(form);
+
+    assert.equal(value.get("example"), "second");
+  });
+
+  it("should update form value as select value changed", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-select name="example" value="second">
+          Hello World
+
+          <usa-select-option value="first">First</usa-select-option>
+          <usa-select-option value="second">Second</usa-select-option>
+          <usa-select-option value="third">Third</usa-select-option>
+        </usa-select>
+      </form>
+    `);
+
+    const select = form.querySelector("usa-select")!;
+    const nativeSelect = select.shadowRoot!.querySelector("select")!;
+    nativeSelect.value = "third";
+
+    await fireEvent.change(nativeSelect, { bubbles: true });
+
+    const value = new FormData(form);
+
+    assert.equal(value.get("example"), "third");
+  });
+});