@scania/tegel 0.0.52 → 0.0.71-beta

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

@@ -1,120 +0,0 @@
-import { h } from '@stencil/core';
-export class SddsBreadcrumbLink {
-  constructor() {
-    this.current = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-    this.disabled = false;
-  }
-  render() {
-    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
-      ${this.disabled ? 'disabled' : ''}` }, h("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", { name: "label" }))));
-  }
-  static get is() { return "sdds-breadcrumb-link"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-breadcrumb-link.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-breadcrumb-link.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "current": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Boolean for the current link"
-        },
-        "attribute": "current",
-        "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,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Toggle the disabled state for the breadcrumb"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-}
-//# sourceMappingURL=sdds-breadcrumb-link.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-breadcrumb-link.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.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,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;QACvC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MAEjC,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,YAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,CACA,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-link',\n  styleUrl: 'sdds-breadcrumb-link.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbLink {\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      <div\n        role=\"listitem\"\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 name=\"label\"></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"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,36 +0,0 @@
-import itemReadme from './sdds-breadcrumb-link/readme.md';
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Breadcrumb',
-  parameters: {
-    notes: { 'Breadcumb': readme, 'Breadcumb Link': itemReadme },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-};
-const Template = () => formatHtmlPreview(`   
-      <sdds-breadcrumb>
-        <sdds-breadcrumb-link href="#">
-          <div slot="label">Page 1</div>
-        </sdds-breadcrumb-link>
-        <sdds-breadcrumb-link href="google.se">
-          <div slot="label">Page 2</div>
-        </sdds-breadcrumb-link>
-        <sdds-breadcrumb-link current>
-          <div slot="label">Page 3</div>
-        </sdds-breadcrumb-link>
-      </sdds-breadcrumb>
-      `);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-breadcrumb.stories.js.map

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

@@ -1 +0,0 @@
-{"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-link/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 Link': 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-link href=\"#\">\n          <div slot=\"label\">Page 1</div>\n        </sdds-breadcrumb-link>\n        <sdds-breadcrumb-link href=\"google.se\">\n          <div slot=\"label\">Page 2</div>\n        </sdds-breadcrumb-link>\n        <sdds-breadcrumb-link current>\n          <div slot=\"label\">Page 3</div>\n        </sdds-breadcrumb-link>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,156 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class SddsButton {
-  constructor() {
-    this.text = '';
-    this.type = 'primary';
-    this.size = 'lg';
-    this.disabled = false;
-    this.fullbleed = false;
-    this.modeVariant = null;
-    this.onlyIcon = false;
-  }
-  componentWillLoad() {
-    if (this.text === '') {
-      this.onlyIcon = true;
-      this.host.setAttribute('only-icon', '');
-    }
-  }
-  render() {
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { class: `sdds-btn sdds-btn-${this.type} 
-        ${`sdds-btn-${this.size}`}
-        ${this.disabled ? 'disabled' : ''}
-        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}
-        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, h("span", { class: "sdds-btn-text" }, this.text), h("slot", { name: "icon" }))));
-  }
-  static get is() { return "sdds-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text inside a button"
-        },
-        "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary' | 'ghost' | 'danger'",
-          "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of button"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xs' | 'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Control for disabled state of component"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "fullbleed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When enabled, makes button take 100% width"
-        },
-        "attribute": "fullbleed",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the mode variant of the the button."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "onlyIcon": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}
-//# sourceMappingURL=button-component.js.map

package/dist/collection/components/button/button-component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-component.js","sourceRoot":"","sources":["../../../src/components/button/button-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQzE,MAAM,OAAO,UAAU;;gBAGE,EAAE;gBAGoC,SAAS;gBAE5B,IAAI;oBAGlB,KAAK;qBAGJ,KAAK;uBAGa,IAAI;oBAEtB,KAAK;;EAIlC,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MACzF,cACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI;UACnC,YAAY,IAAI,CAAC,IAAI,EAAE;UACvB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UAC1C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE;QAE7C,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ;QAC9C,YAAM,IAAI,EAAC,MAAM,GAAG,CACb,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class SddsButton {\n  // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n  /** Text inside a button */\n  @Prop() text: string = '';\n\n  /** Type of button */\n  @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Control for disabled state of component */\n  @Prop() disabled: boolean = false;\n\n  /** When enabled, makes button take 100% width */\n  @Prop() fullbleed: boolean = false;\n\n  /** Set the mode variant of the the button. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() onlyIcon: boolean = false;\n\n  @Element() host: HostElement;\n\n  componentWillLoad() {\n    if (this.text === '') {\n      this.onlyIcon = true;\n      this.host.setAttribute('only-icon', '');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n      <button\n        class={`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled ? 'disabled' : ''}\n        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n      >\n        <span class=\"sdds-btn-text\">{this.text}</span>\n        <slot name=\"icon\" />\n      </button>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"button-native.stories.js","sourceRoot":"","sources":["../../../src/components/button/button-native.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE;MACT,eAAe,EAAE,KAAK,EAAE,yCAAyC;KAClE;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,iHAAiH;MAC9H,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;OACrC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,8CAA8C;MAC3D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE;KACvC;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,mCAAmC;MAChD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,EAAE;KACnC;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,+DAA+D;MAC5E,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,EAAE;KACxC;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,6EAA6E;MAC1F,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;MACD,OAAO,EAAE,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC;MAChC,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,EAAE;KACxC;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,0DAA0D;MACvE,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;MACpC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;OACpC;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,EAAE;KACxC;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,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,EACtB,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,GAAG,EAAE,GACd,EAAE,EAAE;EACH,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;EACtD,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;EACpD,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;GACjB,CAAC;EACF,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,IAAI;IACb,aAAa,EAAE,IAAI;GACpB,CAAC;EAEF,MAAM,iBAAiB,GAAG;IACxB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;GACvB,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;MAIE,IAAI,IAAI,QAAQ,KAAK,QAAQ;IAC3B,CAAC,CAAC;;mBAES,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;MAC3C;IACE,CAAC,CAAC,EACN;;;;;;mCAM+B,aAAa,CAAC,OAAO,CAAC,IACnD,WAAW,KAAK,qBAAqB;IACnC,CAAC,CAAC,qBAAqB,iBAAiB,CAAC,WAAW,CAAC,EAAE;IACvD,CAAC,CAAC,EACN,aAAa,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,WAAW;KACpF,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;IACrC,CAAC,QAAQ,CAAC,CAAC,CAAC,+BAA+B,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;IAE7D,QAAQ,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM,CAAC;IACnC,CAAC,CAAC;MAEF,QAAQ,KAAK,QAAQ;MACnB,CAAC,CAAC,qCAAqC,IAAI,QAAQ;MACnD,CAAC,CAAC,2CACE,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MACvC,WAAW,IAAI,gBACrB;GACD;IACG,CAAC,CAAC,EACN;;;GAGC,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;AAEjB,MAAM,CAAC,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,cAAc,CAAC,IAAI,GAAG;EACpB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtD,cAAc,CAAC,IAAI,GAAG;EACpB,IAAI,EAAE,EAAE;EACR,QAAQ,EAAE,IAAI;EACd,IAAI,EAAE,OAAO;CACd,CAAC","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"]}