@noctuatech/uswds 0.1.2 → 0.1.3

package/target/lib/file-input/file-input.stories.js

@@ -9,19 +9,7 @@ const meta = {
             const data = new FormData(e.target);
             console.log(data.getAll("upload"));
         }
-        return html `
-      <form @submit=${onSubmit}>
-        <usa-file-input name="upload" required>
-          Input accepts a single file
-
-          <div slot="description">
-            Drag file here or <usa-link>choose from folder</usa-link>
-          </div>
-        </usa-file-input>
-
-        <usa-button type="submit">SUBMIT</usa-button>
-      </form>
-    `;
+        return html `<form @submit="${onSubmit}"><usa-file-input name="upload" required>Input accepts a single file<div slot="description">Drag file here or<usa-link>choose from folder</usa-link></div></usa-file-input><usa-button type="submit">SUBMIT</usa-button></form>`;
     },
     argTypes: {},
     args: {},

package/target/lib/file-input/file-input.test.js

@@ -2,28 +2,14 @@ import "./file-input.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-file-input", () => {
     it("should be accessible", async () => {
-        const fileInput = await fixture(html `
-      <usa-file-input>Hello World</usa-file-input>
-    `);
+        const fileInput = await fixture(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(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 form = await fixture(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) {

package/target/lib/icon/icon.element.js

@@ -6,20 +6,7 @@ let USAIconElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-icon",
             shadowDom: [
-                css `
-      :host {
-        display: inline-block;
-        height: 2rem;
-        position: relative;
-        width: 2rem;
-      }
-
-      svg {
-        fill: currentColor;
-        height: 100%;
-        width: 100%;
-      }
-    `,
+                css `:host{display:inline-block;height:2rem;position:relative;width:2rem}svg{fill:currentColor;height:100%;width:100%}`,
             ],
         }), injectable({
             name: "usa-icon-ctx",

package/target/lib/icon/icon.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: "usa-icon",
     tags: [],
     render(args) {
-        return html `<usa-icon icon=${args.icon}></usa-icon>`;
+        return html `<usa-icon icon="${args.icon}"></usa-icon>`;
     },
     argTypes: {},
     args: {},
@@ -22,18 +22,7 @@ export const AllIcons = {
                 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>`;
+        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>`;
     },
 };
 //# sourceMappingURL=icon.stories.js.map

package/target/lib/input/input.element.js

@@ -5,79 +5,8 @@ let USATextInputElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-input",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        font-size: 1.06rem;
-        line-height: 1.3;
-        display: block;
-        font-weight: 400;
-        max-width: 30rem;
-        margin-bottom: 1.5rem;
-        position: relative;
-      }
-
-      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;
-      }
-
-      slot[name="detail"]::slotted(*) {
-        color: #757575;
-      }
-
-      slot[name="detail"]::slotted(usa-icon) {
-        width: 1.5rem;
-        height: 1.5rem;
-      }
-
-      slot[name="detail"] {
-        display: block;
-        position: absolute;
-        bottom: 0.21rem;
-        left: 0.5rem;
-      }
-
-      :host([detail="pfx"]) input {
-        padding-left: 2.5rem;
-      }
-
-      :host([detail="sfx"]) input {
-        padding-right: 2.5rem;
-      }
-
-      :host([detail="sfx"]) slot[name="detail"] {
-        right: 0.5rem;
-        left: auto;
-      }
-    `,
-                html `
-      <label>
-        <slot name="detail"></slot>
-
-        <slot></slot>
-
-        <input tabindex="0" />
-      </label>
-    `,
+                css `*{box-sizing:border-box}:host{font-size:1.06rem;line-height:1.3;display:block;font-weight:400;max-width:30rem;margin-bottom:1.5rem;position:relative}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:.5rem;padding:.5rem;width:100%}input:not(:disabled):focus{outline:.25rem solid #2491ff;outline-offset:0}slot[name=detail]::slotted(*){color:#757575}slot[name=detail]::slotted(usa-icon){width:1.5rem;height:1.5rem}slot[name=detail]{display:block;position:absolute;bottom:.21rem;left:.5rem}:host([detail=pfx]) input{padding-left:2.5rem}:host([detail=sfx]) input{padding-right:2.5rem}:host([detail=sfx]) slot[name=detail]{right:.5rem;left:auto}`,
+                html `<label><slot name="detail"></slot><slot></slot><input tabindex="0"></label>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/input/input.stories.js

@@ -4,21 +4,11 @@ const meta = {
     title: "usa-input",
     tags: ["autodocs"],
     render() {
-        return html `
-      <form @submit=${(e) => {
+        return html `<form @submit="${(e) => {
             e.preventDefault();
             const data = new FormData(e.target);
             console.log(Array.from(data.entries()));
-        }}>
-        <usa-input name="fname" autocomplete="off" detail="pfx">
-          <usa-icon icon="credit_card" slot="detail"></usa-icon>
-
-          First name
-        </usa-input>
-
-        <usa-button type="submit">Submit</usa-button>
-      </form>
-    `;
+        }}"><usa-input name="fname" autocomplete="off" detail="pfx"><usa-icon icon="credit_card" slot="detail"></usa-icon>First name</usa-input><usa-button type="submit">Submit</usa-button></form>`;
     },
     argTypes: {},
     args: {},

package/target/lib/input/input.test.js

@@ -3,30 +3,16 @@ import { assert, fixture, html } from "@open-wc/testing";
 import { userEvent } from "@testing-library/user-event";
 describe("usa-input", () => {
     it("should be accessible", async () => {
-        const form = await fixture(html `
-      <usa-input name="fname" value="Foo">Hello World</usa-input>
-    `);
+        const form = await fixture(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(html `
-      <form>
-        <usa-input name="fname" value="Foo">Hello World</usa-input>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(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(html `
-      <form>
-        <usa-input name="fname">Hello World</usa-input>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(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");
         if (nativeInput) {
@@ -36,13 +22,7 @@ describe("usa-input", () => {
         assert.equal(value.get("fname"), "Bar");
     });
     it("should not submit when not valid", async () => {
-        const form = await fixture(html `
-      <form>
-        <usa-input name="fname" required>Hello World</usa-input>
-
-        <button>Submit</button>
-      </form>
-    `);
+        const form = await fixture(html `<form><usa-input name="fname" required>Hello World</usa-input><button>Submit</button></form>`);
         assert.equal(form.checkValidity(), false);
     });
 });

package/target/lib/input-mask/input-mask.element.js

@@ -5,11 +5,7 @@ let USAInputMaskElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-input-mask",
             shadowDom: [
-                css `
-      :host {
-        display: contents;
-      }
-    `,
+                css `:host{display:contents}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/input-mask/input-mask.stories.js

@@ -4,18 +4,7 @@ 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}
-        >
-          Phone:
-        </usa-input>
-      </usa-input-mask>
-    `;
+        return html `<usa-input-mask><usa-input name="phone" placeholder="${args.mask}" autocomplete="off" mask="${args.mask}">Phone:</usa-input></usa-input-mask>`;
     },
     argTypes: {},
     args: {

package/target/lib/input-mask/input-mask.test.js

@@ -36,20 +36,12 @@ describe("format", () => {
 });
 describe("usa-input-mask", () => {
     it("should format default value", async () => {
-        const el = await fixture(html `
-      <usa-input-mask mask="(999) 999-9999">
-        <input name="phone" value="1234567890" mask />
-      </usa-input-mask>
-    `);
+        const el = await fixture(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(html `
-      <usa-input-mask>
-        <input name="phone" mask="(999) 999-9999" />
-      </usa-input-mask>
-    `);
+        const el = await fixture(html `<usa-input-mask><input name="phone" mask="(999) 999-9999"></usa-input-mask>`);
         const input = el.querySelector("input");
         if (input) {
             input.value = "8888888888";
@@ -60,24 +52,12 @@ describe("usa-input-mask", () => {
 });
 describe("usa-input-mask with usa-input", () => {
     it("should format default value", async () => {
-        const el = await fixture(html `
-      <usa-input-mask mask="(999) 999-9999">
-        <usa-input name="phone" value="1234567890" id="TEST" mask></usa-input>
-      </usa-input-mask>
-    `);
+        const el = await fixture(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(html `
-      <usa-input-mask>
-        <usa-input
-          name="phone"
-          value="1234567890"
-          mask="(999) 999-9999"
-        ></usa-input>
-      </usa-input-mask>
-    `);
+        const el = await fixture(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");
         if (input) {
             input.value = "8888888888";

package/target/lib/link/link.element.js

@@ -4,24 +4,8 @@ let USALinkElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-link",
             shadowDom: [
-                css `
-      :host {
-        display: inline-flex;
-        color: #005ea2;
-        text-decoration: underline;
-      }
-
-      a {
-        color: inherit;
-        text-decoration: inherit;
-        display: inherit;
-      }
-    `,
-                html `
-      <a>
-        <slot></slot>
-      </a>
-    `,
+                css `:host{display:inline-flex;color:#005ea2;text-decoration:underline}a{color:inherit;text-decoration:inherit;display:inherit}`,
+                html `<a><slot></slot></a>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/modal/modal-close/modal-close.element.js

@@ -4,42 +4,8 @@ let USAModalCloseElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-modal-close",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: block;
-        position: absolute;
-        top: 1rem;
-        right: 1rem;
-      }
-
-      button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: none;
-        border: none;
-        cursor: pointer;
-        height: 100%;
-        width: 100%;
-        border-radius: 100%;
-        padding: 0;
-        margin: 0;
-      }
-
-      button:focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-    `,
-                html `
-      <button aria-label="close modal">
-        <usa-icon icon="close"></usa-icon>
-      </button>
-    `,
+                css `*{box-sizing:border-box}:host{display:block;position:absolute;top:1rem;right:1rem}button{display:flex;align-items:center;justify-content:center;background:0 0;border:none;cursor:pointer;height:100%;width:100%;border-radius:100%;padding:0;margin:0}button:focus{outline:.25rem solid #2491ff;outline-offset:0}`,
+                html `<button aria-label="close modal"><usa-icon icon="close"></usa-icon></button>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/modal/modal-close/modal-close.test.js

@@ -2,9 +2,7 @@ import "./modal-close.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-modal-close", () => {
     it("should be accessible", async () => {
-        const modalClose = await fixture(html `
-      <usa-modal-close>Hello World</usa-modal-close>
-    `);
+        const modalClose = await fixture(html `<usa-modal-close>Hello World</usa-modal-close>`);
         return assert.isAccessible(modalClose);
     });
 });

package/target/lib/modal/modal-heading/modal-heading.element.js

@@ -4,30 +4,8 @@ let USAModalHeadingElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-modal-heading",
             shadowDom: [
-                css `
-      :host {
-        font-family:
-          Merriweather Web,
-          Georgia,
-          Cambria,
-          Times New Roman,
-          Times,
-          serif !important;
-
-        font-size: 1.22rem;
-      }
-
-      h2 {
-        margin-top: 0;
-        line-height: 1.4;
-        font-size: 1.45rem;
-      }
-    `,
-                html `
-      <h2>
-        <slot></slot>
-      </h2>
-    `,
+                css `:host{font-family:Merriweather Web,Georgia,Cambria,Times New Roman,Times,serif!important;font-size:1.22rem}h2{margin-top:0;line-height:1.4;font-size:1.45rem}`,
+                html `<h2><slot></slot></h2>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/modal/modal-heading/modal-heading.test.js

@@ -2,9 +2,7 @@ import "./modal-heading.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-modal-heading", () => {
     it("should be accessible", async () => {
-        const modalHeading = await fixture(html `
-      <usa-modal-heading>Hello World</usa-modal-heading>
-    `);
+        const modalHeading = await fixture(html `<usa-modal-heading>Hello World</usa-modal-heading>`);
         return assert.isAccessible(modalHeading);
     });
 });

package/target/lib/modal/modal.element.js

@@ -4,39 +4,8 @@ let USAModalElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-modal",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        display: contents;
-      }
-
-      dialog {
-        border: none;
-        font-size: 1.06rem;
-        line-height: 1.5;
-        border-radius: 0.5rem;
-        background: #fff;
-        color: #1b1b1b;
-        max-width: 30rem;
-        padding-top: 4rem;
-        padding-left: 4rem;
-        padding-right: 4rem;
-        padding-bottom: 2rem;
-        width: 100%;
-      }
-
-      ::backdrop {
-        background: rgba(0, 0, 0, 0.7);
-      }
-    `,
-                html `
-      <dialog>
-        <slot></slot>
-      </dialog>
-    `,
+                css `*{box-sizing:border-box}:host{display:contents}dialog{border:none;font-size:1.06rem;line-height:1.5;border-radius:.5rem;background:#fff;color:#1b1b1b;max-width:30rem;padding-top:4rem;padding-left:4rem;padding-right:4rem;padding-bottom:2rem;width:100%}::backdrop{background:rgba(0,0,0,.7)}`,
+                html `<dialog><slot></slot></dialog>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/modal/modal.stories.js

@@ -4,24 +4,7 @@ const meta = {
     title: "usa-modal",
     tags: ["autodocs"],
     render() {
-        return html `
-      <usa-button modal-target="mymodal">Open Modal</usa-button>
-
-      <usa-modal id="mymodal">
-        <usa-modal-close></usa-modal-close>
-
-        <usa-modal-heading>
-          Are you sure you want to continue?
-        </usa-modal-heading>
-
-        <usa-input placeholder="foo@email.com" autofocus>
-          Enter your email to continue
-        </usa-input>
-
-        <usa-button modal-action="confirm">Yes I am sure</usa-button>
-        <usa-button modal-action="cancel" variant="outline">Cancel</usa-button>
-      </usa-modal>
-    `;
+        return html `<usa-button modal-target="mymodal">Open Modal</usa-button><usa-modal id="mymodal"><usa-modal-close></usa-modal-close><usa-modal-heading>Are you sure you want to continue?</usa-modal-heading><usa-input placeholder="foo@email.com" autofocus>Enter your email to continue</usa-input><usa-button modal-action="confirm">Yes I am sure</usa-button><usa-button modal-action="cancel" variant="outline">Cancel</usa-button></usa-modal>`;
     },
     argTypes: {},
     args: {},

package/target/lib/modal/modal.test.js

@@ -4,17 +4,7 @@ import "./modal-close/modal-close.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-modal", () => {
     it("should be accessible", async () => {
-        const modal = await fixture(html `
-      <usa-modal open>
-        <usa-modal-close></usa-modal-close>
-
-        <usa-modal-heading>
-          Are you sure you want to continue?
-        </usa-modal-heading>
-
-        <p>This is some other example of content</p>
-      </usa-modal>
-    `);
+        const modal = await fixture(html `<usa-modal open><usa-modal-close></usa-modal-close><usa-modal-heading>Are you sure you want to continue?</usa-modal-heading><p>This is some other example of content</p></usa-modal>`);
         return assert.isAccessible(modal);
     });
 });

package/target/lib/radio/radio-option/radio-option.element.js

@@ -8,22 +8,8 @@ let USARadioOptionElement = (() => {
         }), element({
             tagName: "usa-radio-option",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        margin-top: 0.05rem;
-      }
-    `,
-                html `
-      <!-- This label will be moved to the shadow dom of its parent -->
-      <label>
-        <input type="radio" tabindex="0" />
-        <slot name="reserved"></slot>
-      </label>
-
-      <slot></slot>
-    `,
+                css `:host{display:flex;flex-direction:column;margin-top:.05rem}`,
+                html `<label><input type="radio" tabindex="0"><slot name="reserved"></slot></label><slot></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/radio/radio-option/radio-option.test.js

@@ -3,11 +3,7 @@ import "./radio-option.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-radio-option", () => {
     it("should map value to slot", async () => {
-        const radio = await fixture(html `
-      <usa-radio>
-        <usa-radio-option value="first">First</usa-radio-option>
-      </usa-radio>
-    `);
+        const radio = await fixture(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);
     });