@scania/tegel 1.3.3 → 1.4.0

package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.js

@@ -4,22 +4,22 @@ import generateUniqueId from "../../../utils/generateUniqueId";
  * @slot <default> - <b>Unnamed slot.</b> For the title text.
  */
 export class TdsHeaderLauncherListTitle {
-  constructor() {
-    this.uuid = generateUniqueId();
-  }
-  render() {
-    return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", null))));
-  }
-  static get is() { return "tds-header-launcher-list-title"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-launcher-list-title.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-launcher-list-title.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
+    constructor() {
+        this.uuid = generateUniqueId();
+    }
+    render() {
+        return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", null))));
+    }
+    static get is() { return "tds-header-launcher-list-title"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-launcher-list-title.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-launcher-list-title.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/header/header-title/header-title.js

@@ -3,19 +3,19 @@ import { h, Host } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For the header title text.
  */
 export class TdsHeaderTitle {
-  render() {
-    return (h(Host, null, h("div", { class: "component" }, h("slot", null))));
-  }
-  static get is() { return "tds-header-title"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-title.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-title.css"]
-    };
-  }
+    render() {
+        return (h(Host, null, h("div", { class: "component" }, h("slot", null))));
+    }
+    static get is() { return "tds-header-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-title.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-title.css"]
+        };
+    }
 }

package/dist/collection/components/header/header.js

@@ -8,42 +8,42 @@ import inheritAriaAttributes from "../../utils/inheritAriaAttributes";
  * @slot end - Slot for the end (right side) of the header.
  */
 export class TdsHeader {
-  constructor() {
-    const callback = (mutationsList) => {
-      mutationsList.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          updateListChildrenRoles(mutation.target);
-        }
-      });
-    };
-    this.observer = new MutationObserver(callback);
-  }
-  componentDidLoad() {
-    const hostElement = this.host;
-    const navElement = hostElement.querySelector('.tds-header-component-list');
-    this.observer.observe(navElement, {
-      childList: true,
-      subtree: false,
-    });
-    updateListChildrenRoles(navElement);
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "tds-header-component-list" }, h("slot", null), h("li", { class: "tds-header-middle-spacer" }), h("slot", { name: "end" })))));
-  }
-  static get is() { return "tds-header"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header.css"]
-    };
-  }
-  static get elementRef() { return "host"; }
+    constructor() {
+        const callback = (mutationsList) => {
+            mutationsList.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    updateListChildrenRoles(mutation.target);
+                }
+            });
+        };
+        this.observer = new MutationObserver(callback);
+    }
+    componentDidLoad() {
+        const hostElement = this.host;
+        const navElement = hostElement.querySelector('.tds-header-component-list');
+        this.observer.observe(navElement, {
+            childList: true,
+            subtree: false,
+        });
+        updateListChildrenRoles(navElement);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    render() {
+        const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
+        return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "tds-header-component-list" }, h("slot", null), h("li", { class: "tds-header-middle-spacer" }), h("slot", { name: "end" })))));
+    }
+    static get is() { return "tds-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
 }

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

@@ -11,41 +11,41 @@ import readmeBrandSymbol from "./header-brand-symbol/readme.md";
 import readmeLauncher from "./header-launcher/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Header`,
-  parameters: {
-    notes: {
-      'Header': readme,
-      'Header hamburger': readmeHamburger,
-      'Header title': readmeTitle,
-      'Header item': readmeItem,
-      'Header dropdown': readmeDropdown,
-      'Header dropdown list': readmeDropdownList,
-      'Header dropdown list item': readmeDropdownListItem,
-      'Header dropdown list user': readmeDropdownListUser,
-      'Header launcher': readmeLauncher,
-      'Header brand symbol': readmeBrandSymbol,
+    title: `${ComponentsFolder}/Header`,
+    parameters: {
+        notes: {
+            'Header': readme,
+            'Header hamburger': readmeHamburger,
+            'Header title': readmeTitle,
+            'Header item': readmeItem,
+            'Header dropdown': readmeDropdown,
+            'Header dropdown list': readmeDropdownList,
+            'Header dropdown list item': readmeDropdownListItem,
+            'Header dropdown list user': readmeDropdownListUser,
+            'Header launcher': readmeLauncher,
+            'Header brand symbol': readmeBrandSymbol,
+        },
+        layout: 'fullscreen',
+        docs: {
+            source: {
+                state: 'closed',
+            },
+        },
+        design: [
+            {
+                name: 'Figma',
+                type: 'figma',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+            },
+            {
+                name: 'Link',
+                type: 'link',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+            },
+        ],
     },
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {},
-  args: {},
+    argTypes: {},
+    args: {},
 };
 const Template = () => formatHtmlPreview(`
   <tds-header>

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

@@ -0,0 +1,44 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/header/test/default/index.html';
+test.describe('tds-header-default', () => {
+    test('renders default header correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const headerComponent = page.getByRole('navigation');
+        await expect(headerComponent).toHaveCount(1);
+        await expect(headerComponent).toBeVisible();
+        /** Check screenshot diff */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('title exists and is "Example: default"', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const headerComponentHeaderText = page.getByText('Example: default');
+        await expect(headerComponentHeaderText).toHaveCount(1);
+        await expect(headerComponentHeaderText).toBeVisible();
+    });
+    test('luncher button icon exists', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const headerComponentLuncherButton = page.getByRole('button');
+        await expect(headerComponentLuncherButton).toHaveCount(1);
+        await expect(headerComponentLuncherButton).toBeVisible();
+    });
+    test('brand label with link exists', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const headerComponentBrandLink = page.getByLabel('Scania - red gryphon on blue shield');
+        await expect(headerComponentBrandLink).toHaveCount(1);
+        await expect(headerComponentBrandLink).toBeVisible();
+    });
+    test('launcher should open on click', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const headerComponentLuncherButton = page.getByRole('button');
+        await headerComponentLuncherButton.click();
+        const headerLuncherList = page
+            .getByRole('listitem')
+            .filter({ has: page.getByRole('heading') })
+            .getByRole('list');
+        await expect(headerLuncherList).toHaveCount(1);
+        await expect(headerLuncherList).toBeVisible();
+        /** Check screenshot diff */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+});

package/dist/collection/components/icon/icon.js

@@ -2,107 +2,107 @@
 import { h, Host } from "@stencil/core";
 import { iconsCollection } from "./iconsArray";
 export class Icon {
-  constructor() {
-    this.setIcons = () => this.arrayOfIcons.map((element) => {
-      var _a;
-      if (element.name === this.name) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, (_a = this.svgTitle) !== null && _a !== void 0 ? _a : `${element.name} icon`), h("path", { fill: "currentColor", d: element.definition })));
-      }
-    });
-    this.name = 'truck';
-    this.size = '16px';
-    this.svgTitle = undefined;
-    this.icons_object = iconsCollection;
-    this.arrayOfIcons = [];
-  }
-  componentWillLoad() {
-    this.arrayDataWatcher(this.icons_object);
-  }
-  arrayDataWatcher(newValue) {
-    if (typeof newValue === 'string') {
-      this.arrayOfIcons = JSON.parse(newValue);
+    constructor() {
+        this.setIcons = () => this.arrayOfIcons.map((element) => {
+            var _a;
+            if (element.name === this.name) {
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, (_a = this.svgTitle) !== null && _a !== void 0 ? _a : `${element.name} icon`), h("path", { fill: "currentColor", d: element.definition })));
+            }
+        });
+        this.name = 'truck';
+        this.size = '16px';
+        this.svgTitle = undefined;
+        this.icons_object = iconsCollection;
+        this.arrayOfIcons = [];
     }
-    else {
-      this.arrayOfIcons = newValue;
+    componentWillLoad() {
+        this.arrayDataWatcher(this.icons_object);
+    }
+    arrayDataWatcher(newValue) {
+        if (typeof newValue === 'string') {
+            this.arrayOfIcons = JSON.parse(newValue);
+        }
+        else {
+            this.arrayOfIcons = newValue;
+        }
+        this.arrayOfIcons = [...this.arrayOfIcons];
+    }
+    render() {
+        return h(Host, null, this.setIcons());
+    }
+    static get is() { return "tds-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pass a name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library"
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "'truck'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pass a size of icon as a string, for example: 32px, 1rem, 4em..."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'16px'"
+            },
+            "svgTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the default title for the svg."
+                },
+                "attribute": "svg-title",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "icons_object": {},
+            "arrayOfIcons": {}
+        };
     }
-    this.arrayOfIcons = [...this.arrayOfIcons];
-  }
-  render() {
-    return h(Host, null, this.setIcons());
-  }
-  static get is() { return "tds-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Pass a name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library"
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "'truck'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Pass a size of icon as a string, for example: 32px, 1rem, 4em..."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'16px'"
-      },
-      "svgTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Override the default title for the svg."
-        },
-        "attribute": "svg-title",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "icons_object": {},
-      "arrayOfIcons": {}
-    };
-  }
 }

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

@@ -2,45 +2,45 @@ import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { iconsNames } from "./iconsArray";
 import readme from "./readme.md";
 export default {
-  title: 'Foundations',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    icon: {
-      name: 'Icon name',
-      description: 'Select icon to display',
-      control: {
-        type: 'select',
-      },
-      options: iconsNames,
+    title: 'Foundations',
+    parameters: {
+        layout: 'centered',
+        notes: readme,
+        design: [
+            {
+                name: 'Figma',
+                type: 'figma',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
+            },
+            {
+                name: 'Link',
+                type: 'link',
+                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
+            },
+        ],
     },
-    size: {
-      name: 'Size in pixels',
-      description: 'Set the size of the Icon',
-      control: {
-        type: 'select',
-      },
-      options: [16, 20, 24, 32],
+    argTypes: {
+        icon: {
+            name: 'Icon name',
+            description: 'Select icon to display',
+            control: {
+                type: 'select',
+            },
+            options: iconsNames,
+        },
+        size: {
+            name: 'Size in pixels',
+            description: 'Set the size of the Icon',
+            control: {
+                type: 'select',
+            },
+            options: [16, 20, 24, 32],
+        },
+    },
+    args: {
+        size: 32,
+        icon: 'truck',
     },
-  },
-  args: {
-    size: 32,
-    icon: 'truck',
-  },
 };
 const IconTemplate = (args) => formatHtmlPreview(`
   <tds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></tds-icon>