@duetds/components 8.6.8 → 8.7.0

package/lib/collection/components/duet-divider/duet-divider.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-divider", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-       <duet-divider></duet-divider>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,32 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-import { getColorByName } from "../../utils/token-utils";
-describe("duet-divider", () => {
-    it("should render a divider", async () => {
-        const page = await createPage(`<duet-divider></duet-divider>`);
-        const component = await page.find("duet-divider");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-divider theme="turva"></duet-divider>`);
-        const element = await page.find("duet-divider >>> .duet-divider");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-divider margin="none"></duet-divider>`);
-        const element = await page.find("duet-divider >>> .duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that changes color", async () => {
-        const page = await createPage(`<duet-divider color="color-success"></duet-divider>`);
-        const backgroundColor = await page.evaluate(() => {
-            const divider = document.querySelector("duet-divider").shadowRoot.querySelector(".duet-divider");
-            return window.getComputedStyle(divider).backgroundColor;
-        });
-        const expectedColor = getColorByName("color-success");
-        expect(backgroundColor).toEqual(expectedColor);
-    });
-});

package/lib/collection/components/duet-editable-table/duet-editable-table.a11y.e2e.js

@@ -1,202 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-editable-table", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-editable-table margin="auto" sticky sticky-distance="none" variation="striped">
-          <div class="example-menu" slot="thead-first">
-            <div>
-              <ul role="menubar">
-                <li role="menuitem">
-                  <duet-button
-                    accessible-label="Download the table as a CSV file"
-                    fixed
-                    icon="action-download"
-                    icon-size="medium"
-                    margin="none"
-                    padding="none"
-                    variation="plain"
-                  >
-                    Download as CSV
-                  </duet-button>
-                </li>
-                <li role="menuitem">
-                  <duet-button
-                    accessible-label="Copy the data to you Clipboard as csv"
-                    fixed
-                    icon="form-file"
-                    icon-size="medium"
-                    margin="none"
-                    padding="none"
-                    variation="plain"
-                  >
-                    copy
-                  </duet-button>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </duet-editable-table>
-        <script>
-          // Save a reference to the elements
-          const eTable = document.querySelector("duet-editable-table");
-
-
-          // defined actions - if this is not defined, the table will not have any actions
-          eTable.actions = [
-            {
-              "icon": "action-edit-2",
-              "color": "primary",
-              "name": "edit",
-              "size": "x-small",
-              "background": "gray-lightest",
-              "label": {
-                "fi": "Muokkaa luokkaa",
-                "en": "Edit category",
-                "sv": "Redigera kategori",
-              },
-            },
-            {
-              "icon": "action-delete",
-              "color": "danger",
-              "name": "delete",
-              "size": "x-small",
-              "background": "gray-lightest",
-              "label": {
-                "fi": "Poista",
-                "en": "Delete",
-                "sv": "Radera",
-              },
-            },
-          ];
-
-          //defined columns, if this is set, rows must also be defined for this to have an affect
-          eTable.columns = [
-            {
-              sort_order: 1, direction: 1, index: 0, key: "name",
-              label: {
-                "fi": "Name",
-                "en": "Name",
-                "sv": "Name",
-              },
-            },
-            {
-              sort_order: 2, direction: -1, index: 1, key: "last_name",
-              label: {
-                "fi": "Last name",
-                "en": "Last name",
-                "sv": "Last name",
-              },
-            },
-            {
-              direction: 1, index: 2, key: "age",
-              label: {
-                "fi": "Age",
-                "en": "Age",
-                "sv": "Age",
-              },
-            },
-            {
-              direction: 1, index: 3, key: "hidden_age",
-              label: {
-                "fi": "hidden age",
-                "en": "hidden age",
-                "sv": "hidden age",
-              },
-            },
-          ];
-
-          //defined rows, if this is set, columns must also be defined for this to have an affect
-          eTable.rows = [{
-            "name": "Jenn",
-            "last_name": "Woodburne",
-            "age": 65,
-            "hidden_age": 25,
-            "meta": {
-              "id": "1",
-            },
-          }, {
-            "name": "Symon",
-            "last_name": "Effemy",
-            "age": 91,
-            "hidden_age": 25,
-            "meta": {
-              "id": "2",
-            },
-          }, {
-            "name": "Shari",
-            "last_name": "Pattlel",
-            "age": 81,
-            "hidden_age": 25,
-            "meta": {
-              "id": "3",
-            },
-          }, {
-            "name": "Trudy",
-            "last_name": "MacRitchie",
-            "age": 56,
-            "hidden_age": 25,
-            "meta": {
-              "id": "4",
-            },
-          }, {
-            "name": "Dick",
-            "last_name": "Gorgen",
-            "age": 69,
-            "hidden_age": 25,
-            "meta": {
-              "id": "5",
-            },
-          }, {
-            "name": "Pia",
-            "last_name": "Siemens",
-            "age": 93,
-            "hidden_age": 25,
-            "meta": {
-              "id": "6",
-            },
-          }, {
-            "name": "Fred",
-            "last_name": "Baslter",
-            "age": 78,
-            "hidden_age": 25,
-            "meta": {
-              "id": "7",
-            },
-          }, {
-            "name": "Fred",
-            "last_name": "Alster",
-            "age": 54,
-            "hidden_age": 25,
-            "meta": {
-              "id": "8",
-            },
-          }, {
-            "name": "Mair",
-            "last_name": "Camier",
-            "age": 76,
-            "hidden_age": 25,
-            "meta": {
-              "id": "9",
-            },
-          }, {
-            "name": "Meade",
-            "last_name": "Hansana",
-            "age": 68,
-            "hidden_age": 25,
-            "meta": {
-              "id": "10",
-            },
-          }];
-
-
-
-        </script>
-
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-editable-table/duet-editable-table.e2e.js

@@ -1,29 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { getAllFixturesFiles } from "../../utils/fixture-utils";
-import { createPage } from "../../utils/test-utils";
-const ressources = getAllFixturesFiles(__dirname);
-describe("duet-editable-table", () => {
-    it("should render an duet-editable-table component", async () => {
-        const page = await createPage(ressources.fixtures.table_with_actions_and_sorting);
-        const component = await page.find("duet-editable-table");
-        const items = await page.evaluate(() => {
-            function mapToObj(inputMap) {
-                const obj = {};
-                inputMap.forEach(function (value, key) {
-                    obj[key] = value;
-                });
-                return obj;
-            }
-            const element = document.querySelector("duet-editable-table");
-            const items = element.rows;
-            // the map is not serializable (natively) so we need to pass it along as an object
-            return mapToObj(items);
-        });
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-        //expect items to match fixture items
-        expect(Object.keys(items).length).toBe(10);
-    });
-});

package/lib/collection/components/duet-empty-state/duet-empty-state.a11y.e2e.js

@@ -1,15 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-empty-state", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-empty-state>
-          <duet-paragraph margin="none">Ei näytettävää sisältöä.</duet-paragraph>
-        </duet-empty-state>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

package/lib/collection/components/duet-empty-state/duet-empty-state.e2e.js

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

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

@@ -1,17 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-fieldset", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-fieldset label="Choose an option">
-          <duet-checkbox checked label="Option 1"></duet-checkbox>
-          <duet-checkbox label="Option 2"></duet-checkbox>
-          <duet-checkbox label="Option 3"></duet-checkbox>
-        </duet-fieldset>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,13 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { getAllFixturesFiles } from "../../utils/fixture-utils";
-import { createPage } from "../../utils/test-utils";
-const { fixtures } = getAllFixturesFiles(__dirname);
-describe("duet-fieldset", () => {
-    it("should render an empty state", async () => {
-        const page = await createPage(fixtures.basic_fieldset);
-        const component = await page.find("duet-fieldset");
-        expect(component).not.toBeNull();
-    });
-});

package/lib/collection/components/duet-footer/duet-footer.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-footer", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-footer logo-href="/" language="fi" class="duet-example-without-padding"> </duet-footer>
-
-        <script>
-          var footer = document.querySelector("duet-footer")
-          footer.menu = [
-            { label: "Turvallisuus ja käyttöehdot", href: "#" },
-            { label: "Evästeet", href: "#" },
-            { label: "Henkilötietojen käsittely", href: "#" },
-          ]
-        </script>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,186 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-const defaultFooter = `<duet-footer logo-href="/" language="fi" class="duet-example-without-padding"> </duet-footer>`;
-const simpleVariation = `<duet-footer variation="simple" class="duet-example-without-padding"> </duet-footer>`;
-describe("duet-footer", () => {
-    it("should render a navigation", async () => {
-        const page = await createPage(defaultFooter);
-        const component = await page.find("duet-footer");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that sets language", async () => {
-        const page = await createPage(defaultFooter);
-        const element = await page.find("duet-footer >>> duet-logo");
-        expect(element.getAttribute("language")).toEqual("fi");
-    });
-    it("should provide a property that removes the margin of the component", async () => {
-        const page = await createPage(`<duet-footer margin="none"></duet-footer>`);
-        const element = await page.find("duet-footer >>> .duet-m-0");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that switches the theme", async () => {
-        const page = await createPage(`<duet-footer theme="turva"></duet-footer>`);
-        const element = await page.find("duet-footer >>> .duet-footer");
-        expect(element).toHaveClass("duet-theme-turva");
-    });
-    it("should provide a property that changes logo’s href", async () => {
-        const page = await createPage(`<duet-footer logo-href="demo"></duet-footer>`);
-        const element = await page.find("duet-footer >>> duet-logo");
-        expect(element.getAttribute("href")).toEqual("demo");
-    });
-    it("should provide a property that renders navigation items", async () => {
-        const page = await createPage(defaultFooter);
-        await page.$eval("duet-footer", (el) => {
-            el.items = [
-                { label: "Hae korvausta", href: "#" },
-                { label: "Osta vakuutus", href: "#" },
-                { label: "Yhteystiedot", href: "#" },
-            ];
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-footer >>> .duet-footer-link");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that renders menu items", async () => {
-        const page = await createPage(defaultFooter);
-        await page.$eval("duet-footer", (el) => {
-            el.menu = [
-                { label: "Hae korvausta", href: "#" },
-                { label: "Osta vakuutus", href: "#" },
-                { label: "Yhteystiedot", href: "#" },
-            ];
-        });
-        await page.waitForChanges();
-        const element = await page.find("duet-footer >>> p a");
-        expect(element).not.toBeNull();
-    });
-    it("should provide a property that renders the footer in simple mode", async () => {
-        const page = await createPage(simpleVariation);
-        const element = await page.find("duet-footer >>> .duet-footer-simple");
-        expect(element).not.toBeNull();
-    });
-    it("should automatically refresh itself when content changes", async () => {
-        const page = await createPage(defaultFooter);
-        await page.$eval("duet-footer", (el) => {
-            el.items = [
-                { label: "Hae korvausta", href: "#" },
-                { label: "Osta vakuutus", href: "#" },
-                { label: "Yhteystiedot", href: "#" },
-            ];
-        });
-        const element = await page.find("duet-footer");
-        // should be updated when setting the *attribute*
-        element.setAttribute("items", '[{ "label": "test", "href": "#" }]');
-        await page.waitForChanges();
-        let test = await page.find("duet-footer >>> .duet-footer-link");
-        expect(test).toEqualText("test");
-        // should also be updated when setting the label *property*
-        element.setProperty("items", [{ label: "test 2", href: "#" }]);
-        await page.waitForChanges();
-        test = await page.find("duet-footer >>> .duet-footer-link");
-        expect(test).toEqualText("test 2");
-    });
-    describe("events", () => {
-        let page;
-        let footer;
-        const props = {
-            items: [
-                { label: "item 1", id: "item-1" },
-                { label: "item 2", id: "item-2" },
-            ],
-            menu: [{ label: "menu 1", id: "menu-1" }],
-            logoHref: "./#logo",
-        };
-        beforeEach(async () => {
-            page = await createPage(defaultFooter);
-            footer = await page.find("duet-footer");
-            await page.$eval("duet-footer", (footer, props) => {
-                Object.assign(footer, props);
-            }, props);
-            await page.waitForChanges();
-        });
-        it("raises events when logo is clicked", async () => {
-            const logo = await page.find("duet-footer >>> duet-logo");
-            const changeSpy = await footer.spyOnEvent("duetChange");
-            const logoSpy = await footer.spyOnEvent("duetLogoClick");
-            await logo.click();
-            const expected = {
-                component: "duet-footer",
-                data: { href: props.logoHref, label: "logo" },
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(logoSpy.firstEvent.detail).toEqual(expected);
-        });
-        it("raises events when the menu is clicked", async () => {
-            const menu = await page.find("duet-footer >>> #menu-1");
-            const changeSpy = await footer.spyOnEvent("duetChange");
-            const menuSpy = await footer.spyOnEvent("duetMenuClick");
-            await menu.click();
-            const expected = {
-                component: "duet-footer",
-                data: props.menu[0],
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(menuSpy.firstEvent.detail).toEqual(expected);
-        });
-        it("raises events when an item is clicked", async () => {
-            const item = await page.find("duet-footer >>> #item-1");
-            const changeSpy = await footer.spyOnEvent("duetChange");
-            const itemSpy = await footer.spyOnEvent("duetItemClick");
-            await item.click();
-            const expected = {
-                component: "duet-footer",
-                data: props.items[0],
-                originalEvent: expect.anything(),
-            };
-            expect(changeSpy.firstEvent.detail).toEqual(expected);
-            expect(itemSpy.firstEvent.detail).toEqual(expected);
-        });
-    });
-    describe("analytics", () => {
-        let page;
-        beforeEach(async () => {
-            page = await createPage(`
-        <duet-footer
-          items='[
-            { "label": "item 1", "id": "item-1", "analyticsId": "item analytics" } ,
-            { "label": "item 2", "id": "item-2" }
-          ]'
-          menu='[{ "label": "menu 1", "id": "menu-1", "analyticsId": "menu analytics"}]'
-        ></duet-footer>
-      `);
-        });
-        it("allows analytics to be set for footer items", async () => {
-            const item1 = await page.find("duet-footer >>> #item-1");
-            expect(item1).not.toBeNull();
-            const analyticsSpy = await page.spyOnEvent("duetAnalytics");
-            await item1.click();
-            expect(analyticsSpy).toHaveReceivedEventDetail({
-                analyticsId: "item analytics",
-                component: "duet-footer",
-            });
-        });
-        it("allows analytics to be set for menu items", async () => {
-            const menu1 = await page.find("duet-footer >>> #menu-1");
-            expect(menu1).not.toBeNull();
-            const analyticsSpy = await page.spyOnEvent("duetAnalytics");
-            await menu1.click();
-            expect(analyticsSpy).toHaveReceivedEventDetail({
-                analyticsId: "menu analytics",
-                component: "duet-footer",
-            });
-        });
-        it("does nothing when items without analytics are clicked", async () => {
-            const item2 = await page.find("duet-footer >>> #item-2");
-            expect(item2).not.toBeNull();
-            const analyticsSpy = await page.spyOnEvent("duetAnalytics");
-            await item2.click();
-            expect(analyticsSpy).toHaveReceivedEventTimes(0);
-        });
-    });
-});

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

@@ -1,17 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-grid", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-grid responsive class="grid-demo">
-          <duet-grid-item>Grid Item<br />with multiple<br />rows of text.</duet-grid-item>
-          <duet-grid-item>Grid Item</duet-grid-item>
-          <duet-grid-item>Grid Item</duet-grid-item>
-        </duet-grid>
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});

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

@@ -1,42 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { createPage } from "../../utils/test-utils";
-describe("duet-grid", () => {
-    it("should render a grid", async () => {
-        const page = await createPage(`<duet-grid></duet-grid>`);
-        const component = await page.find("duet-grid");
-        expect(component).not.toBeNull();
-        expect(component).toHaveClass("hydrated");
-    });
-    it("should provide a property that enables the responsive behaviour", async () => {
-        const page = await createPage(`<duet-grid responsive></duet-grid>`);
-        const element = await page.find("duet-grid");
-        expect(element).not.toHaveClass("duet-no-stacking");
-    });
-    it("should provide a property that disabled the responsive behaviour", async () => {
-        const page = await createPage(`<duet-grid responsive="false"></duet-grid>`);
-        const element = await page.find("duet-grid");
-        expect(element).toHaveClass("duet-no-stacking");
-    });
-    it("should provide a property that changes the direction of the items", async () => {
-        const page = await createPage(`<duet-grid direction="vertical"></duet-grid>`);
-        const element = await page.find("duet-grid");
-        expect(element).toHaveClass("duet-grid-direction-vertical");
-    });
-    it("should provide a property that changes the alignment of the items", async () => {
-        const page = await createPage(`<duet-grid alignment="baseline"></duet-grid>`);
-        const element = await page.find("duet-grid");
-        expect(element).toHaveClass("duet-grid-align-baseline");
-    });
-    it("should provide a property that changes the distribution of the items", async () => {
-        const page = await createPage(`<duet-grid distribution="center"></duet-grid>`);
-        const element = await page.find("duet-grid");
-        expect(element).toHaveClass("duet-grid-distribution-center");
-    });
-    it("should provide a property that adjusts aligment on mobile only", async () => {
-        const page = await createPage(`<duet-grid mobile="center"></duet-grid>`);
-        const element = await page.find("duet-grid");
-        expect(element).toHaveClass("duet-grid-mobile-center");
-    });
-});

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

@@ -1,42 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-describe("[a11y] duet-header", () => {
-    it("should render an accessible component", async () => {
-        const result = await testWithAxe(`
-        <duet-header
-          language="fi"
-          region="Pääkaupunkiseutu"
-          contact="Ota yhteyttä"
-          skip-to-id="#content"
-          current-href="/"
-          items='[
-                    { "label": "Etusivu","href": "/" },
-                    { "label": "Vakuutukset", "href": "#content" },
-                    { "label": "Vahinkoasiat", "href": "#content" },
-                    { "label": "Säästöt ja sijoitukset", "href": "#content" },
-                    { "label": "Laskut", "href": "#content", "badge": true },
-                    { "label": "Viestit", "href": "#content" }
-                  ]'
-          language-items='[
-                    { "label": "Suomeksi", "country": "fi", "href": "/?lang=fi" },
-                    { "label": "På Svenska", "country": "sv", "href": "/?lang=sv" },
-                    { "label": "In English", "country": "en", "href": "/?lang=en" }
-                  ]'
-          contact-items='[
-                    { "label": "Lähetä viesti", "href": "/viestit/laheta" },
-                    { "label": "Avaa chat", "href": "/chat/" },
-                    { "label": "Yhteystiedot", "href": "/yhteystiedot/", "external": true }
-                  ]'
-          session='{ "label": "Kirjaudu ulos", "href": "/?logout", "type": "logout" }'
-          user='{ "label": "Elina", "href": "/?userId=elina" }'
-        >
-        </duet-header>
-        <div id="content"></div>
-
-      `, axeRunOptions);
-        expect(result).not.toBeNull();
-        expect(formatViolations(result.violations)).toEqual([]);
-    });
-});