@scania/tegel 0.0.4 → 0.0.6

package/dist/collection/components/stepper/sdds-stepper.js

@@ -1,32 +1,49 @@
 import { Host, h } from '@stencil/core';
 export class SddsStepper {
   constructor() {
-    this.direction = 'horizontal';
+    this.orientation = 'horizontal';
     this.labelPosition = 'below';
     this.size = 'lg';
     this.hideLabels = false;
-    this.width = 0;
+    this.stepperId = crypto.randomUUID();
   }
   componentWillLoad() {
     this.host.children[0].classList.add('first');
     this.host.children[this.host.children.length - 1].classList.add('last');
-    if (this.direction === 'vertical') {
+    if (this.orientation === 'vertical') {
       this.labelPosition = 'aside';
     }
   }
-  componentDidLoad() {
-    if (this.labelPosition === 'below') {
-      this.children = Array.from(this.host.children);
-      this.children.forEach((item) => {
-        if (item.offsetWidth > this.width) {
-          this.width = item.offsetWidth;
-        }
-      });
-      this.children.forEach((item) => item.setWidth(this.width));
-    }
+  handleDirectionChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['orientation'],
+      orientation: this.orientation,
+    });
+  }
+  handleLabelPositionChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['labelPosition'],
+      labelPosition: this.labelPosition,
+    });
+  }
+  handleSizeChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['size'],
+      size: this.size,
+    });
+  }
+  handleHideLabelsChange() {
+    this.internalSddsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['hideLabels'],
+      hideLabels: this.hideLabels,
+    });
   }
   render() {
-    return (h(Host, null, h("ol", { role: "list", class: `${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+    return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
   }
   static get is() { return "sdds-stepper"; }
   static get encapsulation() { return "shadow"; }
@@ -42,7 +59,7 @@ export class SddsStepper {
   }
   static get properties() {
     return {
-      "direction": {
+      "orientation": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -54,9 +71,9 @@ export class SddsStepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The direction the children are layed out."
+          "text": "The orientation the children are layed out."
         },
-        "attribute": "direction",
+        "attribute": "orientation",
         "reflect": false,
         "defaultValue": "'horizontal'"
       },
@@ -113,14 +130,65 @@ export class SddsStepper {
         "attribute": "hide-labels",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "stepperId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for stepper events you need to set this ID yourself to identify the stepper, as the default ID is random and will be different every time."
+        },
+        "attribute": "stepper-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
       }
     };
   }
-  static get states() {
-    return {
-      "width": {}
-    };
+  static get events() {
+    return [{
+        "method": "internalSddsPropsChange",
+        "name": "internalSddsPropsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalSddsStepperPropChange",
+          "resolved": "{ stepperId: string; changed: (keyof SddsStepperProps)[]; } & Partial<SddsStepperProps>",
+          "references": {
+            "InternalSddsStepperPropChange": {
+              "location": "local",
+              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/stepper/sdds-stepper.tsx"
+            }
+          }
+        }
+      }];
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "orientation",
+        "methodName": "handleDirectionChange"
+      }, {
+        "propName": "labelPosition",
+        "methodName": "handleLabelPositionChange"
+      }, {
+        "propName": "size",
+        "methodName": "handleSizeChange"
+      }, {
+        "propName": "hideLabels",
+        "methodName": "handleHideLabelsChange"
+      }];
+  }
 }
 //# sourceMappingURL=sdds-stepper.js.map

package/dist/collection/components/stepper/sdds-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/sdds-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAe,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAO5D,MAAM,OAAO,WAAW;;qBAEyB,YAAY;yBAGhB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;iBAEV,CAAC;;EAM1B,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;MACjC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,EAAE;MAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAsC,CAAC;MACpF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC7B,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;UACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;SAC/B;MACH,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KAC5D;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,+BAA+B,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;QAExF,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-stepper',\n  styleUrl: 'sdds-stepper.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** The direction the children are layed out. */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Text position, only available on direction:horizontal */\n  @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n  /** Size of the component and it's children. */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Hides the label for the child components if true. */\n  @Prop() hideLabels: boolean = false;\n\n  @State() width: number = 0;\n\n  @Element() host: HostElement;\n\n  children: Array<HTMLSddsStepperItemElement>;\n\n  componentWillLoad() {\n    this.host.children[0].classList.add('first');\n    this.host.children[this.host.children.length - 1].classList.add('last');\n    if (this.direction === 'vertical') {\n      this.labelPosition = 'aside';\n    }\n  }\n\n  componentDidLoad() {\n    if (this.labelPosition === 'below') {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsStepperItemElement>;\n      this.children.forEach((item) => {\n        if (item.offsetWidth > this.width) {\n          this.width = item.offsetWidth;\n        }\n      });\n      this.children.forEach((item) => item.setWidth(this.width));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ol\n          role=\"list\"\n          class={`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`}\n        >\n          <slot></slot>\n        </ol>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/sdds-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAA6B,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAmB1E,MAAM,OAAO,WAAW;;uBAI2B,YAAY;yBAGlB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;qBAMP,MAAM,CAAC,UAAU,EAAE;;EAE/C,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE;MACnC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;EACH,CAAC;EAWD,qBAAqB;IACnB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,aAAa,CAAC;MACxB,WAAW,EAAE,IAAI,CAAC,WAAW;KAC9B,CAAC,CAAC;EACL,CAAC;EAGD,yBAAyB;IACvB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,eAAe,CAAC;MAC1B,aAAa,EAAE,IAAI,CAAC,aAAa;KAClC,CAAC,CAAC;EACL,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,MAAM,CAAC;MACjB,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC,CAAC;EACL,CAAC;EAGD,sBAAsB;IACpB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,YAAY,CAAC;MACvB,UAAU,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,kBAAkB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;QAE7E,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Event } from '@stencil/core';\nimport { EventEmitter, HostElement, Watch } from '@stencil/core/internal';\n\ntype SddsStepperProps = {\n  orientation: 'horizontal' | 'vertical';\n  labelPosition: 'aside' | 'below';\n  size: 'sm' | 'lg';\n  hideLabels: boolean;\n};\n\nexport type InternalSddsStepperPropChange = {\n  stepperId: string;\n  changed: Array<keyof SddsStepperProps>;\n} & Partial<SddsStepperProps>;\n\n@Component({\n  tag: 'sdds-stepper',\n  styleUrl: 'sdds-stepper.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  @Element() host: HostElement;\n\n  /** The orientation the children are layed out. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Text position, only available on direction:horizontal */\n  @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n  /** Size of the component and it's children. */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Hides the label for the child components if true. */\n  @Prop() hideLabels: boolean = false;\n\n  /** ID used for internal stepper functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for stepper events you need to set this ID yourself to identify the stepper, as the default ID is random and will be different every time.\n   */\n  @Prop() stepperId: string = crypto.randomUUID();\n\n  componentWillLoad() {\n    this.host.children[0].classList.add('first');\n    this.host.children[this.host.children.length - 1].classList.add('last');\n    if (this.orientation === 'vertical') {\n      this.labelPosition = 'aside';\n    }\n  }\n\n  @Event({\n    eventName: 'internalSddsPropsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  internalSddsPropsChange: EventEmitter<InternalSddsStepperPropChange>;\n\n  @Watch('orientation')\n  handleDirectionChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['orientation'],\n      orientation: this.orientation,\n    });\n  }\n\n  @Watch('labelPosition')\n  handleLabelPositionChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['labelPosition'],\n      labelPosition: this.labelPosition,\n    });\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['size'],\n      size: this.size,\n    });\n  }\n\n  @Watch('hideLabels')\n  handleHideLabelsChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['hideLabels'],\n      hideLabels: this.hideLabels,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"list\"\n          class={`${this.orientation} text-position-${this.labelPosition} ${this.size}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stepper/stepper-item/sdds-stepper-item.css

@@ -1,5 +1,6 @@
 :host {
   position: relative;
+  display: table-cell;
 }
 :host sdds-icon {
   line-height: 1;
@@ -21,7 +22,7 @@
 }
 :host [role=listItem].lg .content-container {
   height: 30px;
-  width: 30px;
+  min-width: 30px;
 }
 :host [role=listItem].lg.vertical::after {
   content: " ";
@@ -41,7 +42,7 @@
   height: 1px;
   left: calc(50% + 24px);
   right: 0;
-  top: 16px;
+  top: 18px;
 }
 :host [role=listItem].lg.horizontal::before {
   content: " ";
@@ -51,7 +52,7 @@
   height: 1px;
   right: calc(50% + 24px);
   left: 0;
-  top: 16px;
+  top: 18px;
 }
 :host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after {
   content: " ";
@@ -82,7 +83,7 @@
 }
 :host [role=listItem].sm .content-container {
   height: 24px;
-  width: 24px;
+  min-width: 24px;
 }
 :host [role=listItem].sm.vertical::after {
   content: " ";

package/dist/collection/components/stepper/stepper-item/sdds-stepper-item.js

@@ -1,27 +1,37 @@
 import { Host, h } from '@stencil/core';
 export class SddsStepper {
   constructor() {
-    this.labelText = '';
+    this.index = undefined;
     this.state = 'upcoming';
     this.hideLabel = undefined;
     this.size = undefined;
-    this.iconSize = undefined;
-    this.direction = undefined;
+    this.orientation = undefined;
     this.labelPosition = undefined;
   }
+  /* Needs to be onload to do this on any updates. */
   componentWillLoad() {
     this.stepperEl = this.el.closest('sdds-stepper');
-    this.direction = this.stepperEl.direction;
+    this.orientation = this.stepperEl.orientation;
     this.labelPosition = this.stepperEl.labelPosition;
     this.size = this.stepperEl.size;
     this.hideLabel = this.stepperEl.hideLabels;
+    this.stepperId = this.stepperEl.stepperId;
   }
-  /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */
-  async setWidth(width) {
-    this.el.style.width = `${width}px`;
+  handlePropsChange(event) {
+    if (this.stepperId === event.detail.stepperId) {
+      event.detail.changed.forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {
+          this.labelPosition = 'aside';
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
   }
   render() {
-    return (h(Host, null, h("div", { role: "listItem", class: `${this.size} ${this.direction} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("sdds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("div", { class: "number sdds-detail-05" }, h("slot", null)))), !this.hideLabel && (h("div", { class: `label ${this.size} ${this.state}` }, this.labelText)))));
+    return (h(Host, null, h("div", { role: "listItem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("sdds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabel && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
   }
   static get is() { return "sdds-stepper-item"; }
   static get encapsulation() { return "shadow"; }
@@ -37,7 +47,7 @@ export class SddsStepper {
   }
   static get properties() {
     return {
-      "labelText": {
+      "index": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -49,11 +59,10 @@ export class SddsStepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label text for the stepper-item."
+          "text": "Index of the step. Will be displayed in the step if state is current/upcoming."
         },
-        "attribute": "label-text",
-        "reflect": false,
-        "defaultValue": "''"
+        "attribute": "index",
+        "reflect": false
       },
       "state": {
         "type": "string",
@@ -79,34 +88,19 @@ export class SddsStepper {
     return {
       "hideLabel": {},
       "size": {},
-      "iconSize": {},
-      "direction": {},
+      "orientation": {},
       "labelPosition": {}
     };
   }
-  static get methods() {
-    return {
-      "setWidth": {
-        "complexType": {
-          "signature": "(width: any) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method to set the width if the stepper item based on its siblings widht, used by the parent element.",
-          "tags": []
-        }
-      }
-    };
-  }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "internalSddsPropsChange",
+        "method": "handlePropsChange",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 //# sourceMappingURL=sdds-stepper-item.js.map

package/dist/collection/components/stepper/stepper-item/sdds-stepper-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,WAAW;;qBAEM,EAAE;iBAGgC,UAAU;;;;;;;EAgBxE,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;IAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;EAC7C,CAAC;EAED,2GAA2G;EAE3G,KAAK,CAAC,QAAQ,CAAC,KAAK;IAClB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;EACrC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,SAAS,IAAI,CAAC,aAAa,IAC9D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EACnC,EAAE;QAEF,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CACpD,iBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAC/B,CACd,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,uBAAuB;UAChC,eAAa,CACT,CACP,CACG;QACL,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAAG,IAAI,CAAC,SAAS,CAAO,CACvE,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-stepper-item',\n  styleUrl: 'sdds-stepper-item.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** Label text for the stepper-item. */\n  @Prop() labelText: string = '';\n\n  /** State of the stepper-item */\n  @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n  @State() hideLabel: boolean;\n\n  @State() size: string;\n\n  @State() iconSize: string;\n\n  @State() direction: string;\n\n  @State() labelPosition: string;\n\n  @Element() el: HTMLElement;\n\n  stepperEl: HTMLSddsStepperElement;\n\n  componentWillLoad() {\n    this.stepperEl = this.el.closest('sdds-stepper');\n    this.direction = this.stepperEl.direction;\n    this.labelPosition = this.stepperEl.labelPosition;\n    this.size = this.stepperEl.size;\n    this.hideLabel = this.stepperEl.hideLabels;\n  }\n\n  /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */\n  @Method()\n  async setWidth(width) {\n    this.el.style.width = `${width}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"listItem\"\n          class={`${this.size} ${this.direction} text-${this.labelPosition} ${\n            this.hideLabel ? 'hide-labels' : ''\n          }`}\n        >\n          <div class={`${this.state} content-container`}>\n            {this.state === 'success' || this.state === 'error' ? (\n              <sdds-icon\n                name={this.state === 'success' ? 'tick' : 'warning'}\n                size={this.size === 'lg' ? '20px' : '16px'}\n              ></sdds-icon>\n            ) : (\n              <div class=\"number sdds-detail-05\">\n                <slot></slot>\n              </div>\n            )}\n          </div>\n          {!this.hideLabel && (\n            <div class={`label ${this.size} ${this.state}`}>{this.labelText}</div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-stepper-item.js","sourceRoot":"","sources":["../../../../src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,WAAW;;;iBAKwC,UAAU;;;;;;EAgBxE,mDAAmD;EACnD,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;IAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;EAC5C,CAAC;EAGD,iBAAiB,CAAC,KAAiD;IACjE,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;MAC7C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;QAC3C,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,UAAU,EAAE;UACtF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;SAC9B;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;MAChD,CAAC,CAAC,CAAC;KACJ;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,SAAS,IAAI,CAAC,aAAa,IAChE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EACnC,EAAE;QAEF,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,CACpD,iBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAC/B,CACd,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,KAAK,CACX,CACG;QACL,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;UAC5C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACP,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core';\nimport { InternalSddsStepperPropChange } from '../sdds-stepper';\n\n@Component({\n  tag: 'sdds-stepper-item',\n  styleUrl: 'sdds-stepper-item.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** Index of the step. Will be displayed in the step if state is current/upcoming. */\n  @Prop() index: string;\n\n  /** State of the stepper-item */\n  @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n  @State() hideLabel: boolean;\n\n  @State() size: 'sm' | 'lg';\n\n  @State() orientation: 'horizontal' | 'vertical';\n\n  @State() labelPosition: 'aside' | 'below';\n\n  @Element() el: HTMLElement;\n\n  private stepperEl: HTMLSddsStepperElement;\n\n  private stepperId: string;\n\n  /* Needs to be onload to do this on any updates. */\n  componentWillLoad() {\n    this.stepperEl = this.el.closest('sdds-stepper');\n    this.orientation = this.stepperEl.orientation;\n    this.labelPosition = this.stepperEl.labelPosition;\n    this.size = this.stepperEl.size;\n    this.hideLabel = this.stepperEl.hideLabels;\n    this.stepperId = this.stepperEl.stepperId;\n  }\n\n  @Listen('internalSddsPropsChange', { target: 'body' })\n  handlePropsChange(event: CustomEvent<InternalSddsStepperPropChange>) {\n    if (this.stepperId === event.detail.stepperId) {\n      event.detail.changed.forEach((changedProp) => {\n        if (typeof this[changedProp] === 'undefined') {\n          throw new Error(`Table prop is not supported: ${changedProp}`);\n        }\n        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {\n          this.labelPosition = 'aside';\n        }\n        this[changedProp] = event.detail[changedProp];\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"listItem\"\n          class={`${this.size} ${this.orientation} text-${this.labelPosition} ${\n            this.hideLabel ? 'hide-labels' : ''\n          }`}\n        >\n          <div class={`${this.state} content-container`}>\n            {this.state === 'success' || this.state === 'error' ? (\n              <sdds-icon\n                name={this.state === 'success' ? 'tick' : 'warning'}\n                size={this.size === 'lg' ? '20px' : '16px'}\n              ></sdds-icon>\n            ) : (\n              this.index\n            )}\n          </div>\n          {!this.hideLabel && (\n            <div class={`label ${this.size} ${this.state}`}>\n              <slot name=\"label\"></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -19,44 +19,56 @@ export default {
   argTypes: {
     size: {
       name: 'Size',
-      description: 'Size of the stepper',
+      description: 'Sets the size of the stepper.',
       control: {
         type: 'radio',
       },
-      options: ['Default', 'Small'],
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
     },
     style: {
       name: 'Style',
-      description: 'Style of the stepper',
+      description: 'Sets the style of the stepper.',
       control: {
         type: 'radio',
       },
       options: ['Default', 'Text on side', 'Vertical'],
-    },
-    showLabel: {
-      name: 'Show label text',
-      description: 'Show or hide the label text',
-      control: {
-        type: 'boolean',
+      table: {
+        defaultValue: { summary: 'Default' },
       },
     },
     iconType: {
       name: 'Icon type',
-      description: 'Native/Web Component',
+      description: 'Switch between showing a native or a web component icon.',
       control: {
         type: 'radio',
       },
       options: ['Native', 'Web Component'],
+      table: {
+        defaultValue: { summary: 'Native' },
+      },
+    },
+    hideLabels: {
+      name: 'Hide labels',
+      description: 'Hides the labels for all stepper items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
   },
   args: {
-    size: 'Default',
+    size: 'Large',
     style: 'Default',
-    showLabel: true,
     iconType: 'Native',
+    hideLabels: false,
   },
 };
-const Template = ({ size, style, showLabel, iconType }) => {
+const Template = ({ size, style, iconType, hideLabels }) => {
   const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';
   const styleLookup = {
     'Default': '',
@@ -78,7 +90,7 @@ const Template = ({ size, style, showLabel, iconType }) => {
         <div class="sdds-stepper__step-icon">
           <span class="sdds-stepper__step-icon-value">1</span>
         </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step value</label>' : ''}
+        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step value</label>'}
       </div>
 
       <div class="sdds-stepper__step sdds-stepper__step--warning">
@@ -88,14 +100,14 @@ const Template = ({ size, style, showLabel, iconType }) => {
         `
     : `<sdds-icon name="warning" size="${size === 'Small' ? '16px' : '18px'}"></sdds-icon> `}
         </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step warning</label>' : ''}
+        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step warning</label>'}
       </div>
 
       <div class="sdds-stepper__step sdds-stepper__step--inactive">
         <div class="sdds-stepper__step-icon">
           <span class="sdds-stepper__step-icon-value">3</span>
         </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step inactive with text</label>' : ''}
+        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step inactive with text</label>'}
       </div>
 
       <div class="sdds-stepper__step sdds-stepper__step--success">
@@ -107,7 +119,7 @@ const Template = ({ size, style, showLabel, iconType }) => {
         <sdds-icon name="tick" size="${size === 'Small' ? '16px' : '20px'}"></sdds-icon> 
         </div>`}
         </div>
-        ${showLabel ? '<label class="sdds-stepper__step_label">Step success</label>' : ''}
+        ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step success</label>'}
       </div>
 
     </div>

package/dist/collection/components/stepper/stepper.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;KAC9B;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,UAAU,CAAC;KACjD;IACD,SAAS,EAAE;MACT,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;KACrC;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,QAAQ;GACnB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;EACxD,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;EAE5D,MAAM,WAAW,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,cAAc,EAAE,wBAAwB;IACxC,UAAU,EAAE,wBAAwB;GACrC,CAAC;EACF,OAAO,iBAAiB,CACtB;;MAGE,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC;;KAEL;IACG,CAAC,CAAC,EACN;;;+BAG2B,SAAS,IAAI,WAAW,CAAC,KAAK,CAAC;;;;;;UAMpD,SAAS,CAAC,CAAC,CAAC,4DAA4D,CAAC,CAAC,CAAC,EAAE;;;;;UAM7E,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC;SACL;IACG,CAAC,CAAC,mCAAmC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,iBAC3E;;UAEE,SAAS,CAAC,CAAC,CAAC,8DAA8D,CAAC,CAAC,CAAC,EAAE;;;;;;;UAQ/E,SAAS,CAAC,CAAC,CAAC,yEAAyE,CAAC,CAAC,CAAC,EAC1F;;;;;UAME,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC;SACL;IACG,CAAC,CAAC;uCACyB,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;eAEjE;;UAEE,SAAS,CAAC,CAAC,CAAC,8DAA8D,CAAC,CAAC,CAAC,EAAE;;;;KAIpF,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Stepper',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Size of the stepper',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Small'],\n    },\n    style: {\n      name: 'Style',\n      description: 'Style of the stepper',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Text on side', 'Vertical'],\n    },\n    showLabel: {\n      name: 'Show label text',\n      description: 'Show or hide the label text',\n      control: {\n        type: 'boolean',\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Native/Web Component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n    },\n  },\n  args: {\n    size: 'Default',\n    style: 'Default',\n    showLabel: true,\n    iconType: 'Native',\n  },\n};\n\nconst Template = ({ size, style, showLabel, iconType }) => {\n  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';\n\n  const styleLookup = {\n    'Default': '',\n    'Text on side': 'sdds-stepper--sidetext',\n    'Vertical': 'sdds-stepper--vertical',\n  };\n  return formatHtmlPreview(\n    `\n\n    ${\n      iconType === 'Native'\n        ? ` <style>/* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n  @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');</style>\n    `\n        : ''\n    }\n\n\n    <div class=\"sdds-stepper ${sizeClass} ${styleLookup[style]}\">\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--value\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">1</span>\n        </div>\n        ${showLabel ? '<label class=\"sdds-stepper__step_label\">Step value</label>' : ''}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--warning\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon warning\"></i>\n        `\n            : `<sdds-icon name=\"warning\" size=\"${size === 'Small' ? '16px' : '18px'}\"></sdds-icon> `\n        }\n        </div>\n        ${showLabel ? '<label class=\"sdds-stepper__step_label\">Step warning</label>' : ''}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--inactive\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">3</span>\n        </div>\n        ${\n          showLabel ? '<label class=\"sdds-stepper__step_label\">Step inactive with text</label>' : ''\n        }\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--success\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon tick\"></i>\n        `\n            : `<div>\n        <sdds-icon name=\"tick\" size=\"${size === 'Small' ? '16px' : '20px'}\"></sdds-icon> \n        </div>`\n        }\n        </div>\n        ${showLabel ? '<label class=\"sdds-stepper__step_label\">Step success</label>' : ''}\n      </div>\n\n    </div>\n    `,\n  );\n};\n\nexport const Native = Template.bind({});\nNative.args = {};\n"]}
+{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Stepper',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the stepper.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    style: {\n      name: 'Style',\n      description: 'Sets the style of the stepper.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Text on side', 'Vertical'],\n      table: {\n        defaultValue: { summary: 'Default' },\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      table: {\n        defaultValue: { summary: 'Native' },\n      },\n    },\n    hideLabels: {\n      name: 'Hide labels',\n      description: 'Hides the labels for all stepper items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    style: 'Default',\n    iconType: 'Native',\n    hideLabels: false,\n  },\n};\n\nconst Template = ({ \n  size, \n  style, \n  iconType, \n  hideLabels \n}) => {\n  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';\n\n  const styleLookup = {\n    'Default': '',\n    'Text on side': 'sdds-stepper--sidetext',\n    'Vertical': 'sdds-stepper--vertical',\n  };\n  return formatHtmlPreview(\n    `\n\n    ${\n      iconType === 'Native'\n        ? ` <style>/* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n  @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');</style>\n    `\n        : ''\n    }\n\n\n    <div class=\"sdds-stepper ${sizeClass} ${styleLookup[style]}\">\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--value\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">1</span>\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step value</label>'}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--warning\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon warning\"></i>\n        `\n            : `<sdds-icon name=\"warning\" size=\"${size === 'Small' ? '16px' : '18px'}\"></sdds-icon> `\n        }\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step warning</label>'}\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--inactive\">\n        <div class=\"sdds-stepper__step-icon\">\n          <span class=\"sdds-stepper__step-icon-value\">3</span>\n        </div>\n        ${\n          hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step inactive with text</label>'\n        }\n      </div>\n\n      <div class=\"sdds-stepper__step sdds-stepper__step--success\">\n        <div class=\"sdds-stepper__step-icon\">\n        ${\n          iconType === 'Native'\n            ? `<i class=\"sdds-icon tick\"></i>\n        `\n            : `<div>\n        <sdds-icon name=\"tick\" size=\"${size === 'Small' ? '16px' : '20px'}\"></sdds-icon> \n        </div>`\n        }\n        </div>\n        ${hideLabels ? '' : '<label class=\"sdds-stepper__step_label\">Step success</label>'}\n      </div>\n\n    </div>\n    `,\n  );\n};\n\nexport const Native = Template.bind({});\nNative.args = {};\n"]}

package/dist/collection/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.css

@@ -0,0 +1,75 @@
+:host {
+  box-sizing: border-box;
+  position: relative;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host ::slotted(*) {
+  all: unset;
+  min-width: 142px;
+  display: block;
+  width: calc(100% - 32px);
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  cursor: pointer;
+  padding: 16px;
+  white-space: nowrap;
+  text-decoration: none;
+  text-align: left;
+  outline: none;
+  border: none;
+  border-left: 1px solid;
+  border-left-color: transparent;
+}
+:host div:not(.selected) {
+  background-color: var(--sdds-folder-tab-background);
+}
+:host div:not(.selected) ::slotted(*) {
+  border-left-color: var(--sdds-folder-tab-divider-color);
+  border-top: 2px solid var(--sdds-folder-tab-background);
+  color: var(--sdds-folder-tab-item-color);
+}
+:host div:not(.selected):hover {
+  background-color: var(--sdds-folder-tab-background-hover);
+  cursor: pointer;
+}
+:host div:not(.selected):hover ::slotted(*) {
+  border-top-color: var(--sdds-folder-tab-background-hover);
+  color: var(--sdds-folder-tab-color);
+}
+:host ::slotted(*:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .disabled {
+  pointer-events: none;
+}
+:host .disabled ::slotted(*) {
+  color: var(--sdds-folder-tab-item-color-disabled);
+}
+:host .disabled:focus-visible {
+  outline: none;
+}
+:host .selected {
+  background-color: var(--sdds-folder-tab-background-selected);
+  border-top: 2px solid var(--sdds-folder-tab-border-selected);
+}
+:host .selected::after {
+  content: " ";
+  background-color: var(--sdds-folder-tab-background-selected);
+  width: 1px;
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+:host .selected ::slotted(*) {
+  color: var(--sdds-folder-tab-color);
+}
+
+:host(.first) :not(.selected) ::slotted(*) {
+  border-left-color: transparent;
+}