@scania/tegel 0.0.4 → 0.0.6

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

@@ -19,52 +19,38 @@ export default {
     ],
   },
   argTypes: {
-    disabled: {
-      name: 'Disabled',
-      description: 'Display link in disabled state',
-      controls: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
     underline: {
       name: 'Underline',
-      description: 'Underline under link text.',
+      description: 'Adds an underline under the link text.',
       controls: {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'true' },
+        defaultValue: { summary: true },
       },
     },
-    target: {
-      name: 'Target',
-      description: 'Where to open the linked URL.',
-      control: {
-        type: 'radio',
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the link.',
+      controls: {
+        type: 'boolean',
       },
-      options: ['_self', '_blank', '_parent', '_top'],
       table: {
-        defaultValue: { summary: '_self' },
+        defaultValue: { summary: false },
       },
     },
   },
   args: {
-    disabled: false,
     underline: true,
-    target: '_self',
+    disabled: false,
   },
 };
-const Template = ({ disabled, underline, target }) => formatHtmlPreview(`
+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({});

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,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,gCAAgC;MAC7C,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,4BAA4B;MACzC,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;OAClC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,+BAA+B;MAC5C,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;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,OAAO;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,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    disabled: {\n      name: 'Disabled',\n      description: 'Display link in disabled state',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    underline: {\n      name: 'Underline',\n      description: 'Underline under link text.',\n      controls: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'true' },\n      },\n    },\n    target: {\n      name: 'Target',\n      description: '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  },\n  args: {\n    disabled: false,\n    underline: true,\n    target: '_self',\n  },\n};\n\nconst Template = ({ disabled, underline, target }) =>\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

@@ -17,55 +17,67 @@ export default {
     ],
   },
   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: 'The type of the message.',
+      name: 'Message type',
+      description: 'Changes the type of the component.',
       control: {
         type: 'radio',
       },
       options: ['Information', 'Error', 'Warning', 'Success'],
+      table: {
+        defaultValue: { summary: 'Information' },
+      },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
+    showExtendedMessage: {
+      name: 'Extended message',
+      description: 'Shows an extended message.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        defaultValue: { summary: true },
       },
     },
-    icon: {
-      name: 'Icon',
-      description: 'Show icon',
+    noIcon: {
+      name: 'No icon',
+      description: 'Hides the icon.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
     iconType: {
-      name: 'Icon',
-      description: 'Switch between show a native/web component icon.',
+      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 },
-    },
-    showExtendedMessage: {
-      name: 'Extended Message',
-      description: 'Show an extended message',
-      control: {
-        type: 'boolean',
+      table: {
+        defaultValue: { summary: 'Web Component' },
       },
     },
   },
   args: {
-    messageType: 'Information',
     modeVariant: 'Inherit from parent',
-    icon: false,
+    messageType: 'Information',
+    showExtendedMessage: true,
+    noIcon: false,
     iconType: 'Web Component',
-    showExtendedMessage: false,
   },
 };
 const nativeIconNameLookup = {
@@ -74,7 +86,7 @@ const nativeIconNameLookup = {
   Warning: 'warning',
   Success: 'tick',
 };
-const Template = ({ messageType, icon, iconType, showExtendedMessage, modeVariant }) => {
+const Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconType }) => {
   const messageTypeClass = messageType === 'Information'
     ? 'sdds-message-type-informative'
     : `sdds-message-type-${messageType.toLowerCase()}`;
@@ -83,8 +95,13 @@ const Template = ({ messageType, icon, iconType, showExtendedMessage, modeVarian
     : `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>`;
+    : `<div class="sdds-message-icon ${iconClass}"><sdds-icon name="${nativeIconNameLookup[messageType]}" size="20"></sdds-icon></div>`;
   return formatHtmlPreview(`
+    <style>
+      .demo-wrapper {
+        width: 380px;
+      }
+    </style>
 
     ${iconType === 'Native'
     ? `<style>
@@ -92,16 +109,19 @@ const Template = ({ messageType, icon, iconType, showExtendedMessage, modeVarian
     @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
     </style>`
     : ''}
-
-    <div class="sdds-message ${messageTypeClass} ${icon ? 'sdds-message-icon-active' : ''} ${showExtendedMessage ? 'sdds-message-extended-active' : ''} 
-    ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}">
-    ${icon ? 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. Longer message text can be placed here.</p>'
+    <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()}`}">
+      ${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>'
     : ''}
+    </div>
   </div>
   `);
 };

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    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    },\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    icon: {\n      name: 'Icon',\n      description: 'Show icon',\n      control: {\n        type: 'boolean',\n      },\n    },\n    iconType: {\n      name: 'Icon',\n      description: 'Switch between show a native/web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'icon', eq: true },\n    },\n    showExtendedMessage: {\n      name: 'Extended Message',\n      description: 'Show an extended message',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    messageType: 'Information',\n    modeVariant: 'Inherit from parent',\n    icon: false,\n    iconType: 'Web Component',\n    showExtendedMessage: false,\n  },\n};\n\nconst nativeIconNameLookup = {\n  Information: 'info',\n  Error: 'error',\n  Warning: 'warning',\n  Success: 'tick',\n};\n\nconst Template = ({ messageType, icon, iconType, showExtendedMessage, modeVariant }) => {\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\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\n    <div class=\"sdds-message ${messageTypeClass} ${icon ? 'sdds-message-icon-active' : ''} ${\n      showExtendedMessage ? 'sdds-message-extended-active' : ''\n    } \n    ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}\">\n    ${icon ? 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. Longer message text can be placed here.</p>'\n        : ''\n    }\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"]}

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

@@ -19,72 +19,73 @@ export default {
     ],
   },
   argTypes: {
-    messageType: {
-      name: 'Message Type',
-      description: 'The type of the message.',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
         type: 'radio',
       },
-      options: ['Information', 'Error', 'Warning', 'Success'],
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'information' },
+        defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
+    messageType: {
+      name: 'Message type',
+      description: 'Changes the type of the component.',
       control: {
         type: 'radio',
       },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      options: ['Information', 'Error', 'Warning', 'Success'],
       table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        defaultValue: { summary: 'information' },
       },
     },
     header: {
       name: 'Header',
-      description: 'Header for the message',
+      description: 'Sets the header for the message.',
       control: {
         type: 'text',
       },
     },
     extendedMessage: {
       name: 'Extended message content',
+      description: 'Sets the content of an extended message.',
       control: {
         type: 'text',
       },
     },
-    noIcon: {
-      name: 'No icon',
-      description: 'Hide the icon',
+    minimal: {
+      name: 'Minimal',
+      description: 'Applies minimal message styling.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
-    minimal: {
-      name: 'Minimal',
-      description: 'Minimal message styling.',
+    noIcon: {
+      name: 'No icon',
+      description: 'Hides the icon.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
   },
   args: {
-    messageType: 'Information',
     modeVariant: 'Inherit from parent',
+    messageType: 'Information',
     header: 'Message header',
-    noIcon: false,
     extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',
     minimal: false,
+    noIcon: false,
   },
 };
-const Template = ({ messageType, noIcon, extendedMessage, modeVariant, header, minimal }) => formatHtmlPreview(`
+const Template = ({ modeVariant, messageType, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
     <style>
       .demo-wrapper {
         width: 380px;

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

@@ -1 +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"]}
+{"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,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,oCAAoC;MACjD,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,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,eAAe,EAAE;MACf,IAAI,EAAE,0BAA0B;MAChC,WAAW,EAAE,0CAA0C;MACvD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,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;IACD,MAAM,EAAE;MACN,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iBAAiB;MAC9B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,WAAW,EAAE,aAAa;IAC1B,MAAM,EAAE,gBAAgB;IACxB,eAAe,EAAE,iFAAiF;IAClG,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,OAAO,EACP,MAAM,EACP,EAAE,EAAE,CACH,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    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    header: {\n      name: 'Header',\n      description: 'Sets the header for the message.',\n      control: {\n        type: 'text',\n      },\n    },\n    extendedMessage: {\n      name: 'Extended message content',\n      description: 'Sets the content of an extended message.',\n      control: {\n        type: 'text',\n      },\n    },\n    minimal: {\n      name: 'Minimal',\n      description: 'Applies minimal message styling.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\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  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    messageType: 'Information',\n    header: 'Message header',\n    extendedMessage: 'Longer message text can be placed here. Longer message text can be placed here.',\n    minimal: false,\n    noIcon: false,\n  },\n};\n\nconst Template = ({ \n  modeVariant, \n  messageType, \n  header, \n  extendedMessage, \n  minimal, \n  noIcon\n}) =>\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

@@ -17,49 +17,58 @@ export default {
     ],
   },
   argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Size of modal',
+    actions: {
+      name: 'Actions',
+      description: 'Defines the behaviour 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',
+      options: ['Sticky', 'Static'],
+      table: {
+        defaultValue: { summary: 'Static' },
       },
     },
-    actions: {
-      name: 'Actions',
-      description: 'Behaviour of modal actions',
+    size: {
+      name: 'Size',
+      description: 'Sets the size of modal.',
       control: {
         type: 'radio',
       },
-      options: ['Sticky', 'Static'],
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
     },
     headline: {
       name: 'Modal headline',
-      description: 'Customize headline',
+      description: 'Sets the headline of the modal.',
       control: {
         type: 'text',
       },
     },
     bodyText: {
       name: 'Modal body text',
-      description: 'Customize body text',
+      description: 'Sets the body text of the modal.',
       control: {
         type: 'text',
       },
     },
+    showModal: {
+      name: 'Show modal',
+      description: 'Toggles if the modal is displayed.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
   },
   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',
+    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.',
     showModal: true,
   },
 };
@@ -69,7 +78,7 @@ const sizeLookUp = {
   'Small': 'sm',
   'Extra small': 'xs',
 };
-const Template = ({ headline, bodyText, size, actions, showModal }) => formatHtmlPreview(`    <style>
+const Template = ({ actions, size, headline, bodyText, showModal }) => formatHtmlPreview(`    <style>
   /* demo-wrapper and demo-styles is for demonstration purposes only*/
   .demo-wrapper {
     position: relative;
@@ -126,5 +135,4 @@ const Template = ({ headline, bodyText, size, actions, showModal }) => formatHtm
   </script>
   `);
 export const Native = Template.bind({});
-Native.args = {};
 //# sourceMappingURL=modal-native.stories.js.map

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

@@ -1 +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"]}
+{"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,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;OACpC;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,yBAAyB;MACtC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC;MACpD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;GACF;EACD,IAAI,EAAE;IACJ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,wDAAwD;IAClE,QAAQ,EAAE,wNAAwN;IAClO,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,EAChB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACV,EAAE,EAAE,CACH,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","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    actions: {\n      name: 'Actions',\n      description: 'Defines the behaviour of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Sticky', 'Static'],\n      table: {\n        defaultValue: { summary: 'Static' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of modal.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small', 'Extra small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    headline: {\n      name: 'Modal headline',\n      description: 'Sets the headline of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    bodyText: {\n      name: 'Modal body text',\n      description: 'Sets the body text of the modal.',\n      control: {\n        type: 'text',\n      },\n    },\n    showModal: {\n      name: 'Show modal',\n      description: 'Toggles if the modal is displayed.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n  },\n  args: {\n    actions: 'Static',\n    size: 'Large',\n    headline: 'The buttons for the modal only works in the canvas tab',\n    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.',\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 = ({ \n  actions, \n  size, \n  headline, \n  bodyText, \n  showModal \n}) =>\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({});"]}

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

@@ -19,42 +19,56 @@ export default {
     ],
   },
   argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Size of modal',
+    actions: {
+      name: 'Actions',
+      description: 'Defines the behaviour of modal.',
       control: {
         type: 'radio',
       },
-      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      options: ['Sticky', 'Static'],
+      table: {
+        defaultValue: { summary: 'static' },
+      },
     },
-    actions: {
-      name: 'Actions',
-      description: 'Behaviour of modal actions',
+    size: {
+      name: 'Size',
+      description: 'Sets the size of modal.',
       control: {
         type: 'radio',
       },
-      options: ['Sticky', 'Static'],
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'md' },
+      },
     },
     headline: {
       name: 'Modal headline',
-      description: 'Customize headline',
+      description: 'Sets the headline of the modal.',
       control: {
         type: 'text',
       },
     },
     bodyText: {
       name: 'Modal body text',
-      description: 'Customize body text',
+      description: 'Sets the body text of the modal.',
       control: {
         type: 'text',
       },
     },
+    showModal: {
+      name: 'Show modal',
+      description: 'Toggles if the modal is displayed.',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   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',
+    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.',
+    showModal: true,
   },
 };
 const sizeLookUp = {
@@ -63,25 +77,22 @@ const sizeLookUp = {
   'Small': 'sm',
   'Extra small': 'xs',
 };
-const ModalTemplate = ({ size, headline, bodyText, actions }) => formatHtmlPreview(`
+const ModalTemplate = ({ actions, size, headline, bodyText, showModal }) => formatHtmlPreview(`
   <button id="my-modal-button" class="sdds-btn sdds-btn-primary">Open modal</button>
-
-  <sdds-modal open id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
+  <sdds-modal selector="#my-modal-button" ${showModal ? 'show' : ''} id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
       <h5 class="sdds-modal-headline" slot="sdds-modal-headline">${headline}</h5>
       <span slot="sdds-modal-body">
           ${bodyText}
       </span>
-      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('delete')" class="sdds-btn sdds-btn-danger sdds-btn-md">Delete</button>
-      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('cancel')" class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
+      <button slot="sdds-modal-actions" data-dismiss-modal class="sdds-btn sdds-btn-danger sdds-btn-md">Delete</button>
+      <button slot="sdds-modal-actions" data-dismiss-modal class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
   </sdds-modal>
   <script>
-
-    document.getElementById('my-modal-button').addEventListener('click', () => {
-      document.getElementById('my-modal').open = true;
+    modal = document.querySelector('sdds-modal')
+    modal.addEventListener('sddsClose', (event) => {
+      console.log(event)
     })
   </script>
-
   `);
 export const WebComponent = ModalTemplate.bind({});
-WebComponent.args = {};
 //# sourceMappingURL=modal-webcomponent.stories.js.map