npm - @scania/tegel - Versions diffs - 0.0.4 → 0.0.6 - Mend

@scania/tegel 0.0.4 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1252) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"header-default.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-default.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,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChC,iBAAiB,CACf;;;sCAGkC,QAAQ;;;;;;GAM3C,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,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 Template = ({ siteName }) =>\n formatHtmlPreview(\n `\n <nav class='sdds-nav'>\n <div class='sdds-nav__left'>\n <div class='sdds-nav__app-name'>${siteName}</div>\n </div>\n <div class='sdds-nav__right'>\n <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>\n </div>\n</nav>\n `,\n );\n\nexport const Default = Template.bind({});\n"]}
1	+ {"version":3,"file":"header-default.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-default.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,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChC,iBAAiB,CACf;;;sCAGkC,QAAQ;;;;;;GAM3C,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,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 Template = ({ siteName }) =>\n formatHtmlPreview(\n `\n <nav class='sdds-nav'>\n <div class='sdds-nav__left'>\n <div class='sdds-nav__app-name'>${siteName}</div>\n </div>\n <div class='sdds-nav__right'>\n <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>\n </div>\n</nav>\n `,\n );\n\nexport const Default = Template.bind({});\n"]}

package/dist/collection/components/header/header-inline.stories.js CHANGED Viewed

@@ -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',
@@ -26,8 +26,10 @@ export default {
   argTypes: {
     siteName: {
       name: 'Site name',
-      description: 'Set a custom title for the header',
-      type: 'string',
+      description: 'Sets a custom title for the header.',
+      control: {
+        type: 'text',
+      },
     },
   },
   args: {
@@ -76,6 +78,12 @@ const InlineMenuTemplate = ({ siteName }) => formatHtmlPreview(`
                   <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>
+              <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>
           </ul>
         </div>
@@ -106,7 +114,6 @@ const InlineMenuTemplate = ({ siteName }) => formatHtmlPreview(`
         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>
     `);

package/dist/collection/components/header/header-inline.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header-inline.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-inline.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,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC1C,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgE~~/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,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 InlineMenuTemplate = ({ 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='sdds-nav__item-core-text'>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 </div>\n\n <div class='sdds-nav__right'>\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 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 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 </script>\n `,\n );\n\nexport const InlineMenu = InlineMenuTemplate.bind({});\n"]}
1	+ {"version":3,"file":"header-inline.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-inline.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,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC1C,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqE/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,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 InlineMenuTemplate = ({ 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='sdds-nav__item-core-text'>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\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 </ul>\n </div>\n\n <div class='sdds-nav__right'>\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 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 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 </script>\n `,\n );\n\nexport const InlineMenu = InlineMenuTemplate.bind({});\n"]}

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

@@ -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',
@@ -26,8 +26,10 @@ export default {
   argTypes: {
     siteName: {
       name: 'Site name',
-      description: 'Set a custom title for the header',
-      type: 'string',
+      description: 'Sets a custom title for the header.',
+      control: {
+        type: 'text',
+      },
     },
   },
   args: {

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

	@@ -1 +1 @@
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"]}
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,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,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/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 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 CHANGED Viewed

@@ -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',
@@ -26,8 +26,10 @@ export default {
   argTypes: {
     siteName: {
       name: 'Site name',
-      description: 'Set a custom title for the header',
-      type: 'string',
+      description: 'Sets a custom title for the header.',
+      control: {
+        type: 'text',
+      },
     },
   },
   args: {

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

	@@ -1 +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,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"]}
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,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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"]}