@noctuatech/uswds 0.0.4 → 0.0.5

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

@@ -1,10 +1,8 @@
 import { attr, css, element, html } from "@joist/element";
 
-import { USARadioElement } from "./radio.element.js";
-
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-radio-option": USARadioElement;
+    "usa-radio-option": USARadioOptionElement;
   }
 }
 
@@ -13,8 +11,9 @@ declare global {
   shadowDom: [
     css`
       :host {
-        display: inline-flex;
+        display: flex;
         flex-direction: column;
+        margin-top: 0.05rem;
       }
     `,
     html`<slot></slot>`,
@@ -24,23 +23,42 @@ export class USARadioOptionElement extends HTMLElement {
   @attr()
   accessor value = "";
 
-  #parent: USARadioElement | null = null;
+  @attr()
+  accessor name = "";
+
+  @attr()
+  accessor checked = false;
+
+  readonly radio = document.createElement("label");
+
+  readonly #input = document.createElement("input");
+  readonly #slotEl = document.createElement("slot");
+
+  constructor() {
+    super();
+
+    this.#input.type = "radio";
+
+    this.radio.append(this.#input, this.#slotEl);
+  }
 
   attributeChangedCallback() {
     this.slot = this.value;
+
+    this.#input.name = this.name;
+    this.#input.value = this.value;
+    this.#input.checked = this.checked;
+
+    this.#slotEl.name = this.value;
   }
 
   connectedCallback() {
-    if (this.parentElement instanceof USARadioElement) {
-      this.#parent = this.parentElement;
-
-      this.parentElement.onOptionAdded(this);
-    }
+    this.dispatchEvent(
+      new Event("usa::radio::option::added", { bubbles: true })
+    );
   }
 
   disconnectedCallback() {
-    if (this.#parent) {
-      this.#parent.onOptionRemoved(this);
-    }
+    this.radio.remove();
   }
 }

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

@@ -1,6 +1,6 @@
-import { attr, css, element, html, listen, query } from "@joist/element";
+import { attr, css, element, html, listen } from "@joist/element";
 
-import type { USARadioOptionElement } from "./radio-option.element.js";
+import { USARadioOptionElement } from "./radio-option.element.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -13,14 +13,10 @@ declare global {
   shadowDom: [
     css`
       :host {
-        display: block;
-        max-width: 30rem;
-      }
-
-      .radios {
         display: flex;
         flex-direction: column;
         gap: 1rem;
+        max-width: 30rem;
       }
 
       label {
@@ -59,7 +55,7 @@ declare global {
         outline-offset: 0.25rem;
       }
 
-      :host([tiled]) .radios {
+      :host([tiled]) {
         gap: 0.5rem;
       }
 
@@ -75,12 +71,16 @@ declare global {
         background-color: rgba(0, 94, 162, 0.1);
         border-color: #005ea2;
       }
-    `,
-    html`
-      <slot></slot>
 
-      <div class="radios"></div>
+      slot {
+        display: flex;
+      }
+
+      slot#main {
+        margin-bottom: 0.5rem;
+      }
     `,
+    html`<slot id="main"></slot>`,
   ],
 })
 export class USARadioElement extends HTMLElement {
@@ -92,10 +92,15 @@ export class USARadioElement extends HTMLElement {
   @attr()
   accessor name = "";
 
-  @attr()
+  @attr({
+    observed: false,
+  })
   accessor tiled = false;
 
-  #radios = query(".radios");
+  get shadow() {
+    return this.shadowRoot!;
+  }
+
   #internals = this.attachInternals();
 
   @listen("change")
@@ -115,40 +120,21 @@ export class USARadioElement extends HTMLElement {
   }
 
   attributeChangedCallback() {
-    const radios = this.#radios();
-
-    for (let radio of radios.querySelectorAll("input")) {
+    for (let radio of this.shadow.querySelectorAll("usa-radio-option")) {
       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);
-  }
+  @listen("usa::radio::option::added", (el) => el)
+  onOptionAdded(e: Event) {
+    if (e.target instanceof USARadioOptionElement) {
+      e.stopPropagation();
 
-  onOptionRemoved(el: USARadioOptionElement) {
-    const radios = this.#radios();
-    const option = radios.querySelector(`#${el.value}`);
+      e.target.checked = e.target.value === this.value;
+      e.target.name = this.name;
 
-    if (option) {
-      option.remove();
+      this.shadow.append(e.target.radio);
     }
   }
 }

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
 
 import type { USARadioElement } from "./radio.element.js";
+import { when } from "lit/directives/when.js";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
@@ -9,18 +10,23 @@ const meta = {
   tags: ["autodocs"],
   render(args) {
     return html`
-      <usa-radio name="historical-figures" value="frederick-douglass" tiled>
+      <usa-radio
+        name="historical-figures"
+        value="frederick-douglass"
+        ?tiled=${args.tiled}
+      >
+        <legend>Select one historical figure</legend>
+
         <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>
+          ${when(
+            args.description,
+            () => html`<usa-description>${args.description}</usa-description>`
+          )}
         </usa-radio-option>
 
         <usa-radio-option value="booker-t-washington">
@@ -34,8 +40,12 @@ const meta = {
     `;
   },
   argTypes: {},
-  args: {},
-} satisfies Meta<USARadioElement>;
+  args: {
+    tiled: true,
+    description:
+      "This is optional text that can be used to describe the label in more detail.",
+  },
+} satisfies Meta<USARadioElement & { description: string }>;
 
 export default meta;
 

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

@@ -1,7 +1,5 @@
 import { attr, css, element } from "@joist/element";
 
-import { USASelectElement } from "./select.element.js";
-
 declare global {
   interface HTMLElementTagNameMap {
     "usa-select-option": USASelecOptionElement;
@@ -22,19 +20,20 @@ export class USASelecOptionElement extends HTMLElement {
   @attr()
   accessor value = "";
 
-  #parent: USASelectElement | null = null;
+  readonly option = document.createElement("option");
 
-  connectedCallback() {
-    if (this.parentElement instanceof USASelectElement) {
-      this.#parent = this.parentElement;
+  attributeChangedCallback() {
+    this.option.textContent = this.textContent;
+    this.option.value = this.value;
+  }
 
-      this.parentElement.onOptionAdded(this);
-    }
+  connectedCallback() {
+    this.dispatchEvent(
+      new Event("usa::select::option::added", { bubbles: true })
+    );
   }
 
   disconnectedCallback() {
-    if (this.#parent) {
-      this.#parent.onOptionRemoved(this);
-    }
+    this.option.remove();
   }
 }

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

@@ -1,6 +1,6 @@
 import { attr, css, element, html, listen, query } from "@joist/element";
 
-import type { USASelecOptionElement } from "./select-option.element.js";
+import { USASelecOptionElement } from "./select-option.element.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -95,27 +95,13 @@ export class USASelectElement extends HTMLElement {
     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);
+  @listen("usa::select::option::added")
+  onOptionAdded(e: Event) {
+    if (e.target instanceof USASelecOptionElement) {
+      e.stopPropagation();
 
-    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();
+      const select = this.#select();
+      select.append(e.target.option);
     }
   }
-
-  #createId(val: string) {
-    return val.split(" ").join("-").toLowerCase();
-  }
 }

package/src/lib/side-nav/side-nav-item.element.ts

@@ -0,0 +1,86 @@
+import { attr, css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-side-nav-item": USASideNavItemElement;
+  }
+}
+
+@element({
+  tagName: "usa-side-nav-item",
+  shadowDom: [
+    css`
+      :host {
+        --usa-nav-item-padding-left: 2rem;
+
+        display: block;
+        border-top: 1px solid #e6e6e6;
+      }
+
+      .side-nav-item {
+        display: flex;
+        padding: 0.5rem 1rem;
+        text-decoration: none;
+        position: relative;
+      }
+
+      .side-nav-item:hover {
+        background-color: #f0f0f0;
+        color: #005ea2;
+      }
+
+      ::slotted(*) {
+        color: #5c5c5c;
+        text-decoration: none;
+        display: block;
+        width: 100%;
+      }
+
+      :host(:hover) ::slotted(*) {
+        color: #005ea2;
+      }
+
+      :host([current]) ::slotted(*:not(usa-side-nav-item)) {
+        color: #005ea2;
+        font-weight: 700;
+      }
+
+      :host([current]) .side-nav-item::after {
+        background-color: #005ea2;
+        border-radius: 99rem;
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 0.25rem;
+        top: 0.25rem;
+        width: 0.25rem;
+        left: 0;
+      }
+
+      :host([slot="children"]) .side-nav-item {
+        padding-left: var(--usa-nav-item-padding-left);
+      }
+
+      :host([slot="children"]) ::slotted(usa-side-nav-item) {
+        --usa-nav-item-padding-left: 3rem;
+      }
+
+      :host([slot="children"]) .side-nav-item::after {
+        display: none;
+      }
+    `,
+    html`
+      <div class="side-nav-item">
+        <slot></slot>
+      </div>
+
+      <slot name="children"></slot>
+    `,
+  ],
+})
+export class USASideNavItemElement extends HTMLElement {
+  @attr({
+    observed: false,
+  })
+  accessor current = false;
+}

package/src/lib/side-nav/side-nav.element.ts

@@ -0,0 +1,25 @@
+import "./side-nav-item.element.js";
+
+import { css, element, html } from "@joist/element";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-side-nav": USASideNavElement;
+  }
+}
+
+@element({
+  tagName: "usa-side-nav",
+  shadowDom: [
+    css`
+      :host {
+        display: block;
+        font-size: 1.06rem;
+        line-height: 1.3;
+        border-bottom: 1px solid #e6e6e6;
+      }
+    `,
+    html`<slot></slot>`,
+  ],
+})
+export class USASideNavElement extends HTMLElement {}

package/src/lib/side-nav/side-nav.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USASideNavElement } from "./side-nav.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-side-nav",
+  tags: ["autodocs"],
+  render(args) {
+    return html`
+      <usa-side-nav>
+        <usa-side-nav-item current>
+          <usa-link href="#">Current Page</usa-link>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children" current>
+            <usa-link href="#">Child</usa-link>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children" current>
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+      </usa-side-nav>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USASideNavElement>;
+
+export default meta;
+
+type Story = StoryObj<USASideNavElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/side-nav/side-nav.test.ts

@@ -0,0 +1,110 @@
+import "../link/link.element.js";
+import "./side-nav.element.js";
+
+import { fixture, html, assert } from "@open-wc/testing";
+
+import { USASideNavElement } from "./side-nav.element.js";
+
+describe("usa-side-nav", () => {
+  it("should be accessible", async () => {
+    const sideNav = await fixture<USASideNavElement>(html`
+      <usa-side-nav>
+        <usa-side-nav-item current>
+          <usa-link href="#">Current Page</usa-link>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children" current>
+            <usa-link href="#">Child</usa-link>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children" current>
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+      </usa-side-nav>
+    `);
+
+    return assert.isAccessible(sideNav);
+  });
+
+  it("should set child padding correctly", async () => {
+    const sideNav = await fixture<USASideNavElement>(html`
+      <usa-side-nav>
+        <usa-side-nav-item current>
+          <usa-link href="#">Current Page</usa-link>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children" current>
+            <usa-link href="#">Child</usa-link>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children" current>
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+      </usa-side-nav>
+    `);
+
+    const items = sideNav.querySelectorAll("usa-side-nav-item");
+
+    assert.equal(
+      getComputedStyle(items[1]).getPropertyValue(
+        "--usa-nav-item-padding-left"
+      ),
+      "2rem"
+    );
+
+    assert.equal(
+      getComputedStyle(items[3]).getPropertyValue(
+        "--usa-nav-item-padding-left"
+      ),
+      "3rem"
+    );
+  });
+});

package/src/lib.ts

@@ -12,3 +12,4 @@ export { USASelectElement } from "./lib/select/select.element.js";
 export { USASelecOptionElement } from "./lib/select/select-option.element.js";
 export { USATagElement } from "./lib/tag/tag.element.js";
 export { USAAccordionElement } from "./lib/accordion/accordion.element.js";
+export { USASideNavElement } from "./lib/side-nav/side-nav.element.js";

package/target/lib/accordion/accordion.element.d.ts

@@ -3,11 +3,6 @@ declare global {
         "usa-accordion": USAAccordionElement;
     }
 }
-declare class USAAccordionToggleEvent extends Event {
-    open: boolean;
-    get target(): USAAccordionElement;
-    constructor(open: boolean);
-}
 export declare class USAAccordionElement extends HTMLElement {
     #private;
     accessor name: string;
@@ -16,4 +11,9 @@ export declare class USAAccordionElement extends HTMLElement {
     onClick(e: Event): void;
     onAccordionToggle(e: USAAccordionToggleEvent): void;
 }
+declare class USAAccordionToggleEvent extends Event {
+    open: boolean;
+    get target(): USAAccordionElement;
+    constructor(open: boolean);
+}
 export {};