@duetds/components 7.0.13 → 7.1.1

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -5,6 +5,7 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { nudge } from "../../utils/nudge";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetSlideoutPanel {
   constructor() {
@@ -60,6 +61,9 @@ export class DuetSlideoutPanel {
     inheritGlobalTheme(this);
     this.updateLabel();
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -135,7 +139,8 @@ export class DuetSlideoutPanel {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -230,7 +235,8 @@ export class DuetSlideoutPanel {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -263,10 +269,12 @@ export class DuetSlideoutPanel {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -3,6 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetSlideoutPanelDropdown {
   constructor() {
     this.onClick = () => {
@@ -29,6 +30,9 @@ export class DuetSlideoutPanelDropdown {
       link.menuItem = true;
     });
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -74,7 +78,8 @@ export class DuetSlideoutPanelDropdown {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -155,10 +160,12 @@ export class DuetSlideoutPanelDropdown {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-spacer/duet-spacer.e2e.js

@@ -0,0 +1,27 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-spacer", () => {
+  it("should render a spacer", async () => {
+    const page = await createPage("<duet-spacer></duet-spacer>");
+    const component = await page.find("duet-spacer");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that changes spacing", async () => {
+    const page = await createPage(`<duet-spacer size="large"></duet-spacer>`);
+    const element = await page.find("duet-spacer");
+    expect(element).toHaveClass("large");
+  });
+  it("should provide a property that changes direction", async () => {
+    const page = await createPage(`<duet-spacer direction="horizontal"></duet-spacer>`);
+    const element = await page.find("duet-spacer");
+    expect(element).toHaveClass("duet-spacer-horizontal");
+  });
+  it("should provide a property that changes responsive breakpoint", async () => {
+    const page = await createPage(`<duet-spacer breakpoint="x-small"></duet-spacer>`);
+    const element = await page.find("duet-spacer");
+    expect(element).toHaveClass("duet-spacer-x-small");
+  });
+});

package/lib/collection/components/duet-spacer/duet-spacer.js

@@ -49,7 +49,8 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+              "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerSize"
             }
           }
         },
@@ -72,7 +73,8 @@ export class DuetSpacer {
           "references": {
             "DuetDirection": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetDirection"
             }
           }
         },
@@ -95,7 +97,8 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+              "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerBreakpoint"
             }
           }
         },

package/lib/collection/components/duet-spinner/duet-spinner.e2e.js

@@ -0,0 +1,30 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-spinner", () => {
+  it("should render a spinner", async () => {
+    const page = await createPage(`<duet-spinner></duet-spinner>`);
+    const component = await page.find("duet-spinner");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that renders aria-label", async () => {
+    const page = await createPage(`<duet-spinner accessible-label="test"></duet-spinner>`);
+    const element = await page.find("duet-spinner >>> .duet-spinner");
+    expect(element.getAttribute("aria-label")).toEqual("test");
+  });
+  it("should provide a property that renders spinner in different sizes", async () => {
+    const page = await createPage(`<duet-spinner size="large"></duet-spinner>`);
+    const element = await page.find("duet-spinner >>> .duet-spinner");
+    expect(element).toHaveClass("large");
+  });
+  it("should provide a property that renders spinner in different colors", async () => {
+    const page = await createPage(`<duet-spinner color="color-primary"></duet-spinner>`);
+    const color = await page.evaluate(() => {
+      const spinner = document.querySelector("duet-spinner").shadowRoot.querySelector(".duet-spinner");
+      return window.getComputedStyle(spinner).color;
+    });
+    expect(color).toEqual("rgb(0, 119, 179)");
+  });
+});

package/lib/collection/components/duet-spinner/duet-spinner.js

@@ -72,7 +72,8 @@ export class DuetSpinner {
           "references": {
             "DuetColor": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetColor"
             }
           }
         },
@@ -95,7 +96,8 @@ export class DuetSpinner {
           "references": {
             "DuetSpinnerSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx",
+              "id": "src/components/duet-spinner/duet-spinner.tsx::DuetSpinnerSize"
             }
           }
         },
@@ -118,7 +120,8 @@ export class DuetSpinner {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

package/lib/collection/components/duet-step/duet-step.e2e.js

@@ -0,0 +1,92 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-step", () => {
+  let page;
+  let step;
+  let button;
+  let region;
+  beforeEach(async () => {
+    page = await createPage(`<duet-step step-index="0" state="complete"><h1>hello world</h1></duet-step>`);
+    step = await page.find("duet-step");
+    button = await page.find("duet-step [role=button]");
+    region = await page.find("duet-step [role=region]");
+  });
+  it("renders", async () => {
+    expect(step).toHaveClass("hydrated");
+  });
+  describe("props", () => {
+    it("allows a heading to be set", async () => {
+      await page.$eval("duet-step", (el) => {
+        el.heading = "Test heading";
+      });
+      await page.waitForChanges();
+      expect(button).toEqualText("Test heading");
+    });
+  });
+  // see: https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html#rps_label
+  //this now superceeds the previous example: https://www.w3.org/TR/wai-aria-practices-1.2/examples/accordion/accordion.html#rps_label
+  describe("a11y requirements", () => {
+    it("should have a button and a region", async () => {
+      expect(button).not.toBeNull();
+      expect(region).not.toBeNull();
+    });
+    it("should have aria-expanded and aria-disabled attributes on button", async () => {
+      expect(button).toHaveAttribute("aria-expanded");
+      expect(button).toHaveAttribute("aria-disabled");
+    });
+    it("should have ids on button and region", async () => {
+      expect(button.id).toBeDefined();
+      expect(region.id).toBeDefined();
+    });
+    it("region and button should be associated with one another", async () => {
+      expect(button.getAttribute("aria-controls")).toEqual(region.id);
+      expect(region.getAttribute("aria-labelledby")).toEqual(button.id);
+    });
+    it("should be collapsed and button enabled when step is complete", async () => {
+      step.setProperty("state", "complete");
+      await page.waitForChanges();
+      expect(button.getAttribute("aria-expanded")).toEqual("false");
+      expect(button.getAttribute("aria-disabled")).toEqual("false");
+    });
+    it("should should be expanded and button disabled when step is active", async () => {
+      step.setProperty("state", "current");
+      await page.waitForChanges();
+      expect(button.getAttribute("aria-expanded")).toEqual("true");
+      expect(button.getAttribute("aria-disabled")).toEqual("true");
+    });
+    it("should be collapsed and button disabled when step is incomplete", async () => {
+      step.setProperty("state", "incomplete");
+      await page.waitForChanges();
+      expect(button.getAttribute("aria-expanded")).toEqual("false");
+      expect(button.getAttribute("aria-disabled")).toEqual("true");
+    });
+  });
+  describe("events", () => {
+    it("raises an event when the button of complete step is clicked", async () => {
+      await page.$eval("duet-step", (elm) => {
+        elm.stepIndex = 0;
+        elm.state = "complete";
+      });
+      const duetStepClick = await step.spyOnEvent("duetStepClick");
+      button.click();
+      await page.waitForChanges();
+      expect(duetStepClick.lastEvent.detail).toEqual({
+        stepIndex: 0,
+        component: "duet-step",
+        originalEvent: expect.any(Object),
+      });
+    });
+    it("does not raise an event if button of non-complete step is clicked", async () => {
+      await page.$eval("duet-step", (elm) => {
+        elm.stepIndex = 0;
+        elm.state = "current";
+      });
+      const duetStepClick = await step.spyOnEvent("duetStepClick");
+      button.click();
+      await page.waitForChanges();
+      expect(duetStepClick).toHaveReceivedEventTimes(0);
+    });
+  });
+});

package/lib/collection/components/duet-step/duet-step.js

@@ -6,6 +6,7 @@ import { Build, h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot heading-content - Step heading content. Use this slot to show additional content next to step heading.
@@ -47,6 +48,9 @@ export class DuetStep {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   /**
    * Programmatically shift focus to the step's heading.
    */
@@ -111,7 +115,8 @@ export class DuetStep {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -151,7 +156,8 @@ export class DuetStep {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -193,7 +199,8 @@ export class DuetStep {
           "references": {
             "DuetStepState": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx",
+              "id": "src/components/duet-step/duet-step.tsx::DuetStepState"
             }
           }
         },
@@ -270,7 +277,8 @@ export class DuetStep {
           "references": {
             "DuetStepClickEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx",
+              "id": "src/components/duet-step/duet-step.tsx::DuetStepClickEvent"
             }
           }
         }
@@ -287,10 +295,12 @@ export class DuetStep {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-stepper/duet-stepper.e2e.js

@@ -0,0 +1,85 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-stepper", () => {
+  let page;
+  let stepper;
+  let steps;
+  beforeEach(async () => {
+    page = await createPage(`
+      <link rel='stylesheet' href='http://localhost:3334/fonts/lib/localtapiola.css' />
+      <duet-stepper>
+        <duet-step heading="First step">
+          <duet-input label="First input" expand></duet-input>
+          <duet-button variation="primary">Next</duet-button>
+        </duet-step>
+
+        <duet-step heading="Second step">
+          <duet-input label="Second input" expand></duet-input>
+          <duet-button variation="primary">Next</duet-button>
+        </duet-step>
+
+        <duet-step heading="Third step">
+          <duet-input label="Third input" expand></duet-input>
+        </duet-step>
+      </duet-stepper>
+
+      <script>
+        const stepper = document.querySelector("duet-stepper")
+        const nextButtons = document.querySelectorAll("duet-button")
+
+        nextButtons.forEach(button => button.addEventListener("click", () => {
+          stepper.selected++
+        }))
+        stepper.addEventListener("duetStepChange", e => {
+          stepper.selected = e.detail.toStep
+        })
+      </script>
+    `);
+    stepper = await page.find("duet-stepper");
+    steps = await page.findAll("duet-step");
+  });
+  it("renders", async () => {
+    expect(stepper).toHaveClass("hydrated");
+  });
+  describe("props", () => {
+    it("allows you to set an accessible aria-live label", async () => {
+      await page.$eval("duet-stepper", (el) => {
+        el.accessibleLive = "Step {current} of {total}";
+      });
+      await page.waitForChanges();
+      const element = await page.find("duet-stepper >>> [aria-live]");
+      expect(element).toEqualText("Step 1 of 3");
+    });
+  });
+  it("correctly numbers the steps", async () => {
+    const stepIndexes = await Promise.all(steps.map(step => step.getProperty("stepIndex")));
+    expect(stepIndexes).toEqual([0, 1, 2]);
+  });
+  it("allows you to progress through steps", async () => {
+    const nextButtons = await page.findAll("duet-button");
+    let stepStates = await Promise.all(steps.map(step => step.getProperty("state")));
+    expect(stepStates).toEqual(["current", "incomplete", "incomplete"]);
+    // go to second step
+    await nextButtons[0].click();
+    stepStates = await Promise.all(steps.map(step => step.getProperty("state")));
+    expect(stepStates).toEqual(["complete", "current", "incomplete"]);
+    // go to third step
+    await nextButtons[1].click();
+    stepStates = await Promise.all(steps.map(step => step.getProperty("state")));
+    expect(stepStates).toEqual(["complete", "complete", "current"]);
+  });
+  it("allows you to return to a previous step by clicking on the step heading", async () => {
+    // go to second step
+    const nextButton = await page.find("duet-button");
+    await nextButton.click();
+    let stepStates = await Promise.all(steps.map(step => step.getProperty("state")));
+    expect(stepStates).toEqual(["complete", "current", "incomplete"]);
+    // go back to first step
+    const heading = await page.find("duet-step [role=button]");
+    await heading.click();
+    stepStates = await Promise.all(steps.map(step => step.getProperty("state")));
+    expect(stepStates).toEqual(["current", "incomplete", "incomplete"]);
+  });
+});

package/lib/collection/components/duet-stepper/duet-stepper.js

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import groupBy from "../../utils/group-by";
+import { nudge } from "../../utils/nudge";
 export class DuetStepper {
   constructor() {
     this.theme = "";
@@ -41,6 +42,9 @@ export class DuetStepper {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   async connectedCallback() {
     this.updateStepState();
   }
@@ -113,7 +117,8 @@ export class DuetStepper {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -154,7 +159,8 @@ export class DuetStepper {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -223,7 +229,8 @@ export class DuetStepper {
           "references": {
             "DuetStepChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx",
+              "id": "src/components/duet-stepper/duet-stepper.tsx::DuetStepChangeEvent"
             }
           }
         }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -5,6 +5,7 @@ import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { nudge } from "../../utils/nudge";
 export class DuetSubmenuBar {
   constructor() {
     this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
@@ -72,6 +73,9 @@ export class DuetSubmenuBar {
       child.setAttribute("role", "listitem");
     }
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.nav = document.querySelector("duet-nav > [slot='mobile']");
     this.hasItems = this.checkIfHasItems();
@@ -139,7 +143,8 @@ export class DuetSubmenuBar {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -207,10 +212,12 @@ export class DuetSubmenuBar {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.js

@@ -5,6 +5,7 @@ import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetSubmenuBarDropdown {
   constructor() {
     /**
@@ -56,6 +57,9 @@ export class DuetSubmenuBarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.checkIsDesktop();
     for (let i = 0; i < this.mql.length; i++) {
@@ -135,7 +139,8 @@ export class DuetSubmenuBarDropdown {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -222,10 +227,12 @@ export class DuetSubmenuBarDropdown {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.js

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetSubmenuBarDropdownLink {
   constructor() {
     this.theme = "";
@@ -19,6 +20,9 @@ export class DuetSubmenuBarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       const dropdown = this.element.closest("duet-submenu-bar-dropdown");
@@ -61,7 +65,8 @@ export class DuetSubmenuBarDropdownLink {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

package/lib/collection/components/duet-submenu-bar-link/duet-submenu-bar-link.js

@@ -5,6 +5,7 @@ import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
+import { nudge } from "../../utils/nudge";
 export class DuetSubmenuBarLink {
   constructor() {
     /**
@@ -32,6 +33,9 @@ export class DuetSubmenuBarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    nudge(this);
+  }
   connectedCallback() {
     this.changeIconSize();
     for (let i = 0; i < this.mql.length; i++) {
@@ -89,7 +93,8 @@ export class DuetSubmenuBarLink {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },