@noctuatech/uswds 0.0.6 → 0.0.8

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

@@ -0,0 +1,122 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { css, element, html } from "@joist/element";
+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([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][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]) .label {
+        margin-top: 1.5rem;
+      }
+
+      :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([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>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var USAStepIndicatorStepElement = _classThis = class extends _classSuper {
+    };
+    __setFunctionName(_classThis, "USAStepIndicatorStepElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USAStepIndicatorStepElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USAStepIndicatorStepElement = _classThis;
+})();
+export { USAStepIndicatorStepElement };
+//# sourceMappingURL=step-indicator-step.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator-step.element.js","sourceRoot":"","sources":["../../../../src/lib/step-indicator/step/step-indicator-step.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA6GvC,2BAA2B;4BArGvC,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0FF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBAC+C,WAAW;wDAAnB,SAAQ,WAAW;;;;;QAA5D,6KAA+D;;;QAAlD,uDAA2B;;;;SAA3B,2BAA2B"}

package/target/lib/step-indicator/step/step-indicator-step.test.d.ts

@@ -0,0 +1 @@
+import "./step-indicator-step.element.js";

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

@@ -0,0 +1,11 @@
+import "./step-indicator-step.element.js";
+import { fixture, html, assert } from "@open-wc/testing";
+describe("usa-step", () => {
+    it("should be accessible", async () => {
+        const stepIndicatorStep = await fixture(html `
+      <usa-step>Hello World</usa-step>
+    `);
+        return assert.isAccessible(stepIndicatorStep);
+    });
+});
+//# sourceMappingURL=step-indicator-step.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator-step.test.js","sourceRoot":"","sources":["../../../../src/lib/step-indicator/step/step-indicator-step.test.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,iBAAiB,GAAG,MAAM,OAAO,CAA8B,IAAI,CAAA;;KAExE,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/step-indicator/step-indicator.element.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-step-indicator": USAStepIndicatorElement;
+    }
+}
+export declare class USAStepIndicatorElement extends HTMLElement {
+}

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

@@ -0,0 +1,36 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { css, element, html } from "@joist/element";
+let USAStepIndicatorElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-step-indicator",
+            shadowDom: [
+                css `
+      :host {
+        display: flex;
+        gap: 2px;
+        counter-reset: usa-step-indicator;
+        padding-top: 1rem;
+        margin-bottom: 1rem;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var USAStepIndicatorElement = _classThis = class extends _classSuper {
+    };
+    __setFunctionName(_classThis, "USAStepIndicatorElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USAStepIndicatorElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USAStepIndicatorElement = _classThis;
+})();
+export { USAStepIndicatorElement };
+//# sourceMappingURL=step-indicator.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.element.js","sourceRoot":"","sources":["../../../src/lib/step-indicator/step-indicator.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAuBvC,uBAAuB;4BAfnC,OAAO,CAAC;YACP,OAAO,EAAE,oBAAoB;YAC7B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;KAQF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBAC2C,WAAW;oDAAnB,SAAQ,WAAW;;;;;QAAxD,6KAA2D;;;QAA9C,uDAAuB;;;;SAAvB,uBAAuB"}

package/target/lib/step-indicator/step-indicator.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from "@storybook/web-components";
+import type { USAStepIndicatorElement } from "./step-indicator.element.js";
+declare const meta: {
+    title: string;
+    tags: string[];
+    render(args: USAStepIndicatorElement & {
+        counter: string;
+    }): import("lit-html").TemplateResult<1>;
+    argTypes: {
+        counter: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        counter: string;
+    };
+};
+export default meta;
+type Story = StoryObj<USAStepIndicatorElement>;
+export declare const Primary: Story;

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

@@ -0,0 +1,42 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-step-indicator",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <usa-step-indicator>
+        <usa-step state="complete" counter=${args.counter}>
+          Personal information
+        </usa-step>
+
+        <usa-step state="complete" counter=${args.counter}>
+          Household status
+        </usa-step>
+
+        <usa-step state="current" counter=${args.counter}>
+          Supporting documents
+        </usa-step>
+
+        <usa-step counter=${args.counter}>Signature</usa-step>
+
+        <usa-step counter=${args.counter}>Review and submit</usa-step>
+      </usa-step-indicator>
+    `;
+    },
+    argTypes: {
+        counter: {
+            control: "select",
+            options: ["on", "small"],
+        },
+    },
+    args: {
+        counter: "on",
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=step-indicator.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.stories.js","sourceRoot":"","sources":["../../../src/lib/step-indicator/step-indicator.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;6CAE8B,IAAI,CAAC,OAAO;;;;6CAIZ,IAAI,CAAC,OAAO;;;;4CAIb,IAAI,CAAC,OAAO;;;;4BAI5B,IAAI,CAAC,OAAO;;4BAEZ,IAAI,CAAC,OAAO;;KAEnC,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;SACzB;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CAC4D,CAAC;AAEhE,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/step-indicator/step-indicator.test.d.ts

@@ -0,0 +1 @@
+import "./step-indicator.element.js";

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

@@ -0,0 +1,17 @@
+import "./step-indicator.element.js";
+import { fixture, html, assert } 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>
+    `);
+        return assert.isAccessible(stepIndicator);
+    });
+});
+//# sourceMappingURL=step-indicator.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.test.js","sourceRoot":"","sources":["../../../src/lib/step-indicator/step-indicator.test.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,aAAa,GAAG,MAAM,OAAO,CAA0B,IAAI,CAAA;;;;;;;;KAQhE,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib.d.ts

@@ -13,3 +13,5 @@ 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";
+export { USAStepIndicatorElement } from "./lib/step-indicator/step-indicator.element.js";
+export { USAStepIndicatorStepElement } from "./lib/step-indicator/step/step-indicator-step.element.js";

package/target/lib.js

@@ -13,4 +13,6 @@ 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";
+export { USAStepIndicatorElement } from "./lib/step-indicator/step-indicator.element.js";
+export { USAStepIndicatorStepElement } from "./lib/step-indicator/step/step-indicator-step.element.js";
 //# sourceMappingURL=lib.js.map

package/target/lib.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AACzF,OAAO,EAAE,2BAA2B,EAAE,MAAM,0DAA0D,CAAC"}