@noctuatech/uswds 0.2.0 → 1.0.0-rc.1

package/README.md

@@ -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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,5 +1,4 @@
 import { attr, css, element, html, listen, query } from "@joist/element";
-import { click } from "@testing-library/user-event/dist/cjs/convenience/click.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -25,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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 {}

package/src/lib/pagination/pagination.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import type { USAPaginationElement } from "./pagination.element.js";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "usa-pagination",
+  tags: ["autodocs"],
+  render(args) {
+    return html`
+      <usa-pagination>
+        <usa-pagination-item>
+          <usa-link href="#">
+            <usa-icon icon="navigate_before"></usa-icon> Previous
+          </usa-link>
+        </usa-pagination-item>
+        
+        <usa-pagination-item>
+          <usa-pagination-no>1</usa-pagination-no>
+        </usa-pagination-item>
+
+        <usa-pagination-item>...</usa-pagination-item>
+        
+        <usa-pagination-item>
+          <usa-pagination-no>9</usa-pagination-no>
+        </usa-pagination-item>
+        
+        <usa-pagination-item>
+          <usa-pagination-no active>10</usa-pagination-no>
+        </usa-pagination-item>
+
+        <usa-pagination-item>
+          <usa-pagination-no>11</usa-pagination-no>
+        </usa-pagination-item>
+
+        <usa-pagination-item>...</usa-pagination-item>
+
+        <usa-pagination-item>
+          <usa-pagination-no>24</usa-pagination-no>
+        </usa-pagination-item>
+        
+        <usa-pagination-item>
+          <usa-link href="#">
+            Next <usa-icon icon="navigate_next"></usa-icon>
+          </usa-link>
+        </usa-pagination-item>
+      </usa-pagination>
+    `;
+  },
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAPaginationElement>;
+
+export default meta;
+
+type Story = StoryObj<USAPaginationElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/src/lib/pagination/pagination.test.ts

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

package/src/lib.ts

@@ -41,3 +41,9 @@ export { USAProcessListElement } from "./lib/process-list/process-list.element.j
 export { USAProcessListItemElement } from "./lib/process-list/process-list-item/process-list-item.element.js";
 export { USAInPageNavElement } from "./lib/in-page-nav/in-page-nav.element.js";
 export { USAInPageNavItemElement } from "./lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.js";
+export { USAButtonGroupElement } from "./lib/button-group/button-group.element.js";
+export { USABreadcrumbsElement } from "./lib/breadcrumbs/breadcrumbs.element.js";
+export { USABreadcrumbElement } from "./lib/breadcrumbs/breadcrumb/breadcrumb.element.js";
+export { USAPaginationElement } from "./lib/pagination/pagination.element.js";
+export { USAPaginationItemElement } from "./lib/pagination/pagination-item/pagination-item.element.js";
+export { USAPaginationNoElement } from "./lib/pagination/pagination-no/pagination-no.element.js";