@noctuatech/uswds 0.1.2 → 0.1.3

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

@@ -3,33 +3,27 @@ import "./combo-box-option/combo-box-option.element.js";
 import "../input/input.element.js";
 
 import { assert, fixture, html } from "@open-wc/testing";
+import { userEvent } from "@testing-library/user-event";
 
-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;
+  let input: HTMLInputElement;
 
   beforeEach(async () => {
     autocomplete = await fixture<USAComboBoxElement>(html`
-      <usa-combo-box>
-        <usa-input slot="input" name="search"></usa-input>
+      <usa-combo-box name="search" placeholder="Select a fruit">
+        <span slot="label">Fruits</span>
 
-        <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-option value="Apple">Apple</usa-combo-box-option>
+        <usa-combo-box-option value="Banana">Banana</usa-combo-box-option>
+        <usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option>
+        <usa-combo-box-option value="Cherry">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;
+    input = autocomplete.input();
   });
 
   it("should filter items based on input", async () => {
@@ -147,4 +141,118 @@ describe("usa-combo-box", () => {
       "Blueberry",
     );
   });
+
+  it("should submit form with default values", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-combo-box name="search" value="Apple" placeholder="Select a fruit">
+          <span slot="label">Fruits</span>
+
+          <usa-combo-box-option value="Apple">Apple</usa-combo-box-option>
+          <usa-combo-box-option value="Banana">Banana</usa-combo-box-option>
+          <usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option>
+          <usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option>
+        </usa-combo-box>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const value = new FormData(form);
+    assert.equal(value.get("search"), "Apple");
+  });
+
+  it("should update form value when an option is selected", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-combo-box name="search" placeholder="Select a fruit">
+          <span slot="label">Fruits</span>
+
+          <usa-combo-box-option value="Apple">Apple</usa-combo-box-option>
+          <usa-combo-box-option value="Banana">Banana</usa-combo-box-option>
+          <usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option>
+          <usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option>
+        </usa-combo-box>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    const comboBox = form.querySelector("usa-combo-box");
+
+    if (!comboBox) {
+      throw new Error("Combo box not found");
+    }
+
+    const input = comboBox.shadowRoot?.querySelector("input");
+
+    if (!input) {
+      throw new Error("input not found");
+    }
+
+    // Type to show suggestions
+    input.value = "Ban";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+
+    // Select the first suggestion
+    const suggestions = comboBox.listItems();
+
+    suggestions[0]
+      .querySelector("slot")
+      ?.assignedElements()[0]
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+    const value = new FormData(form);
+    assert.equal(value.get("search"), "Banana");
+  });
+
+  it("should not submit when required and no value is selected", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <usa-combo-box name="search" required placeholder="Select a fruit">
+          <span slot="label">Fruits</span>
+
+          <usa-combo-box-option value="Apple">Apple</usa-combo-box-option>
+          <usa-combo-box-option value="Banana">Banana</usa-combo-box-option>
+          <usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option>
+          <usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option>
+        </usa-combo-box>
+
+        <button>Submit</button>
+      </form>
+    `);
+
+    assert.equal(form.checkValidity(), false);
+  });
+
+  // it("should reset to default value when form is reset", async () => {
+  //   const form = await fixture<HTMLFormElement>(html`
+  //     <form>
+  //       <usa-combo-box name="search" value="Apple" placeholder="Select a fruit">
+  //         <span slot="label">Fruits</span>
+
+  //         <usa-combo-box-option value="Apple">Apple</usa-combo-box-option>
+  //         <usa-combo-box-option value="Banana">Banana</usa-combo-box-option>
+  //         <usa-combo-box-option value="Blueberry">Blueberry</usa-combo-box-option>
+  //         <usa-combo-box-option value="Cherry">Cherry</usa-combo-box-option>
+  //       </usa-combo-box>
+
+  //       <button type="submit">Submit</button>
+  //       <button type="reset">Reset</button>
+  //     </form>
+  //   `);
+
+  //   const comboBox = form.querySelector("usa-combo-box");
+  //   if (comboBox) {
+  //     // Change the value
+  //     comboBox.value = "Banana";
+  //     comboBox.dispatchEvent(new Event("input", { bubbles: true }));
+
+  //     // Reset the form
+  //     form.reset();
+
+  //     // Check that the value was reset
+  //     assert.equal(comboBox.value, "Apple");
+  //   }
+  // });
 });

package/target/lib/accordion/accordion.element.js

@@ -9,92 +9,8 @@ let USAAccordionElement = (() => {
                 delegatesFocus: true,
             },
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: block;
-      }
-
-      :host(:not(:first-child)) summary {
-        margin-top: 0.5rem;
-      }
-
-      summary {
-        align-items: center;
-        border: 0;
-        border-radius: 0;
-        box-shadow: none;
-        justify-content: normal;
-        text-align: left;
-        padding: 0;
-        color: #1b1b1b;
-        background-color: #f0f0f0;
-        cursor: pointer;
-        display: flex;
-        font-weight: 700;
-        margin: 0;
-        padding: 1rem 1.25rem 1rem 1.25rem;
-        text-decoration: none;
-        width: 100%;
-      }
-
-      summary::-webkit-details-marker {
-        display: none;
-      }
-
-      slot[name="heading"] {
-        display: block;
-        flex: 1 1 auto;
-      }
-
-      slot[name="heading"]::slotted(*) {
-        margin: 0;
-      }
-
-      .content {
-        padding-bottom: 1.5rem;
-        padding-left: 1rem;
-        padding-top: 1.5rem;
-      }
-
-      usa-icon[icon="remove"] {
-        display: none;
-      }
-
-      details[open] usa-icon[icon="add"] {
-        display: none;
-      }
-
-      details[open] usa-icon[icon="remove"] {
-        display: block;
-      }
-
-      summary:hover {
-        background-color: #e6e6e6;
-      }
-
-      summary:focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-    `,
-                html `
-      <details>
-        <summary>
-          <slot name="heading"></slot>
-
-          <usa-icon icon="add"></usa-icon>
-          <usa-icon icon="remove"></usa-icon>
-        </summary>
-
-        <div class="content">
-          <slot></slot>
-        </div>
-      </details>
-    `,
+                css `*{box-sizing:border-box}:host{display:block}:host(:not(:first-child)) summary{margin-top:.5rem}summary{align-items:center;border:0;border-radius:0;box-shadow:none;justify-content:normal;text-align:left;padding:0;color:#1b1b1b;background-color:#f0f0f0;cursor:pointer;display:flex;font-weight:700;margin:0;padding:1rem 1.25rem 1rem 1.25rem;text-decoration:none;width:100%}summary::-webkit-details-marker{display:none}slot[name=heading]{display:block;flex:1 1 auto}slot[name=heading]::slotted(*){margin:0}.content{padding-bottom:1.5rem;padding-left:1rem;padding-top:1.5rem}usa-icon[icon=remove]{display:none}details[open] usa-icon[icon=add]{display:none}details[open] usa-icon[icon=remove]{display:block}summary:hover{background-color:#e6e6e6}summary:focus{outline:.25rem solid #2491ff;outline-offset:0}`,
+                html `<details><summary><slot name="heading"></slot><usa-icon icon="add"></usa-icon><usa-icon icon="remove"></usa-icon></summary><div class="content"><slot></slot></div></details>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/accordion/accordion.stories.js

@@ -4,32 +4,7 @@ const meta = {
     title: "usa-accordion",
     tags: ["autodocs"],
     render() {
-        return html `
-      <usa-accordion id="first" name="ammendment">
-        <h4 slot="heading">First Ammendment</h4>
-
-        Congress shall make no law respecting an establishment of religion, or
-        prohibiting the free exercise thereof; or abridging the freedom of
-        speech, or of the press; or the right of the people peaceably to
-        assemble, and to petition the Government for a redress of grievances.
-      </usa-accordion>
-
-      <usa-accordion id="second" name="ammendment">
-        <h4 slot="heading">Second Ammendment</h4>
-
-        A well regulated Militia, being necessary to the security of a free
-        State, the right of the people to keep and bear Arms, shall not be
-        infringed.
-      </usa-accordion>
-
-      <usa-accordion id="third" name="ammendment">
-        <h4 slot="heading">Third Ammendment</h4>
-
-        No Soldier shall, in time of peace be quartered in any house, without
-        the consent of the Owner, nor in time of war, but in a manner to be
-        prescribed by law.
-      </usa-accordion>
-    `;
+        return html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</usa-accordion><usa-accordion id="second" name="ammendment"><h4 slot="heading">Second Ammendment</h4>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</usa-accordion><usa-accordion id="third" name="ammendment"><h4 slot="heading">Third Ammendment</h4>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</usa-accordion>`;
     },
     argTypes: {},
     args: {},

package/target/lib/accordion/accordion.test.js

@@ -4,51 +4,18 @@ import { screen } from "@testing-library/dom";
 import { userEvent } from "@testing-library/user-event";
 describe("usa-accordion", () => {
     it("should be accessible", async () => {
-        const accordion = await fixture(html `
-      <usa-accordion id="first" name="ammendment">
-        <h4 slot="heading">First Ammendment</h4>
-
-        <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
-        </div>
-      </usa-accordion>
-    `);
+        const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
         return assert.isAccessible(accordion);
     });
     it("should toggle the open state when clicked", async () => {
-        const accordion = await fixture(html `
-      <usa-accordion id="first" name="ammendment">
-        <h4 slot="heading">First Ammendment</h4>
-
-        <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
-        </div>
-      </usa-accordion>
-    `);
+        const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
         const heading = await screen.findByRole("heading");
         const content = accordion.querySelector(".content");
         await userEvent.click(heading);
         assert.isTrue(content?.checkVisibility());
     });
     it("should toggle the open state when clicked", async () => {
-        const accordion = await fixture(html `
-      <usa-accordion id="first" name="ammendment">
-        <h4 slot="heading">First Ammendment</h4>
-
-        <div class="content">
-          Congress shall make no law respecting an establishment of religion, or
-          prohibiting the free exercise thereof; or abridging the freedom of
-          speech, or of the press; or the right of the people peaceably to
-          assemble, and to petition the Government for a redress of grievances.
-        </div>
-      </usa-accordion>
-    `);
+        const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
         const heading = await screen.findByRole("heading");
         const content = accordion.querySelector(".content");
         assert.isFalse(content?.checkVisibility());
@@ -56,24 +23,7 @@ describe("usa-accordion", () => {
         assert.isTrue(content.checkVisibility());
     });
     it("should only allow a single accordion in a group to be open", async () => {
-        const el = await fixture(html `
-      <section>
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">First Ammendment</h4>
-          <div class="content">Content for First</div>
-        </usa-accordion>
-
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">Second Ammendment</h4>
-          <div class="content">Content for Second</div>
-        </usa-accordion>
-
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">Third Ammendment</h4>
-          <div class="content">Content for Third</div>
-        </usa-accordion>
-      </section>
-    `);
+        const el = await fixture(html `<section><usa-accordion name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Content for First</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Second Ammendment</h4><div class="content">Content for Second</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Third Ammendment</h4><div class="content">Content for Third</div></usa-accordion></section>`);
         const headings = el.querySelectorAll("h4");
         const content = Array.from(el.querySelectorAll(".content"));
         await userEvent.click(headings[0]);
@@ -84,24 +34,7 @@ describe("usa-accordion", () => {
         assert.deepEqual(content.map((el) => el.checkVisibility()), [false, false, true]);
     });
     it("should not close accordion not in the same group", async () => {
-        const el = await fixture(html `
-      <section>
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">First Ammendment</h4>
-          <div class="content">Content for First</div>
-        </usa-accordion>
-
-        <usa-accordion name="ammendment">
-          <h4 slot="heading">Second Ammendment</h4>
-          <div class="content">Content for Second</div>
-        </usa-accordion>
-
-        <usa-accordion name="different">
-          <h4 slot="heading">Third Ammendment</h4>
-          <div class="content">Content for Third</div>
-        </usa-accordion>
-      </section>
-    `);
+        const el = await fixture(html `<section><usa-accordion name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Content for First</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Second Ammendment</h4><div class="content">Content for Second</div></usa-accordion><usa-accordion name="different"><h4 slot="heading">Third Ammendment</h4><div class="content">Content for Third</div></usa-accordion></section>`);
         const headings = el.querySelectorAll("h4");
         const content = Array.from(el.querySelectorAll(".content"));
         await userEvent.click(headings[0]);

package/target/lib/alert/alert.element.js

@@ -9,77 +9,8 @@ let USAAlertElement = (() => {
                 delegatesFocus: true,
             },
             shadowDom: [
-                css `
-      :host {
-        display: block;
-        border-left: 0.5rem solid #adadad;
-        padding: 1rem 1.2rem;
-        color: #1b1b1b;
-        margin-bottom: 1rem;
-      }
-
-      :host([type="info"]) {
-        border-left-color: #00bde3;
-        background-color: #e7f6f8;
-      }
-
-      :host([type="warning"]) {
-        background-color: #faf3d1;
-        border-left-color: #ffbe2e;
-      }
-
-      :host([type="success"]) {
-        background-color: #ecf3ec;
-        border-left-color: #00a91c;
-      }
-
-      :host([type="error"]) {
-        background-color: #f4e3db;
-        border-left-color: #d54309;
-      }
-
-      :host([type="emergency"]) {
-        background-color: #9c3d10;
-        border-left-color: #9c3d10;
-        color: #fff;
-      }
-
-      :host([type="emergency"]) ::slotted(*) {
-        color: #fff;
-      }
-
-      .alert-heading {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        align-items: center;
-      }
-
-      usa-icon {
-        margin: -0.28rem 0.75rem 0 0;
-      }
-
-      #heading::slotted(*) {
-        font-size: 1.33rem;
-        line-height: 0.9;
-        margin-top: 0;
-        margin-bottom: 0.5rem;
-      }
-    `,
-                html `
-      <div class="alert-heading">
-        <usa-icon icon="check_circle"></usa-icon>
-
-        <div>
-          <slot id="heading" name="heading"></slot>
-        </div>
-
-        <div class="spacer"></div>
-
-        <div>
-          <slot></slot>
-        </div>
-      </div>
-    `,
+                css `:host{display:block;border-left:.5rem solid #adadad;padding:1rem 1.2rem;color:#1b1b1b;margin-bottom:1rem}:host([type=info]){border-left-color:#00bde3;background-color:#e7f6f8}:host([type=warning]){background-color:#faf3d1;border-left-color:#ffbe2e}:host([type=success]){background-color:#ecf3ec;border-left-color:#00a91c}:host([type=error]){background-color:#f4e3db;border-left-color:#d54309}:host([type=emergency]){background-color:#9c3d10;border-left-color:#9c3d10;color:#fff}:host([type=emergency]) ::slotted(*){color:#fff}.alert-heading{display:grid;grid-template-columns:auto 1fr;align-items:center}usa-icon{margin:-.28rem .75rem 0 0}#heading::slotted(*){font-size:1.33rem;line-height:.9;margin-top:0;margin-bottom:.5rem}`,
+                html `<div class="alert-heading"><usa-icon icon="check_circle"></usa-icon><div><slot id="heading" name="heading"></slot></div><div class="spacer"></div><div><slot></slot></div></div>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/alert/alert.stories.js

@@ -10,47 +10,7 @@ export default meta;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
     render() {
-        return html `
-      <usa-alert type="info">
-        <h3 slot="heading">Informative status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-
-      <usa-alert type="warning">
-        <h3 slot="heading">Warning status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-
-      <usa-alert type="success">
-        <h3 slot="heading">Success status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-
-      <usa-alert type="error">
-        <h3 slot="heading">Error status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-
-      <usa-alert type="emergency">
-        <h3 slot="heading">Emergency status</h3>
-
-        Lorem ipsum dolor sit amet,&nbsp;
-        <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-        eiusmod.
-      </usa-alert>
-    `;
+        return html `<usa-alert type="info"><h3 slot="heading">Informative status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert><usa-alert type="warning"><h3 slot="heading">Warning status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert><usa-alert type="success"><h3 slot="heading">Success status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert><usa-alert type="error"><h3 slot="heading">Error status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert><usa-alert type="emergency"><h3 slot="heading">Emergency status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert>`;
     },
 };
 //# sourceMappingURL=alert.stories.js.map

package/target/lib/alert/alert.test.js

@@ -4,15 +4,7 @@ import { USA_ALERT_TYPES } from "./alert-types.js";
 describe("usa-alert", () => {
     for (const alert of USA_ALERT_TYPES) {
         it(`should be accessible: ${alert}`, async () => {
-            const form = await fixture(html `
-        <usa-alert type=${alert}>
-          <h3 slot="heading">Status</h3>
-
-          Lorem ipsum dolor sit amet,&nbsp;
-          <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
-          eiusmod.
-        </usa-alert>
-      `);
+            const form = await fixture(html `<usa-alert type="${alert}"><h3 slot="heading">Status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert>`);
             return assert.isAccessible(form);
         });
     }