@scania/tegel 0.0.5 → 0.0.6

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

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
-  title: 'Components/Header',
+  title: 'Components/Header/Native',
   parameters: {
     notes: readme,
     layout: 'fullscreen',

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

@@ -1 +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,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;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: 'Sets a custom title for the header.',\n      control: {\n        type: 'text',\n      },\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"]}
+{"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,0BAA0B;EACjC,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,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;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/Native',\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: 'Sets a custom title for the header.',\n      control: {\n        type: 'text',\n      },\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/header/webcomponent/core-header-item/core-header-item.css

@@ -0,0 +1,24 @@
+:host {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-header-nav-item-color);
+}
+:host .item {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: var(--sdds-header-height);
+  height: var(--sdds-header-height);
+  margin: 0;
+}
+:host .item * {
+  box-sizing: border-box;
+}
+:host slot {
+  white-space: nowrap;
+}
+:host ::slotted(svg) {
+  font-size: 20px;
+}

package/dist/collection/components/header/webcomponent/core-header-item/core-header-item.js

@@ -0,0 +1,19 @@
+import { h, Host } from '@stencil/core';
+export class CoreHeaderItem {
+  render() {
+    return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
+  }
+  static get is() { return "sdds-core-header-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["core-header-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["core-header-item.css"]
+    };
+  }
+}
+//# sourceMappingURL=core-header-item.js.map

package/dist/collection/components/header/webcomponent/core-header-item/core-header-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-header-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/core-header-item/core-header-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,cAAc;EACzB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,MAAM;QACf,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-core-header-item',\n  styleUrl: 'core-header-item.scss',\n  shadow: true,\n})\nexport class CoreHeaderItem {\n  render() {\n    return (\n      <Host>\n        <div class=\"item\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.css

@@ -0,0 +1,14 @@
+:host sdds-header-item {
+  display: none;
+}
+:host sdds-header-item a {
+  background-image: var(--sdds-background-image-scania-symbol-svg), var(--sdds-background-image-scania-symbol-png);
+  background-size: 30px auto;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+@media (min-width: 521px) {
+  :host sdds-header-item {
+    display: block;
+  }
+}

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.js

@@ -0,0 +1,47 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class HeaderBrandSymbol {
+  constructor() {
+    this.linkHref = 'https://www.scania.com';
+  }
+  render() {
+    const inheritedLinkProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("sdds-header-item", null, h("a", Object.assign({}, inheritedLinkProps, { href: this.linkHref })))));
+  }
+  static get is() { return "sdds-header-brand-symbol"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-brand-symbol.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-brand-symbol.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "linkHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The href for the logo link."
+        },
+        "attribute": "link-href",
+        "reflect": false,
+        "defaultValue": "'https://www.scania.com'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-brand-symbol.js.map

package/dist/collection/components/header/webcomponent/header-brand-symbol/header-brand-symbol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-brand-symbol.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-brand-symbol/header-brand-symbol.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAOhE,MAAM,OAAO,iBAAiB;;oBAID,wBAAwB;;EAEnD,MAAM;IACJ,MAAM,kBAAkB,qBACnB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,OAAO,CACL,EAAC,IAAI;MACH;QACE,yBAAO,kBAAkB,IAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAM,CACnC,CACd,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-brand-symbol',\n  styleUrl: 'header-brand-symbol.scss',\n  shadow: true,\n})\nexport class HeaderBrandSymbol {\n  @Element() host: HTMLElement;\n\n  /** The href for the logo link. */\n  @Prop() linkHref: string = 'https://www.scania.com';\n\n  render() {\n    const inheritedLinkProps = {\n      ...inheritAriaAttributes(this.host),\n    };\n    return (\n      <Host>\n        <sdds-header-item>\n          <a {...inheritedLinkProps} href={this.linkHref}></a>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-component.css

@@ -0,0 +1,49 @@
+/*
+  Contains spacing variables for the layout
+*/
+sdds-header {
+  display: block;
+  height: var(--sdds-header-height);
+  background-color: var(--sdds-header-background);
+  width: 100%;
+  z-index: 300;
+}
+
+nav {
+  box-sizing: border-box;
+  background-color: var(--sdds-header-background);
+  width: 100%;
+  display: block;
+}
+nav * {
+  box-sizing: border-box;
+}
+nav .sdds-header-component-list {
+  height: var(--sdds-header-height);
+  all: unset;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+nav sdds-header-dropdown,
+nav sdds-header-item {
+  display: none;
+}
+nav .sdds-header-middle-spacer {
+  all: unset;
+  display: block;
+  flex-grow: 1;
+  height: var(--sdds-header-height);
+  border-right: 1px solid var(--sdds-header--basic-element-border);
+}
+@media screen and (min-width: 992px) {
+  nav sdds-header-dropdown,
+nav sdds-header-item {
+    display: block;
+  }
+}
+nav sdds-header-item:nth-child(3),
+nav sdds-header-dropdown:nth-child(3) {
+  /* Adds a left border to the button after the title, if any */
+  border-left: 1px solid var(--sdds-header--basic-element-border);
+}

package/dist/collection/components/header/webcomponent/header-component.js

@@ -0,0 +1,43 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';
+export class SddsHeader {
+  constructor() {
+    const callback = (mutationsList) => {
+      mutationsList.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          updateListChildrenRoles(mutation.target);
+        }
+      });
+    };
+    this.observer = new MutationObserver(callback);
+  }
+  componentDidLoad() {
+    const hostElement = this.host;
+    const navElement = hostElement.querySelector('.sdds-header-component-list');
+    this.observer.observe(navElement, {
+      childList: true,
+      subtree: false,
+    });
+    updateListChildrenRoles(navElement);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "sdds-header-component-list" }, h("slot", null), h("li", { class: "sdds-header-middle-spacer" }), h("slot", { name: "end" })))));
+  }
+  static get is() { return "sdds-header"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-component.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-component.js.map

package/dist/collection/components/header/webcomponent/header-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-component.js","sourceRoot":"","sources":["../../../../src/components/header/webcomponent/header-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAOtF,MAAM,OAAO,UAAU;EAKrB;IACE,MAAM,QAAQ,GAAqB,CAAC,aAAa,EAAE,EAAE;MACnD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;QACjC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SAC1C;MACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;EACjD,CAAC;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;IAC9B,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAE5E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE;MAChC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,uBAAuB,CAAC,UAAU,CAAC,CAAC;EACtC,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,MAAM,aAAa,qBACd,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,YAAM,IAAI,EAAC,WAAW,GAAQ;MAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ;MAC1B,2BAAS,aAAa;QACpB,UAAI,KAAK,EAAC,4BAA4B;UACpC,eAAa;UACb,UAAI,KAAK,EAAC,2BAA2B,GAAM;UAC3C,YAAM,IAAI,EAAC,KAAK,GAAQ,CACrB,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Element } from '@stencil/core';\nimport { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header',\n  styleUrl: 'header-component.scss',\n  shadow: false,\n})\nexport class SddsHeader {\n  @Element() host: HTMLElement;\n\n  private observer: MutationObserver;\n\n  constructor() {\n    const callback: MutationCallback = (mutationsList) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          updateListChildrenRoles(mutation.target);\n        }\n      });\n    };\n\n    this.observer = new MutationObserver(callback);\n  }\n\n  componentDidLoad() {\n    const hostElement = this.host;\n    const navElement = hostElement.querySelector('.sdds-header-component-list');\n\n    this.observer.observe(navElement, {\n      childList: true,\n      subtree: false,\n    });\n\n    updateListChildrenRoles(navElement);\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  render() {\n    const navAttributes = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <slot name=\"hamburger\"></slot>\n        <slot name=\"title\"></slot>\n        <nav {...navAttributes}>\n          <ul class=\"sdds-header-component-list\">\n            <slot></slot>\n            <li class=\"sdds-header-middle-spacer\"></li>\n            <slot name=\"end\"></slot>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-default.stories.js

@@ -0,0 +1,79 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeHamburger from './header-hamburger/readme.md';
+import readmeTitle from './header-title/readme.md';
+import readmeItem from './header-item/readme.md';
+import readmeDropdown from './header-dropdown/readme.md';
+import readmeDropdownList from './header-dropdown-list/readme.md';
+import readmeDropdownListItem from './header-dropdown-list-item/readme.md';
+import readmeDropdownListUser from './header-dropdown-list-user/readme.md';
+import readmeLauncher from './header-launcher/readme.md';
+export default {
+  title: 'Components/Header/Web Component',
+  parameters: {
+    notes: {
+      'Header': readme,
+      'Header hamburger': readmeHamburger,
+      'Header title': readmeTitle,
+      'Header item': readmeItem,
+      'Header dropdown': readmeDropdown,
+      'Header dropdown list': readmeDropdownList,
+      'Header dropdown list item': readmeDropdownListItem,
+      'Header dropdown list user': readmeDropdownListUser,
+      'Header launcher': readmeLauncher,
+    },
+    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: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+  <sdds-header>
+    <sdds-header-title>
+      Example: default
+    </sdds-header-title>
+
+    <sdds-header-launcher slot="end">
+      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Trucklyfe</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">HaulHub</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">WheelWizz</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+    </sdds-header-launcher>
+
+
+    <sdds-header-brand-symbol slot="end" link-href="https://scania.com" aria-label="Scania - red gryphon on blue shield">
+    </sdds-header-brand-symbol>
+
+  </sdds-header>
+  
+  <main class="sdds-u-w-100 sdds-u-p3" style="box-sizing: border-box;">
+    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
+  </main>
+  `);
+export const Default = Template.bind({});
+//# sourceMappingURL=header-default.stories.js.map

package/dist/collection/components/header/webcomponent/header-default.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-default.stories.js","sourceRoot":"","sources":["../../../../src/components/header/webcomponent/header-default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,kBAAkB,MAAM,kCAAkC,CAAC;AAClE,OAAO,sBAAsB,MAAM,uCAAuC,CAAC;AAC3E,OAAO,sBAAsB,MAAM,uCAAuC,CAAC;AAC3E,OAAO,cAAc,MAAM,6BAA6B,CAAC;AAEzD,eAAe;EACb,KAAK,EAAE,iCAAiC;EACxC,UAAU,EAAE;IACV,KAAK,EAAE;MACL,QAAQ,EAAE,MAAM;MAChB,kBAAkB,EAAE,eAAe;MACnC,cAAc,EAAE,WAAW;MAC3B,aAAa,EAAE,UAAU;MACzB,iBAAiB,EAAE,cAAc;MACjC,sBAAsB,EAAE,kBAAkB;MAC1C,2BAA2B,EAAE,sBAAsB;MACnD,2BAA2B,EAAE,sBAAsB;MACnD,iBAAiB,EAAE,cAAc;KAClC;IACD,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,EAAE;EACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeHamburger from './header-hamburger/readme.md';\nimport readmeTitle from './header-title/readme.md';\nimport readmeItem from './header-item/readme.md';\nimport readmeDropdown from './header-dropdown/readme.md';\nimport readmeDropdownList from './header-dropdown-list/readme.md';\nimport readmeDropdownListItem from './header-dropdown-list-item/readme.md';\nimport readmeDropdownListUser from './header-dropdown-list-user/readme.md';\nimport readmeLauncher from './header-launcher/readme.md';\n\nexport default {\n  title: 'Components/Header/Web Component',\n  parameters: {\n    notes: {\n      'Header': readme,\n      'Header hamburger': readmeHamburger,\n      'Header title': readmeTitle,\n      'Header item': readmeItem,\n      'Header dropdown': readmeDropdown,\n      'Header dropdown list': readmeDropdownList,\n      'Header dropdown list item': readmeDropdownListItem,\n      'Header dropdown list user': readmeDropdownListUser,\n      'Header launcher': readmeLauncher,\n    },\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  args: {},\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <sdds-header>\n    <sdds-header-title>\n      Example: default\n    </sdds-header-title>\n\n    <sdds-header-launcher slot=\"end\">\n      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>\n      <sdds-header-launcher-list>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Trucklyfe</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">HaulHub</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">WheelWizz</a>\n        </sdds-header-launcher-list-item>\n      </sdds-header-launcher-list>\n    </sdds-header-launcher>\n\n\n    <sdds-header-brand-symbol slot=\"end\" link-href=\"https://scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n    </sdds-header-brand-symbol>\n\n  </sdds-header>\n  \n  <main class=\"sdds-u-w-100 sdds-u-p3\" style=\"box-sizing: border-box;\">\n    <p>Find complete examples under the <a href=\"/?path=/story/patterns-navigation--basic\">Patterns section</a>.</p>\n  </main>\n  `,\n  );\n\nexport const Default = Template.bind({});\n"]}

package/dist/collection/components/header/webcomponent/header-dropdown/header-dropdown.css

@@ -0,0 +1,31 @@
+:host {
+  height: var(--sdds-header-height);
+  position: relative;
+}
+:host .menu {
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: calc(100vh - var(--sdds-header-height));
+  box-shadow: var(--sdds-nav-dropdown-menu-box);
+  background-color: var(--sdds-header-app-launcher-menu-background);
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+:host .menu::-webkit-scrollbar {
+  width: 4px;
+  background-color: inherit;
+}
+:host .menu::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-300);
+}
+:host .menu ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+:host .state-open .dropdown-icon {
+  transform: rotateZ(180deg);
+}
+:host .state-open .button {
+  position: relative;
+  z-index: 801;
+}

package/dist/collection/components/header/webcomponent/header-dropdown/header-dropdown.js

@@ -0,0 +1,123 @@
+import { h, Host } from '@stencil/core';
+export class HeaderDropdown {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+    this.buttonLabel = undefined;
+    this.noDropdownIcon = false;
+    this.selected = false;
+    this.open = false;
+    this.buttonEl = undefined;
+  }
+  onAnyClick(event) {
+    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+    const isClickOutside = !event.composedPath().includes(this.host);
+    if (isClickOutside) {
+      this.open = false;
+    }
+  }
+  toggleDropdown() {
+    this.open = !this.open;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'state-open': this.open,
+      } }, h("sdds-header-item", { class: "button", active: this.open, selected: this.selected }, h("button", { ref: (el) => {
+        this.buttonEl = el;
+      }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
+        this.toggleDropdown();
+      } }, h("slot", { name: "button-icon" }), this.buttonLabel, h("slot", { name: "button-label" }), !this.noDropdownIcon && (h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("sdds-popover-canvas", { id: `sdds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: [],
+          },
+        },
+      ] }, h("slot", null))))));
+  }
+  static get is() { return "sdds-header-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
+        },
+        "attribute": "button-label",
+        "reflect": false
+      },
+      "noDropdownIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the dropdown icon (downwards chevron) should be hidden."
+        },
+        "attribute": "no-dropdown-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the button that opens the dropdown should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "buttonEl": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onAnyClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=header-dropdown.js.map

package/dist/collection/components/header/webcomponent/header-dropdown/header-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-dropdown.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-dropdown/header-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,cAAc;;IAiBjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;;0BATT,KAAK;oBAGX,KAAK;gBAER,KAAK;;;EAO9B,UAAU,CAAC,KAAiB;IAC1B,oGAAoG;IACpG,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAW,CAAC,CAAC;IACxE,IAAI,cAAc,EAAE;MAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI,CAAC,IAAI;SACxB;QAED,wBAAkB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACzE,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;cACV,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;YACrB,CAAC,mBACc,GAAG,IAAI,CAAC,IAAI,EAAE,mBACd,YAAY,IAAI,CAAC,IAAI,EAAE,kBACxB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EAClD,OAAO,EAAE,GAAG,EAAE;cACZ,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;YAED,YAAM,IAAI,EAAC,aAAa,GAAQ;YAC/B,IAAI,CAAC,WAAW;YACjB,YAAM,IAAI,EAAC,cAAc,GAAQ;YAChC,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,iBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAC9E,CACM,CACQ;QAClB,IAAI,CAAC,QAAQ,IAAI,CAChB,2BACE,EAAE,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE,EAChC,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,cAAc,EAAE,CAAC,EACjB,SAAS,EAAE;YACT;cACE,IAAI,EAAE,MAAM;cACZ,OAAO,EAAE;gBACP,kBAAkB,EAAE,EAAE;eACvB;aACF;WACF;UAED,eAAa,CACO,CACvB,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown',\n  styleUrl: 'header-dropdown.scss',\n  shadow: true,\n})\nexport class HeaderDropdown {\n  @Element() host: HTMLElement;\n\n  /** The label of the button that opens the dropdown.\n   * This is an alternative to the button-label slot. */\n  @Prop() buttonLabel: string;\n\n  /** If the dropdown icon (downwards chevron) should be hidden. */\n  @Prop() noDropdownIcon: boolean = false;\n\n  /** If the button that opens the dropdown should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() buttonEl?: HTMLButtonElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  @Listen('click', { target: 'document' })\n  onAnyClick(event: MouseEvent) {\n    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n    const isClickOutside = !event.composedPath().includes(this.host as any);\n    if (isClickOutside) {\n      this.open = false;\n    }\n  }\n\n  toggleDropdown() {\n    this.open = !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'state-open': this.open,\n          }}\n        >\n          <sdds-header-item class=\"button\" active={this.open} selected={this.selected}>\n            <button\n              ref={(el) => {\n                this.buttonEl = el;\n              }}\n              aria-expanded={`${this.open}`}\n              aria-controls={`launcher-${this.uuid}`}\n              aria-current={this.selected ? 'location' : 'false'}\n              onClick={() => {\n                this.toggleDropdown();\n              }}\n            >\n              <slot name=\"button-icon\"></slot>\n              {this.buttonLabel}\n              <slot name=\"button-label\"></slot>\n              {!this.noDropdownIcon && (\n                <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n              )}\n            </button>\n          </sdds-header-item>\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-dropdown-${this.uuid}`}\n              class=\"menu\"\n              referenceEl={this.buttonEl}\n              placement=\"bottom-start\"\n              show={this.open}\n              offsetDistance={0}\n              modifiers={[\n                {\n                  name: 'flip',\n                  options: {\n                    fallbackPlacements: [],\n                  },\n                },\n              ]}\n            >\n              <slot></slot>\n            </sdds-popover-canvas>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-dropdown-list/header-dropdown-list.css

@@ -0,0 +1,19 @@
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host {
+  display: block;
+  width: 190px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border-radius: none;
+  background-color: var(--sdds-header-app-launcher-menu-bg);
+}
+@media all and (max-width: 384px) {
+  :host {
+    width: 100vw;
+  }
+}
+
+:host([type=lg]) {
+  width: 320px;
+}