@scania/tegel 0.0.1-beta.9 → 0.0.4

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

@@ -0,0 +1,264 @@
+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 SearchbarMenuTemplate = ({ siteName }) => formatHtmlPreview(`
+    <nav class='sdds-nav'>
+        <div class='sdds-nav__left'>
+          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
+          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
+              <span id='sdds-nav__mob-menu-icon'>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
+              </span>
+          </button>
+          <div class='sdds-nav__app-name'>${siteName}</div>
+        </div>
+
+        <div class='sdds-nav__center sdds-nav__center-withsearch'>
+        <ul class='sdds-nav__inline-menu'>
+
+        <li class='sdds-nav__item'>
+            <a class='sdds-nav__item-core' href='#'>
+                <span class='span'>Item 1</span>
+            </a>
+        </li>
+
+        <li class='sdds-nav__item sdds-nav__item--active'>
+            <a class='sdds-nav__item-core ' href='#'>
+                <span class='sdds-nav__item-core-text'>Item 2</span>
+            </a>
+        </li>
+
+        <li class='sdds-nav__item sdds-nav__dropdown'>
+        <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
+            <span class='sdds-nav__item-core-text'>Item 3</span>
+            <span class='sdds-nav__dropdown-icon'>
+              <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
+            </span>
+        </button>
+        <ul class='sdds-nav__dropdown-menu'>
+            <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
+            <li class='sdds-nav__dropdown-item'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></li>
+            <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>
+        </ul>
+        </li>
+      </ul>
+      <div class="sdds-nav__app-searchbar-container">
+      <div class="sdds-nav__app-searchbar">
+        <div class="sdds-nav__searchbar-input-expanded">
+          <ul class='sdds-nav__searchbar-menu'>
+              <li class='sdds-nav__searchbar-item--top' tabindex="0">
+                    <p class='sdds-nav__searchbar-all-results'>
+                    <sdds-icon name="search" class="sdds-nav__app-searchbar-results-mgl-svg"></sdds-icon>
+                    See all search results <span>(press enter)</span>
+                    </p>
+              </li>
+            <ul class='sdds-nav__searchbar-results--category'>
+              <p class='sdds-nav__searchbar-results-category-title'>USERS</p>
+            <li class='sdds-nav__searchbar-results-item'>
+              <a href='' class='sdds-nav__searchbar-results-item-core'>User – Eric Mattsson – IXCD Visual designer </a>
+              <button class="sdds-nav__app-searchbar-results-x-btn">
+                <div>
+                  <sdds-icon class="sdds-nav__app-searchbar-results-x-btn" name="cross" size="16px"></sdds-icon> 
+                </div>
+              </button>
+            </li>
+            <li class='sdds-nav__searchbar-results-item'>
+              <a href='' class='sdds-nav__searchbar-results-item-core'>User– Eric Mattsson – IXCD Visual designer </a>
+              <button class="sdds-nav__app-searchbar-results-x-btn">
+              <div>
+              <sdds-icon class="sdds-nav__app-searchbar-results-x-btn" name="cross" size="16px"></sdds-icon> 
+            </div>              </button>
+              </li>
+            </ul>
+            <ul class='sdds-nav__searchbar-results--category'>
+              <p class='sdds-nav__searchbar-results-category-title'>TEAMS</p>
+
+            <li class='sdds-nav__searchbar-results-item'>
+              <a href='' class='sdds-nav__searchbar-results-item-core'>Team– Eric Mattsson – IXCD Visual designer </a>
+              <button class="sdds-nav__app-searchbar-results-x-btn">
+              <div>
+              <sdds-icon class="sdds-nav__app-searchbar-results-x-btn" name="cross" size="16px"></sdds-icon> 
+            </div>             </button>
+              </li>
+          </ul>
+        </ul>
+        <input class="sdds-nav__searchbar-input" type="text" placeholder="Search">
+          <button class="sdds-nav__app-searchbar-btn sdds-nav__app-searchbar-x-btn" onclick="toggleSearchbar()">
+            <sdds-icon class="sdds-nav__app-searchbar-btn-svg" name="cross" size="20px"></sdds-icon> 
+          </button>
+
+      </div>
+       <button class="sdds-nav__app-searchbar-btn sdds-nav__app-searchbar-mgl-btn" onclick="toggleSearchbar()">
+          <sdds-icon class="sdds-nav__app-searchbar-btn-svg" name="search" size="20px"></sdds-icon> 
+      </button>
+    </div>
+  </div>
+    <ul class='sdds-nav__toolbar-menu'>
+
+        <li class='sdds-nav__item sdds-nav__avatar'>
+            <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>
+                <img class="sdds-nav__avatar-img" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>
+                <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>
+                    <span class='sdds-nav__avatar-title'>Employee Name</span>
+                    <span class='sdds-nav__avatar-subtitle'>Company Name</span>
+                </span>
+            </button>
+
+            <ul class='sdds-nav__avatar-menu'>
+                <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>
+                    <span class='sdds-nav__avatar-info'>
+                        <span class='sdds-nav__avatar-title'>Employee Name</span>
+                        <span class='sdds-nav__avatar-subtitle'>Company Name</span>
+                    </span>
+                </li>
+                <li class='sdds-nav__avatar-item'>
+                    <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>
+                </li>
+                <li class='sdds-nav__avatar-item'>
+                    <button class='sdds-nav__avatar-item-core'>Logout</button>
+                </li>
+            </ul>
+        </li>
+        </ul>
+        </div>
+        <div class='sdds-nav__right'>
+          <div class='sdds-nav__item sdds-nav__app-launcher'>
+              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>
+                <sdds-icon class="sdds-nav__app-launcher-btn-svg" name="bento" size="20px"></sdds-icon> 
+              </button>
+              <ul class='sdds-nav__app-launcher-menu'>
+                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
+                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
+                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
+                  </li>
+              </ul>
+          </div>
+          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
+        </div>
+    </nav>
+
+    <script>
+    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
+    toggleAvatarMenu = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+    toggleMobileMenu = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+
+    toggleInlineDropdown = () => {
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+
+    }
+
+    toggleAppLauncher = () => {
+      document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__app-launcher--opened");
+      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+      document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+
+    closeDropdownsFromOverlay = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+
+    }
+
+    toggleSearchbar = () => {
+      document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__searchbar--opened");
+      document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+      document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+  }
+    </script>
+    `);
+export const SearchbarMenu = SearchbarMenuTemplate.bind({});
+//# sourceMappingURL=header-search.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-search.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-search.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,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7C,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsN/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,aAAa,GAAG,qBAAqB,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 SearchbarMenuTemplate = ({ 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 sdds-nav__center-withsearch'>\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'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></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      <div class=\"sdds-nav__app-searchbar-container\">\n      <div class=\"sdds-nav__app-searchbar\">\n        <div class=\"sdds-nav__searchbar-input-expanded\">\n          <ul class='sdds-nav__searchbar-menu'>\n              <li class='sdds-nav__searchbar-item--top' tabindex=\"0\">\n                    <p class='sdds-nav__searchbar-all-results'>\n                    <sdds-icon name=\"search\" class=\"sdds-nav__app-searchbar-results-mgl-svg\"></sdds-icon>\n                    See all search results <span>(press enter)</span>\n                    </p>\n              </li>\n            <ul class='sdds-nav__searchbar-results--category'>\n              <p class='sdds-nav__searchbar-results-category-title'>USERS</p>\n            <li class='sdds-nav__searchbar-results-item'>\n              <a href='' class='sdds-nav__searchbar-results-item-core'>User – Eric Mattsson – IXCD Visual designer </a>\n              <button class=\"sdds-nav__app-searchbar-results-x-btn\">\n                <div>\n                  <sdds-icon class=\"sdds-nav__app-searchbar-results-x-btn\" name=\"cross\" size=\"16px\"></sdds-icon> \n                </div>\n              </button>\n            </li>\n            <li class='sdds-nav__searchbar-results-item'>\n              <a href='' class='sdds-nav__searchbar-results-item-core'>User– Eric Mattsson – IXCD Visual designer </a>\n              <button class=\"sdds-nav__app-searchbar-results-x-btn\">\n              <div>\n              <sdds-icon class=\"sdds-nav__app-searchbar-results-x-btn\" name=\"cross\" size=\"16px\"></sdds-icon> \n            </div>              </button>\n              </li>\n            </ul>\n            <ul class='sdds-nav__searchbar-results--category'>\n              <p class='sdds-nav__searchbar-results-category-title'>TEAMS</p>\n\n            <li class='sdds-nav__searchbar-results-item'>\n              <a href='' class='sdds-nav__searchbar-results-item-core'>Team– Eric Mattsson – IXCD Visual designer </a>\n              <button class=\"sdds-nav__app-searchbar-results-x-btn\">\n              <div>\n              <sdds-icon class=\"sdds-nav__app-searchbar-results-x-btn\" name=\"cross\" size=\"16px\"></sdds-icon> \n            </div>             </button>\n              </li>\n          </ul>\n        </ul>\n        <input class=\"sdds-nav__searchbar-input\" type=\"text\" placeholder=\"Search\">\n          <button class=\"sdds-nav__app-searchbar-btn sdds-nav__app-searchbar-x-btn\" onclick=\"toggleSearchbar()\">\n            <sdds-icon class=\"sdds-nav__app-searchbar-btn-svg\" name=\"cross\" size=\"20px\"></sdds-icon> \n          </button>\n\n      </div>\n       <button class=\"sdds-nav__app-searchbar-btn sdds-nav__app-searchbar-mgl-btn\" onclick=\"toggleSearchbar()\">\n          <sdds-icon class=\"sdds-nav__app-searchbar-btn-svg\" name=\"search\" size=\"20px\"></sdds-icon> \n      </button>\n    </div>\n  </div>\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                    <button class='sdds-nav__avatar-item-core'>Logout</button>\n                </li>\n            </ul>\n        </li>\n        </ul>\n        </div>\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\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\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\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    toggleSearchbar = () => {\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__searchbar--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__mob-menu--opened\");\n      document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n  }\n    </script>\n    `,\n  );\n\nexport const SearchbarMenu = SearchbarMenuTemplate.bind({});\n"]}

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

@@ -0,0 +1,205 @@
+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'>
+          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
+          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
+              <span id='sdds-nav__mob-menu-icon'>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
+              </span>
+          </button>
+          <div class='sdds-nav__app-name'>${siteName}</div>
+        </div>
+
+        <div class='sdds-nav__center'>
+          <ul class='sdds-nav__inline-menu'>
+
+              <li class='sdds-nav__item'>
+                  <a class='sdds-nav__item-core' href='#'>
+                      <span class='span'>Item 1</span>
+                  </a>
+              </li>
+
+              <li class='sdds-nav__item sdds-nav__item--active'>
+                  <a class='sdds-nav__item-core ' href='#'>
+                      <span class='sdds-nav__item-core-text'>Item 2</span>
+                  </a>
+              </li>
+
+              <li class='sdds-nav__item sdds-nav__dropdown'>
+              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
+                  <span class='sdds-nav__item-core-text'>Item 3</span>
+                  <span class='sdds-nav__dropdown-icon'>
+                    <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
+                  </span>
+              </button>
+              <ul class='sdds-nav__dropdown-menu'>
+                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
+                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>
+                  <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>
+              </ul>
+              </li>
+          </ul>
+
+          <ul class='sdds-nav__toolbar-menu'>
+
+              <li class='sdds-nav__item sdds-nav__avatar' >
+                  <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>
+                      <img class="sdds-nav__avatar-img" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>
+                      <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>
+                          <span class='sdds-nav__avatar-title'>Employee Name</span>
+                          <span class='sdds-nav__avatar-subtitle'>Company Name</span>
+                      </span>
+                  </button>
+
+                  <ul class='sdds-nav__avatar-menu'>
+                      <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>
+                          <span class='sdds-nav__avatar-info'>
+                              <span class='sdds-nav__avatar-title'>Employee Name</span>
+                              <span class='sdds-nav__avatar-subtitle'>Company Name</span>
+                          </span>
+                      </li>
+                      <li class='sdds-nav__avatar-item'>
+                          <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>
+                      </li>
+                      <li class='sdds-nav__avatar-item'>
+                          <a href='' class='sdds-nav__avatar-item-core'>Logout</a>
+                      </li>
+                  </ul>
+              </li>
+          </ul>
+        </div>
+
+        <div class='sdds-nav__right'>
+          <div class='sdds-nav__item sdds-nav__app-launcher'>
+              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>
+                <sdds-icon class="sdds-nav__app-launcher-btn-svg" name="bento" size="20px"></sdds-icon> 
+              </button>
+              <ul class='sdds-nav__app-launcher-menu'>
+                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
+                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
+                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
+                  </li>
+              </ul>
+          </div>
+          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
+        </div>
+    </nav>
+
+    <script>
+    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
+    toggleAvatarMenu = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+    toggleMobileMenu = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+    toggleAppLauncher = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+    toggleInlineDropdown = () => {
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+
+    }
+    closeDropdownsFromOverlay = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+
+    }
+
+    </script>
+    `);
+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

@@ -0,0 +1,58 @@
+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 */
+    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+    .sdds-icon { font-size: ${args.size}px; }
+  </style>
+
+  <i class="sdds-icon ${args.icon}"></i>
+  `);
+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"]}