@scania/tegel 0.0.2 → 0.0.5

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

@@ -1,80 +1,80 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Toast',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Message type',
-      description: 'Changes the type of message',
-      control: {
-        type: 'radio',
-      },
-      options: ['Information', 'Success', 'Warning', 'Error'],
-      table: {
-        defaultValue: {
-          summary: 'information',
-        },
-      },
-    },
-    header: {
-      name: 'Subheader',
-      description: 'Adds a subheader',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    type: 'Success',
-    header: 'Header',
-    subheader: '',
-    link: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Toast',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Message type',
+      description: 'Changes the type of message.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Success', 'Warning', 'Error'],
+      table: {
+        defaultValue: {
+          summary: 'information',
+        },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Adds a header text.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Adds a subheader text.',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Adds a CTA link.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    type: 'Information',
+    header: 'Header',
+    subheader: '',
+    link: false,
+  },
+};
 const Template = ({ type, header, subheader, link }) => formatHtmlPreview(`<sdds-toast
         type="${type.toLowerCase()}"
         header="${header}"
     >
-      ${subheader
+      ${subheader
   ? `
       <div  slot="toast-subheader">
         ${subheader}
       </div>
-      `
+      `
   : ''}
-       ${link
+       ${link
   ? `<a slot="toast-link" href="#">This is a link.</a>
-       `
+       `
   : ''}
     </sdds-toast>
         <script>
@@ -82,5 +82,6 @@ const Template = ({ type, header, subheader, link }) => formatHtmlPreview(`<sdds
             console.log('Toast with id: ', event.detail.toastId, ' was closed.')
         })
     </script>
-  `);
-export const WebComponent = Template.bind({});
+  `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-toast.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.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,cAAc;MACpB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,aAAa;SACvB;OACF;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,qBAAqB;MAClC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,KAAK;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CACrD,iBAAiB,CACf;gBACY,IAAI,CAAC,WAAW,EAAE;kBAChB,MAAM;;QAGhB,SAAS;EACP,CAAC,CAAC;;UAEF,SAAS;;OAEZ;EACG,CAAC,CAAC,EACN;SAEG,IAAI;EACF,CAAC,CAAC;QACL;EACG,CAAC,CAAC,EACN;;;;;;;GAOJ,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/Toast',\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=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Message type',\n      description: 'Changes the type of message.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Success', 'Warning', 'Error'],\n      table: {\n        defaultValue: {\n          summary: 'information',\n        },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Adds a header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Adds a subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Adds a CTA link.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    type: 'Information',\n    header: 'Header',\n    subheader: '',\n    link: false,\n  },\n};\n\nconst Template = ({ type, header, subheader, link }) =>\n  formatHtmlPreview(\n    `<sdds-toast\n        type=\"${type.toLowerCase()}\"\n        header=\"${header}\"\n    >\n      ${\n        subheader\n          ? `\n      <div  slot=\"toast-subheader\">\n        ${subheader}\n      </div>\n      `\n          : ''\n      }\n       ${\n         link\n           ? `<a slot=\"toast-link\" href=\"#\">This is a link.</a>\n       `\n           : ''\n       }\n    </sdds-toast>\n        <script>\n        document.addEventListener('sddsClose', (event) => {\n            console.log('Toast with id: ', event.detail.toastId, ' was closed.')\n        })\n    </script>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,107 +1,109 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from '../icon/iconsArray';
-export default {
-  title: 'Components/Toast',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Message type',
-      description: 'Changes the type of message',
-      control: {
-        type: 'radio',
-      },
-      options: ['Success', 'Info', 'Warning', 'Error'],
-    },
-    header: {
-      name: 'Subheader',
-      description: 'Adds a subheader',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link',
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Native/Web Component',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-    },
-    icon: {
-      name: 'Icon',
-      description: 'Icon to display on the button. Choose "none" to exclude the icon, or choose "recommended" to pick the icon that is recommended for the type of toast.',
-      control: {
-        type: 'select',
-      },
-      options: ['none', 'recommended', ...iconsNames],
-      if: { arg: 'size', neq: 'xs' },
-    },
-  },
-  args: {
-    type: 'Success',
-    header: 'Header',
-    subheader: '',
-    link: false,
-    iconType: 'Web Component',
-    icon: 'recommended',
-  },
-};
-const typeLookup = {
-  Success: 'success',
-  Info: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const iconLookup = {
-  Success: 'tick',
-  Info: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const Template = ({ type, header, subheader, link, iconType, icon }) => {
-  const iconValue = icon === 'recommended' ? iconLookup[type] : icon;
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+export default {
+  title: 'Components/Toast',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Message type',
+      description: 'Changes the type of message.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Success', 'Warning', 'Error'],
+    },
+    header: {
+      name: 'Header',
+      description: 'Adds a header text.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Adds a subheader text.',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Adds a CTA link.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Icon to display on the button. Choose "none" to exclude the icon, or choose "recommended" to pick the icon that is recommended for the type of toast.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'recommended', ...iconsNames],
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Switch between showing a native or a web component icon.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+    },
+  },
+  args: {
+    type: 'Information',
+    header: 'Header',
+    subheader: '',
+    link: false,
+    icon: 'recommended',
+    iconType: 'Web Component',
+  },
+};
+const typeLookup = {
+  Success: 'success',
+  Information: 'info',
+  Warning: 'warning',
+  Error: 'error',
+};
+const iconLookup = {
+  Success: 'tick',
+  Information: 'info',
+  Warning: 'warning',
+  Error: 'error',
+};
+const Template = ({ type, header, subheader, link, iconType, icon }) => {
+  const iconValue = icon === 'recommended' ? iconLookup[type] : icon;
   return formatHtmlPreview(`
-      ${iconType === 'Native'
+      ${iconType === 'Native'
     ? `
     <style>
     /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
     @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
 
     </style>
-      `
+      `
     : ''}
   <div class="sdds-toast sdds-toast-${typeLookup[type]}">
-  ${icon === 'none'
-    ? ''
+  ${icon === 'none'
+    ? ''
     : `
     <div class="sdds-toast-icon">
-      ${iconType === 'Native'
-      ? `<i class="sdds-icon ${iconValue}"></i>`
+      ${iconType === 'Native'
+      ? `<i class="sdds-icon ${iconValue}"></i>`
       : `<sdds-icon name="${iconValue}" size="20px"></sdds-icon>
       `}
     </div>
@@ -110,20 +112,21 @@ const Template = ({ type, header, subheader, link, iconType, icon }) => {
       <div class="sdds-toast-header">
         <span class="sdds-toast-headline">${header}</span>
         <button type="button" aria-label="close" class="sdds-toast-close">
-          ${iconType === 'Native'
-    ? `<i class="sdds-icon cross"></i>`
+          ${iconType === 'Native'
+    ? `<i class="sdds-icon cross"></i>`
     : `<sdds-icon name="cross" size="20px"></sdds-icon>
           `}
         </button>
       </div>
-      ${subheader || link
+      ${subheader || link
     ? `\n<div class="sdds-toast-body">\
           ${subheader ? `\n<span class="sdds-toast-subheadline">${subheader}</span>` : ''}\
           ${link ? '\n<a class="sdds-toast-link" href="#">Link example</a>' : ''}
-          </div> `
+          </div> `
     : ''}
     </div>
   </div>
-  `);
-};
-export const Native = Template.bind({});
+  `);
+};
+export const Native = Template.bind({});
+//# sourceMappingURL=toast.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\n\nexport default {\n  title: 'Components/Toast',\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=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Message type',\n      description: 'Changes the type of message.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Success', 'Warning', 'Error'],\n    },\n    header: {\n      name: 'Header',\n      description: 'Adds a header text.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Adds a subheader text.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Adds a CTA link.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description:\n        'Icon to display on the button. Choose \"none\" to exclude the icon, or choose \"recommended\" to pick the icon that is recommended for the type of toast.',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'recommended', ...iconsNames],\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    },\n  },\n  args: {\n    type: 'Information',\n    header: 'Header',\n    subheader: '',\n    link: false,\n    icon: 'recommended',\n    iconType: 'Web Component',\n  },\n};\nconst typeLookup = {\n  Success: 'success',\n  Information: 'info',\n  Warning: 'warning',\n  Error: 'error',\n};\nconst iconLookup = {\n  Success: 'tick',\n  Information: 'info',\n  Warning: 'warning',\n  Error: 'error',\n};\n\nconst Template = ({ type, header, subheader, link, iconType, icon }) => {\n  const iconValue = icon === 'recommended' ? iconLookup[type] : icon;\n  return formatHtmlPreview(\n    `\n      ${\n        iconType === 'Native'\n          ? `\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\n    </style>\n      `\n          : ''\n      }\n  <div class=\"sdds-toast sdds-toast-${typeLookup[type]}\">\n  ${\n    icon === 'none'\n      ? ''\n      : `\n    <div class=\"sdds-toast-icon\">\n      ${\n        iconType === 'Native'\n          ? `<i class=\"sdds-icon ${iconValue}\"></i>`\n          : `<sdds-icon name=\"${iconValue}\" size=\"20px\"></sdds-icon>\n      `\n      }\n    </div>\n  `\n  }\n    <div class=\"sdds-toast-content\">\n      <div class=\"sdds-toast-header\">\n        <span class=\"sdds-toast-headline\">${header}</span>\n        <button type=\"button\" aria-label=\"close\" class=\"sdds-toast-close\">\n          ${\n            iconType === 'Native'\n              ? `<i class=\"sdds-icon cross\"></i>`\n              : `<sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          `\n          }\n        </button>\n      </div>\n      ${\n        subheader || link\n          ? `\\n<div class=\"sdds-toast-body\">\\\n          ${subheader ? `\\n<span class=\"sdds-toast-subheadline\">${subheader}</span>` : ''}\\\n          ${link ? '\\n<a class=\"sdds-toast-link\" href=\"#\">Link example</a>' : ''}\n          </div> `\n          : ''\n      }\n    </div>\n  </div>\n  `,\n  );\n};\n\nexport const Native = Template.bind({});\n"]}