@scania/tegel 0.0.52 → 0.0.61

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-toast.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAe,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAOpE,MAAM,OAAO,SAAS;;IAsDpB,gBAAW,GAAG,GAAG,EAAE;MACjB,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;IACH,CAAC,CAAC;IAEF,gBAAW,GAAG,GAAG,EAAE;MACjB,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACzC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;IACH,CAAC,CAAC;IAQF,qBAAgB,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO,aAAa,CAAC;OACtB;MACD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO,cAAc,CAAC;OACvB;MACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;mBA1FwB,MAAM,CAAC,UAAU,EAAE;;;gBASmB,aAAa;kBAGnD,KAAK;qBAGiB,OAAO;;;;EAQvD,uBAAuB;EAEvB,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;EACJ,CAAC;EAED,uBAAuB;EAEvB,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;EACJ,CAAC;EAqCD,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAC7F,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;EACrF,CAAC;EAYD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE;MAEzC,WACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV;QAEH,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa;QAC7D,WAAK,KAAK,EAAE,eAAe;UACzB,WACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR;UACN,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE;YAC5D,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC;UACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;QACN,cACE,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,EAAE,CAAC;UACrB,CAAC,EACD,KAAK,EAAE,aAAa;UAEpB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA role for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        toastRole={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-toast.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA role for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.handleClose();\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.handleShow();\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  handleShow = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        toastRole={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toast/sdds-toast.stories.js

@@ -79,7 +79,7 @@ const Template = ({ type, header, subheader, link }) => formatHtmlPreview(`<sdds
     </sdds-toast>
         <script>
         document.addEventListener('sddsClose', (event) => {
-            console.log('Toast with id: ', event.detail.toastId, ' was closed.')
+            console.log(event)
         })
     </script>
   `);

package/dist/collection/components/toast/sdds-toast.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.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,IAAI,EAAE;MACJ,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,aAAa;SACvB;OACF;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,KAAK;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CACrD,iBAAiB,CACf;gBACY,IAAI,CAAC,WAAW,EAAE;kBAChB,MAAM;;QAGhB,SAAS;EACP,CAAC,CAAC;;UAEF,SAAS;;OAEZ;EACG,CAAC,CAAC,EACN;SAEG,IAAI;EACF,CAAC,CAAC;QACL;EACG,CAAC,CAAC,EACN;;;;;;;GAOJ,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Toast',\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=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Message type',\n      description: 'Changes the type of message.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Success', 'Warning', 'Error'],\n      table: {\n        defaultValue: {\n          summary: 'information',\n        },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Adds a header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Adds a subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Adds a CTA link.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    type: 'Information',\n    header: 'Header',\n    subheader: '',\n    link: false,\n  },\n};\n\nconst Template = ({ type, header, subheader, link }) =>\n  formatHtmlPreview(\n    `<sdds-toast\n        type=\"${type.toLowerCase()}\"\n        header=\"${header}\"\n    >\n      ${\n        subheader\n          ? `\n      <div  slot=\"toast-subheader\">\n        ${subheader}\n      </div>\n      `\n          : ''\n      }\n       ${\n         link\n           ? `<a slot=\"toast-link\" href=\"#\">This is a link.</a>\n       `\n           : ''\n       }\n    </sdds-toast>\n        <script>\n        document.addEventListener('sddsClose', (event) => {\n            console.log('Toast with id: ', event.detail.toastId, ' was closed.')\n        })\n    </script>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.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,IAAI,EAAE;MACJ,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,aAAa;SACvB;OACF;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,KAAK;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CACrD,iBAAiB,CACf;gBACY,IAAI,CAAC,WAAW,EAAE;kBAChB,MAAM;;QAGhB,SAAS;EACP,CAAC,CAAC;;UAEF,SAAS;;OAEZ;EACG,CAAC,CAAC,EACN;SAEG,IAAI;EACF,CAAC,CAAC;QACL;EACG,CAAC,CAAC,EACN;;;;;;;GAOJ,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Toast',\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=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Message type',\n      description: 'Changes the type of message.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Success', 'Warning', 'Error'],\n      table: {\n        defaultValue: {\n          summary: 'information',\n        },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Adds a header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Adds a subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Adds a CTA link.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    type: 'Information',\n    header: 'Header',\n    subheader: '',\n    link: false,\n  },\n};\n\nconst Template = ({ type, header, subheader, link }) =>\n  formatHtmlPreview(\n    `<sdds-toast\n        type=\"${type.toLowerCase()}\"\n        header=\"${header}\"\n    >\n      ${\n        subheader\n          ? `\n      <div  slot=\"toast-subheader\">\n        ${subheader}\n      </div>\n      `\n          : ''\n      }\n       ${\n         link\n           ? `<a slot=\"toast-link\" href=\"#\">This is a link.</a>\n       `\n           : ''\n       }\n    </sdds-toast>\n        <script>\n        document.addEventListener('sddsClose', (event) => {\n            console.log(event)\n        })\n    </script>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/toggle/sdds-toggle.stories.js

@@ -38,7 +38,7 @@ export default {
       },
     },
     label: {
-      name: 'Label',
+      name: 'Label text',
       description: 'Sets the label for the toggles input element.',
       control: {
         type: 'text',

package/dist/collection/components/toggle/sdds-toggle.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/sdds-toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,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,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;MAC3B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChE,iBAAiB,CAAC;;UAEV,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACxB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,QAAQ,CAAC,CAAC,CAAC,aAAa,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;gBAClC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;4BAClB,KAAK;;;;;;;;;;;GAW9B,CAAC,CAAC;AACL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Toggle',\n  parameters: {\n    notes: readme,\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=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the toggle.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline, displayed above the toggle.',\n      control: {\n        type: 'text',\n      },\n    },\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the toggles input element.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Sets the toggle as checked.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the toggle.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    headline: 'Headline',\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ size, headline, label, checked, disabled }) =>\n  formatHtmlPreview(`\n      <sdds-toggle\n        ${checked ? 'checked' : ''}\n        ${disabled ? 'disabled' : ''}\n        ${headline ? `headline=\"${headline}\"` : ''}\n        size=\"${size === 'Large' ? 'lg' : 'sm'}\">\n        <div slot=\"label\">${label}</div>\n    </sdds-toggle>\n\n    <!-- Script tag with eventlistener for demo purposes. -->\n    <script>\n      toggleElement = document.querySelector('sdds-toggle')\n\n      toggleElement.addEventListener('sddsToggle', (event)=> {\n        console.log('Toggle with id: ', event.detail.toggleId, ' is ', event.detail.checked)\n      })\n    </script>\n  `);\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/sdds-toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,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,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;MAC3B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChE,iBAAiB,CAAC;;UAEV,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACxB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,QAAQ,CAAC,CAAC,CAAC,aAAa,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;gBAClC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;4BAClB,KAAK;;;;;;;;;;;GAW9B,CAAC,CAAC;AACL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Toggle',\n  parameters: {\n    notes: readme,\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=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the toggle.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline, displayed above the toggle.',\n      control: {\n        type: 'text',\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label for the toggles input element.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Sets the toggle as checked.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the toggle.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    headline: 'Headline',\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ size, headline, label, checked, disabled }) =>\n  formatHtmlPreview(`\n      <sdds-toggle\n        ${checked ? 'checked' : ''}\n        ${disabled ? 'disabled' : ''}\n        ${headline ? `headline=\"${headline}\"` : ''}\n        size=\"${size === 'Large' ? 'lg' : 'sm'}\">\n        <div slot=\"label\">${label}</div>\n    </sdds-toggle>\n\n    <!-- Script tag with eventlistener for demo purposes. -->\n    <script>\n      toggleElement = document.querySelector('sdds-toggle')\n\n      toggleElement.addEventListener('sddsToggle', (event)=> {\n        console.log('Toggle with id: ', event.detail.toggleId, ' is ', event.detail.checked)\n      })\n    </script>\n  `);\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -33,7 +33,7 @@ export default {
       },
     },
     label: {
-      name: 'Label',
+      name: 'Label text',
       description: 'Sets the label for the toggles input element.',
       control: {
         type: 'text',

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,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,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;KAC5B;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;EAChE,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;EAC3D,MAAM,WAAW,GACf,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,qCAAqC,QAAQ,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;EAEnF,OAAO,iBAAiB,CAAC;gCACK,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC7D,WAAW;8EAEX,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC1B,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;+DAE2B,KAAK;;GAEjE,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Toggle',\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=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the toggle.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline, displayed above the toggle.',\n      control: {\n        type: 'text',\n      },\n    },\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the toggles input element.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Sets the toggle as checked.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the toggle.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    headline: 'Headline',\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ size, headline, label, checked, disabled }) => {\n  const sizeValue = size === 'Small' ? 'sdds-toggle-sm' : '';\n  const headlineDiv =\n    headline.length > 0 ? `<div class=\"sdds-toggle-headline\">${headline}</div>` : '';\n\n  return formatHtmlPreview(`\n      <div class=\"sdds-toggle ${sizeValue} ${disabled ? 'disabled' : ''}\">\n        ${headlineDiv}\n        <input type=\"checkbox\" class=\"sdds-toggle-input\" id=\"customSwitch1\" ${\n          disabled ? 'disabled' : ''\n        } ${checked ? 'checked' : ''}>\n        <span class=\"sdds-toggle-switch\"></span>\n        <label class=\"sdds-toggle-label\" for=\"customSwitch1\">${label}</label>\n      </div>\n  `);\n};\n\nexport const Native = Template.bind({});\n"]}
+{"version":3,"file":"toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,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,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;KAC5B;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,+CAA+C;MAC5D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;EAChE,MAAM,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;EAC3D,MAAM,WAAW,GACf,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,qCAAqC,QAAQ,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;EAEnF,OAAO,iBAAiB,CAAC;gCACK,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC7D,WAAW;8EAEX,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAC1B,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;+DAE2B,KAAK;;GAEjE,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Toggle',\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=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the toggle.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline, displayed above the toggle.',\n      control: {\n        type: 'text',\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label for the toggles input element.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Sets the toggle as checked.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the toggle.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    headline: 'Headline',\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ size, headline, label, checked, disabled }) => {\n  const sizeValue = size === 'Small' ? 'sdds-toggle-sm' : '';\n  const headlineDiv =\n    headline.length > 0 ? `<div class=\"sdds-toggle-headline\">${headline}</div>` : '';\n\n  return formatHtmlPreview(`\n      <div class=\"sdds-toggle ${sizeValue} ${disabled ? 'disabled' : ''}\">\n        ${headlineDiv}\n        <input type=\"checkbox\" class=\"sdds-toggle-input\" id=\"customSwitch1\" ${\n          disabled ? 'disabled' : ''\n        } ${checked ? 'checked' : ''}>\n        <span class=\"sdds-toggle-switch\"></span>\n        <label class=\"sdds-toggle-label\" for=\"customSwitch1\">${label}</label>\n      </div>\n  `);\n};\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/patterns-stories/navigation/navigation-basic.stories.js

@@ -0,0 +1,85 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Patterns/Navigation',
+  parameters: {
+    notes: {
+      Readme: readme,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+  <sdds-header>
+    <sdds-header-title>
+      Example: default
+    </sdds-header-title>
+    <sdds-header-launcher slot="end" aria-label="Application launcher">
+      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+      <sdds-header-launcher-list-title>Lame apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+    </sdds-header-launcher>
+  
+    <sdds-header-brand-symbol slot="end" link-href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
+    </sdds-header-brand-symbol>
+
+  </sdds-header>
+  
+  <main class="sdds-u-w-100 sdds-u-p3" style="box-sizing: border-box;">
+    <p>If the header only contains a title, launcher, and logo, no side menu is needed.</p>
+  </main>
+  `);
+export const Basic = Template.bind({});
+//# sourceMappingURL=navigation-basic.stories.js.map

package/dist/collection/patterns-stories/navigation/navigation-basic.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-basic.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-basic.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,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,EAAE;EACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Patterns/Navigation',\n  parameters: {\n    notes: {\n      Readme: readme,\n    },\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {},\n  args: {},\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <sdds-header>\n    <sdds-header-title>\n      Example: default\n    </sdds-header-title>\n    <sdds-header-launcher slot=\"end\" aria-label=\"Application launcher\">\n      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>\n      <sdds-header-launcher-list>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n      </sdds-header-launcher-list>\n      <sdds-header-launcher-list-title>Lame apps</sdds-header-launcher-list-title>\n      <sdds-header-launcher-list>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Button</a>\n        </sdds-header-launcher-list-item>\n      </sdds-header-launcher-list>\n    </sdds-header-launcher>\n  \n    <sdds-header-brand-symbol slot=\"end\" link-href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n    </sdds-header-brand-symbol>\n\n  </sdds-header>\n  \n  <main class=\"sdds-u-w-100 sdds-u-p3\" style=\"box-sizing: border-box;\">\n    <p>If the header only contains a title, launcher, and logo, no side menu is needed.</p>\n  </main>\n  `,\n  );\n\nexport const Basic = Template.bind({});\n"]}

package/dist/collection/patterns-stories/navigation/navigation-fewitems.stories.js

@@ -0,0 +1,254 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Patterns/Navigation',
+  parameters: {
+    notes: {
+      Readme: readme,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+    <script>
+      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+      window.demoSideMenu = document.querySelector('#demo-side-menu');
+      window.demoHamburger = document.querySelector('#demo-hamburger');
+    </script>
+    <style>
+
+      /* Note: to make the layout fill the entire viewport height you'll need to set the */
+      /* height of the parent element and all of its ancestors to 100%. */
+      /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
+      .demo-layout {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .demo-main {
+        flex-grow: 1;
+      }
+    
+      /* If an extra button in the header is required except on 
+      very narrow screens, you can use classes like these: */
+      .demo-hide {
+        display: none;
+      }
+
+      @media (min-width: 375px) {
+        .demo-xs-hide {
+          display: none;
+        }
+        .demo-xs-show {
+          display: block;
+        }
+      }
+    </style>
+
+
+    <div class="demo-layout">
+      <sdds-header>
+        <!-- TODO setting aria-expanded="true" on the hamburger button does not work, as it is not
+          copied to the button element -->
+        <sdds-header-hamburger id="demo-hamburger" onclick="demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);" aria-label="Open application drawer" aria-haspopup="true" aria-expanded="false"></sdds-header-hamburger>
+
+        <sdds-header-title>
+          Example: Few items
+        </sdds-header-title>
+
+        <sdds-header-item>
+          <button onclick="alert('About us clicked');">
+            About us
+          </button>
+        </sdds-header-item>
+
+        <sdds-header-item>
+          <a href="https://www.google.se">
+            Truck types
+          </a>
+        </sdds-header-item>
+
+        <sdds-header-dropdown>
+          <span slot="button-label">Wheel types</span>
+          <sdds-header-dropdown-list>
+            <sdds-header-dropdown-list-item>
+              <a href="https://tegel.scania.com">Hub-centric wheel</a>
+            </sdds-header-dropdown-list-item>
+            <sdds-header-dropdown-list-item>
+              <a href="https://tegel.scania.com">Rim wheel</a>
+            </sdds-header-dropdown-list-item>
+          </sdds-header-dropdown-list>
+        </sdds-header-dropdown>
+
+        <sdds-header-item slot="end">
+          <button onclick="alert('Calendar button clicked')">
+            <sdds-icon name="calendar" size="20px"></sdds-icon>
+          </button>
+        </sdds-header-item>
+
+        <sdds-header-launcher slot="end" aria-label="Application launcher">
+          <sdds-header-launcher-grid-title>Operations and Logistics</sdds-header-launcher-grid-title>
+          <sdds-header-launcher-grid>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="star" size="32"></sdds-icon>
+                ScaniaCare
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="truck" size="32"></sdds-icon>
+                ScaniaInsight
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="fuel_gauge" size="32"></sdds-icon>
+                ScaniaConnect
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="star" size="32"></sdds-icon>
+                ScaniaPlan
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="truck" size="32"></sdds-icon>
+                ScaniaTrack
+              </a>
+            </sdds-header-launcher-grid-item>
+          </sdds-header-launcher-grid>
+          <sdds-header-launcher-grid-title>Customer Service</sdds-header-launcher-grid-title>
+          <sdds-header-launcher-grid>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="star" size="32"></sdds-icon>
+                ScaniaNet
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="truck" size="32"></sdds-icon>
+                ScaniaRisk
+              </a>
+            </sdds-header-launcher-grid-item>
+          </sdds-header-launcher-grid>
+
+        </sdds-header-launcher>
+
+        <sdds-header-dropdown slot="end" placement="end" no-dropdown-icon class="demo-hide demo-xs-show" selected>
+          <img slot="button-icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
+          <sdds-header-dropdown-list type="lg">
+            <sdds-header-dropdown-list-user
+              heading="Name Nameson"
+              subheading="Company name">
+            </sdds-header-dropdown-list-user>
+            <sdds-header-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </sdds-header-dropdown-list-item>
+            <sdds-header-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </sdds-header-dropdown-list-item>
+          </sdds-header-dropdown-list>
+        </sdds-header-dropdown>
+
+        <sdds-header-brand-symbol slot="end" href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
+        </sdds-header-brand-symbol>
+
+      </sdds-header>
+
+
+      <sdds-side-menu id="demo-side-menu" aria-label="Side menu">
+        <sdds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-overlay>
+
+        <sdds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-close-button>
+
+        <sdds-side-menu-item>
+          <button>
+            <sdds-icon name="info" size="24"></sdds-icon>
+            About
+          </button>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-item>
+          <a href="https://www.scania.com">
+            <sdds-icon name="truck" size="24"></sdds-icon>
+            Truck types
+          </a>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-dropdown>
+          <sdds-icon slot="button-icon" name="tool" size="24"></sdds-icon>
+          <span slot="button-label">
+            Wheel types
+          </span>
+          <sdds-side-menu-dropdown-list>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Hub-centric wheel</a>
+            </sdds-side-menu-dropdown-list-item>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Rim wheel</a>
+            </sdds-side-menu-dropdown-list-item>
+          </sdds-side-menu-dropdown-list>
+        </sdds-side-menu-dropdown>
+
+        <sdds-side-menu-item slot="end" onclick="alert('Calendar button clicked')">
+          <button>
+            <sdds-icon name="calendar" size="24px"></sdds-icon>
+            Calendar
+          </button>
+        </sdds-side-menu-item>
+        
+        <sdds-side-menu-dropdown slot="end" class="demo-xs-hide" selected>
+          <sdds-side-menu-user 
+            slot="button-label" 
+            heading="Name Namesson" 
+            subheading="Company name" 
+            img-src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" 
+            img-alt="">
+          </sdds-side-menu-user>
+          <sdds-side-menu-dropdown-list>
+            <sdds-side-menu-dropdown-list-item selected>
+              <a href="https://design.scania.com">My Instructions</a>
+            </sdds-side-menu-dropdown-list-item>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Task List</a>
+            </sdds-side-menu-dropdown-list-item>
+          </sdds-side-menu-dropdown-list>
+        </sdds-side-menu-dropdown>
+      
+
+      </sdds-side-menu>
+
+      <main class="demo-main sdds-u-p3" style="box-sizing: border-box;">
+        <p>If the header contains navigational items like links or buttons, a side menu is needed for small screens.</p>
+        <br/>
+        <p><i>Tip: Resize the window to see the buttons move in to the side menu drawer.</i></p>
+        <p><i>Note: This example has an alterate launcher menu with a grid layout.</i></p>
+      </main>
+    </div>
+  `);
+export const FewNavigationItems = Template.bind({});
+//# sourceMappingURL=navigation-fewitems.stories.js.map

package/dist/collection/patterns-stories/navigation/navigation-fewitems.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-fewitems.stories.js","sourceRoot":"","sources":["../../../src/patterns-stories/navigation/navigation-fewitems.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,MAAM,EAAE,MAAM;KACf;IACD,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,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,EAAE;EACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6ND,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Patterns/Navigation',\n  parameters: {\n    notes: {\n      Readme: readme,\n    },\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {},\n  args: {},\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n    <script>\n      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */\n      window.demoSideMenu = document.querySelector('#demo-side-menu');\n      window.demoHamburger = document.querySelector('#demo-hamburger');\n    </script>\n    <style>\n\n      /* Note: to make the layout fill the entire viewport height you'll need to set the */\n      /* height of the parent element and all of its ancestors to 100%. */\n      /* Please note that using 'vh' for this can cause issues on some mobile browsers. */\n      .demo-layout {\n        min-height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .demo-main {\n        flex-grow: 1;\n      }\n    \n      /* If an extra button in the header is required except on \n      very narrow screens, you can use classes like these: */\n      .demo-hide {\n        display: none;\n      }\n\n      @media (min-width: 375px) {\n        .demo-xs-hide {\n          display: none;\n        }\n        .demo-xs-show {\n          display: block;\n        }\n      }\n    </style>\n\n\n    <div class=\"demo-layout\">\n      <sdds-header>\n        <!-- TODO setting aria-expanded=\"true\" on the hamburger button does not work, as it is not\n          copied to the button element -->\n        <sdds-header-hamburger id=\"demo-hamburger\" onclick=\"demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);\" aria-label=\"Open application drawer\" aria-haspopup=\"true\" aria-expanded=\"false\"></sdds-header-hamburger>\n\n        <sdds-header-title>\n          Example: Few items\n        </sdds-header-title>\n\n        <sdds-header-item>\n          <button onclick=\"alert('About us clicked');\">\n            About us\n          </button>\n        </sdds-header-item>\n\n        <sdds-header-item>\n          <a href=\"https://www.google.se\">\n            Truck types\n          </a>\n        </sdds-header-item>\n\n        <sdds-header-dropdown>\n          <span slot=\"button-label\">Wheel types</span>\n          <sdds-header-dropdown-list>\n            <sdds-header-dropdown-list-item>\n              <a href=\"https://tegel.scania.com\">Hub-centric wheel</a>\n            </sdds-header-dropdown-list-item>\n            <sdds-header-dropdown-list-item>\n              <a href=\"https://tegel.scania.com\">Rim wheel</a>\n            </sdds-header-dropdown-list-item>\n          </sdds-header-dropdown-list>\n        </sdds-header-dropdown>\n\n        <sdds-header-item slot=\"end\">\n          <button onclick=\"alert('Calendar button clicked')\">\n            <sdds-icon name=\"calendar\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n\n        <sdds-header-launcher slot=\"end\" aria-label=\"Application launcher\">\n          <sdds-header-launcher-grid-title>Operations and Logistics</sdds-header-launcher-grid-title>\n          <sdds-header-launcher-grid>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"star\" size=\"32\"></sdds-icon>\n                ScaniaCare\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"truck\" size=\"32\"></sdds-icon>\n                ScaniaInsight\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"fuel_gauge\" size=\"32\"></sdds-icon>\n                ScaniaConnect\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"star\" size=\"32\"></sdds-icon>\n                ScaniaPlan\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"truck\" size=\"32\"></sdds-icon>\n                ScaniaTrack\n              </a>\n            </sdds-header-launcher-grid-item>\n          </sdds-header-launcher-grid>\n          <sdds-header-launcher-grid-title>Customer Service</sdds-header-launcher-grid-title>\n          <sdds-header-launcher-grid>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"star\" size=\"32\"></sdds-icon>\n                ScaniaNet\n              </a>\n            </sdds-header-launcher-grid-item>\n            <sdds-header-launcher-grid-item>\n              <a href=\"https://tegel.scania.com\">\n                <sdds-icon name=\"truck\" size=\"32\"></sdds-icon>\n                ScaniaRisk\n              </a>\n            </sdds-header-launcher-grid-item>\n          </sdds-header-launcher-grid>\n\n        </sdds-header-launcher>\n\n        <sdds-header-dropdown slot=\"end\" placement=\"end\" no-dropdown-icon class=\"demo-hide demo-xs-show\" selected>\n          <img slot=\"button-icon\" src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" alt=\"User menu.\"/>\n          <sdds-header-dropdown-list type=\"lg\">\n            <sdds-header-dropdown-list-user\n              heading=\"Name Nameson\"\n              subheading=\"Company name\">\n            </sdds-header-dropdown-list-user>\n            <sdds-header-dropdown-list-item selected>\n              <a href=\"https://www.scania.com\">My Instructions</a>\n            </sdds-header-dropdown-list-item>\n            <sdds-header-dropdown-list-item>\n              <a href=\"https://www.scania.com\">Task List</a>\n            </sdds-header-dropdown-list-item>\n          </sdds-header-dropdown-list>\n        </sdds-header-dropdown>\n\n        <sdds-header-brand-symbol slot=\"end\" href=\"https://design.scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n        </sdds-header-brand-symbol>\n\n      </sdds-header>\n\n\n      <sdds-side-menu id=\"demo-side-menu\" aria-label=\"Side menu\">\n        <sdds-side-menu-overlay slot=\"overlay\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-overlay>\n\n        <sdds-side-menu-close-button slot=\"close-button\" onclick=\"demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);\"></sdds-side-menu-close-button>\n\n        <sdds-side-menu-item>\n          <button>\n            <sdds-icon name=\"info\" size=\"24\"></sdds-icon>\n            About\n          </button>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-item>\n          <a href=\"https://www.scania.com\">\n            <sdds-icon name=\"truck\" size=\"24\"></sdds-icon>\n            Truck types\n          </a>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-dropdown>\n          <sdds-icon slot=\"button-icon\" name=\"tool\" size=\"24\"></sdds-icon>\n          <span slot=\"button-label\">\n            Wheel types\n          </span>\n          <sdds-side-menu-dropdown-list>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://design.scania.com\">Hub-centric wheel</a>\n            </sdds-side-menu-dropdown-list-item>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://design.scania.com\">Rim wheel</a>\n            </sdds-side-menu-dropdown-list-item>\n          </sdds-side-menu-dropdown-list>\n        </sdds-side-menu-dropdown>\n\n        <sdds-side-menu-item slot=\"end\" onclick=\"alert('Calendar button clicked')\">\n          <button>\n            <sdds-icon name=\"calendar\" size=\"24px\"></sdds-icon>\n            Calendar\n          </button>\n        </sdds-side-menu-item>\n        \n        <sdds-side-menu-dropdown slot=\"end\" class=\"demo-xs-hide\" selected>\n          <sdds-side-menu-user \n            slot=\"button-label\" \n            heading=\"Name Namesson\" \n            subheading=\"Company name\" \n            img-src=\"https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg\" \n            img-alt=\"\">\n          </sdds-side-menu-user>\n          <sdds-side-menu-dropdown-list>\n            <sdds-side-menu-dropdown-list-item selected>\n              <a href=\"https://design.scania.com\">My Instructions</a>\n            </sdds-side-menu-dropdown-list-item>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://design.scania.com\">Task List</a>\n            </sdds-side-menu-dropdown-list-item>\n          </sdds-side-menu-dropdown-list>\n        </sdds-side-menu-dropdown>\n      \n\n      </sdds-side-menu>\n\n      <main class=\"demo-main sdds-u-p3\" style=\"box-sizing: border-box;\">\n        <p>If the header contains navigational items like links or buttons, a side menu is needed for small screens.</p>\n        <br/>\n        <p><i>Tip: Resize the window to see the buttons move in to the side menu drawer.</i></p>\n        <p><i>Note: This example has an alterate launcher menu with a grid layout.</i></p>\n      </main>\n    </div>\n  `,\n  );\n\nexport const FewNavigationItems = Template.bind({});\n"]}