@scania/tegel 0.0.2 → 0.0.5

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

@@ -1,73 +1,70 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Badge',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    hidden: {
-      name: 'Hidden',
-      description: 'Toggle visibility of badge',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-    value: {
-      name: 'Value',
-      description: 'Set a value to show on the badge',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'size', neq: 'sm' },
-      table: {
-        defaultValue: { summary: null },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Size of the component',
-      options: {
-        Large: 'lg',
-        Small: 'sm',
-      },
-      control: {
-        type: 'radio',
-      },
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-  },
-  args: {
-    hidden: false,
-    size: 'lg',
-    value: 1,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Badge',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: {
+        Large: 'lg',
+        Small: 'sm',
+      },
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    value: {
+      name: 'Value',
+      description: 'Sets a value to show on the badge.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'size', neq: 'sm' },
+    },
+    hidden: {
+      name: 'Hidden',
+      description: 'Toggles visibility of the badge.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    size: 'lg',
+    value: 1,
+    hidden: false,
+  },
+};
 const Template = ({ value, size, hidden }) => formatHtmlPreview(`
     <sdds-badges
       ${value ? `value="${value}"` : ''}
       ${hidden ? 'hidden' : ''}
       size="${size}">
-    </sdds-badges>`);
-export const Default = Template.bind({});
+    </sdds-badges>`);
+export const Default = Template.bind({});
 const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
     <style>
     /* Note: Demo classes used here are just for demo purposes in Storybook */
@@ -98,5 +95,6 @@ const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
         is-visible=${visible}
         size="${size}">
       </sdds-badges>
-    </div>`);
-export const WithDemoComponent = WithDemoTemplate.bind({});
+    </div>`);
+export const WithDemoComponent = WithDemoTemplate.bind({});
+//# sourceMappingURL=badge.stories.js.map

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

@@ -0,0 +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;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/badge/badges.js

@@ -1,147 +1,148 @@
-import { h } from '@stencil/core';
-export class SddsBadges {
-  constructor() {
-    this.value = '';
-    this.hidden = false;
-    this.isSmall = false;
-    this.size = 'lg';
-    this.shape = '';
-    this.text = '';
-  }
-  watchProps() {
-    this.checkProps();
-  }
-  componentWillLoad() {
-    this.checkProps();
-    if (this.isSmall) {
-      this.size = 'sm';
-      console.warn('Prop isSmall is deprecated. Use size"small" instead');
-    }
-  }
-  checkProps() {
-    const valueAsNumber = parseInt(this.value);
-    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
-      this.size = 'lg';
-      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
-    }
-    else {
-      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      this.value !== '' && this.size !== 'sm'
-        ? console.warn('The provided value is either empty or string, please provide value as number.')
-        : '';
-    }
-  }
-  render() {
-    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, h("div", { class: "sdds-badges-text" }, this.text)));
-  }
-  static get is() { return "sdds-badges"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["badges.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["badges.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value shown in badge"
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "hidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Changes visibility of badge"
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isSmall": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use size prop instead. Changes badge from large to small size"
-            }],
-          "text": ""
-        },
-        "attribute": "is-small",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'lg' | 'sm'",
-          "resolved": "\"lg\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets component size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "shape": {},
-      "text": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "watchProps"
-      }, {
-        "propName": "isSmall",
-        "methodName": "watchProps"
-      }, {
-        "propName": "size",
-        "methodName": "watchProps"
-      }];
-  }
-}
+import { h } from '@stencil/core';
+export class SddsBadges {
+  constructor() {
+    this.value = '';
+    this.hidden = false;
+    this.isSmall = false;
+    this.size = 'lg';
+    this.shape = '';
+    this.text = '';
+  }
+  watchProps() {
+    this.checkProps();
+  }
+  componentWillLoad() {
+    this.checkProps();
+    if (this.isSmall) {
+      this.size = 'sm';
+      console.warn('Prop isSmall is deprecated. Use size"small" instead');
+    }
+  }
+  checkProps() {
+    const valueAsNumber = parseInt(this.value);
+    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
+      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
+      this.size = 'lg';
+      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+    }
+    else {
+      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+      this.value !== '' && this.size !== 'sm'
+        ? console.warn('The provided value is either empty or string, please provide value as number.')
+        : '';
+    }
+  }
+  render() {
+    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, h("div", { class: "sdds-badges-text" }, this.text)));
+  }
+  static get is() { return "sdds-badges"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["badges.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["badges.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value shown in badge"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Changes visibility of badge"
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isSmall": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use size prop instead. Changes badge from large to small size"
+            }],
+          "text": ""
+        },
+        "attribute": "is-small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'lg' | 'sm'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets component size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "shape": {},
+      "text": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchProps"
+      }, {
+        "propName": "isSmall",
+        "methodName": "watchProps"
+      }, {
+        "propName": "size",
+        "methodName": "watchProps"
+      }];
+  }
+}
+//# sourceMappingURL=badges.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badges.js","sourceRoot":"","sources":["../../../src/components/badge/badges.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,UAAU;;iBAEG,EAAE;kBAIA,KAAK;mBAGJ,KAAK;gBAGJ,IAAI;iBAEP,EAAE;gBAEH,EAAE;;EAK1B,UAAU;IACR,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;KACrE;EACH,CAAC;EAED,UAAU;IACR,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;MACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;MAC7D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;KACrF;SAAM;MACL,2FAA2F;MAC3F,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;QACrC,CAAC,CAAC,OAAO,CAAC,IAAI,CACV,+EAA+E,CAChF;QACH,CAAC,CAAC,EAAE,CAAC;KACR;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC/C,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE;MAE7C,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-badges',\n  styleUrl: 'badges.scss',\n  shadow: true,\n})\nexport class SddsBadges {\n  /** Value shown in badge */\n  @Prop() value: string = '';\n  // TODO: Make upper prop accepts numbers too ?\n\n  /** Changes visibility of badge */\n  @Prop() hidden: boolean = false;\n\n  /** @deprecated Use size prop instead. Changes badge from large to small size */\n  @Prop() isSmall: boolean = false;\n\n  /** Sets component size. */\n  @Prop() size: 'lg' | 'sm' = 'lg';\n\n  @State() shape: string = '';\n\n  @State() text: string = '';\n\n  @Watch('value')\n  @Watch('isSmall')\n  @Watch('size')\n  watchProps() {\n    this.checkProps();\n  }\n\n  componentWillLoad() {\n    this.checkProps();\n    if (this.isSmall) {\n      this.size = 'sm';\n      console.warn('Prop isSmall is deprecated. Use size\"small\" instead');\n    }\n  }\n\n  checkProps() {\n    const valueAsNumber = parseInt(this.value);\n    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {\n      this.shape = this.value.toString().length >= 2 ? 'pill' : '';\n      this.size = 'lg';\n      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();\n    } else {\n      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions\n      this.value !== '' && this.size !== 'sm'\n        ? console.warn(\n            'The provided value is either empty or string, please provide value as number.',\n          )\n        : '';\n    }\n  }\n\n  render() {\n    return (\n      <host\n        class={`sdds-badges sdds-badges-${this.size} ${\n          this.shape === 'pill' ? 'sdds-badges-pill' : ''\n        } ${this.hidden ? 'sdds-badges-hidden' : ''}`}\n      >\n        <div class=\"sdds-badges-text\">{this.text}</div>\n      </host>\n    );\n  }\n}\n"]}

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

@@ -1,83 +1,83 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Banner',
-  parameters: {
-    layout: 'fullscreen',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    state: {
-      name: 'Type',
-      description: 'Changes type of component',
-      options: ['Default', 'Error', 'Info'],
-      control: {
-        type: 'radio',
-      },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Text to display in header section',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Text to display in subheader section',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Text to display in link section',
-      control: {
-        type: 'text',
-      },
-    },
-    hideIcon: {
-      name: 'Hide icon',
-      description: 'If an icon should be displayed. For type default the truck icon is used in this example, but it should be changed to suit your needs.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-  args: {
-    state: 'Default',
-    header: 'This is a header text area',
-    subheader: 'SubHeader text area',
-    link: 'Learn more',
-    hideIcon: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Banner',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    state: {
+      name: 'Type',
+      description: 'Changes the type of the component.',
+      options: ['Default', 'Error', 'Info'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Sets text to be displayed in the header section.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Sets text to be displayed in the subheader section.',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Sets text to be displayed in the link section.',
+      control: {
+        type: 'text',
+      },
+    },
+    hideIcon: {
+      name: 'Hide icon',
+      description: 'Controls if an icon should be displayed. The truck icon is used here as an example, but it should be changed to suit your needs.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    state: 'Default',
+    header: 'This is a header text area',
+    subheader: 'SubHeader text area',
+    link: 'Learn more',
+    hideIcon: false,
+  },
+};
 const Template = ({ state, hideIcon, header, subheader, link }) => formatHtmlPreview(`
     <div class="sdds-banner sdds-banner-${state.toLowerCase()}">
-      ${!hideIcon && state === 'error'
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="error" size="20px"></sdds-icon></span>'
+      ${!hideIcon && state === 'error'
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="error" size="20px"></sdds-icon></span>'
   : ''}
-      ${!hideIcon && state === 'info'
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="info" size="20px"></sdds-icon></span>'
+      ${!hideIcon && state === 'info'
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="info" size="20px"></sdds-icon></span>'
   : ''}
-      ${!hideIcon && !(state === 'info' || state === 'error')
-  ? '<span class="sdds-banner-prefix"><sdds-icon name="truck" size="20px"></sdds-icon></span>'
+      ${!hideIcon && !(state === 'info' || state === 'error')
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="truck" size="20px"></sdds-icon></span>'
   : ''}
       <div class="sdds-banner-body">
       ${header && `<h6 class="sdds-banner-header">${header}</h6>`}
@@ -88,5 +88,6 @@ const Template = ({ state, hideIcon, header, subheader, link }) => formatHtmlPre
         <sdds-icon name="cross" size="20px"></sdds-icon>
       </button>
     </div>
-  `);
-export const Native = Template.bind({});
+  `);
+export const Native = Template.bind({});
+//# sourceMappingURL=banner.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,4GAA4G;OAClH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,4GAA4G;OAClH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;OACrC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,qDAAqD;MAClE,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EACT,kIAAkI;MACpI,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,4BAA4B;IACpC,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAChE,iBAAiB,CAAC;0CACsB,KAAK,CAAC,WAAW,EAAE;QAErD,CAAC,QAAQ,IAAI,KAAK,KAAK,OAAO;EAC5B,CAAC,CAAC,0FAA0F;EAC5F,CAAC,CAAC,EACN;QAEE,CAAC,QAAQ,IAAI,KAAK,KAAK,MAAM;EAC3B,CAAC,CAAC,yFAAyF;EAC3F,CAAC,CAAC,EACN;QAEE,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,OAAO,CAAC;EACnD,CAAC,CAAC,0FAA0F;EAC5F,CAAC,CAAC,EACN;;QAEE,MAAM,IAAI,kCAAkC,MAAM,OAAO;QACzD,SAAS,IAAI,sCAAsC,SAAS,QAAQ;QACpE,IAAI,IAAI,yCAAyC,IAAI,MAAM;;;;;;GAMhE,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\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    state: {\n      name: 'Type',\n      description: 'Changes the type of the component.',\n      options: ['Default', 'Error', 'Info'],\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    link: {\n      name: 'Link',\n      description: 'Sets text to be displayed in the link section.',\n      control: {\n        type: 'text',\n      },\n    },\n    hideIcon: {\n      name: 'Hide icon',\n      description:\n        'Controls if an icon should be displayed. The truck icon is used here as an example, but it should be changed to suit your needs.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    state: 'Default',\n    header: 'This is a header text area',\n    subheader: 'SubHeader text area',\n    link: 'Learn more',\n    hideIcon: false,\n  },\n};\n\nconst Template = ({ state, hideIcon, header, subheader, link }) =>\n  formatHtmlPreview(`\n    <div class=\"sdds-banner sdds-banner-${state.toLowerCase()}\">\n      ${\n        !hideIcon && state === 'error'\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"error\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      ${\n        !hideIcon && state === 'info'\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"info\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      ${\n        !hideIcon && !(state === 'info' || state === 'error')\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"truck\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      <div class=\"sdds-banner-body\">\n      ${header && `<h6 class=\"sdds-banner-header\">${header}</h6>`}\n      ${subheader && `<div class=\"sdds-banner-subheader\">${subheader}</div>`}\n      ${link && `<a class=\"sdds-link sdds-banner-link\">${link}</a>`}\n      </div>\n      <button type=\"button\" aria-label=\"close\" class=\"sdds-banner-close\">\n        <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n      </button>\n    </div>\n  `);\n\nexport const Native = Template.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;