@noctuatech/uswds 0.0.1

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

@@ -0,0 +1,138 @@
+import { attr, css, element, html, listen, query } from "@joist/element";
+import { effect, observe } from "@joist/observable";
+
+import { MaskableElement } from "../input-mask/maskable.element.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-input": USATextInputElement;
+  }
+}
+
+@element({
+  tagName: "usa-input",
+  shadowDom: [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        font-size: 1.06rem;
+        line-height: 1.3;
+        display: block;
+        font-weight: 400;
+        max-width: 30rem;
+        margin-bottom: 1.5rem;
+      }
+
+      input {
+        border-width: 1px;
+        border-color: #5c5c5c;
+        border-style: solid;
+        border-radius: 0;
+        color: #1b1b1b;
+        display: block;
+        height: 2.5rem;
+        line-height: 1.3;
+        font-size: 1.06rem;
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        width: 100%;
+      }
+
+      input:not(:disabled):focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+    `,
+    html`
+      <label>
+        <slot></slot>
+
+        <input />
+      </label>
+    `,
+  ],
+})
+export class USATextInputElement
+  extends HTMLElement
+  implements MaskableElement
+{
+  static formAssociated = true;
+
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor autocomplete: AutoFill = "on";
+
+  @attr()
+  accessor placeholder = "";
+
+  @attr({
+    reflect: false,
+  })
+  @observe()
+  accessor value = "";
+
+  get selectionStart() {
+    const { selectionStart } = this.#input();
+
+    return selectionStart;
+  }
+
+  #internals = this.attachInternals();
+  #input = query("input");
+
+  setSelectionRange(start: number, end: number) {
+    const input = this.#input();
+
+    input.setSelectionRange(start, end);
+  }
+
+  @effect()
+  onChange() {
+    const input = this.#input();
+    input.value = this.value;
+  }
+
+  @listen("input")
+  onInputChange() {
+    const input = this.#input();
+
+    this.#internals.setFormValue(input.value);
+
+    this.value = input.value;
+  }
+
+  attributeChangedCallback(attr: string) {
+    const input = this.#input();
+
+    switch (attr) {
+      case "autocomplete":
+        input.autocomplete = this.autocomplete;
+        break;
+
+      case "placeholder":
+        input.placeholder = this.placeholder;
+        break;
+
+      case "name":
+        input.name = this.name;
+        break;
+
+      case "value":
+        input.value = this.value;
+        this.#internals.setFormValue(this.value);
+        break;
+    }
+  }
+}

package/src/lib/input/input.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USATextInputElement } from "./input.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-input",
+  tags: ["autodocs"],
+  render() {
+    return html`
+      <form>
+        <usa-input name="fname" value="Danny" autocomplete="off" foo="test">
+          First name
+        </usa-input>
+
+        <usa-button type="submit">Submit</usa-button>
+      </form>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USATextInputElement>;
+
+export default meta;
+
+type Story = StoryObj<USATextInputElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {};

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

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

package/src/lib/input-mask/format.ts

@@ -0,0 +1,56 @@
+export enum PatternChar {
+  Any = "*",
+  Number = "9",
+  Letter = "A",
+}
+
+export const PATTERN_CHARS = Object.values(PatternChar);
+
+export const REG_EXPS = {
+  Letters: /^[a-z]/i,
+  Numbers: /^[0-9]/i,
+};
+
+export interface FormattedResult {
+  raw: string;
+  formatted: string;
+}
+
+export function format(value: string, pattern: string): FormattedResult {
+  const raw = value.replace(/[^a-z0-9]/gi, ""); // remove all special chars
+  const chars = raw.split("");
+
+  let count = 0;
+  let formatted = "";
+
+  for (var i = 0; i < pattern.length; i++) {
+    const patternChar = pattern[i];
+    const char = chars[count];
+
+    if (char && patternChar) {
+      if (patternChar === PatternChar.Any) {
+        // Any letter or number
+        formatted += char;
+        count++;
+      } else if (patternChar === PatternChar.Number) {
+        // Numbers only
+        if (/^[0-9]/i.test(char)) {
+          formatted += char;
+        }
+
+        count++;
+      } else if (patternChar === PatternChar.Letter) {
+        // Letters only
+        if (/^[a-z]/i.test(char)) {
+          formatted += char;
+        }
+
+        count++;
+      } else {
+        formatted += patternChar;
+      }
+    }
+  }
+
+  return { raw, formatted };
+}

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

@@ -0,0 +1,93 @@
+import { attr, css, element, html, listen } from "@joist/element";
+
+import { MaskableElement } from "./maskable.element.js";
+import { format, PATTERN_CHARS, PatternChar, REG_EXPS } from "./format.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-input-mask": USAInputMaskElement;
+  }
+}
+
+@element({
+  tagName: "usa-input-mask",
+  shadowDom: [
+    css`
+      :host {
+        display: contents;
+      }
+    `,
+    html`<slot></slot>`,
+  ],
+})
+export class USAInputMaskElement extends HTMLElement {
+  @attr()
+  accessor mask = "";
+
+  connectedCallback() {
+    for (let input of this.querySelectorAll<MaskableElement>("[mask]")) {
+      const { formatted } = format(input.value, this.#getMaskFor(input));
+
+      input.value = formatted;
+    }
+  }
+
+  @listen("input")
+  async onInput(e: Event) {
+    const input = e.target as MaskableElement;
+    const selectionStart = input.selectionStart || 0;
+    const prev = input.value;
+    const mask = this.#getMaskFor(input);
+
+    const { formatted } = format(input.value, mask);
+
+    input.value = formatted;
+
+    const offset = input.value.length - prev.length;
+    const maskChar = mask[selectionStart - 1] as PatternChar | undefined;
+
+    // This is a hack to make sure that changes are propagated appropriately
+    await Promise.resolve();
+
+    // check if the current value is not a space for characters and has an offset greater then 0
+    if (maskChar && !PATTERN_CHARS.includes(maskChar) && offset > 0) {
+      input.setSelectionRange(selectionStart + offset, selectionStart + offset);
+    } else {
+      input.setSelectionRange(selectionStart, selectionStart);
+    }
+
+    if (prev !== input.value) {
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  }
+
+  @listen("keydown")
+  onKeyDown(e: KeyboardEvent) {
+    const input = e.target as MaskableElement;
+    const mask = this.#getMaskFor(input);
+    const patternChar = mask[input.selectionStart || 0];
+
+    if (e.key.length === 1 && /^[a-z0-9]/i.test(e.key)) {
+      // check that the key is a single character and that it is a letter or number
+
+      if (input.value.length >= mask.length) {
+        // prevent default once value is the same as the mask length
+        e.preventDefault();
+      } else if (patternChar === PatternChar.Number) {
+        if (!REG_EXPS.Numbers.test(e.key)) {
+          // if pattern char specifies number and is not
+          e.preventDefault();
+        }
+      } else if (patternChar === PatternChar.Letter) {
+        if (!REG_EXPS.Letters.test(e.key)) {
+          // if pattern char specifies letter and is not
+          e.preventDefault();
+        }
+      }
+    }
+  }
+
+  #getMaskFor(input: MaskableElement) {
+    return this.mask || input.getAttribute("mask") || "";
+  }
+}

package/src/lib/input-mask/input-mask.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USAInputMaskElement } from "./input-mask.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "input-mask",
+  tags: ["autodocs"],
+  render(args) {
+    return html`
+      <usa-input-mask>
+        <usa-input
+          name="phone"
+          placeholder=${args.mask}
+          autocomplete="off"
+          mask=${args.mask}
+          value="3042616138"
+        >
+          Phone:
+        </usa-input>
+      </usa-input-mask>
+    `;
+  },
+  argTypes: {},
+  args: {
+    mask: "(999) 999-9999",
+  },
+} satisfies Meta<USAInputMaskElement>;
+
+export default meta;
+
+type Story = StoryObj<USAInputMaskElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

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

@@ -0,0 +1,106 @@
+import "./input-mask.element.js";
+import "../input/input.element.js";
+
+import { assert, fixture, html } from "@open-wc/testing";
+
+import { format } from "./format.js";
+import { USAInputMaskElement } from "./input-mask.element.js";
+
+describe("format", () => {
+  it("should retrn the correct raw value", () => {
+    assert.deepEqual(format("(123) 456 7890", "(***) ***-****"), {
+      raw: "1234567890",
+      formatted: "(123) 456-7890",
+    });
+  });
+
+  it("should return a formatted phone number (***) ***-****", () => {
+    assert.deepEqual(format("1234567890", "(***) ***-****"), {
+      raw: "1234567890",
+      formatted: "(123) 456-7890",
+    });
+  });
+
+  it("should return a formatted phone number ***-***-****", () => {
+    assert.deepEqual(format("1234567890", "***-***-****"), {
+      raw: "1234567890",
+      formatted: "123-456-7890",
+    });
+  });
+
+  it("should only allow numbers", () => {
+    assert.deepEqual(format("304213abcd", "999-999-9999"), {
+      raw: "304213abcd",
+      formatted: "304-213-",
+    });
+  });
+
+  it("should only allow a mix of letters and numbers", () => {
+    assert.deepEqual(format("C94749", "A-99999"), {
+      raw: "C94749",
+      formatted: "C-94749",
+    });
+  });
+});
+
+describe("usa-input-mask", () => {
+  it("should format default value", async () => {
+    const el = await fixture<USAInputMaskElement>(html`
+      <usa-input-mask mask="(999) 999-9999">
+        <input name="phone" value="1234567890" mask />
+      </usa-input-mask>
+    `);
+
+    const input = el.querySelector("input")!;
+
+    assert.equal(input.value, "(123) 456-7890");
+  });
+
+  it("should update value when on input event", async () => {
+    const el = await fixture<USAInputMaskElement>(html`
+      <usa-input-mask>
+        <input name="phone" mask="(999) 999-9999" />
+      </usa-input-mask>
+    `);
+
+    const input = el.querySelector("input")!;
+
+    input.value = "8888888888";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    assert.equal(input.value, "(888) 888-8888");
+  });
+});
+
+describe("usa-input-mask with usa-input", () => {
+  it("should format default value", async () => {
+    const el = await fixture<USAInputMaskElement>(html`
+      <usa-input-mask mask="(999) 999-9999">
+        <usa-input name="phone" value="1234567890" id="TEST" mask></usa-input>
+      </usa-input-mask>
+    `);
+
+    const input = el.querySelector("usa-input")!;
+
+    assert.equal(input.value, "(123) 456-7890");
+  });
+
+  it("should update value when on input event", async () => {
+    const el = await fixture<USAInputMaskElement>(html`
+      <usa-input-mask>
+        <usa-input
+          name="phone"
+          value="1234567890"
+          mask="(999) 999-9999"
+        ></usa-input>
+      </usa-input-mask>
+    `);
+
+    const input = el.querySelector("usa-input")!;
+
+    input.value = "8888888888";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    assert.equal(input.value, "(888) 888-8888");
+  });
+});

package/src/lib/input-mask/maskable.element.ts

@@ -0,0 +1,5 @@
+export interface MaskableElement extends HTMLElement {
+  value: string;
+  selectionStart: number | null;
+  setSelectionRange(start: number, end: number): void;
+}

package/src/lib/link/link.element.ts

@@ -0,0 +1,62 @@
+import { attr, css, element, html, query } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-link": USALinkElement;
+  }
+}
+
+@element({
+  tagName: "usa-link",
+  shadowDom: [
+    css`
+      :host {
+        display: inline;
+        color: #005ea2;
+        text-decoration: underline;
+      }
+
+      a {
+        color: inherit;
+      }
+    `,
+    html`
+      <a>
+        <slot></slot>
+      </a>
+    `,
+  ],
+})
+export class USALinkElement extends HTMLElement {
+  @attr()
+  accessor href = "";
+
+  @attr()
+  accessor target: "_blank" | "_parent" | "_self" | "_top" | "" = "";
+
+  @attr()
+  accessor title = "";
+
+  @attr()
+  accessor disabled = false;
+
+  #anchor = query("a");
+
+  attributeChangedCallback(attr: string) {
+    const anchor = this.#anchor();
+
+    switch (attr) {
+      case "href":
+        anchor.href = this.href;
+        break;
+
+      case "target":
+        anchor.target = this.target;
+        break;
+
+      case "title":
+        anchor.target = this.title;
+        break;
+    }
+  }
+}

package/src/lib/link/link.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USALinkElement } from "./link.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-link",
+  tags: ["autodocs"],
+  render(args) {
+    return html`<usa-link href="${args.href}">Hello World</usa-link>`;
+  },
+  argTypes: {
+    href: {
+      type: "string",
+    },
+  },
+  args: {},
+} satisfies Meta<USALinkElement>;
+
+export default meta;
+
+type Story = StoryObj<USALinkElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    href: "www.google.com",
+  },
+};

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

@@ -0,0 +1,46 @@
+import { attr, css, element, html } from "@joist/element";
+
+import { USARadioElement } from "./radio.element.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-radio-option": USARadioElement;
+  }
+}
+
+@element({
+  tagName: "usa-radio-option",
+  shadowDom: [
+    css`
+      :host {
+        display: inline-flex;
+        flex-direction: column;
+      }
+    `,
+    html`<slot></slot>`,
+  ],
+})
+export class USARadioOptionElement extends HTMLElement {
+  @attr()
+  accessor value = "";
+
+  #parent: USARadioElement | null = null;
+
+  attributeChangedCallback() {
+    this.slot = this.value;
+  }
+
+  connectedCallback() {
+    if (this.parentElement instanceof USARadioElement) {
+      this.#parent = this.parentElement;
+
+      this.parentElement.onOptionAdded(this);
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.#parent) {
+      this.#parent.onOptionRemoved(this);
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import "./radio.element.js";
+import "./radio-option.element.js";
+
+import { assert, fixture, html } from "@open-wc/testing";
+
+import { USARadioOptionElement } from "./radio-option.element.js";
+
+describe("usa-radio-option", () => {
+  it("should map value to slot", async () => {
+    const radio = await fixture<USARadioOptionElement>(html`
+      <usa-radio>
+        <usa-radio-option value="first">First</usa-radio-option>
+      </usa-radio>
+    `);
+
+    const option = radio.querySelectorAll("usa-radio-option");
+
+    assert.equal(option[0].value, option[0].slot);
+  });
+});