@scania/tegel 0.0.2 → 0.0.4

package/dist/collection/components/header/header-toolbar.stories.js

@@ -1,39 +1,39 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header',
-  parameters: {
-    notes: readme,
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    siteName: {
-      name: 'Site name',
-      description: 'Set a custom title for the header',
-      type: 'string',
-    },
-  },
-  args: {
-    siteName: 'Application',
-  },
-};
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Header',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    siteName: {
+      name: 'Site name',
+      description: 'Set a custom title for the header',
+      type: 'string',
+    },
+  },
+  args: {
+    siteName: 'Application',
+  },
+};
 const ToolbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
     <nav class='sdds-nav'>
         <div class='sdds-nav__left'>
@@ -200,5 +200,6 @@ const ToolbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
     }
 
     </script>
-    `);
-export const ToolbarMenu = ToolbarMenuTemplate.bind({});
+    `);
+export const ToolbarMenu = ToolbarMenuTemplate.bind({});
+//# sourceMappingURL=header-toolbar.stories.js.map

package/dist/collection/components/header/header-toolbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-toolbar.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-toolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,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,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,mCAAmC;MAChD,IAAI,EAAE,QAAQ;KACf;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,aAAa;GACxB;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2J/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Header',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    siteName: {\n      name: 'Site name',\n      description: 'Set a custom title for the header',\n      type: 'string',\n    },\n  },\n  args: {\n    siteName: 'Application',\n  },\n};\n\nconst ToolbarMenuTemplate = ({ siteName }) =>\n  formatHtmlPreview(\n    `\n    <nav class='sdds-nav'>\n        <div class='sdds-nav__left'>\n          <div class=\"sdds-nav__overlay\" onclick=\"closeDropdownsFromOverlay()\"></div>\n          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>\n              <span id='sdds-nav__mob-menu-icon'>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>\n                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>\n              </span>\n          </button>\n          <div class='sdds-nav__app-name'>${siteName}</div>\n        </div>\n\n        <div class='sdds-nav__center'>\n          <ul class='sdds-nav__inline-menu'>\n\n              <li class='sdds-nav__item'>\n                  <a class='sdds-nav__item-core' href='#'>\n                      <span class='span'>Item 1</span>\n                  </a>\n              </li>\n\n              <li class='sdds-nav__item sdds-nav__item--active'>\n                  <a class='sdds-nav__item-core ' href='#'>\n                      <span class='sdds-nav__item-core-text'>Item 2</span>\n                  </a>\n              </li>\n\n              <li class='sdds-nav__item sdds-nav__dropdown'>\n              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>\n                  <span class='sdds-nav__item-core-text'>Item 3</span>\n                  <span class='sdds-nav__dropdown-icon'>\n                    <sdds-icon class=\"sdds-nav__dropdown-icon-svg\" name=\"chevron_down\" size=\"16px\"></sdds-icon> \n                  </span>\n              </button>\n              <ul class='sdds-nav__dropdown-menu'>\n                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>\n                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n              </ul>\n              </li>\n          </ul>\n\n          <ul class='sdds-nav__toolbar-menu'>\n\n              <li class='sdds-nav__item sdds-nav__avatar' >\n                  <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>\n                      <img class=\"sdds-nav__avatar-img\" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>\n                      <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>\n                          <span class='sdds-nav__avatar-title'>Employee Name</span>\n                          <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n                      </span>\n                  </button>\n\n                  <ul class='sdds-nav__avatar-menu'>\n                      <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>\n                          <span class='sdds-nav__avatar-info'>\n                              <span class='sdds-nav__avatar-title'>Employee Name</span>\n                              <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n                          </span>\n                      </li>\n                      <li class='sdds-nav__avatar-item'>\n                          <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>\n                      </li>\n                      <li class='sdds-nav__avatar-item'>\n                          <a href='' class='sdds-nav__avatar-item-core'>Logout</a>\n                      </li>\n                  </ul>\n              </li>\n          </ul>\n        </div>\n\n        <div class='sdds-nav__right'>\n          <div class='sdds-nav__item sdds-nav__app-launcher'>\n              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>\n                <sdds-icon class=\"sdds-nav__app-launcher-btn-svg\" name=\"bento\" size=\"20px\"></sdds-icon> \n              </button>\n              <ul class='sdds-nav__app-launcher-menu'>\n                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>\n                  </li>\n                  <li class='sdds-nav__app-launcher-item'>\n                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n                  </li>\n              </ul>\n          </div>\n          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>\n        </div>\n    </nav>\n\n    <script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n    toggleAvatarMenu = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n    toggleMobileMenu = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n    toggleAppLauncher = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n    }\n    toggleInlineDropdown = () => {\n        document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.toggle(\"sdds-nav__dropdown--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n    }\n    closeDropdownsFromOverlay = () => {\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n        document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n    }\n\n    </script>\n    `,\n  );\n\nexport const ToolbarMenu = ToolbarMenuTemplate.bind({});\n"]}

package/dist/collection/components/icon/icon-font.stories.js

@@ -1,49 +1,49 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from './iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Foundations/Icons',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    icon: {
-      name: 'Icon name',
-      description: 'Select icon to display',
-      control: {
-        type: 'select',
-      },
-      options: iconsNames,
-    },
-    size: {
-      name: 'Size in pixels',
-      description: 'Set the size of the icon',
-      control: {
-        type: 'range',
-        min: 16,
-        max: 100,
-        step: 4,
-      },
-    },
-  },
-  args: {
-    size: 32,
-    icon: 'truck',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from './iconsArray';
+import readme from './readme.md';
+export default {
+  title: 'Foundations/Icons',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    icon: {
+      name: 'Icon name',
+      description: 'Select icon to display',
+      control: {
+        type: 'select',
+      },
+      options: iconsNames,
+    },
+    size: {
+      name: 'Size in pixels',
+      description: 'Set the size of the icon',
+      control: {
+        type: 'range',
+        min: 16,
+        max: 100,
+        step: 4,
+      },
+    },
+  },
+  args: {
+    size: 32,
+    icon: 'truck',
+  },
+};
 const IconFontTemplate = (args) => formatHtmlPreview(`
   <style>
     /* Demo code for presentation purposes */
@@ -52,6 +52,7 @@ const IconFontTemplate = (args) => formatHtmlPreview(`
   </style>
 
   <i class="sdds-icon ${args.icon}"></i>
-  `);
-export const Native = IconFontTemplate.bind({});
-Native.args = {};
+  `);
+export const Native = IconFontTemplate.bind({});
+Native.args = {};
+//# sourceMappingURL=icon-font.stories.js.map

package/dist/collection/components/icon/icon-font.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-font.stories.js","sourceRoot":"","sources":["../../../src/components/icon/icon-font.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,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,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,UAAU;KACpB;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,0BAA0B;MACvC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,CAAC;OACR;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE,CAChC,iBAAiB,CAAC;;;;8BAIU,IAAI,CAAC,IAAI;;;wBAGf,IAAI,CAAC,IAAI;GAC9B,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from './iconsArray';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Foundations/Icons',\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=9119%3A315952&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    icon: {\n      name: 'Icon name',\n      description: 'Select icon to display',\n      control: {\n        type: 'select',\n      },\n      options: iconsNames,\n    },\n    size: {\n      name: 'Size in pixels',\n      description: 'Set the size of the icon',\n      control: {\n        type: 'range',\n        min: 16,\n        max: 100,\n        step: 4,\n      },\n    },\n  },\n  args: {\n    size: 32,\n    icon: 'truck',\n  },\n};\n\nconst IconFontTemplate = (args) =>\n  formatHtmlPreview(`\n  <style>\n    /* Demo code for presentation purposes */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    .sdds-icon { font-size: ${args.size}px; }\n  </style>\n\n  <i class=\"sdds-icon ${args.icon}\"></i>\n  `);\n\nexport const Native = IconFontTemplate.bind({});\n\nNative.args = {};\n"]}

package/dist/collection/components/icon/icon-web-component.stories.js

@@ -1,51 +1,52 @@
-import { formatHtmlPreview } from '../../utils/utils';
-import { iconsNames } from './iconsArray';
-import readme from './readme.md';
-export default {
-  title: 'Foundations/Icons',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    icon: {
-      name: 'Icon name',
-      description: 'Select icon to display',
-      control: {
-        type: 'select',
-      },
-      options: iconsNames,
-    },
-    size: {
-      name: 'Size in pixels',
-      description: 'Set the size of the icon',
-      control: {
-        type: 'range',
-        min: 16,
-        max: 100,
-        step: 4,
-      },
-    },
-  },
-  args: {
-    size: 32,
-    icon: 'truck',
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from './iconsArray';
+import readme from './readme.md';
+export default {
+  title: 'Foundations/Icons',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    icon: {
+      name: 'Icon name',
+      description: 'Select icon to display',
+      control: {
+        type: 'select',
+      },
+      options: iconsNames,
+    },
+    size: {
+      name: 'Size in pixels',
+      description: 'Set the size of the icon',
+      control: {
+        type: 'range',
+        min: 16,
+        max: 100,
+        step: 4,
+      },
+    },
+  },
+  args: {
+    size: 32,
+    icon: 'truck',
+  },
+};
 const IconTemplate = (args) => formatHtmlPreview(`
   <sdds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></sdds-icon> 
-  `);
-export const WebComponent = IconTemplate.bind({});
-WebComponent.args = {};
+  `);
+export const WebComponent = IconTemplate.bind({});
+WebComponent.args = {};
+//# sourceMappingURL=icon-web-component.stories.js.map

package/dist/collection/components/icon/icon-web-component.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-web-component.stories.js","sourceRoot":"","sources":["../../../src/components/icon/icon-web-component.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,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,WAAW;MACjB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE,UAAU;KACpB;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,0BAA0B;MACvC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,EAAE;QACP,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,CAAC;OACR;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,OAAO;GACd;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE,CAC5B,iBAAiB,CAAC;qBACC,IAAI,CAAC,IAAI,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI;GACjE,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElD,YAAY,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from './iconsArray';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Foundations/Icons',\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=9119%3A315952&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    icon: {\n      name: 'Icon name',\n      description: 'Select icon to display',\n      control: {\n        type: 'select',\n      },\n      options: iconsNames,\n    },\n    size: {\n      name: 'Size in pixels',\n      description: 'Set the size of the icon',\n      control: {\n        type: 'range',\n        min: 16,\n        max: 100,\n        step: 4,\n      },\n    },\n  },\n  args: {\n    size: 32,\n    icon: 'truck',\n  },\n};\n\nconst IconTemplate = (args) =>\n  formatHtmlPreview(`\n  <sdds-icon name=\"${args.icon}\" size=\"${`${args.size.toString()}px`}\"></sdds-icon> \n  `);\n\nexport const WebComponent = IconTemplate.bind({});\n\nWebComponent.args = {};\n"]}

package/dist/collection/components/icon/icon.js

@@ -1,89 +1,90 @@
-// Check status of webFont solution
-import { h, Host } from '@stencil/core';
-import { iconsCollection } from './iconsArray';
-export class Icon {
-  constructor() {
-    this.setIcons = () => this.arrayOfIcons.map(element => {
-      if (element.name === this.name) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
-      }
-    });
-    this.name = 'arrow_diagonal';
-    this.size = '16px';
-    this.icons_object = iconsCollection;
-    this.arrayOfIcons = [];
-  }
-  componentWillLoad() {
-    this.arrayDataWatcher(this.icons_object);
-  }
-  arrayDataWatcher(newValue) {
-    if (typeof newValue === 'string') {
-      this.arrayOfIcons = JSON.parse(newValue);
-    }
-    else {
-      this.arrayOfIcons = newValue;
-    }
-    this.arrayOfIcons = [...this.arrayOfIcons];
-  }
-  render() {
-    return h(Host, null, this.setIcons());
-  }
-  static get is() { return "sdds-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook"
-        },
-        "attribute": "name",
-        "reflect": true,
-        "defaultValue": "'arrow_diagonal'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Pass a size of icon as a string, for example: 32px, 1rem, 4em..."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'16px'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "icons_object": {},
-      "arrayOfIcons": {}
-    };
-  }
-}
+// Check status of webFont solution
+import { h, Host } from '@stencil/core';
+import { iconsCollection } from './iconsArray';
+export class Icon {
+  constructor() {
+    this.setIcons = () => this.arrayOfIcons.map(element => {
+      if (element.name === this.name) {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
+      }
+    });
+    this.name = 'arrow_diagonal';
+    this.size = '16px';
+    this.icons_object = iconsCollection;
+    this.arrayOfIcons = [];
+  }
+  componentWillLoad() {
+    this.arrayDataWatcher(this.icons_object);
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this.arrayOfIcons = JSON.parse(newValue);
+    }
+    else {
+      this.arrayOfIcons = newValue;
+    }
+    this.arrayOfIcons = [...this.arrayOfIcons];
+  }
+  render() {
+    return h(Host, null, this.setIcons());
+  }
+  static get is() { return "sdds-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook"
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "'arrow_diagonal'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Pass a size of icon as a string, for example: 32px, 1rem, 4em..."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'16px'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "icons_object": {},
+      "arrayOfIcons": {}
+    };
+  }
+}
+//# sourceMappingURL=icon.js.map

package/dist/collection/components/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,OAAO,IAAI;;IAwBf,aAAQ,GAAG,GAAG,EAAE,CACd,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;MAC9B,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;QAC9B,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,qBAAkB,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;UAC5I,iBAAQ,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAS;UACvC,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAE,OAAO,CAAC,UAAU,GAAI,CAC/C,CACP,CAAC;OACH;IACH,CAAC,CAAC,CAAC;gBAhCmC,gBAAgB;gBAGhB,MAAM;wBAEd,eAAe;wBAEvB,EAAE;;EAE1B,iBAAiB;IACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC3C,CAAC;EAED,gBAAgB,CAAC,QAAgB;IAC/B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC1C;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IACD,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;EAC7C,CAAC;EAcD,MAAM;IACJ,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,QAAQ,EAAE,CAAQ,CAAC;EACxC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// Check status of webFont solution\n\nimport { Component, h, Prop, State, Host } from '@stencil/core';\n\nimport { iconsCollection } from './iconsArray';\n\n@Component({\n  tag: 'sdds-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /** Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook */\n  @Prop({ reflect: true }) name: string = 'arrow_diagonal';\n\n  /** Pass a size of icon as a string, for example: 32px, 1rem, 4em... */\n  @Prop({ reflect: true }) size: string = '16px';\n\n  @State() icons_object: string = iconsCollection;\n\n  @State() arrayOfIcons = [];\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.icons_object);\n  }\n\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.arrayOfIcons = JSON.parse(newValue);\n    } else {\n      this.arrayOfIcons = newValue;\n    }\n    this.arrayOfIcons = [...this.arrayOfIcons];\n  }\n\n  setIcons = () =>\n    this.arrayOfIcons.map(element => {\n      if (element.name === this.name) {\n        return (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-labelledby={`icon ${element.name}`} role=\"img\" style={{ fontSize: this.size }}>\n            <title>{`icon ${element.name}`}</title>\n            <path fill=\"currentColor\" d={element.definition} />\n          </svg>\n        );\n      }\n    });\n\n  render() {\n    return <Host>{this.setIcons()}</Host>;\n  }\n}\n"]}

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

@@ -1,45 +1,46 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Link',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    disabled: {
-      name: 'Disabled',
-      description: 'Display link in disabled state',
-      controls: {
-        type: 'boolean',
-      },
-    },
-    noUnderline: {
-      name: 'No underline',
-      description: 'Hide underline under link text',
-      controls: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    disabled: false,
-    noUnderline: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Link',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    disabled: {
+      name: 'Disabled',
+      description: 'Display link in disabled state',
+      controls: {
+        type: 'boolean',
+      },
+    },
+    noUnderline: {
+      name: 'No underline',
+      description: 'Hide underline under link text',
+      controls: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    disabled: false,
+    noUnderline: false,
+  },
+};
 const Template = ({ disabled, noUnderline }) => formatHtmlPreview(`
       <a class="sdds-link ${disabled ? 'disabled' : ''} ${noUnderline ? 'sdds-link--no-underline' : ''}" href="#">
         This is a link.
       </a>
-  `);
-export const Native = Template.bind({});
+  `);
+export const Native = Template.bind({});
+//# sourceMappingURL=link.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,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;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,gCAAgC;MAC7C,QAAQ,EAAE;QACR,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,KAAK;GACnB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,CAC7C,iBAAiB,CACf;4BACwB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAChD,WAAW,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAC5C;;;GAGD,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Link',\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=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    },\n    noUnderline: {\n      name: 'No underline',\n      description: 'Hide underline under link text',\n      controls: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    disabled: false,\n    noUnderline: false,\n  },\n};\n\nconst Template = ({ disabled, noUnderline }) =>\n  formatHtmlPreview(\n    `\n      <a class=\"sdds-link ${disabled ? 'disabled' : ''} ${\n      noUnderline ? 'sdds-link--no-underline' : ''\n    }\" href=\"#\">\n        This is a link.\n      </a>\n  `,\n  );\nexport const Native = Template.bind({});\n"]}