npm - @noctuatech/uswds - Versions diffs - 0.2.1 → 1.0.0 - Mend

@noctuatech/uswds 0.2.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/README.md CHANGED Viewed

@@ -72,7 +72,7 @@ npm run gen element
 ### Form Components
 - [x] Button
-- [ ] Button group
+- [x] Button group
 - [x] Checkbox
 - [x] Combo box
 - [ ] Date picker
@@ -90,10 +90,10 @@ npm run gen element
 ### Navigation Components
 - [x] Accordion
-- [ ] Breadcrumb
-- [ ] In-page navigation
+- [x] Breadcrumb
+- [x] In-page navigation
 - [x] Link
-- [ ] Pagination
+- [x] Pagination
 - [x] Side navigation
 - [x] Step indicator
@@ -105,10 +105,9 @@ npm run gen element
 - [ ] Footer
 - [ ] Header
 - [x] Icon
-- [ ] Identifier
 - [ ] List
 - [x] Modal
-- [ ] Process list
+- [x] Process list
 - [ ] Prose
 - [x] Site alert
 - [x] Summary box

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",

package/src/GETTING_STARTED.mdx ADDED Viewed

@@ -0,0 +1,77 @@
+# Getting Started
+Getting started is easy! In just two simple steps, you'll be up and running with Noctua's US Web Design System, making it easy to build accessible, fast, and consistent websites. Let's get started!
+## Install USWDS
+Either install USWDS directly from NPM.
+```sh
+npm install @noctuatech/uswds
+```
+Or from a CDN.
+```html
+<script type="module" src="https://esm.sh/@noctuatech/uswds/define.js?bundle"></script>
+```
+## Use components directly in your HTML
+After installing USWDS, you can start using the components in your HTML.
+```html
+<!-- USWDS needs to be told where to find static assets such as icons -->
+<usa-config icon-path="https://esm.sh/@noctuatech/uswds/assets/usa-icons/">
+  <form>
+    <usa-input name="name" placeholder="Bob Smith">Name</usa-input>
+    <usa-input name="email" placeholder="my@email.com">Email</usa-input>
+    <usa-input-mask mask="(999) 999-9999">
+      <usa-input name="phone" placeholder="(xxx) xxx-xxxx">
+        Phone
+      </usa-input>
+    </usa-input-mask>
+    <usa-button type="submit">Submit</usa-button>
+  </form>
+</usa-config>
+```
+### Configuration
+There are two ways to confifure UWDS for your application. There is currently only one configuration option, but there will be more in the future.
+1. The `usa-config` element is used to configure the USWDS components. This element will most comonly be at the root of your application.
+   But you can have multiple instances if you have different needs in different parts of your document. Configuration will be scoped to children of the `usa-config` element.
+```html
+<body>
+  <usa-config icon-path="https://esm.sh/@noctuatech/uswds/assets/usa-icons/">
+    <!-- Your application -->
+  </usa-config>
+</body>
+```
+2. JavaScript API. This version of USWDS is built with [Joist](https://github.com/joist-framework/joist), a dependency injection framework for JavaScript.
+   Knowing this we can provide our own configuration to USWDS components.
+```ts
+import { DOMInjector } from "@joist/di";
+import { USAConfig } from "@noctuatech/uswds";
+const app = new DOMInjector([
+  [
+    USAConfig,
+    {
+      factory() {
+        return {
+          iconPath: "https://esm.sh/@noctuatech/uswds/assets/usa-icons/",
+        };
+      },
+    },
+  ],
+]);
+app.attach(document.body);
+```

package/src/lib/breadcrumbs/breadcrumb/breadcrumb.element.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import { attr, css, element, html, query } from "@joist/element";
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-breadcrumb": USABreadcrumbElement;
+  }
+}
+@element({
+  tagName: "usa-breadcrumb",
+  shadowDom: [
+    css`
+      :host {
+        position: relative;
+        right: auto;
+        display: inline;
+        max-width: unset;
+        padding-right: 1.5rem;
+      }
+      :host(:last-child) usa-icon {
+        display: none;
+      }
+      a[href] {
+        color: #005ea2;
+        display: inline;
+        text-decoration: underline;
+      }
+      usa-icon {
+        height: 1rem;
+        width: 1.5rem;
+        position: absolute;
+        top: .075rem;
+      }
+    `,
+    html`
+      <a>
+        <slot></slot>
+      </a>
+      <usa-icon icon="navigate_next"></usa-icon>
+    `,
+  ],
+})
+export class USABreadcrumbElement extends HTMLElement {
+  @attr()
+  accessor href = "";
+  @attr()
+  accessor role = "listitem";
+  #a = query("a");
+  attributeChangedCallback() {
+    this.#a({ href: this.href });
+  }
+}

package/src/lib/breadcrumbs/breadcrumbs.element.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { attr, css, element, html } from "@joist/element";
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-breadcrumbs": USABreadcrumbsElement;
+  }
+}
+@element({
+  tagName: "usa-breadcrumbs",
+  shadowDom: [
+    css`
+      :host {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        margin-bottom: 0;
+        margin-top: 0;
+        list-style-type: none;
+        padding-left: 0;
+        display: block;
+        padding: .25rem;
+        margin-left: -.25rem;
+        margin-right: -.25rem;
+      }
+      :host([wrap]) {
+        white-space: normal;
+      }
+    `,
+    html`
+      <slot></slot>
+    `,
+  ],
+})
+export class USABreadcrumbsElement extends HTMLElement {
+  @attr()
+  accessor role = "list";
+  @attr()
+  accessor wrap = false;
+}

package/src/lib/breadcrumbs/breadcrumbs.stories.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+import type { USABreadcrumbsElement } from "./breadcrumbs.element.js";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-breadcrumbs",
+  tags: ["autodocs"],
+  render() {
+    return html`
+      <usa-breadcrumbs>
+        <usa-breadcrumb href="/">Home</usa-breadcrumb>
+        <usa-breadcrumb href="/">Federal Contracting</usa-breadcrumb>
+        <usa-breadcrumb href="/">Contracting assistance programs</usa-breadcrumb>
+        <usa-breadcrumb>Economically disadvantaged women-owned small business federal contracting program</usa-breadcrumb>
+      </usa-breadcrumbs>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USABreadcrumbsElement>;
+export default meta;
+type Story = StoryObj<USABreadcrumbsElement>;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/breadcrumbs/breadcrumbs.test.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import "./breadcrumbs.element.js";
+import "./breadcrumb/breadcrumb.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+import type { USABreadcrumbsElement } from "./breadcrumbs.element.js";
+describe("usa-breadcrumbs", () => {
+  it("should be accessible", async () => {
+    const breadcrumbs = await fixture<USABreadcrumbsElement>(html`
+      <usa-breadcrumbs>
+        <usa-breadcrumb href="/">Home</usa-breadcrumb>
+        <usa-breadcrumb href="/">Federal Contracting</usa-breadcrumb>
+        <usa-breadcrumb href="/">Contracting assistance programs</usa-breadcrumb>
+        <usa-breadcrumb>Economically disadvantaged women-owned small business federal contracting program</usa-breadcrumb>
+      </usa-breadcrumbs>
+    `);
+    return assert.isAccessible(breadcrumbs);
+  });
+});

package/src/lib/button-group/button-group.element.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { css, element, html } from "@joist/element";
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-button-group": USAButtonGroupElement;
+  }
+}
+@element({
+  tagName: "usa-button-group",
+  shadowDom: [
+    css`
+      :host {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+      }
+      @media (min-width: 30em) {
+        :host {
+          flex-wrap: nowrap;
+          align-items: stretch;
+          flex-direction: row;
+        }
+    }
+    `,
+    html`
+      <slot></slot>
+    `,
+  ],
+})
+export class USAButtonGroupElement extends HTMLElement {}

package/src/lib/button-group/button-group.stories.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+import type { USAButtonGroupElement } from "./button-group.element.js";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-button-group",
+  tags: ["autodocs"],
+  render() {
+    return html`
+      <usa-button-group>
+        <usa-button variant="outline">Back</usa-button>
+        <usa-button variant="primary">Continue</usa-button>
+      </usa-button-group>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAButtonGroupElement>;
+export default meta;
+type Story = StoryObj<USAButtonGroupElement>;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/button-group/button-group.test.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import "./button-group.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+import type { USAButtonGroupElement } from "./button-group.element.js";
+describe("usa-button-group", () => {
+  it("should be accessible", async () => {
+    const buttonGroup = await fixture<USAButtonGroupElement>(html`
+      <usa-button-group>Hello World</usa-button-group>
+    `);
+    return assert.isAccessible(buttonGroup);
+  });
+});

package/src/lib/define.ts CHANGED Viewed

@@ -41,3 +41,9 @@ import "./process-list/process-list.element.js";
 import "./process-list/process-list-item/process-list-item.element.js";
 import "./in-page-nav/in-page-nav.element.js";
 import "./in-page-nav/in-page-nav-item/in-page-nav-item.element.js";
+import "./button-group/button-group.element.js";
+import "./breadcrumbs/breadcrumbs.element.js";
+import "./breadcrumbs/breadcrumb/breadcrumb.element.js";
+import "./pagination/pagination.element.js";
+import "./pagination/pagination-item/pagination-item.element.js";
+import "./pagination/pagination-no/pagination-no.element.js";

package/src/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.ts CHANGED Viewed

@@ -24,6 +24,10 @@ declare global {
         text-decoration: none;
       }
+      a:hover {
+        text-decoration: underline;
+      }
       :host([primary]) a {
         font-weight: bold;
       }

package/src/lib/in-page-nav/in-page-nav.element.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { css, element, html, queryAll } from "@joist/element";
+import { attr, css, element, html, queryAll } from "@joist/element";
 declare global {
   interface HTMLElementTagNameMap {
@@ -25,13 +25,16 @@ declare global {
   ],
 })
 export class USAInPageNavElement extends HTMLElement {
-  #items = queryAll("usa-in-page-nav-item", this);
+  @attr()
+  accessor role = "list";
+  items = queryAll("usa-in-page-nav-item", this);
   #observer = new IntersectionObserver(
     (entries) => {
       for (const entry of entries) {
         if (entry.isIntersecting) {
-          for (const item of this.#items()) {
+          for (const item of this.items()) {
             item.active = entry.target === item.targetElement;
           }
@@ -43,7 +46,7 @@ export class USAInPageNavElement extends HTMLElement {
   );
   connectedCallback() {
-    const items = this.#items();
+    const items = this.items();
     for (const item of items) {
       if (item.targetElement) {

package/src/lib/in-page-nav/in-page-nav.stories.ts CHANGED Viewed

@@ -11,16 +11,18 @@ const meta = {
     return html`
       <div class="usa-in-page-nav-container">
         <aside style="position: fixed; right: 1rem; top: 2rem;">
-          <usa-in-page-nav>
-            <usa-in-page-nav-item target="lorem-ipsum-dolor" primary>Lorem ipsum dolor</usa-in-page-nav-item>
-            <usa-in-page-nav-item target="consectetuer-adipiscing-elit" primary>Consectetuer adipiscing elit</usa-in-page-nav-item>
-            <usa-in-page-nav-item target="nullam-sit-amet-enim">Nullam sit amet enim</usa-in-page-nav-item>
-            <usa-in-page-nav-item target="vivamus-pharetra-posuere-sapien">Vivamus pharetra posuere sapien</usa-in-page-nav-item>
-            <usa-in-page-nav-item target="suspendisse-id-velit">Suspendisse id velit</usa-in-page-nav-item>
-            <usa-in-page-nav-item target="orci-magna-rhoncus-neque">Orci magna rhoncus neque</usa-in-page-nav-item>
-            <usa-in-page-nav-item target="aliquam-erat-volutpat-velit-vitae-ligula-volutpat" primary>Aliquam erat volutpat: velit vitae ligula volutpat</usa-in-page-nav-item>
-            <usa-in-page-nav-item target="vitae-ligula">Vitae ligula</usa-in-page-nav-item>
-          </usa-in-page-nav>
+          <nav>
+            <usa-in-page-nav>
+              <usa-in-page-nav-item target="lorem-ipsum-dolor" primary>Lorem ipsum dolor</usa-in-page-nav-item>
+              <usa-in-page-nav-item target="consectetuer-adipiscing-elit" primary>Consectetuer adipiscing elit</usa-in-page-nav-item>
+              <usa-in-page-nav-item target="nullam-sit-amet-enim">Nullam sit amet enim</usa-in-page-nav-item>
+              <usa-in-page-nav-item target="vivamus-pharetra-posuere-sapien">Vivamus pharetra posuere sapien</usa-in-page-nav-item>
+              <usa-in-page-nav-item target="suspendisse-id-velit">Suspendisse id velit</usa-in-page-nav-item>
+              <usa-in-page-nav-item target="orci-magna-rhoncus-neque">Orci magna rhoncus neque</usa-in-page-nav-item>
+              <usa-in-page-nav-item target="aliquam-erat-volutpat-velit-vitae-ligula-volutpat" primary>Aliquam erat volutpat: velit vitae ligula volutpat</usa-in-page-nav-item>
+              <usa-in-page-nav-item target="vitae-ligula">Vitae ligula</usa-in-page-nav-item>
+            </usa-in-page-nav>
+          </nav>
         </aside>
         <main style="padding-right: 16rem; max-width: 68ex;">

package/src/lib/in-page-nav/in-page-nav.test.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import "./in-page-nav.element.js";
+import "./in-page-nav-item/in-page-nav-item.element.js";
 import { assert, fixture, html } from "@open-wc/testing";
@@ -7,7 +8,32 @@ import type { USAInPageNavElement } from "./in-page-nav.element.js";
 describe("usa-in-page-nav", () => {
   it("should be accessible", async () => {
     const inPageNav = await fixture<USAInPageNavElement>(html`
-      <usa-in-page-nav>Hello World</usa-in-page-nav>
+      <usa-in-page-nav>
+        <usa-in-page-nav-item target="lorem-ipsum-dolor" primary>
+          Lorem ipsum dolor
+        </usa-in-page-nav-item>
+        <usa-in-page-nav-item target="consectetuer-adipiscing-elit" primary>
+          Consectetuer adipiscing elit
+        </usa-in-page-nav-item>
+        <usa-in-page-nav-item target="nullam-sit-amet-enim">
+          Nullam sit amet enim
+        </usa-in-page-nav-item>
+        <usa-in-page-nav-item target="vivamus-pharetra-posuere-sapien">
+          Vivamus pharetra posuere sapien
+        </usa-in-page-nav-item>
+        <usa-in-page-nav-item target="suspendisse-id-velit">
+          Suspendisse id velit
+        </usa-in-page-nav-item>
+        <usa-in-page-nav-item target="orci-magna-rhoncus-neque">
+          Orci magna rhoncus neque
+        </usa-in-page-nav-item>
+        <usa-in-page-nav-item target="aliquam-erat-volutpat-velit-vitae-ligula-volutpat" primary>
+          Aliquam erat volutpat: velit vitae ligula volutpat
+        </usa-in-page-nav-item>
+        <usa-in-page-nav-item target="vitae-ligula">
+          Vitae ligula
+        </usa-in-page-nav-item>
+      </usa-in-page-nav>
     `);
     return assert.isAccessible(inPageNav);

package/src/lib/link/link.element.ts CHANGED Viewed

@@ -11,7 +11,7 @@ declare global {
   shadowDom: [
     css`
       :host {
-        display: inline-flex;
+        display: contents;
         color: #005ea2;
         text-decoration: underline;
       }
@@ -20,6 +20,7 @@ declare global {
         color: inherit;
         text-decoration: inherit;
         display: inherit;
+        text-overflow: inherit
       }
     `,
     html`

package/src/lib/modal/modal.element.ts CHANGED Viewed

@@ -45,8 +45,6 @@ declare global {
   ],
 })
 export class USAModalElement extends HTMLElement {
-  modalAction: null | string = null;
   #dialog = query("dialog");
   openModal() {
@@ -75,11 +73,13 @@ export class USAModalElement extends HTMLElement {
   @listen("click", (host) => host)
   onModalAction(e: Event) {
     if (e.target instanceof Element) {
-      this.modalAction = e.target.getAttribute("modal-action");
+      const modalAction = e.target.getAttribute("modal-action");
-      this.closeModal();
+      if (modalAction === "close") {
+        this.closeModal();
-      this.dispatchEvent(new Event("usa::modal::close"));
+        this.dispatchEvent(new Event("usa::modal::close"));
+      }
     }
   }
 }

package/src/lib/pagination/pagination-item/pagination-item.element.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import { css, element, html } from "@joist/element";
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-pagination-item": USAPaginationItemElement;
+  }
+}
+@element({
+  tagName: "usa-pagination-item",
+  shadowDom: [
+    css`
+      :host {
+        display: inline-flex;
+        height: 2.5rem;
+        justify-content: center;
+        line-height: 1;
+        min-width: 2.5rem;
+        align-items: center;
+      }
+      :host(:first-child) {
+        margin-right: 1rem;
+      }
+      :host(:last-child) {
+        margin-left: 1rem;
+      }
+    `,
+    html`
+      <slot></slot>
+    `,
+  ],
+})
+export class USAPaginationItemElement extends HTMLElement {}

package/src/lib/pagination/pagination-no/pagination-no.element.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import { attr, css, element, html, query } from "@joist/element";
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-pagination-no": USAPaginationNoElement;
+  }
+}
+@element({
+  tagName: "usa-pagination-no",
+  shadowDom: [
+    css`
+      :host {
+        align-items: center;
+        border-color: rgba(27, 27, 27, .2);
+        border-radius: .25rem;
+        border-style: solid;
+        border-width: 1px;
+        color: #005ea2;
+        display: inline-flex;
+        justify-content: center;
+        width: 100%;
+      }
+      a {
+        display: inline-flex;
+        justify-content: center;
+        text-decoration: underline;
+        cursor: pointer;
+        padding: .5rem;
+        color: inherit;
+      }
+      :host([active]) {
+        background-color: #1b1b1b;
+        border-color: transparent;
+        color: #fff;
+      }
+    `,
+    html`
+      <a>
+        <slot></slot>
+      </a>
+    `,
+  ],
+})
+export class USAPaginationNoElement extends HTMLElement {
+  @attr()
+  accessor href = "#";
+  @attr()
+  accessor active = false;
+  #a = query("a");
+  attributeChangedCallback() {
+    this.#a({ href: this.href });
+  }
+}

package/src/lib/pagination/pagination.element.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { css, element, html } from "@joist/element";
+declare global {
+  interface HTMLElementTagNameMap {
+    "usa-pagination": USAPaginationElement;
+  }
+}
+@element({
+  tagName: "usa-pagination",
+  shadowDom: [
+    css`
+      :host {
+        margin-bottom: 0;
+        margin-top: 0;
+        list-style-type: none;
+        padding-left: 0;
+        align-items: center;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        width: auto;
+        gap: .5rem;
+      }
+    `,
+    html`
+      <slot></slot>
+    `,
+  ],
+})
+export class USAPaginationElement extends HTMLElement {}