@duetds/components 7.1.0 → 7.1.1

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

@@ -115,7 +115,8 @@ export class DuetStep {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -155,7 +156,8 @@ export class DuetStep {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -197,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"
             }
           }
         },
@@ -274,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"
             }
           }
         }
@@ -291,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

@@ -117,7 +117,8 @@ export class DuetStepper {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -158,7 +159,8 @@ export class DuetStepper {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -227,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

@@ -143,7 +143,8 @@ export class DuetSubmenuBar {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -211,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

@@ -139,7 +139,8 @@ export class DuetSubmenuBarDropdown {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -226,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

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

@@ -93,7 +93,8 @@ export class DuetSubmenuBarLink {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },

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

@@ -0,0 +1,16 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-tab", () => {
+  it("should render a tab", async () => {
+    const page = await createPage("<duet-tab></duet-tab>");
+    const component = await page.find("duet-tab");
+    expect(component).not.toBeNull();
+  });
+  it("should provide a property that makes the tab selected", async () => {
+    const page = await createPage(`<duet-tab selected></duet-tab>`);
+    const element = await page.find("duet-tab .duet-tab");
+    expect(element).toHaveClass("selected");
+  });
+});

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

@@ -110,7 +110,8 @@ export class DuetTab {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },

package/lib/collection/components/duet-tab-group/duet-tab-group.e2e.js

@@ -0,0 +1,108 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-tab-group", () => {
+  it("should render a tab", async () => {
+    const page = await createPage(`
+      <duet-tab-group>
+        <duet-tab label="test"></duet-tab>
+      </duet-tab-group>
+    `);
+    const component = await page.find("duet-tab-group");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createPage(`
+      <duet-tab-group theme="turva">
+        <duet-tab label="test"></duet-tab>
+      </duet-tab-group>
+    `);
+    const element = await page.find("duet-tab-group >>> .duet-tab-group");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that removes the margin of the component", async () => {
+    const page = await createPage(`
+      <duet-tab-group margin="none">
+        <duet-tab label="test"></duet-tab>
+        <duet-tab label="test2"></duet-tab>
+      </duet-tab-group>
+    `);
+    const element = await page.find("duet-tab-group >>> .duet-m-0");
+    expect(element).not.toBeNull();
+  });
+  it("should provide a property that removes the padding of the component", async () => {
+    const page = await createPage(`
+      <duet-tab-group padding="none">
+        <duet-tab label="test"></duet-tab>
+        <duet-tab label="test2"></duet-tab>
+      </duet-tab-group>
+    `);
+    const element = await page.find("duet-tab-group >>> .duet-p-0");
+    expect(element).not.toBeNull();
+  });
+  it("creates unique IDs for for all buttons and panels", async () => {
+    const page = await createPage(`
+      <duet-tab-group>
+        <duet-tab label="Outer 1" selected>Outer tab 1</duet-tab>
+        <duet-tab label="Outer 2">
+          Outer tab 2
+          <duet-tab-group>
+            <duet-tab label="Inner 1" selected>Inner tab 1</duet-tab>
+            <duet-tab label="Inner 2">Inner tab 2</duet-tab>
+            <duet-tab label="Inner 3">Inner tab 3</duet-tab>
+          </duet-tab-group>
+        </duet-tab>
+        <duet-tab label="Outer 3">Outer tab 3</duet-tab>
+      </duet-tab-group>
+    `);
+    const buttons = await page.findAll(`duet-tab-group >>> [role="tablist"] button`);
+    const panels = await page.findAll(`duet-tab-group >>> duet-tab`);
+    for (const button of buttons) {
+      const matches = await page.findAll(`duet-tab-group >>> #${button.id}`);
+      expect(matches.length).toBe(1);
+    }
+    for (const panel of panels) {
+      const matches = await page.findAll(`duet-tab-group >>> #${panel.id}`);
+      expect(matches.length).toBe(1);
+    }
+  });
+  it("should propagate accessible-description to internal button element", async () => {
+    const ariaString = "accessible-description-test";
+    const page = await createPage(`
+      <duet-tab-group variation="plain">
+        <duet-tab label="test2" class="test" accessible-description="${ariaString}">Outer tab 1 content</duet-tab>
+      </duet-tab-group>
+    `);
+    await page.waitForChanges();
+    const testString = await page.evaluate(() => {
+      const element = document
+        .querySelector("duet-tab-group")
+        .shadowRoot.querySelector("button")
+        .getAttribute("aria-description");
+      return element;
+    });
+    expect(testString).toEqualText(ariaString);
+  });
+  describe("events", () => {
+    it("should raise events on tab change", async () => {
+      const page = await createPage(`
+        <duet-tab-group padding="none">
+          <duet-tab label="test" class="test1"></duet-tab>
+          <duet-tab label="test2"></duet-tab>
+        </duet-tab-group>
+      `);
+      const tabGroup = await page.find("duet-tab-group");
+      const tabs = await page.findAll("duet-tab-group >>> button");
+      const tab = tabs.find(t => t.innerText === "test2");
+      const changeSpy = await tabGroup.spyOnEvent("duetChange");
+      const tabChangeSpy = await tabGroup.spyOnEvent("duetTabChange");
+      await tab.click();
+      await page.waitForChanges();
+      const expectedEvent = { value: 1, component: "duet-tab-group" };
+      expect(changeSpy).toHaveReceivedEventDetail(expectedEvent);
+      expect(tabChangeSpy).toHaveReceivedEventDetail(expectedEvent);
+    });
+  });
+});

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -244,7 +244,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -321,7 +322,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTabVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
             }
           }
         },
@@ -344,7 +346,8 @@ export class DuetTabGroup {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -373,7 +376,8 @@ export class DuetTabGroup {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -456,7 +460,8 @@ export class DuetTabGroup {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -479,7 +484,8 @@ export class DuetTabGroup {
           "references": {
             "DuetPadding": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
             }
           }
         },
@@ -557,7 +563,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
         }
@@ -577,7 +584,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
         }
@@ -597,7 +605,8 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           }
         }
@@ -614,11 +623,13 @@ export class DuetTabGroup {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
             }
           },
           "return": "Promise<void>"
@@ -634,7 +645,8 @@ export class DuetTabGroup {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"