@scania/tegel 0.0.4 → 0.0.6

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-banner.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Subheader text. */\n  @Prop() subheader: string;\n\n  /** Link text. */\n  @Prop() linkText: string;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() linkTarget: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() linkRel: string = 'noopener';\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n    hidden: boolean;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: true,\n    };\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: false,\n    };\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.subheader && <span class={`banner-subheader`}>{this.subheader}</span>}\n          {this.linkText && this.href && (\n            <sdds-link link-href={this.href} rel={this.linkRel} link-target={this.linkTarget}>\n              {this.linkText}\n            </sdds-link>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-banner.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n  }>;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsShow',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsShow: EventEmitter<{\n    bannerId: string;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    this.handleClose();\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    this.handleShow();\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'banner-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'banner-link');\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  handleShow = () => {\n    const sddsCloseEvent = this.sddsShow.emit({\n      bannerId: this.bannerId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.hasSubheader && <slot name=\"banner-subheader\"></slot>}\n          {this.hasLink && (\n            <div class={`banner-link ${!this.hasSubheader ? 'no-subheader' : ''}`}>\n              <slot name=\"banner-link\"></slot>\n            </div>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -29,7 +29,7 @@ export default {
         type: 'radio',
       },
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'none' },
       },
     },
     header: {
@@ -46,31 +46,13 @@ export default {
         type: 'text',
       },
     },
-    linkText: {
+    link: {
       name: 'Link',
-      description: 'Sets text to be displayed in the link section.',
-      control: {
-        type: 'text',
-      },
-    },
-    href: {
-      name: 'Link href',
-      description: 'Sets the href for the link.',
+      description: 'Sets a link to be displayed in the link section.',
       control: {
         type: 'text',
       },
     },
-    linkTarget: {
-      name: 'Link target',
-      description: 'Sets where to open the linked URL.',
-      control: {
-        type: 'radio',
-      },
-      options: ['_self', '_blank', '_parent', '_top'],
-      table: {
-        defaultValue: { summary: '_self' },
-      },
-    },
     icon: {
       name: 'Icon',
       description: 'Name of icon to display, choose `none` to remove the icon.',
@@ -78,9 +60,6 @@ export default {
         type: 'select',
       },
       options: [...iconsNames, 'none'],
-      table: {
-        defaultValue: { summary: 'none' },
-      },
       if: { arg: 'type', eq: 'Default' },
     },
     persistent: {
@@ -90,39 +69,37 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
   },
   args: {
     type: 'Default',
     header: 'This is a header text area',
-    subheader: 'SubHeader text area',
-    linkText: 'Learn more',
-    href: 'tegel.scania.com',
-    linkTarget: '_self',
+    subheader: '<div slot="banner-subheader">Short subheader</div>',
+    link: '<sdds-link slot="banner-link" ><a href="/">Link example</a></sdds-link>',
     icon: 'truck',
     persistent: false,
   },
 };
-const Template = ({ type, icon, header, subheader, linkText, href, persistent, linkTarget }) => formatHtmlPreview(`
+const Template = ({ type, icon, header, subheader, persistent, link }) => formatHtmlPreview(`
       <sdds-banner
           ${type !== 'Default' ? `type="${type.toLowerCase()}"` : ''}
           ${icon !== 'none' ? `icon="${icon}"` : ''}
           ${header !== '' ? `header="${header}"` : ''}
-          ${subheader !== '' ? `subheader="${subheader}"` : ''}
-          ${linkText !== '' ? `link-text="${linkText}"` : ''}
-          ${href !== '' ? `href="${href}"` : ''}
-          ${linkTarget !== '' ? `link-target="${linkTarget}"` : ''}
-
           ${persistent ? `persistent` : ''}
           >
+          ${subheader ? `${subheader}` : ''}
+          ${link ? `${link}` : ''}
       </sdds-banner>
 
       <!-- Script tag with eventlistener for demo purposes. -->
       <script>
         document.addEventListener('sddsClose', (event) => {
-          console.log('Closed banner with BannerID: ', event.detail.bannerId)
+          console.log(event)
+        })
+        document.addEventListener('sddsShow', (event) => {
+          console.log(event)
         })
       </script>
     `);

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\n// FIXME: CMS: Change state to type in Code tab of component\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Changes the type of the component.',\n      options: ['Default', 'Error', 'Information'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Sets text to be displayed in the header section.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Sets text to be displayed in the subheader section.',\n      control: {\n        type: 'text',\n      },\n    },\n    linkText: {\n      name: 'Link',\n      description: 'Sets text to be displayed in the link section.',\n      control: {\n        type: 'text',\n      },\n    },\n    href: {\n      name: 'Link href',\n      description: 'Sets the href for the link.',\n      control: {\n        type: 'text',\n      },\n    },\n    linkTarget: {\n      name: 'Link target',\n      description: 'Sets where to open the linked URL.',\n      control: {\n        type: 'radio',\n      },\n      options: ['_self', '_blank', '_parent', '_top'],\n      table: {\n        defaultValue: { summary: '_self' },\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Name of icon to display, choose `none` to remove the icon.',\n      control: {\n        type: 'select',\n      },\n      options: [...iconsNames, 'none'],\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n      if: { arg: 'type', eq: 'Default' },\n    },\n    persistent: {\n      name: 'Disable closing',\n      description: `Removes the 'close button' in the banner.`,\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    type: 'Default',\n    header: 'This is a header text area',\n    subheader: 'SubHeader text area',\n    linkText: 'Learn more',\n    href: 'tegel.scania.com',\n    linkTarget: '_self',\n    icon: 'truck',\n    persistent: false,\n  },\n};\n\nconst Template = ({ type, icon, header, subheader, linkText, href, persistent, linkTarget }) =>\n  formatHtmlPreview(`\n      <sdds-banner\n          ${type !== 'Default' ? `type=\"${type.toLowerCase()}\"` : ''}\n          ${icon !== 'none' ? `icon=\"${icon}\"` : ''}\n          ${header !== '' ? `header=\"${header}\"` : ''}\n          ${subheader !== '' ? `subheader=\"${subheader}\"` : ''}\n          ${linkText !== '' ? `link-text=\"${linkText}\"` : ''}\n          ${href !== '' ? `href=\"${href}\"` : ''}\n          ${linkTarget !== '' ? `link-target=\"${linkTarget}\"` : ''}\n\n          ${persistent ? `persistent` : ''}\n          >\n      </sdds-banner>\n\n      <!-- Script tag with eventlistener for demo purposes. -->\n      <script>\n        document.addEventListener('sddsClose', (event) => {\n          console.log('Closed banner with BannerID: ', event.detail.bannerId)\n        })\n      </script>\n    `);\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\n// FIXME: CMS: Change state to type in Code tab of component\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Changes the type of the component.',\n      options: ['Default', 'Error', 'Information'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Sets text to be displayed in the header section.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Sets text to be displayed in the subheader section.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Sets a link to be displayed in the link section.',\n      control: {\n        type: 'text',\n      },\n    },\n\n    icon: {\n      name: 'Icon',\n      description: 'Name of icon to display, choose `none` to remove the icon.',\n      control: {\n        type: 'select',\n      },\n      options: [...iconsNames, 'none'],\n      if: { arg: 'type', eq: 'Default' },\n    },\n    persistent: {\n      name: 'Disable closing',\n      description: `Removes the 'close button' in the banner.`,\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    type: 'Default',\n    header: 'This is a header text area',\n    subheader: '<div slot=\"banner-subheader\">Short subheader</div>',\n    link: '<sdds-link slot=\"banner-link\" ><a href=\"/\">Link example</a></sdds-link>',\n    icon: 'truck',\n    persistent: false,\n  },\n};\n\nconst Template = ({ type, icon, header, subheader, persistent, link }) =>\n  formatHtmlPreview(`\n      <sdds-banner\n          ${type !== 'Default' ? `type=\"${type.toLowerCase()}\"` : ''}\n          ${icon !== 'none' ? `icon=\"${icon}\"` : ''}\n          ${header !== '' ? `header=\"${header}\"` : ''}\n          ${persistent ? `persistent` : ''}\n          >\n          ${subheader ? `${subheader}` : ''}\n          ${link ? `${link}` : ''}\n      </sdds-banner>\n\n      <!-- Script tag with eventlistener for demo purposes. -->\n      <script>\n        document.addEventListener('sddsClose', (event) => {\n          console.log(event)\n        })\n        document.addEventListener('sddsShow', (event) => {\n          console.log(event)\n        })\n      </script>\n    `);\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,34 +1,28 @@
 @charset "UTF-8";
-li {
-  display: flex;
-  align-items: center;
-  color: var(--sdds-breadcrumb-color);
-}
-li a {
+[role=listitem] ::slotted(*) {
   color: var(--sdds-breadcrumb-color);
   text-decoration: none;
 }
-li:hover {
-  cursor: pointer;
-}
-li:hover a {
+[role=listitem]:hover ::slotted(*) {
   color: var(--sdds-breadcrumb-color-hover);
   text-decoration: underline;
 }
-li.disabled {
-  pointer-events: none;
+[role=listitem]:focus-visible {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
 }
-li.disabled a, li.current a,
-li [aria-current=page] a {
+[role=listitem].disabled ::slotted(*), [role=listitem].current ::slotted(*),
+[role=listitem] [aria-current=page] ::slotted(*) {
+  pointer-events: none;
   cursor: default;
   color: var(--sdds-breadcrumb-color-disabled);
 }
-li.disabled:hover a, li.current:hover a,
-li [aria-current=page]:hover a {
-  color: var(--sdds-breadcrumb-color-disabled);
+[role=listitem].disabled:hover ::slotted(*), [role=listitem].current:hover ::slotted(*),
+[role=listitem] [aria-current=page]:hover ::slotted(*) {
   text-decoration: none;
+  cursor: not-allowed;
 }
-li a::after {
+[role=listitem] ::slotted(*)::after {
   content: "›";
   color: var(--sdds-breadcrumb-separator-color);
   margin-right: 4px;
@@ -38,6 +32,6 @@ li a::after {
   height: 8px;
 }
 
-:host(.last) a::after {
+:host(.last) ::slotted(*)::after {
   display: none;
 }

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

@@ -2,14 +2,11 @@ import { h } from '@stencil/core';
 export class SddsBreadcrumbItem {
   constructor() {
     this.current = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
     this.disabled = false;
   }
   render() {
-    return (h("li", { class: `${this.current ? 'current' : ''} 
-        ${this.disabled ? 'disabled' : ''}` }, h("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", null))));
+    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
+        ${this.disabled ? 'disabled' : ''}` }, h("slot", null)));
   }
   static get is() { return "sdds-breadcrumb-item"; }
   static get encapsulation() { return "shadow"; }
@@ -43,59 +40,6 @@ export class SddsBreadcrumbItem {
         "reflect": false,
         "defaultValue": "false"
       },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Href for the link"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'_self' | '_blank' | '_parent' | '_top'",
-          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Where to open the linked URL"
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "'_self'"
-      },
-      "rel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'."
-        },
-        "attribute": "rel",
-        "reflect": false,
-        "defaultValue": "'noopener'"
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-breadcrumb-item.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;;mBAEF,KAAK;;kBAM0B,OAAO;eAG3C,UAAU;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,UACE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MAEnC,SAAG,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG;QAC5E,eAAa,CACX,CACD,CACN,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-item',\n  styleUrl: 'sdds-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbItem {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <li\n        class={`${this.current ? 'current' : ''} \n        ${this.disabled ? 'disabled' : ''}`}\n      >\n        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot></slot>\n        </a>\n      </li>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-breadcrumb-item.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;;mBAEF,KAAK;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MAEnC,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-item',\n  styleUrl: 'sdds-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbItem {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        role=\"listitem\"\n        class={`${this.current ? 'current' : ''} \n        ${this.disabled ? 'disabled' : ''}`}\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/sdds-breadcrumb.css

@@ -1,22 +1,10 @@
-:root,
-.sdds-mode-light {
-  --sdds-breadcrumb-color: var(--sdds-grey-900);
-  --sdds-breadcrumb-color-hover: var(--sdds-grey-700);
-  --sdds-breadcrumb-color-focus: var(--sdds-grey-700);
-  --sdds-breadcrumb-color-disabled: var(--sdds-grey-500);
-  --sdds-breadcrumb-separator-color: var(--sdds-grey-500);
-}
-
-.sdds-mode-dark {
-  --sdds-breadcrumb-color: var(--sdds-grey-300);
-  --sdds-breadcrumb-color-hover: var(--sdds-grey-500);
-  --sdds-breadcrumb-color-focus: var(--sdds-grey-500);
-  --sdds-breadcrumb-color-disabled: var(--sdds-grey-700);
-  --sdds-breadcrumb-separator-color: var(--sdds-grey-700);
+:host {
+  box-sizing: border-box;
 }
-
-nav ol.sdds-breadcrumb {
+:host * {
   box-sizing: border-box;
+}
+:host [role=list] {
   padding: 0;
   margin: 0;
   font: var(--sdds-detail-02);
@@ -24,7 +12,4 @@ nav ol.sdds-breadcrumb {
   display: flex;
   flex-wrap: wrap;
   list-style-type: none;
-}
-nav ol.sdds-breadcrumb * {
-  box-sizing: border-box;
 }

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

@@ -1,10 +1,10 @@
 import { h } from '@stencil/core';
 export class SddsBreadcrumb {
   connectedCallback() {
-    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');
+    this.el.children[this.el.children.length - 1].classList.add('last');
   }
   render() {
-    return (h("nav", null, h("ol", { class: 'sdds-breadcrumb' }, h("slot", null))));
+    return (h("nav", null, h("div", { role: "list", class: 'sdds-breadcrumb' }, h("slot", null))));
   }
   static get is() { return "sdds-breadcrumb"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,cAAc;EAGzB,iBAAiB;IACf,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;EAC3F,CAAC;EAED,MAAM;IACJ,OAAO,CACL;MACE,UAAI,KAAK,EAAE,iBAAiB;QAC1B,eAAa,CACV,CACD,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb',\n  styleUrl: 'sdds-breadcrumb.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumb {\n  @Element() el: HTMLElement;\n\n  connectedCallback() {\n    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');\n  }\n\n  render() {\n    return (\n      <nav>\n        <ol class={'sdds-breadcrumb'}>\n          <slot></slot>\n        </ol>\n      </nav>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,cAAc;EAGzB,iBAAiB;IACf,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;EACtE,CAAC;EAED,MAAM;IACJ,OAAO,CACL;MACE,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,iBAAiB;QACvC,eAAa,CACT,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb',\n  styleUrl: 'sdds-breadcrumb.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumb {\n  @Element() el: HTMLElement;\n\n  connectedCallback() {\n    this.el.children[this.el.children.length - 1].classList.add('last');\n  }\n\n  render() {\n    return (\n      <nav>\n        <div role=\"list\" class={'sdds-breadcrumb'}>\n          <slot></slot>\n        </div>\n      </nav>\n    );\n  }\n}\n"]}

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

@@ -1,9 +1,10 @@
 import itemReadme from './sdds-breadcrumb-item/readme.md';
+import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
   title: 'Components/Breadcrumb',
   parameters: {
-    notes: { 'Breadcumb Item': itemReadme },
+    notes: { 'Breadcumb': readme, 'Breadcumb Item': itemReadme },
     design: [
       {
         name: 'Figma',
@@ -20,9 +21,15 @@ export default {
 };
 const Template = () => formatHtmlPreview(`   
       <sdds-breadcrumb>
-        <sdds-breadcrumb-item href="#">Page 1</sdds-breadcrumb-item>
-        <sdds-breadcrumb-item href="google.se">Page 2</sdds-breadcrumb-item>
-        <sdds-breadcrumb-item current>Page 3</sdds-breadcrumb-item>
+        <sdds-breadcrumb-item>
+          <a href="#">Page 1</a>
+        </sdds-breadcrumb-item>
+        <sdds-breadcrumb-item>
+          <a href="#">Page 2</a>
+        </sdds-breadcrumb-item>
+        <sdds-breadcrumb-item current>
+          <a href="#">Page 3</a>
+        </sdds-breadcrumb-item>
       </sdds-breadcrumb>
       `);
 export const WebComponent = Template.bind({});

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,gBAAgB,EAAE,UAAU,EAAE;IACvC,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;OAMG,CACJ,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import itemReadme from './sdds-breadcrumb-item/readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb Item': itemReadme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `   \n      <sdds-breadcrumb>\n        <sdds-breadcrumb-item href=\"#\">Page 1</sdds-breadcrumb-item>\n        <sdds-breadcrumb-item href=\"google.se\">Page 2</sdds-breadcrumb-item>\n        <sdds-breadcrumb-item current>Page 3</sdds-breadcrumb-item>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,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,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;OAYG,CACJ,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import itemReadme from './sdds-breadcrumb-item/readme.md';\nimport readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb': readme, 'Breadcumb Item': itemReadme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `   \n      <sdds-breadcrumb>\n        <sdds-breadcrumb-item>\n          <a href=\"#\">Page 1</a>\n        </sdds-breadcrumb-item>\n        <sdds-breadcrumb-item>\n          <a href=\"#\">Page 2</a>\n        </sdds-breadcrumb-item>\n        <sdds-breadcrumb-item current>\n          <a href=\"#\">Page 3</a>\n        </sdds-breadcrumb-item>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -21,17 +21,20 @@ export default {
     ],
   },
   argTypes: {
-    text: {
-      name: 'Text',
-      description: 'The text to be displayed on the button',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
-        type: 'text',
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
       },
-      if: { arg: 'onlyIcon', truthy: false },
     },
     btnType: {
       name: 'Type',
-      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
+      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent.',
       control: {
         type: 'radio',
       },
@@ -42,7 +45,7 @@ export default {
     },
     size: {
       name: 'Size',
-      description: 'Size of the button',
+      description: 'Sets the size of the button.',
       control: {
         type: 'radio',
       },
@@ -51,21 +54,17 @@ export default {
         defaultValue: { summary: 'lg' },
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
+    text: {
+      name: 'Text',
+      description: 'Sets the text to be displayed on the button.',
       control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      description: 'Button mode variant.',
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        type: 'text',
       },
+      if: { arg: 'onlyIcon', truthy: false },
     },
     fullbleed: {
       name: 'Fullbleed',
-      defaultValue: false,
-      description: 'Fluid width in certain components-old',
+      description: 'Sets a fluid width on the button.',
       control: {
         type: 'boolean',
       },
@@ -74,17 +73,9 @@ export default {
       },
       if: { arg: 'onlyIcon', eq: false },
     },
-    disabled: {
-      name: 'Disabled',
-      type: 'boolean',
-      description: 'Choose to disable the button',
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
     onlyIcon: {
       name: 'Only Icon',
-      description: 'Displays only the icon and excludes any text from the button',
+      description: 'Displays only the icon and excludes any text from the button.',
       control: {
         type: 'boolean',
       },
@@ -95,36 +86,52 @@ export default {
     },
     icon: {
       name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
+      description: 'Sets icon to be displayed on the button. Choose "none" to exclude the icon.',
       control: {
         type: 'select',
       },
+      table: {
+        defaultValue: { summary: 'none' },
+      },
       options: ['none', ...iconsNames],
       if: { arg: 'size', neq: 'Extra small' },
     },
     iconType: {
       name: 'Icon type',
-      description: 'Native/Web Component',
+      description: 'Switch between showing a native or a web component icon.',
       control: {
         type: 'radio',
       },
       options: ['Native', 'Web Component'],
+      table: {
+        defaultValue: { summary: 'Native' },
+      },
       if: { arg: 'size', neq: 'Extra small' },
     },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
   },
   args: {
-    text: 'Button',
+    modeVariant: 'Inherit from parent',
     btnType: 'Primary',
     size: 'Large',
-    modeVariant: 'Primary',
+    text: 'Button',
     fullbleed: false,
-    disabled: false,
     onlyIcon: false,
     icon: 'none',
     iconType: 'Native',
+    disabled: false,
   },
 };
-const NativeTemplate = ({ size, modeVariant, btnType, fullbleed, text = 'Button', disabled = '', onlyIcon, icon, iconType, }) => {
+const NativeTemplate = ({ modeVariant, btnType, size, text = 'Button', fullbleed, onlyIcon, icon, iconType, disabled = '', }) => {
   const fbClass = fullbleed ? 'sdds-btn-fullbleed' : '';
   const onlyIconCss = onlyIcon ? 'sdds-btn-icon' : '';
   const btnTypeLookUp = {

package/dist/collection/components/button/button-native.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-native.stories.js","sourceRoot":"","sources":["../../../src/components/button/button-native.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    layout: 'padded',\n    chromatic: {\n      disableSnapshot: false, // enables snapshotting for the component\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    text: {\n      name: 'Text',\n      description: 'The text to be displayed on the button',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'onlyIcon', truthy: false },\n    },\n    btnType: {\n      name: 'Type',\n      description:\n        'Four different button types to help the user to distinguish the level of importance of the task they represent',\n      control: {\n        type: 'radio',\n      },\n      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],\n      table: {\n        defaultValue: { summary: 'primary' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Size of the button',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      description: 'Button mode variant.',\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    fullbleed: {\n      name: 'Fullbleed',\n      defaultValue: false,\n      description: 'Fluid width in certain components-old',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'onlyIcon', eq: false },\n    },\n    disabled: {\n      name: 'Disabled',\n      type: 'boolean',\n      description: 'Choose to disable the button',\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    onlyIcon: {\n      name: 'Only Icon',\n      description: 'Displays only the icon and excludes any text from the button',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Icon to display on the button. Choose \"none\" to exclude the icon.',\n      control: {\n        type: 'select',\n      },\n      options: ['none', ...iconsNames],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Native/Web Component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n  },\n  args: {\n    text: 'Button',\n    btnType: 'Primary',\n    size: 'Large',\n    modeVariant: 'Primary',\n    fullbleed: false,\n    disabled: false,\n    onlyIcon: false,\n    icon: 'none',\n    iconType: 'Native',\n  },\n};\n\nconst NativeTemplate = ({\n  size,\n  modeVariant,\n  btnType,\n  fullbleed,\n  text = 'Button',\n  disabled = '',\n  onlyIcon,\n  icon,\n  iconType,\n}) => {\n  const fbClass = fullbleed ? 'sdds-btn-fullbleed' : '';\n  const onlyIconCss = onlyIcon ? 'sdds-btn-icon' : '';\n  const btnTypeLookUp = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n    Ghost: 'ghost',\n    Danger: 'danger',\n  };\n  const sizeLookUp = {\n    'Large': 'lg',\n    'Medium': 'md',\n    'Small': 'sm',\n    'Extra small': 'xs',\n  };\n\n  const modeVariantLookup = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n  };\n\n  return formatHtmlPreview(\n    `\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n    ${\n      icon && iconType === 'Native'\n        ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    i.sdds-btn-icon{\n      font-size: ${size === 'Small' ? '16' : '20'}px;\n    }`\n        : ''\n    } .demo-wrapper{\n      width: 100%;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n<button class=\"sdds-btn sdds-btn-${btnTypeLookUp[btnType]} ${\n      modeVariant !== 'Inherit from parent'\n        ? `sdds-mode-variant-${modeVariantLookup[modeVariant]}`\n        : ''\n    } sdds-btn-${sizeLookUp[size]} ${fbClass} ${disabled ? 'disabled' : ''} ${onlyIconCss} \n   ${onlyIcon ? 'sdds-btn-only-icon' : ''}\">\n  ${!onlyIcon ? `<span class=\"sdds-btn-text\">${text}</span>` : ''}\n  ${\n    onlyIcon || (icon && icon !== 'none')\n      ? `\n    ${\n      iconType === 'Native'\n        ? `<i class=\"sdds-btn-icon sdds-icon ${icon}\"></i>`\n        : `<sdds-icon class='sdds-btn-icon ' size='${\n            sizeLookUp[size] === 'sm' ? '16px' : '20px'\n          }' name='${icon}'></sdds-icon>`\n    }\n  `\n      : ''\n  }\n</button>\n  </div>\n  `,\n  );\n};\n\nexport const Native = NativeTemplate.bind({});\nNative.args = {};\n\nexport const NativeWithIcon = NativeTemplate.bind({});\nNativeWithIcon.args = {\n  icon: 'truck',\n};\n\nexport const NativeOnlyIcon = NativeTemplate.bind({});\nNativeOnlyIcon.args = {\n  text: '',\n  onlyIcon: true,\n  icon: 'truck',\n};\n"]}
+{"version":3,"file":"button-native.stories.js","sourceRoot":"","sources":["../../../src/components/button/button-native.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    layout: 'padded',\n    chromatic: {\n      disableSnapshot: false, // enables snapshotting for the component\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    btnType: {\n      name: 'Type',\n      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],\n      table: {\n        defaultValue: { summary: 'primary' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the button.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    text: {\n      name: 'Text',\n      description: 'Sets the text to be displayed on the button.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'onlyIcon', truthy: false },\n    },\n    fullbleed: {\n      name: 'Fullbleed',\n      description: 'Sets a fluid width on the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'onlyIcon', eq: false },\n    },\n    onlyIcon: {\n      name: 'Only Icon',\n      description: 'Displays only the icon and excludes any text from the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Sets icon to be displayed on the button. Choose \"none\" to exclude the icon.',\n      control: {\n        type: 'select',\n      },\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n      options: ['none', ...iconsNames],\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      table: {\n        defaultValue: { summary: 'Native' },\n      },\n      if: { arg: 'size', neq: 'Extra small' },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    btnType: 'Primary',\n    size: 'Large',\n    text: 'Button',\n    fullbleed: false,\n    onlyIcon: false,\n    icon: 'none',\n    iconType: 'Native',\n    disabled: false,\n  },\n};\n\nconst NativeTemplate = ({\n  modeVariant,\n  btnType,\n  size,\n  text = 'Button',\n  fullbleed,\n  onlyIcon,\n  icon,\n  iconType,\n  disabled = '',\n}) => {\n  const fbClass = fullbleed ? 'sdds-btn-fullbleed' : '';\n  const onlyIconCss = onlyIcon ? 'sdds-btn-icon' : '';\n  const btnTypeLookUp = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n    Ghost: 'ghost',\n    Danger: 'danger',\n  };\n  const sizeLookUp = {\n    'Large': 'lg',\n    'Medium': 'md',\n    'Small': 'sm',\n    'Extra small': 'xs',\n  };\n\n  const modeVariantLookup = {\n    Primary: 'primary',\n    Secondary: 'secondary',\n  };\n\n  return formatHtmlPreview(\n    `\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n    ${\n      icon && iconType === 'Native'\n        ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    i.sdds-btn-icon{\n      font-size: ${size === 'Small' ? '16' : '20'}px;\n    }`\n        : ''\n    } .demo-wrapper{\n      width: 100%;\n    }\n  </style>\n\n  <div class=\"demo-wrapper\">\n<button class=\"sdds-btn sdds-btn-${btnTypeLookUp[btnType]} ${\n      modeVariant !== 'Inherit from parent'\n        ? `sdds-mode-variant-${modeVariantLookup[modeVariant]}`\n        : ''\n    } sdds-btn-${sizeLookUp[size]} ${fbClass} ${disabled ? 'disabled' : ''} ${onlyIconCss} \n   ${onlyIcon ? 'sdds-btn-only-icon' : ''}\">\n  ${!onlyIcon ? `<span class=\"sdds-btn-text\">${text}</span>` : ''}\n  ${\n    onlyIcon || (icon && icon !== 'none')\n      ? `\n    ${\n      iconType === 'Native'\n        ? `<i class=\"sdds-btn-icon sdds-icon ${icon}\"></i>`\n        : `<sdds-icon class='sdds-btn-icon ' size='${\n            sizeLookUp[size] === 'sm' ? '16px' : '20px'\n          }' name='${icon}'></sdds-icon>`\n    }\n  `\n      : ''\n  }\n</button>\n  </div>\n  `,\n  );\n};\n\nexport const Native = NativeTemplate.bind({});\nNative.args = {};\n\nexport const NativeWithIcon = NativeTemplate.bind({});\nNativeWithIcon.args = {\n  icon: 'truck',\n};\n\nexport const NativeOnlyIcon = NativeTemplate.bind({});\nNativeOnlyIcon.args = {\n  text: '',\n  onlyIcon: true,\n  icon: 'truck',\n};\n"]}