@scania/tegel 0.0.51 → 0.0.61

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

@@ -1,122 +1,69 @@
-import { h } from '@stencil/core';
-export class SddsLink {
-  constructor() {
-    this.href = undefined;
-    this.target = '_self';
-    this.disabled = false;
-    this.underline = true;
-    this.rel = 'noopener';
-  }
-  render() {
-    return (h("a", { class: `
-        ${this.disabled ? 'disabled' : ''}
-        ${this.underline ? '' : 'no-underline'}
-        
-        `, href: this.href, target: this.target, rel: this.rel }, h("slot", null)));
-  }
-  static get is() { return "sdds-link"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-link.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-link.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "URL 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'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disables the link"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "underline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Displays the link with an underline."
-        },
-        "attribute": "underline",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "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'"
-      }
-    };
-  }
-}
-//# sourceMappingURL=sdds-link.js.map
+import { h } from '@stencil/core';
+export class SddsLink {
+  constructor() {
+    this.disabled = false;
+    this.underline = true;
+  }
+  connectedCallback() {
+    this.host.children[0].classList.add('sdds-link-component');
+  }
+  render() {
+    return (h("div", { class: `
+          ${this.disabled ? 'disabled' : ''}
+          ${!this.underline ? 'no-underline' : ''}
+          ` }, h("slot", null)));
+  }
+  static get is() { return "sdds-link"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the link"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "underline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays the link with an underline."
+        },
+        "attribute": "underline",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-link.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-link.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,OAAO,CACL,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG;MAEb,eAAa,CACX,CACL,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL 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  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\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  render() {\n    return (\n      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-link.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQ5D,MAAM,OAAO,QAAQ;;oBAES,KAAK;qBAGJ,IAAI;;EAIjC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;EAC7D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;YACH,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC/B,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;WACtC;MAEH,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  @Element() host: HostElement;\n\n  connectedCallback() {\n    this.host.children[0].classList.add('sdds-link-component');\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n          ${this.disabled ? 'disabled' : ''}\n          ${!this.underline ? 'no-underline' : ''}\n          `}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,71 +1,57 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Link',
-  parameters: {
-    notes: readme,
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    underline: {
-      name: 'Underline',
-      description: 'Adds an underline under the link text.',
-      controls: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-    target: {
-      name: 'Target',
-      description: 'Sets where to open the linked URL.',
-      control: {
-        type: 'radio',
-      },
-      options: ['_self', '_blank', '_parent', '_top'],
-      table: {
-        defaultValue: { summary: '_self' },
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the link.',
-      controls: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    underline: true,
-    target: '_self',
-    disabled: false,
-  },
-};
-const Template = ({ underline, target, disabled }) => formatHtmlPreview(`
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Link',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    underline: {
+      name: 'Underline',
+      description: 'Adds an underline under the link text.',
+      controls: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the link.',
+      controls: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    underline: true,
+    disabled: false,
+  },
+};
+const Template = ({ underline, disabled }) => formatHtmlPreview(`
     <sdds-link
         ${disabled ? 'disabled' : ''}
         ${underline ? '' : 'underline="false"'}
-        href="#"
-        target="${target}"
         >
-        This is a link.
+        <a href="#">This is a link.</a>
     </sdds-link>
-  `);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-link.stories.js.map
+  `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-link.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-link.stories.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;MAC/C,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,oBAAoB;MACjC,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,OAAO;IACf,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CACnD,iBAAiB,CACf;;UAEM,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;kBAE5B,MAAM;;;;GAIrB,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Link',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    underline: {\n      name: 'Underline',\n      description: 'Adds an underline under the link text.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    target: {\n      name: '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    disabled: {\n      name: 'Disabled',\n      description: 'Disables the link.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    underline: true,\n    target: '_self',\n    disabled: false,\n  },\n};\n\nconst Template = ({ underline, target, disabled }) =>\n  formatHtmlPreview(\n    `\n    <sdds-link\n        ${disabled ? 'disabled' : ''}\n        ${underline ? '' : 'underline=\"false\"'}\n        href=\"#\"\n        target=\"${target}\"\n        >\n        This is a link.\n    </sdds-link>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-link.stories.js","sourceRoot":"","sources":["../../../src/components/link/sdds-link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,oBAAoB;MACjC,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CACf;;UAEM,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;;;GAI3C,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Link',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    underline: {\n      name: 'Underline',\n      description: 'Adds an underline under the link text.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the link.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    underline: true,\n    disabled: false,\n  },\n};\n\nconst Template = ({ underline, disabled }) =>\n  formatHtmlPreview(\n    `\n    <sdds-link\n        ${disabled ? 'disabled' : ''}\n        ${underline ? '' : 'underline=\"false\"'}\n        >\n        <a href=\"#\">This is a link.</a>\n    </sdds-link>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,101 +1,101 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Message',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-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' },
-      },
-    },
-    messageType: {
-      name: 'Message type',
-      description: 'Changes the type of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Error', 'Warning', 'Success'],
-      table: {
-        defaultValue: { summary: 'Information' },
-      },
-    },
-    showExtendedMessage: {
-      name: 'Extended message',
-      description: 'Shows an extended message.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: true },
-      },
-    },
-    noIcon: {
-      name: 'No icon',
-      description: 'Hides the icon.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      if: { arg: 'icon', eq: true },
-      table: {
-        defaultValue: { summary: 'Web Component' },
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    messageType: 'Information',
-    showExtendedMessage: true,
-    noIcon: false,
-    iconType: 'Web Component',
-  },
-};
-const nativeIconNameLookup = {
-  Information: 'info',
-  Error: 'error',
-  Warning: 'warning',
-  Success: 'tick',
-};
-const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconType }) => {
-  const messageTypeClass = messageType === 'Information'
-    ? 'sdds-message-type-informative'
-    : `sdds-message-type-${messageType.toLowerCase()}`;
-  const iconClass = messageType === 'Information'
-    ? 'sdds-message-icon-informative'
-    : `sdds-message-icon-${messageType.toLowerCase()}`;
-  const iconHtml = iconType === 'Native'
-    ? `<i class="sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}"></i>`
-    : `<div><sdds-icon class="sdds-message-icon ${iconClass}" name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Message',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-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' },
+      },
+    },
+    messageType: {
+      name: 'Message type',
+      description: 'Changes the type of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Error', 'Warning', 'Success'],
+      table: {
+        defaultValue: { summary: 'Information' },
+      },
+    },
+    showExtendedMessage: {
+      name: 'Extended message',
+      description: 'Shows an extended message.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
+    noIcon: {
+      name: 'No icon',
+      description: 'Hides the icon.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Switch between showing a native or a web component icon.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', eq: true },
+      table: {
+        defaultValue: { summary: 'Web Component' },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    messageType: 'Information',
+    showExtendedMessage: true,
+    noIcon: false,
+    iconType: 'Web Component',
+  },
+};
+const nativeIconNameLookup = {
+  Information: 'info',
+  Error: 'error',
+  Warning: 'warning',
+  Success: 'tick',
+};
+const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconType }) => {
+  const messageTypeClass = messageType === 'Information'
+    ? 'sdds-message-type-informative'
+    : `sdds-message-type-${messageType.toLowerCase()}`;
+  const iconClass = messageType === 'Information'
+    ? 'sdds-message-icon-informative'
+    : `sdds-message-icon-${messageType.toLowerCase()}`;
+  const iconHtml = iconType === 'Native'
+    ? `<i class="sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}"></i>`
+    : `<div class="sdds-message-icon ${iconClass}"><sdds-icon name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
   return formatHtmlPreview(`
     <style>
       .demo-wrapper {
@@ -103,25 +103,27 @@ const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconT
       }
     </style>
 
-    ${iconType === 'Native'
+    ${iconType === 'Native'
     ? `<style>
     /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
     @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
-    </style>`
+    </style>`
     : ''}
     <div class="demo-wrapper">
       <div class="sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${showExtendedMessage ? 'sdds-message-extended-active' : ''} 
-      ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
+      ${modeVariant === 'Inherit from parent'
+    ? ''
+    : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
       ${noIcon ? '' : iconHtml}
       <h4 class="sdds-message-single">
         Single line message goes here.
       </h4>
-      ${showExtendedMessage
-    ? '<p class="sdds-message-extended">Longer message text can be placed here. Longer message text can be placed here.</p>'
+      ${showExtendedMessage
+    ? '<p class="sdds-message-extended">Longer message text can be placed here. Longer message text can be placed here.</p>'
     : ''}
     </div>
   </div>
-  `);
-};
-export const Native = Template.bind({});
-//# sourceMappingURL=message.stories.js.map
+  `);
+};
+export const Native = Template.bind({});
+//# sourceMappingURL=message.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"message.stories.js","sourceRoot":"","sources":["../../../src/components/message/message.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Message',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-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    messageType: {\n      name: 'Message type',\n      description: 'Changes the type of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Error', 'Warning', 'Success'],\n      table: {\n        defaultValue: { summary: 'Information' },\n      },\n    },\n    showExtendedMessage: {\n      name: 'Extended message',\n      description: 'Shows an extended message.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    noIcon: {\n      name: 'No icon',\n      description: 'Hides the icon.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\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      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Web Component' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    messageType: 'Information',\n    showExtendedMessage: true,\n    noIcon: false,\n    iconType: 'Web Component',\n  },\n};\n\nconst nativeIconNameLookup = {\n  Information: 'info',\n  Error: 'error',\n  Warning: 'warning',\n  Success: 'tick',\n};\n\nconst Template = ({ \n  modeVariant, \n  messageType, \n  showExtendedMessage, \n  noIcon, \n  iconType \n}) => {\n  const messageTypeClass =\n    messageType === 'Information'\n      ? 'sdds-message-type-informative'\n      : `sdds-message-type-${messageType.toLowerCase()}`;\n  const iconClass =\n    messageType === 'Information'\n      ? 'sdds-message-icon-informative'\n      : `sdds-message-icon-${messageType.toLowerCase()}`;\n  const iconHtml =\n    iconType === 'Native'\n      ? `<i class=\"sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}\"></i>`\n      : `<div><sdds-icon class=\"sdds-message-icon ${iconClass}\" name=\"${nativeIconNameLookup[messageType]}\" size=\"20\"></sdds-icon></div>`;\n\n  return formatHtmlPreview(\n    `\n    <style>\n      .demo-wrapper {\n        width: 380px;\n      }\n    </style>\n\n    ${\n      iconType === 'Native'\n        ? `<style>\n    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    </style>`\n        : ''\n    }\n    <div class=\"demo-wrapper\">\n      <div class=\"sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${\n        showExtendedMessage ? 'sdds-message-extended-active' : ''\n      } \n      ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}\">\n      ${noIcon ? '' : iconHtml}\n      <h4 class=\"sdds-message-single\">\n        Single line message goes here.\n      </h4>\n      ${\n        showExtendedMessage\n          ? '<p class=\"sdds-message-extended\">Longer message text can be placed here. Longer message text can be placed here.</p>'\n          : ''\n      }\n    </div>\n  </div>\n  `,\n  );\n};\n\nexport const Native = Template.bind({});\n"]}
+{"version":3,"file":"message.stories.js","sourceRoot":"","sources":["../../../src/components/message/message.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Message',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        '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    messageType: {\n      name: 'Message type',\n      description: 'Changes the type of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Error', 'Warning', 'Success'],\n      table: {\n        defaultValue: { summary: 'Information' },\n      },\n    },\n    showExtendedMessage: {\n      name: 'Extended message',\n      description: 'Shows an extended message.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    noIcon: {\n      name: 'No icon',\n      description: 'Hides the icon.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\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      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Web Component' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    messageType: 'Information',\n    showExtendedMessage: true,\n    noIcon: false,\n    iconType: 'Web Component',\n  },\n};\n\nconst nativeIconNameLookup = {\n  Information: 'info',\n  Error: 'error',\n  Warning: 'warning',\n  Success: 'tick',\n};\n\nconst Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconType }) => {\n  const messageTypeClass =\n    messageType === 'Information'\n      ? 'sdds-message-type-informative'\n      : `sdds-message-type-${messageType.toLowerCase()}`;\n  const iconClass =\n    messageType === 'Information'\n      ? 'sdds-message-icon-informative'\n      : `sdds-message-icon-${messageType.toLowerCase()}`;\n  const iconHtml =\n    iconType === 'Native'\n      ? `<i class=\"sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}\"></i>`\n      : `<div class=\"sdds-message-icon ${iconClass}\"><sdds-icon name=\"${nativeIconNameLookup[messageType]}\" size=\"20\"></sdds-icon></div>`;\n\n  return formatHtmlPreview(\n    `\n    <style>\n      .demo-wrapper {\n        width: 380px;\n      }\n    </style>\n\n    ${\n      iconType === 'Native'\n        ? `<style>\n    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    </style>`\n        : ''\n    }\n    <div class=\"demo-wrapper\">\n      <div class=\"sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${\n      showExtendedMessage ? 'sdds-message-extended-active' : ''\n    } \n      ${\n        modeVariant === 'Inherit from parent'\n          ? ''\n          : `sdds-mode-variant-${modeVariant.toLowerCase()}`\n      }\">\n      ${noIcon ? '' : iconHtml}\n      <h4 class=\"sdds-message-single\">\n        Single line message goes here.\n      </h4>\n      ${\n        showExtendedMessage\n          ? '<p class=\"sdds-message-extended\">Longer message text can be placed here. Longer message text can be placed here.</p>'\n          : ''\n      }\n    </div>\n  </div>\n  `,\n  );\n};\n\nexport const Native = Template.bind({});\n"]}