@scania/tegel 0.0.1-beta.9 → 0.0.31

package/dist/collection/components/accordion/accordion-item/accordion-item.css

@@ -0,0 +1,153 @@
+.sdds-accordion-item {
+  box-sizing: border-box;
+  list-style: none;
+  color: var(--sdds-accordion-color);
+  position: relative;
+  border-top: 1px solid var(--sdds-accordion-border);
+}
+.sdds-accordion-item * {
+  box-sizing: border-box;
+}
+.sdds-accordion-item button.sdds-accordion-header-icon-start,
+.sdds-accordion-item button.sdds-accordion-header-icon-end {
+  all: unset;
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start,
+.sdds-accordion-item .sdds-accordion-header-icon-end,
+.sdds-accordion-item button.sdds-accordion-header-icon-start,
+.sdds-accordion-item button.sdds-accordion-header-icon-end {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  padding: var(--sdds-spacing-element-16);
+  background-color: var(--sdds-accordion-background);
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start *,
+.sdds-accordion-item .sdds-accordion-header-icon-end *,
+.sdds-accordion-item button.sdds-accordion-header-icon-start *,
+.sdds-accordion-item button.sdds-accordion-header-icon-end * {
+  box-sizing: border-box;
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,
+.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon,
+.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon,
+.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon {
+  transform-origin: center;
+  transition: transform 0.15s ease-in-out;
+  color: var(--sdds-accordion-color);
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon > sdds-icon,
+.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon > sdds-icon,
+.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon > sdds-icon,
+.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon > sdds-icon {
+  display: block;
+}
+.sdds-accordion-item .sdds-accordion-title {
+  flex-grow: 2;
+}
+.sdds-accordion-item .sdds-accordion-panel {
+  cursor: default;
+  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);
+  display: none;
+  font: var(--sdds-detail-03);
+  letter-spacing: var(--sdds-detail-03-ls);
+}
+.sdds-accordion-item .sdds-accordion-panel p {
+  margin: 0;
+  padding: 0;
+}
+.sdds-accordion-item .sdds-accordion-panel--padding-reset {
+  padding-right: var(--sdds-spacing-element-16);
+}
+.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon {
+  margin: 0 0 0 var(--sdds-spacing-element-32);
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title {
+  order: 1;
+}
+.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon {
+  order: 0;
+  margin: 0 var(--sdds-spacing-element-16) 0 0;
+}
+.sdds-accordion-item.disabled,
+.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,
+.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled .sdds-accordion-panel {
+  color: var(--sdds-accordion-color-disabled);
+  cursor: not-allowed;
+}
+.sdds-accordion-item.disabled .sdds-accordion-icon,
+.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,
+.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,
+.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon {
+  color: var(--sdds-accordion-color-disabled);
+}
+.sdds-accordion-item.disabled:hover,
+.sdds-accordion-item.disabled:hover *, .sdds-accordion-item.disabled:focus,
+.sdds-accordion-item.disabled:focus *, .sdds-accordion-item.disabled:active,
+.sdds-accordion-item.disabled:active *, .sdds-accordion-item.disabled.active,
+.sdds-accordion-item.disabled.active * {
+  cursor: not-allowed;
+}
+.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end, .sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,
+.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-bg);
+  outline: none;
+  pointer-events: none;
+}
+.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,
+.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,
+.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,
+.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after, .sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,
+.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after {
+  border-color: transparent;
+}
+.sdds-accordion-item.expanded .sdds-accordion-panel {
+  display: block;
+  padding-bottom: 31px;
+}
+.sdds-accordion-item.expanded .sdds-accordion-icon {
+  transform: rotate(180deg);
+}
+.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon {
+  margin-right: 0;
+  margin-left: var(--sdds-spacing-element-32);
+}
+.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon {
+  margin-left: 0;
+  margin-right: var(--sdds-spacing-element-16);
+}
+.sdds-accordion-item:focus {
+  border-top: 1px solid var(--sdds-accordion-border-focus);
+}
+.sdds-accordion-item[disabled=true]:focus {
+  border-color: var(--sdds-accordion-border);
+}
+
+:host(:focus) .sdds-accordion-item {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-focus);
+  outline: none;
+}
+
+:host(:hover) .sdds-accordion-header-icon-start,
+:host(:hover) .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-hover);
+}
+
+:host(:active) .sdds-accordion-header-icon-start,
+:host(:active) .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-active);
+  outline: none;
+}

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

@@ -0,0 +1,147 @@
+import { h, Host } from '@stencil/core';
+export class AccordionItem {
+  constructor() {
+    this.header = '';
+    this.expandIconPosition = 'end';
+    this.disabled = false;
+    this.expanded = false;
+    this.paddingReset = false;
+  }
+  openAccordion() {
+    this.expanded = !this.expanded;
+    this.sddsToggle.emit(this.expanded);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `sdds-accordion-item
+        ${this.disabled ? 'disabled' : ''}
+        ${this.expanded ? 'expanded' : ''}
+        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.openAccordion(), disabled: this.disabled }, h("div", { class: "sdds-accordion-title" }, this.header), h("div", { class: "sdds-accordion-icon" }, h("sdds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `sdds-accordion-panel
+            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}
+            ` }, h("slot", null)))));
+  }
+  static get is() { return "sdds-accordion-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The header gives users the context about the additional information available inside the panel"
+        },
+        "attribute": "header",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "expandIconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'start' | 'end'",
+          "resolved": "\"end\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Changes where the expand icon is placed."
+        },
+        "attribute": "expand-icon-position",
+        "reflect": false,
+        "defaultValue": "'end'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled option in `boolean`."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to expand panel open"
+        },
+        "attribute": "expanded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "paddingReset": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true 16px on right padding instead of 64px"
+        },
+        "attribute": "padding-reset",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsToggle",
+        "name": "sddsToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=accordion-item.js.map

package/dist/collection/components/accordion/accordion-item/accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../../src/components/accordion/accordion-item/accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,aAAa;;kBAEC,EAAE;8BAGmB,KAAK;oBAGvB,KAAK;oBAGL,KAAK;wBAGD,KAAK;;EAWrC,aAAa;IACX,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACtC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAChC;QAEC,cACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,8BAA8B,IAAI,CAAC,kBAAkB,EAAE,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;UAEvB,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,MAAM,CAAO;UACrD,WAAK,KAAK,EAAC,qBAAqB;YAC9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,CACC;QACT,WACE,KAAK,EAAE;cACL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE;aAChE;UAED,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion-item',\n  styleUrl: 'accordion-item.scss',\n  shadow: true,\n})\nexport class AccordionItem {\n  /** The header gives users the context about the additional information available inside the panel */\n  @Prop() header: string = '';\n\n  /** Changes where the expand icon is placed. */\n  @Prop() expandIconPosition: 'start' | 'end' = 'end';\n\n  /** Disabled option in `boolean`. */\n  @Prop() disabled: boolean = false;\n\n  /** Set to true to expand panel open */\n  @Prop() expanded: boolean = false;\n\n  /** When true 16px on right padding instead of 64px */\n  @Prop() paddingReset: boolean = false;\n\n  /** Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<boolean>;\n\n  openAccordion() {\n    this.expanded = !this.expanded;\n    this.sddsToggle.emit(this.expanded);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`sdds-accordion-item\n        ${this.disabled ? 'disabled' : ''}\n        ${this.expanded ? 'expanded' : ''}\n        `}\n        >\n          <button\n            type=\"button\"\n            aria-expanded={this.expanded}\n            class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n            onClick={() => this.openAccordion()}\n            disabled={this.disabled}\n          >\n            <div class=\"sdds-accordion-title\">{this.header}</div>\n            <div class=\"sdds-accordion-icon\">\n              <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n            </div>\n          </button>\n          <div\n            class={`sdds-accordion-panel\n            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n            `}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/accordion/accordion.css

@@ -0,0 +1,63 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .sdds-accordion-header-icon-start,
+:host .sdds-accordion-header-icon-end {
+  position: relative;
+}
+
+:host(:focus) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-focus);
+  outline: none;
+}
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,
+:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after {
+  border-color: var(--sdds-accordion-border-focus);
+}
+:host(:focus) .disabled,
+:host(:focus) .disabled * {
+  cursor: not-allowed;
+}
+:host(:focus) .disabled .sdds-accordion-header-icon-start,
+:host(:focus) .disabled .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-bg);
+  outline: none;
+  pointer-events: none;
+}
+:host(:focus) .disabled .sdds-accordion-header-icon-start::after,
+:host(:focus) .disabled .sdds-accordion-header-icon-end::after {
+  border-color: transparent;
+}
+
+:host(:active) .sdds-accordion-header-icon-start,
+:host(:active) .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-background-active);
+  outline: none;
+}
+:host(:active) .disabled,
+:host(:active) .disabled * {
+  cursor: not-allowed;
+}
+:host(:active) .disabled .sdds-accordion-header-icon-start,
+:host(:active) .disabled .sdds-accordion-header-icon-end {
+  background-color: var(--sdds-accordion-bg);
+  outline: none;
+  pointer-events: none;
+}
+:host(:active) .disabled .sdds-accordion-header-icon-start::after,
+:host(:active) .disabled .sdds-accordion-header-icon-end::after {
+  border-color: transparent;
+}
+
+:host(:last-child) {
+  border-bottom: 1px solid var(--sdds-accordion-border);
+}

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,63 @@
+import { h, Host } from '@stencil/core';
+export class Accordion {
+  constructor() {
+    this.divider = true;
+    this.modeVariant = null;
+  }
+  render() {
+    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "divider": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable divider lines between items"
+        },
+        "attribute": "divider",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the variant of the the accordion."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+}
+//# sourceMappingURL=accordion.js.map

package/dist/collection/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;mBAEO,IAAI;uBAGgB,IAAI;;EAEnD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MAElJ,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Enable or disable divider lines between items */\n  @Prop() divider: boolean = true;\n\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,100 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import readmeItem from './accordion-item/readme.md';
+export default {
+  title: 'Components/Accordion',
+  argTypes: {
+    iconPosition: {
+      name: 'Expand icon position',
+      control: {
+        type: 'radio',
+      },
+      options: { End: 'end', Start: 'start' },
+      description: 'The horizontal position of the expand icon.',
+      table: {
+        defaultValue: { summary: 'end' },
+      },
+    },
+    disabled: {
+      name: 'Disable all items',
+      description: 'Disable all accordion items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    paddingReset: {
+      name: 'Less padding right',
+      description: 'Less padding on the right inside accordion items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+  },
+  parameters: {
+    notes: { 'Accordion': readme, 'Accordion item': readmeItem },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  args: {
+    disabled: false,
+    paddingReset: false,
+    iconPosition: 'end',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
+  const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
+  const disabledAttr = disabled ? 'disabled' : '';
+  const paddingResetAttr = paddingReset ? 'padding-reset' : '';
+  return formatHtmlPreview(`
+    <sdds-accordion ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <sdds-accordion-item header="First item" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum doler sit amet.
+      </sdds-accordion-item>
+      <sdds-accordion-item header="Second item" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
+      </sdds-accordion-item>
+    </sdds-accordion>
+
+    <!-- Script tag for demo purposes -->
+  <script>
+    accordionItems = document.querySelectorAll('sdds-accordion-item');
+    for (let i = 0; i < accordionItems.length; i++) {
+      accordionItems[i].addEventListener('sddsToggle',() => {
+        console.log(i + 1 + ". item of accordion is toggled")
+      })
+    }
+  </script>`);
+};
+export const Default = Template.bind({});
+Default.args = {};
+//# sourceMappingURL=accordion.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,sBAAsB;MAC5B,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;MACvC,WAAW,EAAE,6CAA6C;MAC1D,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,oBAAoB;MAC1B,WAAW,EAAE,mDAAmD;MAChE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,gCAAgC;MAC7C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,2GAA2G;OACjH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,2GAA2G;OACjH;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,KAAK;IACf,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE;EACzE,MAAM,SAAS,GAAG,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CAAC;EACjF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;EAChD,MAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;EAE7D,OAAO,iBAAiB,CAAC;sBAErB,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAC1F;iDAC6C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;kDAI5C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;;;;;;;;;;;YAcnF,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './accordion-item/readme.md';\n\nexport default {\n  title: 'Components/Accordion',\n  argTypes: {\n    iconPosition: {\n      name: 'Expand icon position',\n      control: {\n        type: 'radio',\n      },\n      options: { End: 'end', Start: 'start' },\n      description: 'The horizontal position of the expand icon.',\n      table: {\n        defaultValue: { summary: 'end' },\n      },\n    },\n    disabled: {\n      name: 'Disable all items',\n      description: 'Disable all accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    paddingReset: {\n      name: 'Less padding right',\n      description: 'Less padding on the right inside accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n  },\n  parameters: {\n    notes: { 'Accordion': readme, 'Accordion item': readmeItem },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  args: {\n    disabled: false,\n    paddingReset: false,\n    iconPosition: 'end',\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {\n  const affixAttr = iconPosition === 'start' ? 'expand-icon-position=\"start\"' : '';\n  const disabledAttr = disabled ? 'disabled' : '';\n  const paddingResetAttr = paddingReset ? 'padding-reset' : '';\n\n  return formatHtmlPreview(`\n    <sdds-accordion ${\n      modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''\n    }>\n      <sdds-accordion-item header=\"First item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum doler sit amet.\n      </sdds-accordion-item>\n      <sdds-accordion-item header=\"Second item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.\n      </sdds-accordion-item>\n    </sdds-accordion>\n\n    <!-- Script tag for demo purposes -->\n  <script>\n    accordionItems = document.querySelectorAll('sdds-accordion-item');\n    for (let i = 0; i < accordionItems.length; i++) {\n      accordionItems[i].addEventListener('sddsToggle',() => {\n        console.log(i + 1 + \". item of accordion is toggled\")\n      })\n    }\n  </script>`);\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n"]}

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

@@ -0,0 +1,103 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Badge',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    hidden: {
+      name: 'Hidden',
+      description: 'Toggle visibility of badge',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    value: {
+      name: 'Value',
+      description: 'Set a value to show on the badge',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'size', neq: 'sm' },
+      table: {
+        defaultValue: { summary: null },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Size of the component',
+      options: {
+        Large: 'lg',
+        Small: 'sm',
+      },
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+  },
+  args: {
+    hidden: false,
+    size: 'lg',
+    value: 1,
+  },
+};
+const Template = ({ value, size, hidden }) => formatHtmlPreview(`
+    <sdds-badges
+      ${value ? `value="${value}"` : ''}
+      ${hidden ? 'hidden' : ''}
+      size="${size}">
+    </sdds-badges>`);
+export const Default = Template.bind({});
+const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
+    <style>
+    /* Note: Demo classes used here are just for demo purposes in Storybook */
+    .badges-demo-box {
+      margin:5px;
+      height: 32px;
+      width: 32px;
+      position: relative;
+      background-color: #C4C4C4;
+    }
+
+    .badges-demo-box sdds-badges[size="lg"]{
+      position: absolute;
+      left: 16px;
+      top: -5px;
+    }
+
+    .badges-demo-box sdds-badges[size="sm"]{
+      position: absolute;
+      left: 26px;
+      top: -2px;
+    }
+    </style>
+
+    <div class="badges-demo-box">
+      <sdds-badges
+        ${value ? `value="${value}"` : ''}
+        is-visible=${visible}
+        size="${size}">
+      </sdds-badges>
+    </div>`);
+export const WithDemoComponent = WithDemoTemplate.bind({});
+//# sourceMappingURL=badge.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,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,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE;MAC9B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,uBAAuB;MACpC,OAAO,EAAE;QACP,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;OACZ;MACD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,CAAC;GACT;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CAAC;;QAEZ,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;QAC/B,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;cAChB,IAAI;mBACC,CAAC,CAAC;AAErB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CACpD,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;UA0BM,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;qBACpB,OAAO;gBACZ,IAAI;;WAET,CACR,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Badge',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    hidden: {\n      name: 'Hidden',\n      description: 'Toggle visibility of badge',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    value: {\n      name: 'Value',\n      description: 'Set a value to show on the badge',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'size', neq: 'sm' },\n      table: {\n        defaultValue: { summary: null },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Size of the component',\n      options: {\n        Large: 'lg',\n        Small: 'sm',\n      },\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n  },\n  args: {\n    hidden: false,\n    size: 'lg',\n    value: 1,\n  },\n};\n\nconst Template = ({ value, size, hidden }) =>\n  formatHtmlPreview(`\n    <sdds-badges\n      ${value ? `value=\"${value}\"` : ''}\n      ${hidden ? 'hidden' : ''}\n      size=\"${size}\">\n    </sdds-badges>`);\n\nexport const Default = Template.bind({});\n\nconst WithDemoTemplate = ({ value, size, visible }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Note: Demo classes used here are just for demo purposes in Storybook */\n    .badges-demo-box {\n      margin:5px;\n      height: 32px;\n      width: 32px;\n      position: relative;\n      background-color: #C4C4C4;\n    }\n\n    .badges-demo-box sdds-badges[size=\"lg\"]{\n      position: absolute;\n      left: 16px;\n      top: -5px;\n    }\n\n    .badges-demo-box sdds-badges[size=\"sm\"]{\n      position: absolute;\n      left: 26px;\n      top: -2px;\n    }\n    </style>\n\n    <div class=\"badges-demo-box\">\n      <sdds-badges\n        ${value ? `value=\"${value}\"` : ''}\n        is-visible=${visible}\n        size=\"${size}\">\n      </sdds-badges>\n    </div>`,\n  );\n\nexport const WithDemoComponent = WithDemoTemplate.bind({});\n"]}