@scania/tegel 1.3.3 → 1.4.0

package/dist/collection/components/side-menu/side-menu.js

@@ -1,5 +1,5 @@
 import { h, Host, } from "@stencil/core";
-const GRID_LG_BREAKPOINT = '992px';
+const GRID_LG_BREAKPOINT = 992;
 /**
  * @slot overlay - Used of injection of tds-side-menu-overlay
  * @slot close-button - Used for injection of tds-side-menu-close-button that is show when in mobile view
@@ -9,220 +9,229 @@ const GRID_LG_BREAKPOINT = '992px';
  * @slot sticky-end - Used for tds-side-menu-collapse-button component
  * */
 export class TdsSideMenu {
-  constructor() {
-    this.handleMatchesLgBreakpointChange = (e) => {
-      const isBelowLg = !e.matches;
-      if (isBelowLg) {
+    constructor() {
+        this.handleMatchesLgBreakpointChange = (e) => {
+            const isBelowLg = !e.matches;
+            if (isBelowLg) {
+                this.collapsed = false;
+            }
+            else {
+                this.collapsed = this.initialCollapsedState;
+            }
+        };
+        this.open = false;
+        this.persistent = false;
         this.collapsed = false;
-      }
-    };
-    this.open = false;
-    this.persistent = false;
-    this.collapsed = false;
-    this.isUpperSlotEmpty = false;
-    this.isCollapsed = false;
-  }
-  connectedCallback() {
-    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
-    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
-    this.isCollapsed = this.collapsed;
-  }
-  componentDidLoad() {
-    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
-    const upperSlotElements = upperSlot.assignedElements();
-    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
-    if (!hasUpperSlotElements) {
-      this.isUpperSlotEmpty = true;
+        this.isUpperSlotEmpty = false;
+        this.isCollapsed = false;
+        this.initialCollapsedState = false;
     }
-  }
-  disconnectedCallback() {
-    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
-  }
-  onCollapsedChange(newVal) {
-    /** Emits the internal collapse event when the prop has changed. */
-    this.internalTdsSideMenuPropChange.emit({
-      changed: ['collapsed'],
-      collapsed: newVal,
-    });
-    this.isCollapsed = newVal;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  render() {
-    return (h(Host, { role: "navigation", class: {
-        'menu-opened': this.open,
-        'menu-persistent': this.persistent,
-        'menu-collapsed': this.collapsed,
-      } }, h("div", { class: {
-        'wrapper': true,
-        'state-upper-slot-empty': this.isUpperSlotEmpty,
-        'state-open': this.open,
-        'state-closed': !this.open,
-      } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "tds-side-menu-wrapper" }, h("ul", { class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
-  }
-  static get is() { return "tds-side-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["side-menu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["side-menu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Applicable only for mobile. If the Side Menu is open or not."
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "persistent": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Applicable only for desktop. If the Side Menu should always be shown."
-        },
-        "attribute": "persistent",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "collapsed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tds-Collapse event."
-        },
-        "attribute": "collapsed",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isUpperSlotEmpty": {},
-      "isCollapsed": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tdsCollapse",
-        "name": "tdsCollapse",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event that is emitted when the Side Menu is collapsed."
-        },
-        "complexType": {
-          "original": "CollapseEvent",
-          "resolved": "{ collapsed: boolean; }",
-          "references": {
-            "CollapseEvent": {
-              "location": "local",
-              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
-              "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
-            }
-          }
+    connectedCallback() {
+        this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT}px)`);
+        this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+        this.isCollapsed = this.collapsed;
+        this.initialCollapsedState = this.collapsed;
+    }
+    componentDidLoad() {
+        const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+        const upperSlotElements = upperSlot.assignedElements();
+        const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+        if (!hasUpperSlotElements) {
+            this.isUpperSlotEmpty = true;
         }
-      }, {
-        "method": "internalTdsCollapse",
-        "name": "internalTdsCollapse",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Broadcasts collapsed state to child components."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "CollapseEvent",
-          "resolved": "{ collapsed: boolean; }",
-          "references": {
-            "CollapseEvent": {
-              "location": "local",
-              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
-              "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
-            }
-          }
+        if (window.innerWidth < GRID_LG_BREAKPOINT) {
+            this.collapsed = false;
         }
-      }, {
-        "method": "internalTdsSideMenuPropChange",
-        "name": "internalTdsSideMenuPropChange",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Broadcasts collapsed state to child components."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "InternalTdsSideMenuPropChange",
-          "resolved": "{ changed: \"collapsed\"[]; } & Partial<Props>",
-          "references": {
-            "InternalTdsSideMenuPropChange": {
-              "location": "local",
-              "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
-              "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
+    }
+    disconnectedCallback() {
+        this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+    }
+    onCollapsedChange(newVal) {
+        /** Emits the internal collapse event when the prop has changed. */
+        this.internalTdsSideMenuPropChange.emit({
+            changed: ['collapsed'],
+            collapsed: newVal,
+        });
+        this.isCollapsed = newVal;
+    }
+    collapsedSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    render() {
+        return (h(Host, { role: "navigation", class: {
+                'menu-opened': this.open,
+                'menu-persistent': this.persistent,
+                'menu-collapsed': this.collapsed,
+            } }, h("div", { class: {
+                'wrapper': true,
+                'state-upper-slot-empty': this.isUpperSlotEmpty,
+                'state-open': this.open,
+                'state-closed': !this.open,
+            } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "tds-side-menu-wrapper" }, h("ul", { class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
+    }
+    static get is() { return "tds-side-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["side-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["side-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applicable only for mobile. If the Side Menu is open or not."
+                },
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "persistent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applicable only for desktop. If the Side Menu should always be shown."
+                },
+                "attribute": "persistent",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event."
+                },
+                "attribute": "collapsed",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "collapsed",
-        "methodName": "onCollapsedChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "internalTdsCollapse",
-        "method": "collapsedSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isUpperSlotEmpty": {},
+            "isCollapsed": {},
+            "initialCollapsedState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tdsCollapse",
+                "name": "tdsCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that is emitted when the Side Menu is collapsed."
+                },
+                "complexType": {
+                    "original": "CollapseEvent",
+                    "resolved": "{ collapsed: boolean; }",
+                    "references": {
+                        "CollapseEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "internalTdsCollapse",
+                "name": "internalTdsCollapse",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Broadcasts collapsed state to child components."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CollapseEvent",
+                    "resolved": "{ collapsed: boolean; }",
+                    "references": {
+                        "CollapseEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "internalTdsSideMenuPropChange",
+                "name": "internalTdsSideMenuPropChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Broadcasts collapsed state to child components."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "InternalTdsSideMenuPropChange",
+                    "resolved": "{ changed: \"collapsed\"[]; } & Partial<Props>",
+                    "references": {
+                        "InternalTdsSideMenuPropChange": {
+                            "location": "local",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "collapsed",
+                "methodName": "onCollapsedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "internalTdsCollapse",
+                "method": "collapsedSideMenuEventHandler",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/side-menu/side-menu.stories.js

@@ -10,68 +10,68 @@ import readmeSideMenuDropdownList from "./side-menu-dropdown-list/readme.md";
 import readmeSideMenuDropdownListItem from "./side-menu-dropdown-list-item/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
-  title: `${ComponentsFolder}/Side Menu`,
-  parameters: {
-    notes: {
-      'Side Menu': readme,
-      'Side Menu Item': readmeSideMenuItem,
-      'Side Menu Dropdown': readmeSideMenuDropdown,
-      'Side Menu Dropdown List': readmeSideMenuDropdownList,
-      'Side Menu Dropdown List Item': readmeSideMenuDropdownListItem,
-      'Side Menu User': readmeSideMenuUser,
-      'Side Menu Collapse Button': readmeSideMenuCollapseButton,
-      'Side Menu Close Button': readmeSideMenuCloseButton,
-      'Side Menu Overlay': readmeSideMenuOverlay,
+    title: `${ComponentsFolder}/Side Menu`,
+    parameters: {
+        notes: {
+            'Side Menu': readme,
+            'Side Menu Item': readmeSideMenuItem,
+            'Side Menu Dropdown': readmeSideMenuDropdown,
+            'Side Menu Dropdown List': readmeSideMenuDropdownList,
+            'Side Menu Dropdown List Item': readmeSideMenuDropdownListItem,
+            'Side Menu User': readmeSideMenuUser,
+            'Side Menu Collapse Button': readmeSideMenuCollapseButton,
+            'Side Menu Close Button': readmeSideMenuCloseButton,
+            'Side Menu Overlay': readmeSideMenuOverlay,
+        },
+        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',
-      },
+    argTypes: {
+        persistent: {
+            name: 'Persistent',
+            description: 'Set the Side Menu to always show. This should be used if there are more navigation items to show than can always fit in the Header, more than three Header items is a good rule of thumb.',
+            control: {
+                type: 'boolean',
+            },
+        },
+        collapsible: {
+            name: 'Collapsible',
+            description: 'Make the Side Menu collapsible',
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'persistent', truthy: true },
+        },
+        collapsed: {
+            name: 'Collapsed',
+            description: 'Collapsed Side Menu',
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'collapsible', truthy: true },
+        },
     },
-    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: {
-    persistent: {
-      name: 'Persistent',
-      description: 'Set the Side Menu to always show. This should be used if there are more navigation items to show than can always fit in the Header, more than three Header items is a good rule of thumb.',
-      control: {
-        type: 'boolean',
-      },
+    args: {
+        persistent: true,
+        collapsible: false,
+        collapsed: false,
     },
-    collapsible: {
-      name: 'Collapsible',
-      description: 'Make the Side Menu collapsible',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'persistent', truthy: true },
-    },
-    collapsed: {
-      name: 'Collapsed',
-      description: 'Collapsed Side Menu',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'collapsible', truthy: true },
-    },
-  },
-  args: {
-    persistent: true,
-    collapsible: false,
-    collapsed: false,
-  },
 };
 const Template = ({ persistent, collapsible, collapsed }) => formatHtmlPreview(`
     <script>
@@ -100,7 +100,7 @@ const Template = ({ persistent, collapsible, collapsed }) => formatHtmlPreview(`
       flex-grow: 1;
     }
     ${persistent
-  ? `
+    ? `
         /* the lg breakpoint is used here to match the breakpoint used in the Header */
     @media (min-width: 992px) {
       #demo-side-menu {
@@ -111,7 +111,7 @@ const Template = ({ persistent, collapsible, collapsed }) => formatHtmlPreview(`
         left: 0px;
       }
     }`
-  : ''}
+    : ''}
     /* If an extra button in the Header is required except on */
     /* very narrow screens, you can use classes like these: */
     .demo-hide {
@@ -192,10 +192,10 @@ const Template = ({ persistent, collapsible, collapsed }) => formatHtmlPreview(`
         </tds-side-menu-item>
 
         ${collapsible
-  ? `<tds-side-menu-collapse-button slot="sticky-end">
+    ? `<tds-side-menu-collapse-button slot="sticky-end">
           Collapse  
         </tds-side-menu-collapse-button>`
-  : ''}
+    : ''}
 
       </tds-side-menu>
 

package/dist/collection/components/side-menu/test/collapsible/side-menu.e2e.js

@@ -0,0 +1,28 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/side-menu/test/collapsible/index.html';
+test.describe('tds-side-menu-collapsible', () => {
+    test('renders collapsible side-menu correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const sideMenuNavigation = page.getByRole('navigation');
+        await expect(sideMenuNavigation).toHaveCount(1);
+        await expect(sideMenuNavigation).toBeVisible();
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('collapse button exists on the bottom of side menu', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ });
+        await expect(sideMenuCollapseButton).toHaveCount(1);
+        await expect(sideMenuCollapseButton).toBeVisible();
+    });
+    test('click collapse button to close the menu', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ });
+        await sideMenuCollapseButton.click();
+        await expect(sideMenuCollapseButton).toHaveCount(1);
+        await expect(sideMenuCollapseButton).toBeVisible();
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+});

package/dist/collection/components/side-menu/test/default/side-menu.e2e.js

@@ -0,0 +1,38 @@
+import { test } from "stencil-playwright";
+import { expect } from "@playwright/test";
+const componentTestPath = 'src/components/side-menu/test/default/index.html';
+test.describe('tds-side-menu-default', () => {
+    test('renders default side-menu correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const sideMenuNavigation = page.getByRole('navigation');
+        await expect(sideMenuNavigation).toHaveCount(1);
+        await expect(sideMenuNavigation).toBeVisible();
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('all side menu buttons to be visible', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const sideMenuButtons = page.getByRole('button');
+        await expect(sideMenuButtons).toHaveCount(4);
+        const promises = [];
+        for (let i = 0; i < 4; i++) {
+            promises.push(expect(sideMenuButtons.nth(i)).toBeVisible());
+        }
+        await Promise.all(promises);
+    });
+    test('wheel type list is open by default and under Wheel types there are two sublink', async ({ page, }) => {
+        await page.goto(componentTestPath);
+        /* Make sure first list item is there and visible */
+        const sideMenuWheelTypeListItemOne = page
+            .getByRole('listitem')
+            .getByRole('link', { name: /Hub-centric wheel/ });
+        await expect(sideMenuWheelTypeListItemOne).toHaveCount(1);
+        await expect(sideMenuWheelTypeListItemOne).toBeVisible();
+        /* Make sure the second list item is there and visible */
+        const sideMenuWheelTypeListItemTwo = page
+            .getByRole('listitem')
+            .getByRole('link', { name: /Rim wheel/ });
+        await expect(sideMenuWheelTypeListItemTwo).toHaveCount(1);
+        await expect(sideMenuWheelTypeListItemTwo).toBeVisible();
+    });
+});