@noctuatech/uswds 0.0.1

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

@@ -0,0 +1,140 @@
+import "./file-input-preview.element.js";
+import "../link/link.element.js";
+
+import { attr, css, element, html, listen, query } from "@joist/element";
+import { effect, observe } from "@joist/observable";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-file-input": USAFileInputElement;
+  }
+}
+
+@element({
+  tagName: "usa-file-input",
+  shadowDom: [
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+        max-width: 30rem;
+        position: relative;
+      }
+
+      label {
+        display: block;
+      }
+
+      input {
+        cursor: pointer;
+        height: 100%;
+        left: 0;
+        margin: 0;
+        max-width: none;
+        position: absolute;
+        text-indent: -999em;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+      }
+
+      label slot {
+        font-size: 1.06rem;
+        line-height: 1.3;
+        display: block;
+        font-weight: 400;
+        margin-bottom: 0.5rem;
+      }
+
+      .box {
+        border: 1px dashed #adadad;
+        display: block;
+        font-size: 0.93rem;
+        position: relative;
+        text-align: center;
+        width: 100%;
+        max-width: 30rem;
+        padding: 2rem 1rem;
+      }
+    `,
+    html`
+      <label>
+        <slot></slot>
+        <input type="file" />
+      </label>
+
+      <div class="box">
+        <slot name="description">
+          Drag file here or <usa-link>choose from folder</usa-link>
+        </slot>
+      </div>
+
+      <usa-file-input-preview>
+        Selected file <usa-link>Change file</usa-link>
+      </usa-file-input-preview>
+    `,
+  ],
+})
+export class USAFileInputElement extends HTMLElement {
+  static formAssociated = true;
+
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor multiple = true;
+
+  @attr()
+  accessor accept = "";
+
+  @observe()
+  accessor files: FileList | null = null;
+
+  #internals = this.attachInternals();
+  #input = query("input");
+  #box = query(".box");
+  #preview = query("usa-file-input-preview");
+
+  @effect()
+  onChange() {
+    const input = this.#input();
+
+    if (this.files) {
+      input.files = this.files;
+      this.onInputChange();
+    }
+  }
+
+  attributeChangedCallback() {
+    const input = this.#input();
+    input.name = this.name;
+    input.multiple = this.multiple;
+    input.accept = this.accept;
+  }
+
+  @listen("change")
+  onInputChange() {
+    const input = this.#input();
+    const box = this.#box();
+    const preview = this.#preview();
+
+    preview.files = input.files;
+
+    const formData = new FormData();
+
+    if (input.files) {
+      box.style.display = "none";
+
+      for (let file of input.files) {
+        formData.append(this.name, file);
+      }
+    } else {
+      box.style.display = "block";
+    }
+
+    this.#internals.setFormValue(formData);
+  }
+}

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USAFileInputElement } from "./file-input.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-file-input",
+  tags: ["autodocs"],
+  render(args) {
+    function onSubmit(e: Event) {
+      e.preventDefault();
+
+      const data = new FormData(e.target as HTMLFormElement);
+
+      console.log(data.getAll("upload"));
+    }
+
+    return html`
+      <form @submit=${onSubmit}>
+        <usa-file-input name="upload">
+          Input accepts a single file
+
+          <div slot="description">
+            Drag file here or <usa-link>choose from folder</usa-link>
+          </div>
+        </usa-file-input>
+
+        <br />
+
+        <usa-button type="submit">SUBMIT</usa-button>
+      </form>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAFileInputElement>;
+
+export default meta;
+
+type Story = StoryObj<USAFileInputElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

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

@@ -0,0 +1,47 @@
+import "./file-input.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { USAFileInputElement } from "./file-input.element.js";
+
+describe("usa-file-input", () => {
+  it("should be accessible", async () => {
+    const fileInput = await fixture<USAFileInputElement>(html`
+      <usa-file-input>Hello World</usa-file-input>
+    `);
+
+    return assert.isAccessible(fileInput);
+  });
+
+  it("should submit files with the form", async () => {
+    const data = new DataTransfer();
+    data.items.add(new File([], "first.txt"));
+    data.items.add(new File([], "second.txt"));
+
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-file-input name="upload" .files=${data.files}>
+          Input accepts a single file
+
+          <div slot="description">
+            Drag file here or <usa-link>choose from folder</usa-link>
+          </div>
+        </usa-file-input>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const formData = new FormData(form);
+
+    const fileNames = formData.getAll("upload").map((file) => {
+      if (file instanceof File) {
+        return file.name;
+      }
+
+      return "";
+    });
+
+    assert.deepEqual(fileNames, ["first.txt", "second.txt"]);
+  });
+});

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

@@ -0,0 +1,263 @@
+export const ICON_TYPES = [
+  "accessibility_new",
+  "accessible_forward",
+  "account_balance",
+  "account_box",
+  "account_circle",
+  "add",
+  "add_circle",
+  "add_circle_outline",
+  "alarm",
+  "alternate_email",
+  "announcement",
+  "arrow_back",
+  "arrow_downward",
+  "arrow_drop_down",
+  "arrow_drop_up",
+  "arrow_forward",
+  "arrow_upward",
+  "api",
+  "assessment",
+  "attach_file",
+  "attach_money",
+  "autorenew",
+  "backpack",
+  "bathtub",
+  "bedding",
+  "bookmark",
+  "bug_report",
+  "build",
+  "calendar_today",
+  "campaign",
+  "camping",
+  "cancel",
+  "chat",
+  "check",
+  "check_box_outline_blank",
+  "check_circle",
+  "check_circle_outline",
+  "checkroom",
+  "clean_hands",
+  "clothes",
+  "close",
+  "closed_caption",
+  "cloud",
+  "code",
+  "comment",
+  "connect_without_contact",
+  "construction",
+  "construction_worker",
+  "contact_page",
+  "content_copy",
+  "coronavirus",
+  "credit_card",
+  "deck",
+  "delete",
+  "device_thermostat",
+  "directions",
+  "directions_bike",
+  "directions_bus",
+  "directions_car",
+  "directions_walk",
+  "do_not_disturb",
+  "do_not_touch",
+  "drag_handle",
+  "eco",
+  "edit",
+  "electrical_services",
+  "emoji_events",
+  "error",
+  "error_outline",
+  "event",
+  "expand_less",
+  "expand_more",
+  "facebook",
+  "fast_forward",
+  "fast_rewind",
+  "favorite",
+  "favorite_border",
+  "fax",
+  "file_download",
+  "file_present",
+  "file_upload",
+  "filter_alt",
+  "filter_list",
+  "fingerprint",
+  "first_page",
+  "flag",
+  "flickr",
+  "flight",
+  "flooding",
+  "folder",
+  "folder_open",
+  "format_quote",
+  "format_size",
+  "forum",
+  "github",
+  "grid_view",
+  "group_add",
+  "groups",
+  "hearing",
+  "help",
+  "help_outline",
+  "highlight_off",
+  "history",
+  "home",
+  "hospital",
+  "hotel",
+  "hourglass_empty",
+  "hurricane",
+  "identification",
+  "image",
+  "info",
+  "info_outline",
+  "insights",
+  "instagram",
+  "keyboard",
+  "label",
+  "language",
+  "last_page",
+  "launch",
+  "lightbulb",
+  "lightbulb_outline",
+  "link",
+  "link_off",
+  "linkedin",
+  "list",
+  "local_cafe",
+  "local_fire_department",
+  "local_gas_station",
+  "local_grocery_store",
+  "local_hospital",
+  "local_laundry_service",
+  "local_library",
+  "local_offer",
+  "local_parking",
+  "local_pharmacy",
+  "local_police",
+  "local_taxi",
+  "location_city",
+  "location_on",
+  "lock",
+  "lock_open",
+  "lock_outline",
+  "login",
+  "logout",
+  "loop",
+  "mail",
+  "mail_outline",
+  "map",
+  "masks",
+  "medical_services",
+  "menu",
+  "military_tech",
+  "more_horiz",
+  "more_vert",
+  "my_location",
+  "navigate_before",
+  "navigate_next",
+  "navigate_far_before",
+  "navigate_far_next",
+  "near_me",
+  "notifications",
+  "notifications_active",
+  "notifications_none",
+  "notifications_off",
+  "park",
+  "people",
+  "person",
+  "pets",
+  "phone",
+  "photo_camera",
+  "print",
+  "priority_high",
+  "public",
+  "push_pin",
+  "radio_button_unchecked",
+  "rain",
+  "reduce_capacity",
+  "remove",
+  "remove_circle",
+  "report",
+  "restaurant",
+  "rss_feed",
+  "safety_divider",
+  "sanitizer",
+  "severe_weather",
+  "save_alt",
+  "schedule",
+  "school",
+  "science",
+  "search",
+  "security",
+  "send",
+  "sentiment_dissatisfied",
+  "sentiment_neutral",
+  "sentiment_satisfied",
+  "sentiment_satisfied_alt",
+  "sentiment_very_dissatisfied",
+  "settings",
+  "share",
+  "shield",
+  "shopping_basket",
+  "snow",
+  "soap",
+  "social_distance",
+  "sort_arrow",
+  "spellcheck",
+  "star",
+  "star_half",
+  "star_outline",
+  "store",
+  "support",
+  "support_agent",
+  "text_fields",
+  "thumb_down_alt",
+  "thumb_up_alt",
+  "timer",
+  "toggle_off",
+  "toggle_on",
+  "topic",
+  "tornado",
+  "translate",
+  "trending_down",
+  "trending_up",
+  "twitter",
+  "undo",
+  "unfold_less",
+  "unfold_more",
+  "update",
+  "upload_file",
+  "verified",
+  "verified_user",
+  "visibility",
+  "visibility_off",
+  "volume_off",
+  "warning",
+  "wash",
+  "wifi",
+  "work",
+  "x",
+  "youtube",
+  "zoom_in",
+  "zoom_out_map",
+  "zoom_out",
+  "visibility",
+  "home",
+  "print",
+  "search",
+  "check_circle",
+  "warning",
+  "info",
+  "cancel",
+  "check_circle",
+  "warning",
+  "info",
+  "cancel",
+  "help",
+  "people",
+  "mail",
+  "support",
+] as const;
+
+export type USAIcon = (typeof ICON_TYPES)[number];

package/src/lib/icon/icon.element.ts

@@ -0,0 +1,65 @@
+import { attr, css, element, html, query } from "@joist/element";
+import { inject, injectable } from "@joist/di";
+
+import { USAIcon } from "./icon-types.js";
+import { USAConfig } from "../config/config.element.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-icon": USAIconElement;
+  }
+}
+
+@element({
+  tagName: "usa-icon",
+  shadowDom: [
+    css`
+      :host {
+        display: inline-block;
+        height: 2rem;
+        position: relative;
+        width: 2rem;
+      }
+
+      svg {
+        fill: currentColor;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+    html`
+      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+        <use></use>
+      </svg>
+    `,
+  ],
+})
+@injectable()
+export class USAIconElement extends HTMLElement {
+  @attr()
+  accessor icon: USAIcon = "accessibility_new";
+
+  #use = query("use");
+  #config = inject(USAConfig);
+  #connected = false;
+
+  connectedCallback() {
+    this.#connected = true;
+    this.#updateIcon();
+  }
+
+  attributeChangedCallback() {
+    if (this.#connected) {
+      this.#updateIcon();
+    }
+  }
+
+  #updateIcon() {
+    const config = this.#config();
+    const use = this.#use();
+
+    if (this.icon !== use.getAttribute("href")) {
+      use.setAttribute("href", `${config.spriteSheet}#${this.icon}`);
+    }
+  }
+}

package/src/lib/icon/icon.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USAIconElement } from "./icon.element.js";
+import { ICON_TYPES } from "./icon-types.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-icon",
+  tags: [],
+  render(args) {
+    return html`<usa-icon icon=${args.icon}></usa-icon>`;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAIconElement>;
+
+export default meta;
+
+type Story = StoryObj<USAIconElement>;
+
+export const AllIcons: Story = {
+  render() {
+    async function copyIcon(icon: string) {
+      try {
+        await navigator.clipboard.writeText(
+          `<usa-icon icon=${icon}></usa-icon>`
+        );
+        alert(`copied markup for ${icon}`);
+      } catch (err) {
+        console.error("Failed to copy: ", err);
+      }
+    }
+
+    return html`<div style="display: flex; flex-wrap: wrap; gap: .75rem;">
+      ${html`${ICON_TYPES.map(
+        (icon) => html`
+          <button
+            @click=${() => copyIcon(icon)}
+            style="padding: .5rem 1rem .5rem .5rem; cursor: pointer; background: #fff; border-radius: 4px; gap: .5rem; display: flex; align-items: center"
+          >
+            <usa-icon icon=${icon}></usa-icon>
+
+            ${icon}
+          </button>
+        `
+      )}`}
+    </div>`;
+  },
+};