@duetds/components 8.6.8 → 8.7.0

package/lib/collection/components/duet-link/duet-link.a11y.e2e.js

@@ -1,39 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-link", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-       <duet-link url="https://www.duetds.com">Link text</duet-link>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component in external variant", async () => {
-        const result = await testWithAxe(`
-       <duet-link url="https://www.duetds.com" external>Link that opens a new window</duet-link>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component in block variant", async () => {
-        const result = await testWithAxe(`
-        <duet-link
-          url="#"
-          icon="action-buy-insurance"
-          icon-responsive
-          icon-color="primary"
-          variation="block"
-          url="https://www.duetds.com"
-        >
-          <duet-heading margin="none" level="h2" visual-level="h4">Lorem ipsum</duet-heading>
-          <duet-paragraph margin="none" class="duet-font-weight-normal duet-font-size-medium">
-            Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-          </duet-paragraph>
-        </duet-link>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,53 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-link", () => {
-    it("should render a link", async () => {
-        const page = await createPage(`<duet-link></duet-link>`);
-        const component = await page.find("duet-link");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that renders aria-label", async () => {
-        const page = await createPage(`<duet-link accessible-label="test"></duet-link>`);
-        const element = await page.find("duet-link >>> .duet-link");
-        expect(element.getAttribute("aria-label")).toEqual("test");
-    });
-    it("should provide a property that adds an ID for the link", async () => {
-        const page = await createPage(`<duet-link identifier="test"></duet-link>`);
-        const element = await page.find("duet-link >>> .duet-link");
-        expect(element.getAttribute("id")).toEqual("test");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-link theme="turva"></duet-link>`);
-        const element = await page.find("duet-link >>> .duet-link");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that adds a href for the link", async () => {
-        const page = await createPage(`<duet-link url="test"></duet-link>`);
-        const element = await page.find("duet-link >>> .duet-link");
-        expect(element.getAttribute("href")).toEqual("test");
-    });
-    it("should provide a property that adds renders a target attribute", async () => {
-        const page = await createPage(`<duet-link external></duet-link>`);
-        const element = await page.find("duet-link >>> .duet-link");
-        expect(element.getAttribute("target")).toEqual("_blank");
-        expect(element.getAttribute("rel")).toEqual("noopener");
-    });
-    it("should provide a property that renders the link in different style variations", async () => {
-        const page = await createPage(`<duet-link variation="block"></duet-link>`);
-        const component = await page.find("duet-link");
-        expect(component).toHaveClass("duet-link-block");
-    });
-    it("should provide a property that sets an icon for variations different than default", async () => {
-        const page = await createPage(`<duet-link icon="form-location" variation="block"></duet-link>`);
-        const element = await page.find("duet-link >>> duet-icon");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property to switch off the padding of variations different than default", async () => {
-        const page = await createPage(`<duet-link padding="none" variation="block"></duet-link>`);
-        const element = await page.find("duet-link >>> a");
-        expect(element).toHaveClass("duet-p-0");
-    });
-});

package/lib/collection/components/duet-list/duet-list.a11y.e2e.js

@@ -1,30 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, mergeRules, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-const disabledRules = {
-    // It is impossible for dt and dd to be direct children of dl,
-    // since the list elements are webcomponents with their own wrappers
-    "definition-list": { enabled: false },
-    // It is impossible for dt and dd to be direct children of dl,
-    // since the list elements are webcomponents with their own wrappers
-    dlitem: { enabled: false },
-};
-describe("[a11y] duet-list", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-list>
-          <duet-list-item>
-            <span slot="label">Nimi</span>
-            <span slot="value">Lasse Mäkinen</span>
-          </duet-list-item>
-          <duet-list-item>
-            <span slot="label">Osoite</span>
-            <span slot="value">Kotikatu 23 A 4, 00220 Helsinki, Suomi</span>
-          </duet-list-item>
-        </duet-list>
-      `, mergeRules(axeRunOptions, disabledRules));
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,105 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-list", () => {
-    it("should render a definition list", async () => {
-        const page = await createPage("<duet-list></duet-list>");
-        const component = await page.find("duet-list");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`
-      <duet-list theme="turva">
-        <duet-list-item>
-          <span slot="label">Nimi</span>
-          <span slot="value">Lasse Makinen</span>
-        </duet-list-item>
-      </duet-list>
-    `);
-        const element = await page.find("duet-list duet-list-item");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`
-      <duet-list margin="none">
-        <duet-list-item>
-          <span slot="label">Nimi</span>
-          <span slot="value">Lasse Makinen</span>
-        </duet-list-item>
-      </duet-list>
-    `);
-        const element = await page.find("duet-list >>> .duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that renders list in different style variations", async () => {
-        const page = await createPage(`
-      <duet-list variation="striped">
-        <duet-list-item>
-          <span slot="label">Nimi</span>
-          <span slot="value">Lasse Makinen</span>
-        </duet-list-item>
-      </duet-list>
-    `);
-        const element = await page.find("duet-list duet-list-item");
-        expect(element).toHaveClass("duet-list-striped");
-    });
-    it("should provide a property that allows to disable vertical stacking", async () => {
-        const page = await createPage(`
-      <duet-list responsive="false">
-        <duet-list-item>
-          <span slot="label">Nimi</span>
-          <span slot="value">Lasse Makinen</span>
-        </duet-list-item>
-      </duet-list>
-    `);
-        const element = await page.find("duet-list duet-list-item");
-        expect(element).toHaveClass("duet-no-stacking");
-        expect(element).not.toHaveClass("duet-list-item-breakpoint-small");
-    });
-    it("should provide a property that in responsive mode adjusts the alignment of the list items on mobile breakpoint", async () => {
-        const page = await createPage(`
-      <duet-list mobile="center">
-        <duet-list-item>
-          <span slot="label">Nimi</span>
-          <span slot="value">Lasse Makinen</span>
-        </duet-list-item>
-      </duet-list>
-    `);
-        const element = await page.find("duet-list .duet-list-mobile-center");
-        expect(element).not.toBeNull();
-    });
-    it("should provide property that in responsive mode switches the breakpoint used to trigger the content stacking", async () => {
-        const page = await createPage(`
-      <duet-list breakpoint="large">
-        <duet-list-item>
-          <span slot="label">Nimi</span>
-          <span slot="value">Lasse Makinen</span>
-        </duet-list-item>
-      </duet-list>
-    `);
-        const element = await page.find("duet-list .duet-list-item-breakpoint-large");
-        expect(element).not.toBeNull();
-    });
-    it("should automatically refresh itself when content changes", async () => {
-        const page = await createPage(`
-      <duet-list>
-        <duet-list-item>
-          <span slot="label">Nimi</span>
-          <span slot="value">Lasse Makinen</span>
-        </duet-list-item>
-      </duet-list>
-    `);
-        const element = await page.find("duet-list");
-        // should be updated when setting the *attribute*
-        element.setAttribute("variation", "striped");
-        await page.waitForChanges();
-        const test = await page.find("duet-list-item");
-        expect(test).toHaveClass("duet-list-striped");
-        // should also be updated when setting the label *property*
-        element.setProperty("variation", "default");
-        await page.waitForChanges();
-        expect(test).not.toHaveClass("duet-list-striped");
-    });
-});

package/lib/collection/components/duet-logo/duet-logo.a11y.e2e.js

@@ -1,13 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-logo", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-       <duet-logo language="fi" size="medium"></duet-logo>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,42 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-logo", () => {
-    it("should render a logo", async () => {
-        const page = await createPage(`<duet-logo></duet-logo>`);
-        const component = await page.find("duet-logo");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-logo theme="turva"></duet-logo>`);
-        const element = await page.find("duet-logo >>> .duet-logo");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-logo margin="none"></duet-logo>`);
-        const element = await page.find(".duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that changes the size of the logo", async () => {
-        const page = await createPage(`<duet-logo size="large"></duet-logo>`);
-        const element = await page.find("duet-logo >>> .duet-logo");
-        expect(element).toHaveClass("large");
-    });
-    it("should provide a property that changes logo’s href", async () => {
-        const page = await createPage(`<duet-logo href="demo"></duet-logo>`);
-        const element = await page.find("duet-logo >>> .duet-logo");
-        expect(element.getAttribute("href")).toEqual("demo");
-    });
-    it("should provide a property that changes logo’s language", async () => {
-        const page = await createPage(`<duet-logo language="en"></duet-logo>`);
-        const element = await page.find("duet-logo >>> .duet-logo svg title");
-        expect(element.textContent).toEqual("LocalTapiola");
-    });
-    it("should provide a property that changes logo to inverse mode", async () => {
-        const page = await createPage(`<duet-logo inverse></duet-logo>`);
-        const element = await page.find("duet-logo >>> .duet-logo svg");
-        expect(element.getAttribute("fill")).toEqual("rgb(255, 255, 255)");
-    });
-});

package/lib/collection/components/duet-menu-bar/duet-menu-bar.a11y.e2e.js

@@ -1,63 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-menu-bar", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-menu-bar id="desktop-menu-bar" accessible-label="Main">
-          <div slot="center">
-            <duet-menu-bar-item active>Vakuutukset</duet-menu-bar-item>
-            <duet-menu-bar-item url="#">Sijoittaminen</duet-menu-bar-item>
-            <duet-menu-bar-item>Rahoitus</duet-menu-bar-item>
-            <duet-menu-bar-item>Asiakkaalle</duet-menu-bar-item>
-          </div>
-          <div slot="right">
-            <duet-menu-bar-item leading-icon="navigation-user" id="desktop-login-opener">Kirjautuminen</duet-menu-bar-item>
-            <duet-slideout opener="desktop-login-opener">
-              <div slot="sticky-header">
-                <duet-grid alignment="center" style="gap: var(--space-small)">
-                  <duet-icon name="navigation-login" size="medium" margin="none"></duet-icon>
-                  <duet-heading visual-level="h3" fixed-size margin="none">Kirjautuminen</duet-heading>
-                </duet-grid>
-                <duet-spacer></duet-spacer>
-                <duet-tab-group variation="plain" identifier="slideout-tab" margin="none">
-                  <duet-tab label="Henkilöasiakas" selected content-id="desktop-login-tab-private-customer"></duet-tab>
-                  <duet-tab label="Yritysasiakas" content-id="desktop-login-tab-corporate-customer"></duet-tab>
-                </duet-tab-group>
-              </div>
-              <div id="desktop-login-tab-private-customer">
-                <duet-slideout-link size="medium" caret>
-                  Vakuutukset ja vahinkoasiat
-                  <span slot="description">Hallinnoi vakuutuksia, ilmoita vahingosta ja tarkastele korvauspäätöksiäsi.</span>
-                </duet-slideout-link>
-                <duet-spacer></duet-spacer>
-                <duet-divider margin="none"></duet-divider>
-                <duet-spacer></duet-spacer>
-                <duet-slideout-link size="medium" caret>
-                  Säästäminen ja sijoittaminen
-                  <span slot="description">Seuraa sijoitustesi kehitystä, hallinnoi rahastoja ja muita sijoitustuotteitasi.</span>
-                </duet-slideout-link>
-                <duet-spacer></duet-spacer>
-                <duet-divider margin="none"></duet-divider>
-                <duet-spacer></duet-spacer>
-                <duet-slideout-link size="medium" caret>
-                  Ajoneuvorahoitus
-                  <span slot="description">Tarkastele ja tee muutoksia osamaksu- tai leasingrahoitussopimukseesi.</span>
-                </duet-slideout-link>
-              </div>
-              <div id="desktop-login-tab-corporate-customer"></div>
-            </duet-slideout>
-            <duet-menu-bar-item leading-icon="navigation-user" id="desktop-menu-bar-etunimi">Etunimi</duet-menu-bar-item>
-            <duet-popup-menu controller="desktop-menu-bar-etunimi" accessible-role="list" skip-teleport>
-              <duet-popup-menu-item accessible-role="listitem">Omat tiedot</duet-popup-menu-item>
-              <duet-divider margin="none"></duet-divider>
-              <duet-popup-menu-item leading-icon="messaging-logout" accessible-role="listitem">Kirjaudu ulos</duet-popup-menu-item>
-            </duet-popup-menu>
-          </div>
-        </duet-menu-bar>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-modal/duet-modal.a11y.e2e.js

@@ -1,49 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-modal", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-          <duet-modal
-            size="small"
-            heading="Onko matkapuhelimesi tai tablettisi rikkoutunut?"
-            icon="damage-breakage"
-            class="duet-text-center"
-            active
-          >
-            <duet-paragraph>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-              aliqua. Ut enim ad minim veniam quis nostrud.
-            </duet-paragraph>
-            <duet-paragraph>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-            </duet-paragraph>
-            <duet-button variation="primary" onclick="modal.hide()"> Jatka </duet-button>
-          </duet-modal>
-
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-    it("should render an accessible component in confirmation variant", async () => {
-        const result = await testWithAxe(`
-          <duet-modal
-            heading="Oletko varma, että haluat poistua tältä&nbsp;sivulta?"
-            icon="messaging-alert"
-            color="warning"
-            size="small"
-            variation="dialog"
-            class="duet-text-center"
-            active
-          >
-            <duet-paragraph> Kaikki täyttämäsi tiedot poistetaan. </duet-paragraph>
-            <duet-button variation="primary" onclick="modal.hide()"> Kyllä </duet-button>
-            <duet-button onclick="modal.hide()"> Ei </duet-button>
-          </duet-modal>
-
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,113 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-modal", () => {
-    // we want to wait for modal to be focused to ensure close button
-    // automatically receives focus when `active` prop is `true`
-    const isModalFocused = () => {
-        return document.activeElement === document.querySelector("duet-modal");
-    };
-    it("should render a modal", async () => {
-        const page = await createPage(`<duet-modal></duet-modal>`);
-        const component = await page.find("duet-modal");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-modal theme="turva"></duet-modal>`);
-        const element = await page.find("duet-modal >>> .duet-modal-container");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that changes the size", async () => {
-        const page = await createPage(`<duet-modal size="small"></duet-modal>`);
-        const element = await page.find("duet-modal >>> .duet-modal");
-        expect(element).toHaveClass("small");
-    });
-    it("should provide a property that sets a heading", async () => {
-        const page = await createPage(`<duet-modal heading="test"></duet-modal>`);
-        const element = await page.find("duet-modal >>> duet-heading");
-        expect(element.textContent).toEqual("test");
-    });
-    it("should provide a property that sets a heading's level", async () => {
-        const page = await createPage(`<duet-modal heading="test" heading-level="h1"></duet-modal>`);
-        const element = await page.find("duet-modal >>> duet-heading");
-        expect(element.getAttribute("level")).toEqual("h1");
-    });
-    it("should provide a property that sets a heading's visual level", async () => {
-        const page = await createPage(`<duet-modal heading="test" heading-visual-level="h4"></duet-modal>`);
-        const element = await page.find("duet-modal >>> duet-heading");
-        expect(element.getAttribute("visual-level")).toEqual("h4");
-    });
-    it("should set a heading's visual level the same as its level if no visual value provided", async () => {
-        const page = await createPage(`<duet-modal heading="test" heading-level="h1"></duet-modal>`);
-        const element = await page.find("duet-modal >>> duet-heading");
-        expect(element.getAttribute("visual-level")).toEqual("h1");
-    });
-    it("should provide a property that sets an icon", async () => {
-        const page = await createPage(`<duet-modal icon="form-location"></duet-modal>`);
-        const element = await page.find("duet-modal >>> duet-icon");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that sets the icon color", async () => {
-        const page = await createPage(`<duet-modal icon="form-location" color="secondary"></duet-modal>`);
-        const element = await page.find("duet-modal >>> duet-icon");
-        expect(element.getAttribute("color")).toEqual("secondary");
-    });
-    it("should provide a property that makes the modal active", async () => {
-        const page = await createPage(`<duet-modal active></duet-modal>`);
-        const element = await page.find("duet-modal >>> .duet-modal-container");
-        expect(element).toHaveClass("duet-modal-active");
-    });
-    it("should provide a method to scroll content to top", async () => {
-        const loremIpsumArray = new Array(20).fill("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.");
-        const page = await createPage(`
-      <duet-modal variation="slide-up" active>
-        <div slot="sticky-header"><duet-heading level="h3">Etsi lorem ipsum</duet-heading></div>
-        <duet-button class="top">Top</duet-button>
-        ${loremIpsumArray.map(i => `<duet-paragarph>${i}</duet-paragraph>`)}
-        <duet-button class="bottom">Bottom</duet-button>
-      </duet-modal>`);
-        const modal = await page.find("duet-modal");
-        const top = await page.find("duet-button.top");
-        const bottom = await page.find("duet-button.bottom");
-        expect(await top.isIntersectingViewport()).toBeTruthy();
-        expect(await bottom.isIntersectingViewport()).toBeFalsy();
-        bottom.click();
-        expect(await top.isIntersectingViewport()).toBeFalsy();
-        expect(await bottom.isIntersectingViewport()).toBeTruthy();
-        await modal.callMethod("scrollToTop", false); // call with false for immediate scroll
-        expect(await top.isIntersectingViewport()).toBeTruthy();
-        expect(await bottom.isIntersectingViewport()).toBeFalsy();
-    });
-    it.skip("closes on blur", async () => {
-        const page = await createPage(`
-      <duet-modal
-        size="small"
-        heading="Modal test"
-        icon="damage-breakage"
-        class="duet-text-center"
-        active
-        close-on-blur="true"
-      >
-        <duet-paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam quis nostrud.
-        </duet-paragraph>
-        <duet-paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-        </duet-paragraph>
-        <duet-collapsible heading="Click to open details">
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-          Aperiam impedit, possimus minima repudiandae.
-        </duet-collapsible>
-      </duet-modal>
-    `);
-        await page.waitForFunction(isModalFocused);
-        const duetModalInner = await page.find("duet-modal >>>");
-        const duetBody = await page.find("body");
-        expect(duetModalInner.isVisible()).toBeTruthy();
-        duetBody.click();
-        expect(!duetModalInner || duetModalInner.isVisible()).toBeFalsy();
-    });
-});

package/lib/collection/components/duet-multiselect/duet-multiselect.a11y.e2e.js

@@ -1,22 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-multiselect", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-multiselect
-          id="zip"
-          label="Chooce zip"
-          label-hidden
-          placeholder="Zip"
-          items='[
-            {"label": "11100", "value": "11100"},
-            {"label": "22200", "value": "22200"}
-          ]'
-        ></duet-multiselect>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});