@scania/tegel 1.0.1 → 1.1.0

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { ComponentsFolder } from "../../utils/constants";
 import readme from "./readme.md";
 import readmeItem from "./footer-item/readme.md";

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
  * @slot icon - Slot for an Icon in the dropdown button.

package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from "../../../utils/utils";
+import isHeadingElement from "../../../utils/isHeadingElement";
+import getPreviousNestedChildOfSiblingsMatching from "../../../utils/getPreviousNestedChildOfSiblingsMatching";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a dropdown list item.
  */

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes } from "../../../utils/utils";
+import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderHamburger {
   render() {
     const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { dfs } from "../../../utils/utils";
+import dfs from "../../../utils/dfs";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
  */

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { generateUniqueId, inheritAriaAttributes } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
+import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a launcher list (or grid) element.
  */

package/dist/collection/components/header/header-launcher-button/header-launcher-button.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes } from "../../../utils/utils";
+import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderLauncherButton {
   constructor() {
     this.active = false;

package/dist/collection/components/header/header-launcher-grid/header-launcher-grid.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from "../../../utils/utils";
+import getPreviousNestedChildOfSiblingsMatching from "../../../utils/getPreviousNestedChildOfSiblingsMatching";
+import isHeadingElement from "../../../utils/isHeadingElement";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a grid item element.
  */

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the title text.
  */

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For list items.
  */

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the title text.
  */

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes, updateListChildrenRoles } from "../../utils/utils";
+import updateListChildrenRoles from "../../utils/updateListChildrenRoles";
+import inheritAriaAttributes from "../../utils/inheritAriaAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> Slot for the left-aligned content consisting of buttons, dropdowns, links, etc.
  * @slot hamburger - Slot for the hamburger button for opening the mobile menu.

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import readmeHamburger from "./header-hamburger/readme.md";
 import readmeTitle from "./header-title/readme.md";

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

@@ -4,12 +4,14 @@ 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, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
+        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 = [];
   }
@@ -77,6 +79,23 @@ export class Icon {
         "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
       }
     };
   }

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { iconsNames } from "./iconsArray";
 import readme from "./readme.md";
 export default {

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {

package/dist/collection/components/modal/modal.css

@@ -32,6 +32,7 @@
   padding: 16px;
   max-height: 85vh;
   overflow-y: auto;
+  pointer-events: auto;
   /* SCROLL STUFF */
   /* width */
   /* Track */
@@ -183,8 +184,9 @@
 .header,
 slot[name=header]::slotted(*) {
   color: var(--tds-modal-text);
-  font: var(--tds-headline-05);
-  letter-spacing: var(--tds-headline-05-ls);
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
+  font: var(--tds-headline-05) !important;
+  letter-spacing: var(--tds-headline-05-ls) !important;
   margin: 0;
   flex: 1;
 }
@@ -219,29 +221,17 @@ slot[name=header]::slotted(*) {
 
 .tds-modal-backdrop {
   box-sizing: border-box;
-  left: 0;
-  top: 0;
   position: fixed;
-  height: 100%;
-  width: 100%;
-  z-index: 700;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   background-color: var(--tds-modal-backdrop);
-  padding: 0 16px;
+  pointer-events: auto;
 }
 .tds-modal-backdrop * {
   box-sizing: border-box;
 }
-@media (max-width: 320px) {
-  .tds-modal-backdrop {
-    padding: 0;
-  }
-}
-.tds-modal-backdrop.show {
-  display: flex;
-}
-.tds-modal-backdrop.hide {
-  display: none;
-}
 
 button.tds-modal-close {
   margin: 0 0 auto auto;
@@ -298,14 +288,26 @@ button.tds-modal-close {
 
 /* WEB COMPONENT STUFF */
 :host {
-  left: 0;
-  top: 0;
+  box-sizing: border-box;
   position: fixed;
-  height: 100%;
-  width: 100%;
-  z-index: 700;
-  background-color: var(--tds-modal-backdrop);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   padding: 0 16px;
+  z-index: 700;
+  pointer-events: none;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .tds-modal-close {
+  border: none;
+  background-color: transparent;
+}
+:host .tds-modal-close-btn {
+  border: none;
+  background-color: transparent;
 }
 @media (max-width: 320px) {
   :host {
@@ -318,14 +320,6 @@ button.tds-modal-close {
 :host.hide {
   display: none;
 }
-:host .tds-modal-close {
-  border: none;
-  background-color: transparent;
-}
-:host .tds-modal-close-btn {
-  border: none;
-  background-color: transparent;
-}
 
 :host(.show) {
   display: flex;

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

@@ -1,5 +1,5 @@
 import { h, Host, } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
+import hasSlot from "../../utils/hasSlot";
 /**
  * @slot header - Slot for header text
  * @slot body - Slot for main content of modal
@@ -16,6 +16,15 @@ export class TdsModal {
     this.handleShow = () => {
       this.isShown = true;
     };
+    /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
+    this.handleOverlayClick = (event) => {
+      const targetList = event.composedPath();
+      const target = targetList[0];
+      if (target.classList[0] === 'tds-modal-close' ||
+        (target.classList[0] === 'tds-modal-backdrop' && this.prevent === false)) {
+        this.handleClose(event);
+      }
+    };
     /** Adds an event listener to the reference element that shows/closes the Modal. */
     this.initializeReferenceElement = (referenceEl) => {
       if (referenceEl) {
@@ -57,7 +66,7 @@ export class TdsModal {
     this.isShown = false;
   }
   connectedCallback() {
-    if (this.show !== null) {
+    if (this.show !== undefined) {
       this.isShown = this.show;
     }
     this.setDismissButtons();
@@ -66,15 +75,6 @@ export class TdsModal {
       console.warn("Tegel Modal component: Using both header prop and header slot might break modal's design. Please use just one of them. ");
     }
   }
-  /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
-  handleOverlayClick(event) {
-    const targetList = event.composedPath();
-    const target = targetList[0];
-    if (target.classList[0] === 'tds-modal-close' ||
-      (target.classList[0] === 'tds-modal-backdrop' && this.prevent === false)) {
-      this.handleClose(event);
-    }
-  }
   /** Adds an event listener to the dismiss buttons that closes the Modal. */
   setDismissButtons() {
     this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
@@ -86,11 +86,7 @@ export class TdsModal {
   render() {
     const usesHeaderSlot = hasSlot('header', this.host);
     const usesActionsSlot = hasSlot('actions', this.host);
-    return (h(Host, { onClick: (event) => {
-        this.handleOverlayClick(event);
-      }, class: `tds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: (event) => {
-        this.handleClose(event);
-      } }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "body" }, h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
+    return (h(Host, { class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { class: "tds-modal-backdrop" }), h("div", { class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "body" }, h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
   }
   static get is() { return "tds-modal"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
@@ -63,6 +63,13 @@ export default {
         type: 'boolean',
       },
     },
+    prevent: {
+      name: 'Prevent',
+      description: 'Disables closing Modal on clicking on overlay area.',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   args: {
     actionsPosition: 'Static',
@@ -70,6 +77,7 @@ export default {
     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 = {
@@ -78,17 +86,19 @@ const sizeLookUp = {
   'Small': 'sm',
   'Extra small': 'xs',
 };
-const ModalTemplate = ({ actionsPosition, size, headerText, bodyContent, showModal }) => formatHtmlPreview(`
+const ModalTemplate = ({ actionsPosition, size, headerText, bodyContent, showModal, prevent }) => formatHtmlPreview(`
  <!-- The button below is just for demo purposes -->
   <tds-button id="my-modal-button" text="Open Modal"></tds-button>
   
   
   <tds-modal 
-  header="${headerText}"
-  selector="#my-modal-button"   
-   ${showModal ? 'show' : ''} 
-   id="my-modal" size="${sizeLookUp[size]}" 
-   actions-position="${actionsPosition.toLowerCase()}">          
+    header="${headerText}"
+    selector="#my-modal-button"   
+    ${showModal ? 'show' : ''} 
+    id="my-modal" size="${sizeLookUp[size]}" 
+    actions-position="${actionsPosition.toLowerCase()}"
+    prevent="${prevent}"
+  >          
       <span slot="body">
           ${bodyContent}
       </span>      

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { inheritAttributes } from "../../utils/utils";
+import inheritAttributes from "../../utils/inheritAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
  */

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { inheritAttributes } from "../../utils/utils";
+import inheritAttributes from "../../utils/inheritAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
  */

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import popoverMenuReadme from "./readme.md";
 import popoverMenuItemReadme from "./popover-menu-item/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
@@ -97,6 +97,7 @@ const Template = ({ menuPosition, icons, fluidWidth }) => {
       id="my-popover-menu"
       placement="${menuPosLookup[menuPosition]}"
       ${fluidWidth ? 'fluid-width' : ''}
+      selector="#my-popover-button"
       >
         <tds-popover-menu-item>
           <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
@@ -139,10 +140,7 @@ const Template = ({ menuPosition, icons, fluidWidth }) => {
       </tds-button>
     </div>
     
-    <script>
-      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
-      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');
-    </script>
+    
     `);
 };
 export const Default = Template.bind({});

package/dist/collection/components/radio-button/radio-button.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { generateUniqueId } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot label - Slot for the label text.
  */

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes } from "../../../utils/utils";
+import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsSideMenuCloseButton {
   render() {
     const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));

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

@@ -35,7 +35,7 @@ export class TdsSideMenuCollapseButton {
         'state-collapsed': this.collapsed,
       } }, h("tds-side-menu-item", { class: {
         button: true,
-      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), h("slot", null))))));
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", null))))));
   }
   static get is() { return "tds-side-menu-collapse-button"; }
   static get encapsulation() { return "shadow"; }

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

@@ -46,6 +46,7 @@ export class TdsSideMenuDropdown {
   }
   connectedCallback() {
     this.sideMenuEl = this.host.closest('tds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
     this.open = this.defaultOpen;
   }
   render() {

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

@@ -10,7 +10,9 @@ export class TdsSideMenuDropdownList {
     this.collapsed = event.detail.collapsed;
   }
   connectedCallback() {
+    var _a;
     this.sideMenuEl = this.host.closest('tds-side-menu');
+    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
   }
   render() {
     return (h(Host, { role: "list" }, h("div", { class: {

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js

@@ -12,7 +12,9 @@ export class TdsSideMenuDropdownListItem {
     this.collapsed = event.detail.collapsed;
   }
   connectedCallback() {
+    var _a;
     this.sideMenuEl = this.host.closest('tds-side-menu');
+    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
   }
   componentDidLoad() {
     var _a;

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { dfs } from "../../../utils/utils";
+import dfs from "../../../utils/dfs";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button</code> and <code>&lt;a></code> element.
  * */
@@ -38,9 +38,11 @@ export class TdsSideMenuItem {
     }
   }
   connectedCallback() {
+    var _a;
     // closest() will return null if side-menu-item is inside a shadowRoot that
     // does not contain a side-menu. This is the case for the side-menu-dropdown.
     this.sideMenuEl = this.host.closest('tds-side-menu');
+    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
   }
   componentDidLoad() {
     this.slotEl = this.host.shadowRoot.querySelector('slot');

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

@@ -154,7 +154,7 @@ export class TdsSideMenu {
           "references": {
             "CollapseEvent": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/side-menu.tsx",
+              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
             }
           }
@@ -178,7 +178,7 @@ export class TdsSideMenu {
           "references": {
             "CollapseEvent": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/side-menu.tsx",
+              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
             }
           }
@@ -202,7 +202,7 @@ export class TdsSideMenu {
           "references": {
             "InternalTdsSideMenuPropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/side-menu.tsx",
+              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
             }
           }

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import readmeSideMenuUser from "./side-menu-user/readme.md";
 import readmeSideMenuOverlay from "./side-menu-overlay/readme.md";
@@ -58,13 +58,22 @@ export default {
       },
       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 }) => formatHtmlPreview(`
+const Template = ({ persistent, collapsible, collapsed }) => formatHtmlPreview(`
     <script>
     /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
     window.demoSideMenu = document.querySelector('#demo-side-menu');
@@ -137,7 +146,7 @@ const Template = ({ persistent, collapsible }) => formatHtmlPreview(`
 
     <div class="demo-wrap-side-menu-and-main">
       <!-- Note: the "persistent" property keeps the menu open on desktop -->
-      <tds-side-menu aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
+      <tds-side-menu ${collapsed ? 'collapsed' : ''} aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
         <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></tds-side-menu-overlay>
 
         <tds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></tds-side-menu-close-button>