@noctuatech/uswds 0.1.2 → 0.1.3

package/target/lib/side-nav/side-nav.stories.js

@@ -4,45 +4,7 @@ const meta = {
     title: "usa-side-nav",
     tags: ["autodocs"],
     render() {
-        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>
-    `;
+        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: {},

package/target/lib/side-nav/side-nav.test.js

@@ -4,87 +4,11 @@ import "./side-nav-item/side-nav-item.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-side-nav", () => {
     it("should be accessible", async () => {
-        const sideNav = await fixture(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 sideNav = await fixture(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(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 sideNav = await fixture(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/target/lib/step-indicator/step/step.element.js

@@ -4,102 +4,8 @@ let USAStepIndicatorStepElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-step",
             shadowDom: [
-                css `
-      :host {
-        color: #5c5c5c;
-        display: block;
-        flex: 1 1 0%;
-        position: relative;
-        counter-increment: usa-step-indicator;
-      }
-
-      :host([counter]):after {
-        content: counter(usa-step-indicator);
-        height: 2.5rem;
-        border-radius: 99rem;
-        width: 2.5rem;
-        background-color: #fff;
-        box-shadow:
-          inset 0 0 0 0.25rem #919191,
-          0 0 0 0.25rem #fff;
-        color: #5c5c5c;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 700;
-        left: 0;
-        line-height: 0.9;
-        padding: calc((2.5rem - 2ex * 0.9) * 0.5);
-        position: absolute;
-        z-index: 100;
-        top: 0;
-        transform: translateY(-40%);
-        box-sizing: border-box;
-      }
-
-      :host([state="complete"]) {
-        color: #162e51;
-      }
-
-      :host([state="complete"])::before {
-        background-color: #162e51;
-      }
-
-      :host([state="current"]) {
-        color: #005ea2;
-        font-weight: bold;
-      }
-
-      :host([state="current"])::before {
-        background-color: #005ea2;
-      }
-
-      :host:before {
-        background-color: #919191;
-        content: "";
-        display: block;
-        height: 0.5rem;
-      }
-
-      .label {
-        display: block;
-        font-size: 1.06rem;
-        margin-top: 0.5rem;
-        padding-right: 2rem;
-        text-align: left;
-      }
-
-      :host([counter]) .label {
-        margin-top: 1.5rem;
-      }
-
-      :host([counter][state="complete"]):after {
-        background-color: #162e51;
-        box-shadow: 0 0 0 0.25rem #fff;
-        color: #fff;
-      }
-
-      :host([counter][state="current"]):after {
-        background-color: #005ea2;
-        box-shadow: 0 0 0 0.25rem #fff;
-        color: #fff;
-      }
-
-      :host([counter="small"]):after {
-        height: 1.5rem;
-        width: 1.5rem;
-        font-size: 0.93rem;
-      }
-
-      :host([counter]:last-child):before {
-        width: 0;
-      }
-    `,
-                html `
-      <div class="label">
-        <slot></slot>
-      </div>
-    `,
+                css `:host{color:#5c5c5c;display:block;flex:1 1 0%;position:relative;counter-increment:usa-step-indicator}:host([counter]):after{content:counter(usa-step-indicator);height:2.5rem;border-radius:99rem;width:2.5rem;background-color:#fff;box-shadow:inset 0 0 0 .25rem #919191,0 0 0 .25rem #fff;color:#5c5c5c;display:flex;align-items:center;justify-content:center;font-weight:700;left:0;line-height:.9;padding:calc((2.5rem - 2ex * .9) * .5);position:absolute;z-index:100;top:0;transform:translateY(-40%);box-sizing:border-box}:host([state=complete]){color:#162e51}:host([state=complete])::before{background-color:#162e51}:host([state=current]){color:#005ea2;font-weight:700}:host([state=current])::before{background-color:#005ea2}:host:before{background-color:#919191;content:"";display:block;height:.5rem}.label{display:block;font-size:1.06rem;margin-top:.5rem;padding-right:2rem;text-align:left}:host([counter]) .label{margin-top:1.5rem}:host([counter][state=complete]):after{background-color:#162e51;box-shadow:0 0 0 .25rem #fff;color:#fff}:host([counter][state=current]):after{background-color:#005ea2;box-shadow:0 0 0 .25rem #fff;color:#fff}:host([counter=small]):after{height:1.5rem;width:1.5rem;font-size:.93rem}:host([counter]:last-child):before{width:0}`,
+                html `<div class="label"><slot></slot></div>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/step-indicator/step-indicator.element.js

@@ -4,15 +4,7 @@ let USAStepIndicatorElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-step-indicator",
             shadowDom: [
-                css `
-      :host {
-        display: flex;
-        gap: 2px;
-        counter-reset: usa-step-indicator 0;
-        padding-top: 1rem;
-        margin-bottom: 1rem;
-      }
-    `,
+                css `:host{display:flex;gap:2px;counter-reset:usa-step-indicator 0;padding-top:1rem;margin-bottom:1rem}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/step-indicator/step-indicator.stories.js

@@ -5,27 +5,7 @@ const meta = {
     title: "usa-step-indicator",
     tags: ["autodocs"],
     render(args) {
-        return html `
-      <usa-step-indicator>
-        <usa-step state="complete" counter=${ifDefined(args.counter)}>
-          Personal information
-        </usa-step>
-
-        <usa-step state="complete" counter=${ifDefined(args.counter)}>
-          Household status
-        </usa-step>
-
-        <usa-step state="current" counter=${ifDefined(args.counter)}>
-          Supporting documents
-        </usa-step>
-
-        <usa-step counter=${ifDefined(args.counter)}>Signature</usa-step>
-
-        <usa-step counter=${ifDefined(args.counter)}>
-          Review and submit
-        </usa-step>
-      </usa-step-indicator>
-    `;
+        return html `<usa-step-indicator><usa-step state="complete" counter="${ifDefined(args.counter)}">Personal information</usa-step><usa-step state="complete" counter="${ifDefined(args.counter)}">Household status</usa-step><usa-step state="current" counter="${ifDefined(args.counter)}">Supporting documents</usa-step><usa-step counter="${ifDefined(args.counter)}">Signature</usa-step><usa-step counter="${ifDefined(args.counter)}">Review and submit</usa-step></usa-step-indicator>`;
     },
     argTypes: {
         counter: {

package/target/lib/step-indicator/step-indicator.test.js

@@ -3,15 +3,7 @@ import "./step/step.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-step-indicator", () => {
     it("should be accessible", async () => {
-        const stepIndicator = await fixture(html `
-      <usa-step-indicator>
-        <usa-step state="complete" counter="on">Personal information</usa-step>
-        <usa-step state="complete" counter="on">Household status</usa-step>
-        <usa-step state="current" counter="on">Supporting documents</usa-step>
-        <usa-step counter="on">Signature</usa-step>
-        <usa-step counter="on">Review and submit</usa-step>
-      </usa-step-indicator>
-    `);
+        const stepIndicator = await fixture(html `<usa-step-indicator><usa-step state="complete" counter="on">Personal information</usa-step><usa-step state="complete" counter="on">Household status</usa-step><usa-step state="current" counter="on">Supporting documents</usa-step><usa-step counter="on">Signature</usa-step><usa-step counter="on">Review and submit</usa-step></usa-step-indicator>`);
         return assert.isAccessible(stepIndicator);
     });
 });

package/target/lib/summary-box/summary-box.element.js

@@ -4,20 +4,8 @@ let USASummaryBoxElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-summary-box",
             shadowDom: [
-                css `
-      :host {
-        font-size: 1.06rem;
-        line-height: 1.5;
-        color: #1b1b1b;
-        background-color: #e7f6f8;
-        border-radius: 0.25rem;
-        border: 1px #99deea solid;
-        padding: 1.5rem;
-        position: relative;
-        display: block;
-      }
-    `,
-                html ` <slot></slot> `,
+                css `:host{font-size:1.06rem;line-height:1.5;color:#1b1b1b;background-color:#e7f6f8;border-radius:.25rem;border:1px #99deea solid;padding:1.5rem;position:relative;display:block}`,
+                html `<slot></slot>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/summary-box/summary-box.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: "usa-summary-box",
     tags: ["autodocs"],
     render() {
-        return html `<usa-summary-box> Hello World </usa-summary-box>`;
+        return html `<usa-summary-box>Hello World</usa-summary-box>`;
     },
     argTypes: {},
     args: {},

package/target/lib/summary-box/summary-box.test.js

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

package/target/lib/tag/tag.element.js

@@ -6,28 +6,7 @@ let USATagElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-tag",
             shadowDom: [
-                css `
-      :host {
-        font-size: 0.93rem;
-        color: #1b1b1b;
-        text-transform: uppercase;
-        background-color: #e6e6e6;
-        border-radius: 2px;
-        margin-right: 0.25rem;
-        padding: 1px 0.5rem;
-      }
-
-      :host([variant="big"]) {
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        font-size: 1.06rem;
-      }
-
-      :host([type="new"]) {
-        background-color: #c05600;
-        color: #fff;
-      }
-    `,
+                css `:host{font-size:.93rem;color:#1b1b1b;text-transform:uppercase;background-color:#e6e6e6;border-radius:2px;margin-right:.25rem;padding:1px .5rem}:host([variant=big]){padding-left:.5rem;padding-right:.5rem;font-size:1.06rem}:host([type=new]){background-color:#c05600;color:#fff}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/tag/tag.stories.js

@@ -5,7 +5,7 @@ const meta = {
     title: "usa-tag",
     tags: ["autodocs"],
     render(args) {
-        return html `<usa-tag variant=${args.variant}>Hello World</usa-tag>`;
+        return html `<usa-tag variant="${args.variant}">Hello World</usa-tag>`;
     },
     argTypes: {
         variant: {

package/target/lib/tag/tag.test.js

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

package/target/lib/textarea/textarea.element.js

@@ -5,55 +5,8 @@ let USATextareaElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-textarea",
             shadowDom: [
-                css `
-      * {
-        box-sizing: border-box;
-      }
-
-      :host {
-        font-size: 1.06rem;
-        line-height: 1.3;
-        display: flex;
-        flex-direction: column;
-        font-weight: 400;
-        margin-bottom: 1.5rem;
-        max-width: 30rem;
-        position: relative;
-        height: 9lh;
-        gap: 0.5rem;
-      }
-
-      textarea {
-        font-family: inherit;
-        font-size: inherit;
-        border-radius: 0;
-        color: #1b1b1b;
-        display: block;
-        max-width: 30rem;
-        padding: .5rem;
-        border-width: 1px;
-        border-color: #5c5c5c;
-        border-style: solid;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        width: 100%;
-        resize: none;
-        flex-grow: 1;
-      }
-
-      textarea:not(:disabled):focus {
-        outline: 0.25rem solid #2491ff;
-        outline-offset: 0;
-      }
-    `,
-                html `
-      <label for="textarea">
-        <slot></slot>
-      </label>
-      
-      <textarea id="textarea"></textarea>
-    `,
+                css `*{box-sizing:border-box}:host{font-size:1.06rem;line-height:1.3;display:flex;flex-direction:column;font-weight:400;margin-bottom:1.5rem;max-width:30rem;position:relative;height:9lh;gap:.5rem}textarea{font-family:inherit;font-size:inherit;border-radius:0;color:#1b1b1b;display:block;max-width:30rem;padding:.5rem;border-width:1px;border-color:#5c5c5c;border-style:solid;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;resize:none;flex-grow:1}textarea:not(:disabled):focus{outline:.25rem solid #2491ff;outline-offset:0}`,
+                html `<label for="textarea"><slot></slot></label> <textarea id="textarea"></textarea>`,
             ],
         })];
     let _classDescriptor;

package/target/lib/textarea/textarea.test.js

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