@scania/tegel 0.0.2 → 0.0.4

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

@@ -1,135 +1,136 @@
-import { Host, h } from '@stencil/core';
-export class SddsMessage {
-  constructor() {
-    this.getIconName = () => {
-      switch (this.type) {
-        case 'information':
-          return 'info';
-        case 'error':
-          return 'error';
-        case 'warning':
-          return 'warning';
-        case 'success':
-          return 'tick';
-        default:
-          return 'info';
-      }
-    };
-    this.header = undefined;
-    this.modeVariant = null;
-    this.type = 'information';
-    this.noIcon = false;
-    this.minimal = false;
-  }
-  render() {
+import { Host, h } from '@stencil/core';
+export class SddsMessage {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.header = undefined;
+    this.modeVariant = null;
+    this.type = 'information';
+    this.noIcon = false;
+    this.minimal = false;
+  }
+  render() {
     return (h(Host, null, h("div", { class: `
         message-wrapper ${this.type}
         ${this.minimal ? 'message-minimal' : ''}
-        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
-  }
-  static get is() { return "sdds-message"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-message.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-message.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header text for the component."
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant of the component, based on current mode."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'information' | 'error' | 'warning' | 'success'",
-          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of message."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'information'"
-      },
-      "noIcon": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Removes the icon in the message."
-        },
-        "attribute": "no-icon",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "minimal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Minimal message styling."
-        },
-        "attribute": "minimal",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
+  }
+  static get is() { return "sdds-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-message.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text for the component."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'information' | 'error' | 'warning' | 'success'",
+          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of message."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'information'"
+      },
+      "noIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the icon in the message."
+        },
+        "attribute": "no-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "minimal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimal message styling."
+        },
+        "attribute": "minimal",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-message.js","sourceRoot":"","sources":["../../../src/components/message/sdds-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;IAgBtB,gBAAW,GAAG,GAAG,EAAE;MACjB,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;IACH,CAAC,CAAC;;uBAxB6C,IAAI;gBAGa,aAAa;kBAGnD,KAAK;mBAGJ,KAAK;;EAiBhC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;0BACS,IAAI,CAAC,IAAI;UACzB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UACrC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;QAExE,CAAC,IAAI,CAAC,MAAM,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa;QAC9E,WAAK,KAAK,EAAE,iBAAiB;UAC1B,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,MAAM,CAAO;UAC9D,CAAC,IAAI,CAAC,OAAO,IAAI,CAChB,WAAK,KAAK,EAAC,0BAA0B;YACnC,eAAa,CACT,CACP,CACG,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-message',\n  styleUrl: 'sdds-message.scss',\n  shadow: true,\n})\nexport class SddsMessage {\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Type of message. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Removes the icon in the message. */\n  @Prop() noIcon: boolean = false;\n\n  /** Minimal message styling. */\n  @Prop() minimal: boolean = false;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`\n        message-wrapper ${this.type}\n        ${this.minimal ? 'message-minimal' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n        >\n          {!this.noIcon && <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>}\n          <div class={`message-content`}>\n            {this.header && <div class=\"message-header\">{this.header}</div>}\n            {!this.minimal && (\n              <div class=\"message-extended-message\">\n                <slot></slot>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,89 +1,89 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Message',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    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: {
-    messageType: {
-      name: 'Message Type',
-      description: 'The type of the message.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Error', 'Warning', 'Success'],
-      table: {
-        defaultValue: { summary: 'information' },
-      },
-    },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    header: {
-      name: 'Header',
-      description: 'Header for the message',
-      control: {
-        type: 'text',
-      },
-    },
-    extendedMessage: {
-      name: 'Extended message content',
-      control: {
-        type: 'text',
-      },
-    },
-    noIcon: {
-      name: 'No icon',
-      description: 'Hide the icon',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    minimal: {
-      name: 'Minimal',
-      description: 'Minimal message styling.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-  args: {
-    messageType: 'Information',
-    modeVariant: 'Inherit from parent',
-    header: 'Message header',
-    noIcon: false,
-    extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',
-    minimal: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Message',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    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: {
+    messageType: {
+      name: 'Message Type',
+      description: 'The type of the message.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Error', 'Warning', 'Success'],
+      table: {
+        defaultValue: { summary: 'information' },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'The mode variant of the component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Header for the message',
+      control: {
+        type: 'text',
+      },
+    },
+    extendedMessage: {
+      name: 'Extended message content',
+      control: {
+        type: 'text',
+      },
+    },
+    noIcon: {
+      name: 'No icon',
+      description: 'Hide the icon',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    minimal: {
+      name: 'Minimal',
+      description: 'Minimal message styling.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    messageType: 'Information',
+    modeVariant: 'Inherit from parent',
+    header: 'Message header',
+    noIcon: false,
+    extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',
+    minimal: false,
+  },
+};
 const Template = ({ messageType, noIcon, extendedMessage, modeVariant, header, minimal }) => formatHtmlPreview(`
     <style>
       .demo-wrapper {
@@ -102,5 +102,6 @@ const Template = ({ messageType, noIcon, extendedMessage, modeVariant, header, m
       ${extendedMessage}
       </sdds-message>
     </div>
-    `);
-export const WebComponent = Template.bind({});
+    `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-message.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-message.stories.js","sourceRoot":"","sources":["../../../src/components/message/sdds-message.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,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,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0BAA0B;MACvC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;OACzC;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,mCAAmC;MAChD,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,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,0BAA0B;MAChC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,eAAe;MAC5B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,0BAA0B;MACvC,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,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,qBAAqB;IAClC,MAAM,EAAE,gBAAgB;IACxB,MAAM,EAAE,KAAK;IACb,eAAe,EACb,iFAAiF;IACnF,OAAO,EAAE,KAAK;GACf;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAC1F,iBAAiB,CACf;;;;;;;;kBAQc,WAAW,CAAC,WAAW,EAAE;oBACvB,MAAM;YACd,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YACvB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;0BACV,WAAW,CAAC,WAAW,EAAE;YACvC,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAA,CAAC,CAAC,EAAE;;QAE7F,eAAe;;;KAGlB,CACF,CAAC;AAEJ,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/Message',\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=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    messageType: {\n      name: 'Message Type',\n      description: 'The type of the message.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Error', 'Warning', 'Success'],\n      table: {\n        defaultValue: { summary: 'information' },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The mode variant of the component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Header for the message',\n      control: {\n        type: 'text',\n      },\n    },\n    extendedMessage: {\n      name: 'Extended message content',\n      control: {\n        type: 'text',\n      },\n    },\n    noIcon: {\n      name: 'No icon',\n      description: 'Hide the icon',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    minimal: {\n      name: 'Minimal',\n      description: 'Minimal message styling.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    messageType: 'Information',\n    modeVariant: 'Inherit from parent',\n    header: 'Message header',\n    noIcon: false,\n    extendedMessage:\n      'Longer message text can be placed here. Longer message text can be placed here.',\n    minimal: false,\n  },\n};\n\nconst Template = ({ messageType, noIcon, extendedMessage, modeVariant, header, minimal }) =>\n  formatHtmlPreview(\n    `\n    <style>\n      .demo-wrapper {\n        width: 380px;\n      }\n    </style>\n    <div class=\"demo-wrapper\">\n      <sdds-message\n          type=\"${messageType.toLowerCase()}\"\n          header=\"${header}\"\n          ${noIcon ? 'no-icon' : ''}\n          ${minimal ? 'minimal' : ''}\n          mode-variant=\"${modeVariant.toLowerCase()}\"\n          ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"`: ''}\n      >\n      ${extendedMessage}\n      </sdds-message>\n    </div>\n    `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,74 +1,74 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Modal',
-  parameters: {
-    layout: 'fullscreen',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Size of modal',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
-    },
-    showModal: {
-      name: 'Show modal',
-      description: 'Toggle if the modal is displayed',
-      control: {
-        type: 'boolean',
-      },
-    },
-    actions: {
-      name: 'Actions',
-      description: 'Behaviour of modal actions',
-      control: {
-        type: 'radio',
-      },
-      options: ['Sticky', 'Static'],
-    },
-    headline: {
-      name: 'Modal headline',
-      description: 'Customize headline',
-      control: {
-        type: 'text',
-      },
-    },
-    bodyText: {
-      name: 'Modal body text',
-      description: 'Customize body text',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  args: {
-    headline: 'The buttons for the modal only works in the canvas tab',
-    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
-    actions: 'Static',
-    size: 'Large',
-    showModal: true,
-  },
-};
-const sizeLookUp = {
-  'Large': 'lg',
-  'Medium': 'md',
-  'Small': 'sm',
-  'Extra small': 'xs',
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Modal',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Size of modal',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+    },
+    showModal: {
+      name: 'Show modal',
+      description: 'Toggle if the modal is displayed',
+      control: {
+        type: 'boolean',
+      },
+    },
+    actions: {
+      name: 'Actions',
+      description: 'Behaviour of modal actions',
+      control: {
+        type: 'radio',
+      },
+      options: ['Sticky', 'Static'],
+    },
+    headline: {
+      name: 'Modal headline',
+      description: 'Customize headline',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyText: {
+      name: 'Modal body text',
+      description: 'Customize body text',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    headline: 'The buttons for the modal only works in the canvas tab',
+    bodyText: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
+    actions: 'Static',
+    size: 'Large',
+    showModal: true,
+  },
+};
+const sizeLookUp = {
+  'Large': 'lg',
+  'Medium': 'md',
+  'Small': 'sm',
+  'Extra small': 'xs',
+};
 const Template = ({ headline, bodyText, size, actions, showModal }) => formatHtmlPreview(`    <style>
   /* demo-wrapper and demo-styles is for demonstration purposes only*/
   .demo-wrapper {
@@ -124,6 +124,7 @@ const Template = ({ headline, bodyText, size, actions, showModal }) => formatHtm
     modal.classList.replace('hide', 'show')
   })
   </script>
-  `);
-export const Native = Template.bind({});
-Native.args = {};
+  `);
+export const Native = Template.bind({});
+Native.args = {};
+//# sourceMappingURL=modal-native.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal-native.stories.js","sourceRoot":"","sources":["../../../src/components/modal/modal-native.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,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,eAAe;MAC5B,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;KACrD;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;KAC9B;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,oBAAoB;MACjC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EACN,wNAAwN;IAC1N,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,SAAS,EAAE,IAAI;GAChB;CACF,CAAC;AAEF,MAAM,UAAU,GAAG;EACjB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CACpE,iBAAiB,CACf;;;;;;;;;;;;;;;;;;oDAkBgD,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;0CAEvE,UAAU,CAAC,IAAI,CACjB,wBAAwB,OAAO,CAAC,WAAW,EAAE;;4CAEP,QAAQ;;;;;;+CAML,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BpD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAExC,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Modal',\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=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Size of modal',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n    },\n    showModal: {\n      name: 'Show modal',\n      description: 'Toggle if the modal is displayed',\n      control: {\n        type: 'boolean',\n      },\n    },\n    actions: {\n      name: 'Actions',\n      description: 'Behaviour of modal actions',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Customize headline',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Customize body text',\n      control: {\n        type: 'text',\n      },\n    },\n  },\n  args: {\n    headline: 'The buttons for the modal only works in the canvas tab',\n    bodyText:\n      'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',\n    actions: 'Static',\n    size: 'Large',\n    showModal: true,\n  },\n};\n\nconst sizeLookUp = {\n  'Large': 'lg',\n  'Medium': 'md',\n  'Small': 'sm',\n  'Extra small': 'xs',\n};\n\nconst Template = ({ headline, bodyText, size, actions, showModal }) =>\n  formatHtmlPreview(\n    `    <style>\n  /* demo-wrapper and demo-styles is for demonstration purposes only*/\n  .demo-wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n    height: 100vh;\n  }\n  .demo-styles {\n    position: absolute;\n    margin-bottom: 20px;\n  }\n  </style>\n\n  <div class=\"demo-wrapper\">\n    <button id=\"modal-button\" class=\"sdds-btn sdds-btn-primary sdds-btn-lg\">\n      <span class=\"sdds-btn-text\">Open modal</span>\n    </button>\n    <div id=\"my-modal\" class=\"sdds-modal-backdrop ${showModal ? 'show' : 'hide'} demo-styles\">\n      <div class=\"sdds-modal sdds-modal-${\n        sizeLookUp[size]\n      } sdds-modal__actions-${actions.toLowerCase()}\">\n        <div class=\"sdds-modal-header\">\n          <h5 class=\"sdds-modal-headline\">${headline}</h5>\n          <button class=\"sdds-modal-close\" aria-label=\"close\">\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n          <div class=\"sdds-modal-body\">\n            <p class=\"sdds-u-mb0 sdds-u-mt0\">${bodyText}</p>\n          </div>\n          <div class=\"sdds-modal-actions\">\n              <button class=\"sdds-btn sdds-btn-primary sdds-btn-md\">Save</button>\n              <button class=\"sdds-btn sdds-btn-secondary sdds-btn-md\">Cancel</button>\n          </div>\n      </div>\n    </div>\n  </div>\n\n  <script>\n  /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  modal = document.getElementById('my-modal');\n  buttons = modal.getElementsByTagName('button');\n  for (const button of buttons) {\n    button.addEventListener('click', () => {\n      modal.classList.replace('show', 'hide')\n    })\n  }\n\n  document.getElementsByClassName('sdds-modal-close')[0].addEventListener('click', () => {\n    modal.classList.replace('show', 'hide');\n  })\n\n  document.getElementById('modal-button').addEventListener('click', () => {\n    modal.classList.replace('hide', 'show')\n  })\n  </script>\n  `,\n  );\n\nexport const Native = Template.bind({});\n\nNative.args = {};\n"]}