@scania/tegel 1.3.3 → 1.4.0

package/dist/collection/components/modal/modal.stories.js

@@ -2,89 +2,89 @@ import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Modal`,
-  parameters: {
-    layout: 'fullscreen',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    actionsPosition: {
-      name: 'Actions position',
-      description: "Defines the postion of Modal action's slot - if slot scrolls or stays on top of the content.",
-      control: {
-        type: 'radio',
-      },
-      options: ['Sticky', 'Static'],
-      table: {
-        defaultValue: { summary: 'static' },
-      },
+    title: `${ComponentsFolder}/Modal`,
+    parameters: {
+        layout: 'fullscreen',
+        notes: readme,
+        design: [
+            {
+                name: 'Figma',
+                type: 'figma',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+            },
+            {
+                name: 'Link',
+                type: 'link',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+            },
+        ],
     },
-    size: {
-      name: 'Size',
-      description: 'Sets the size of Modal.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-      table: {
-        defaultValue: { summary: 'md' },
-      },
+    argTypes: {
+        actionsPosition: {
+            name: 'Actions position',
+            description: "Defines the postion of Modal action's slot - if slot scrolls or stays on top of the content.",
+            control: {
+                type: 'radio',
+            },
+            options: ['Sticky', 'Static'],
+            table: {
+                defaultValue: { summary: 'static' },
+            },
+        },
+        size: {
+            name: 'Size',
+            description: 'Sets the size of Modal.',
+            control: {
+                type: 'radio',
+            },
+            options: ['Large', 'Medium', 'Small', 'Extra small'],
+            table: {
+                defaultValue: { summary: 'md' },
+            },
+        },
+        headerText: {
+            name: 'Modal header',
+            description: 'Sets the header text of the Modal.',
+            control: {
+                type: 'text',
+            },
+        },
+        bodyContent: {
+            name: 'Modal body text',
+            description: 'Sets the body content of the Modal.',
+            control: {
+                type: 'text',
+            },
+        },
+        showModal: {
+            name: 'Show Modal',
+            description: 'Toggles if the Modal is displayed.',
+            control: {
+                type: 'boolean',
+            },
+        },
+        prevent: {
+            name: 'Prevent',
+            description: 'Disables closing Modal on clicking on overlay area.',
+            control: {
+                type: 'boolean',
+            },
+        },
     },
-    headerText: {
-      name: 'Modal header',
-      description: 'Sets the header text of the Modal.',
-      control: {
-        type: 'text',
-      },
+    args: {
+        actionsPosition: 'Static',
+        size: 'Large',
+        headerText: 'The buttons for the Modal only works in the canvas tab',
+        bodyContent: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
+        showModal: true,
+        prevent: false,
     },
-    bodyContent: {
-      name: 'Modal body text',
-      description: 'Sets the body content of the Modal.',
-      control: {
-        type: 'text',
-      },
-    },
-    showModal: {
-      name: 'Show Modal',
-      description: 'Toggles if the Modal is displayed.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    prevent: {
-      name: 'Prevent',
-      description: 'Disables closing Modal on clicking on overlay area.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    actionsPosition: 'Static',
-    size: 'Large',
-    headerText: 'The buttons for the Modal only works in the canvas tab',
-    bodyContent: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
-    showModal: true,
-    prevent: false,
-  },
 };
 const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
+    'Large': 'lg',
+    'Medium': 'md',
+    'Small': 'sm',
+    'Extra small': 'xs',
 };
 const ModalTemplate = ({ actionsPosition, size, headerText, bodyContent, showModal, prevent }) => formatHtmlPreview(`
  <!-- The button below is just for demo purposes -->

package/dist/collection/components/modal/test/default/modal.e2e.js

@@ -0,0 +1,28 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/modal/test/default/index.html';
+test.describe('tds-modal-default', () => {
+    test('renders modal correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const tdsModal = page.getByTestId('tds-modal-testid');
+        await expect(tdsModal).toHaveCount(1);
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('modal contains three buttons', async ({ page }) => {
+        await page.goto(componentTestPath);
+        // Locate the buttons within the modal
+        const modalButtons = page.getByRole('button');
+        // Assert that there are three buttons
+        await expect(modalButtons).toHaveCount(3);
+    });
+    test('modal contains a header and a body', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const modalHeader = page.getByText('This is a header', { exact: true });
+        const modalBody = page.getByText('Where you can put anything you want!', {
+            exact: true,
+        });
+        // Assert that there are three buttons
+        await expect(modalHeader).toBeVisible();
+        await expect(modalBody).toBeVisible();
+    });
+});

package/dist/collection/components/modal/test/open-close/modal.e2e.js

@@ -0,0 +1,63 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/modal/test/open-close/index.html';
+test.describe('tds-modal-open', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto(componentTestPath);
+    });
+    test('Modal is closed by default', async ({ page }) => {
+        const tdsModal = page.locator('tds-modal');
+        await expect(tdsModal).toBeHidden(); // Modal is initially closed
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('[Open Modal] button exists', async ({ page }) => {
+        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
+        await expect(openModalButton).toBeVisible(); // [Open Modal] button exists and is visible
+    });
+    test('Open modal using selector', async ({ page }) => {
+        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
+        await openModalButton.dispatchEvent('click');
+        const modalSelector = 'tds-modal'; // Adjust the selector to match your modal's attributes
+        await page.waitForSelector(modalSelector);
+        const modal = await page.locator(modalSelector);
+        await expect(modal).toBeVisible(); // Modal should be open when using selector
+    });
+    test('Clicking [Open Modal] button opens the modal', async ({ page }) => {
+        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
+        const tdsModal = page.locator('tds-modal');
+        await openModalButton.dispatchEvent('click');
+        // Assert that the modal is visible
+        await expect(tdsModal).toBeVisible();
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('Clicking [Delete] button closes the modal', async ({ page }) => {
+        const deleteButton = page.getByRole('button').filter({ hasText: /Delete/ });
+        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
+        const tdsModal = page.locator('tds-modal');
+        await openModalButton.dispatchEvent('click');
+        await expect(tdsModal).toBeVisible();
+        await expect(deleteButton).toBeVisible();
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+        await deleteButton.dispatchEvent('click'); // Click [Delete] button
+        await expect(deleteButton).toBeHidden(); // button is removed
+        await expect(tdsModal).toBeHidden();
+    });
+    test('Clicking [Close] button closes the modal', async ({ page }) => {
+        const closeButton = page.locator('button[aria-label="close"]');
+        const tdsModal = page.locator('tds-modal');
+        // Now, close the modal
+        await closeButton.dispatchEvent('click');
+        await expect(tdsModal).toBeHidden(); // Modal should be closed after clicking Close
+    });
+    test('Clicking on area outside modal closes the modal', async ({ page }) => {
+        const tdsModalBackdrop = page.locator('.tds-modal-backdrop');
+        const tdsModal = page.locator('tds-modal');
+        // First, open the modal
+        const openModalButton = page.getByRole('button').filter({ hasText: /Open Modal/ });
+        await openModalButton.dispatchEvent('click');
+        await expect(tdsModal).toBeVisible(); // Modal should be open
+        // Now, close the modal by clicking outside
+        await tdsModalBackdrop.dispatchEvent('click');
+        await expect(tdsModal).toBeHidden(); // Modal should be closed after clicking outside
+    });
+});

package/dist/collection/components/modal/test/prevent-true/modal.e2e.js

@@ -0,0 +1,13 @@
+import { test, expect } from "@playwright/test";
+const componentTestPath = 'src/components/modal/test/prevent-true/index.html';
+test.describe('tds-modal-open', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto(componentTestPath);
+    });
+    test('Prevent = true: Clicking on area outside modal does not close the modal', async ({ page, }) => {
+        const tdsModalBackdrop = page.locator('.tds-modal-backdrop');
+        const tdsModal = page.locator('tds-modal');
+        await tdsModalBackdrop.dispatchEvent('click');
+        await expect(tdsModal).toBeVisible(); // Modal should remain open when prevent is true
+    });
+});

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -4,178 +4,178 @@ import inheritAttributes from "../../utils/inheritAttributes";
  * @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
  */
 export class TdsPopoverCanvas {
-  constructor() {
-    this.inheritedAttributes = [];
-    this.selector = '';
-    this.referenceEl = undefined;
-    this.show = null;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.modifiers = [];
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
-        'tds-popover-canvas': true,
-        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
-      }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", null, h("slot", null)))));
-  }
-  static get is() { return "tds-popover-canvas"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["popover-canvas.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["popover-canvas.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "selector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The CSS-selector for an element that will trigger the Popover"
-        },
-        "attribute": "selector",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "referenceEl": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement | null",
-          "resolved": "HTMLElement",
-          "references": {
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
+    constructor() {
+        this.inheritedAttributes = [];
+        this.selector = '';
+        this.referenceEl = undefined;
+        this.show = null;
+        this.placement = 'auto';
+        this.offsetSkidding = 0;
+        this.offsetDistance = 8;
+        this.modifiers = [];
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
+    }
+    render() {
+        var _a;
+        return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+                'tds-popover-canvas': true,
+                [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", null, h("slot", null)))));
+    }
+    static get is() { return "tds-popover-canvas"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover-canvas.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover-canvas.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS-selector for an element that will trigger the Popover"
+                },
+                "attribute": "selector",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "referenceEl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement | null",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Element that will trigger the Popover (takes priority over selector)"
+                }
+            },
+            "show": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
+                },
+                "attribute": "show",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement"
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "offsetSkidding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the offset skidding"
+                },
+                "attribute": "offset-skidding",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "offsetDistance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the offset distance"
+                },
+                "attribute": "offset-distance",
+                "reflect": false,
+                "defaultValue": "8"
+            },
+            "modifiers": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Object[]",
+                    "resolved": "Object[]",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
+                },
+                "defaultValue": "[]"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Element that will trigger the Popover (takes priority over selector)"
-        }
-      },
-      "show": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
-        },
-        "attribute": "show",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@popperjs/core",
-              "id": ""
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'auto'"
-      },
-      "offsetSkidding": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the offset skidding"
-        },
-        "attribute": "offset-skidding",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "offsetDistance": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the offset distance"
-        },
-        "attribute": "offset-distance",
-        "reflect": false,
-        "defaultValue": "8"
-      },
-      "modifiers": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Object[]",
-          "resolved": "Object[]",
-          "references": {
-            "Object": {
-              "location": "global",
-              "id": "global::Object"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
-        },
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+        };
+    }
+    static get elementRef() { return "host"; }
 }