@scania/tegel 0.0.4 → 0.0.5

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

@@ -1,11 +1,10 @@
 import { h, Host } from '@stencil/core';
 export class Accordion {
   constructor() {
-    this.divider = true;
     this.modeVariant = null;
   }
   render() {
-    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+    return (h(Host, { class: `sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
   }
   static get is() { return "sdds-accordion"; }
   static get encapsulation() { return "shadow"; }
@@ -21,24 +20,6 @@ export class Accordion {
   }
   static get properties() {
     return {
-      "divider": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable or disable divider lines between items"
-        },
-        "attribute": "divider",
-        "reflect": false,
-        "defaultValue": "true"
-      },
       "modeVariant": {
         "type": "string",
         "mutable": false,

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

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

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

@@ -33,7 +33,7 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
     disabled: {
@@ -43,7 +43,7 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
   },

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

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

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

@@ -40,9 +40,6 @@ export default {
         type: 'number',
       },
       if: { arg: 'size', neq: 'sm' },
-      table: {
-        defaultValue: { summary: null },
-      },
     },
     hidden: {
       name: 'Hidden',

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

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

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

@@ -76,6 +76,7 @@
   padding-top: 14px;
   background-color: transparent;
   border: none;
+  color: var(--sdds-banner-x-color);
 }
 :host .banner-close button:hover {
   cursor: pointer;

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: {
@@ -78,9 +78,6 @@ export default {
         type: 'select',
       },
       options: [...iconsNames, 'none'],
-      table: {
-        defaultValue: { summary: 'none' },
-      },
       if: { arg: 'type', eq: 'Default' },
     },
     persistent: {
@@ -90,7 +87,7 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
   },

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    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      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"]}

package/dist/collection/components/breadcrumb/{sdds-breadcrumb-item/sdds-breadcrumb-item.css → sdds-breadcrumb-link/sdds-breadcrumb-link.css}

@@ -1,34 +1,34 @@
 @charset "UTF-8";
-li {
+[role=listitem] {
   display: flex;
   align-items: center;
   color: var(--sdds-breadcrumb-color);
 }
-li a {
+[role=listitem] a {
   color: var(--sdds-breadcrumb-color);
   text-decoration: none;
 }
-li:hover {
+[role=listitem]:hover {
   cursor: pointer;
 }
-li:hover a {
+[role=listitem]:hover a {
   color: var(--sdds-breadcrumb-color-hover);
   text-decoration: underline;
 }
-li.disabled {
+[role=listitem].disabled {
   pointer-events: none;
 }
-li.disabled a, li.current a,
-li [aria-current=page] a {
+[role=listitem].disabled a, [role=listitem].current a,
+[role=listitem] [aria-current=page] a {
   cursor: default;
   color: var(--sdds-breadcrumb-color-disabled);
 }
-li.disabled:hover a, li.current:hover a,
-li [aria-current=page]:hover a {
+[role=listitem].disabled:hover a, [role=listitem].current:hover a,
+[role=listitem] [aria-current=page]:hover a {
   color: var(--sdds-breadcrumb-color-disabled);
   text-decoration: none;
 }
-li a::after {
+[role=listitem] a::after {
   content: "›";
   color: var(--sdds-breadcrumb-separator-color);
   margin-right: 4px;

package/dist/collection/components/breadcrumb/{sdds-breadcrumb-item/sdds-breadcrumb-item.js → sdds-breadcrumb-link/sdds-breadcrumb-link.js}

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-export class SddsBreadcrumbItem {
+export class SddsBreadcrumbLink {
   constructor() {
     this.current = false;
     this.href = undefined;
@@ -8,19 +8,19 @@ export class SddsBreadcrumbItem {
     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("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", null))));
   }
-  static get is() { return "sdds-breadcrumb-item"; }
+  static get is() { return "sdds-breadcrumb-link"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["sdds-breadcrumb-item.scss"]
+      "$": ["sdds-breadcrumb-link.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["sdds-breadcrumb-item.css"]
+      "$": ["sdds-breadcrumb-link.css"]
     };
   }
   static get properties() {
@@ -117,4 +117,4 @@ export class SddsBreadcrumbItem {
     };
   }
 }
-//# sourceMappingURL=sdds-breadcrumb-item.js.map
+//# sourceMappingURL=sdds-breadcrumb-link.js.map

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

@@ -0,0 +1 @@
+{"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,eAAa,CACX,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></slot>\n        </a>\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 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 Item': itemReadme },
+    notes: { 'Breadcumb': readme, 'Breadcumb Link': itemReadme },
     design: [
       {
         name: 'Figma',
@@ -20,9 +21,9 @@ 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-link href="#">Page 1</sdds-breadcrumb-link>
+        <sdds-breadcrumb-link href="google.se">Page 2</sdds-breadcrumb-link>
+        <sdds-breadcrumb-link current>Page 3</sdds-breadcrumb-link>
       </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;;;;;;OAMG,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=\"#\">Page 1</sdds-breadcrumb-link>\n        <sdds-breadcrumb-link href=\"google.se\">Page 2</sdds-breadcrumb-link>\n        <sdds-breadcrumb-link current>Page 3</sdds-breadcrumb-link>\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"]}