@scania/tegel 0.0.1-beta.9 → 0.0.31

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

@@ -0,0 +1,118 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Footer',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      description: 'Footer mode variant',
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    topPart: {
+      name: 'Top part',
+      description: 'Adds top part of the footer with more links',
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    topPart: false,
+  }
+};
+const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
+  <style>
+  .demo-wrapper {
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+  }
+  </style>
+
+  <div class="demo-wrapper">
+  <div class="sdds-footer 
+  ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}` : ''}
+ ">
+    ${topPart
+  ? `
+      <div class="sdds-footer-top sdds-container-fluid">
+        <div class="sdds-row">
+          <div class="sdds-footer-top-col sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+            <div class="sdds-footer-title opened">
+              <span>Title 1</span>
+              <span class="sdds-footer-top-icon">
+                <sdds-icon name="chevron_down" size="16px"></sdds-icon>
+              </span>
+            </div>
+            <ul class="sdds-footer-main-links opened">
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+            </ul>
+          </div>
+
+          <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+            <div class="sdds-footer-title">
+              <span>Title 2</span>
+              <span class="sdds-footer-top-icon">
+              <sdds-icon name="chevron_down" size="16px"></sdds-icon>
+              </span>
+            </div>
+            <ul class="sdds-footer-main-links">
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      `
+  : ''}
+    <div class="sdds-footer-main">
+      <ul class="sdds-footer-main-links">
+        <li><a href="#">Legal link</a></li>
+        <li><a href="#">Legal link</a></li>
+        <li><a href="#">Legal link</a></li>
+      </ul>
+      <ul class="sdds-footer-social-links">
+        <li><a href="#">Social link</a></li>
+        <li><a href="#">Social link</a></li>
+        <li><a href="#">Social link</a></li>
+      </ul>
+      <div class="sdds-footer-main-brand">
+        <p>Copyright &copy; 2022 Scania</p>
+      </div>
+    </div>
+  </div>
+    </div>
+  `);
+export const Default = Template.bind({});
+//# sourceMappingURL=footer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.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,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,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,WAAW,EAAE,qBAAqB;MAClC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,6CAA6C;MAC1D,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;MACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAC;IACH,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,KAAK;GACjB;CACA,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAC,EAAE,EAAE,CAC3C,iBAAiB,CACf;;;;;;;;;;;IAWA,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE,CAAA,CAAC,CAAC,EAAE;;MAG1F,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCH;EACC,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;GAkBD,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/Footer',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      description: 'Footer mode variant',\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    topPart: {\n      name: 'Top part',\n      description: 'Adds top part of the footer with more links',\n      table: {\n        defaultValue: { summary: false },\n      },\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args:{\n    modeVariant: 'Inherit from parent', \n    topPart: false,\n}\n};\n\nconst Template = ({ topPart, modeVariant}) =>\n  formatHtmlPreview(\n    `\n  <style>\n  .demo-wrapper {\n    padding: 0;\n    margin: 0;\n    font-size: 14px;\n  }\n  </style>\n\n  <div class=\"demo-wrapper\">\n  <div class=\"sdds-footer \n  ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}`: ''}\n \">\n    ${\n      topPart\n        ? `\n      <div class=\"sdds-footer-top sdds-container-fluid\">\n        <div class=\"sdds-row\">\n          <div class=\"sdds-footer-top-col sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n            <div class=\"sdds-footer-title opened\">\n              <span>Title 1</span>\n              <span class=\"sdds-footer-top-icon\">\n                <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n              </span>\n            </div>\n            <ul class=\"sdds-footer-main-links opened\">\n              <li><a href=\"#\">Legal link</a></li>\n              <li><a href=\"#\">Legal link</a></li>\n              <li><a href=\"#\">Legal link</a></li>\n              <li><a href=\"#\">Legal link</a></li>\n            </ul>\n          </div>\n\n          <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n            <div class=\"sdds-footer-title\">\n              <span>Title 2</span>\n              <span class=\"sdds-footer-top-icon\">\n              <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n              </span>\n            </div>\n            <ul class=\"sdds-footer-main-links\">\n              <li><a href=\"#\">Legal link</a></li>\n              <li><a href=\"#\">Legal link</a></li>\n              <li><a href=\"#\">Legal link</a></li>\n              <li><a href=\"#\">Legal link</a></li>\n            </ul>\n          </div>\n        </div>\n      </div>\n      `\n        : ''\n    }\n    <div class=\"sdds-footer-main\">\n      <ul class=\"sdds-footer-main-links\">\n        <li><a href=\"#\">Legal link</a></li>\n        <li><a href=\"#\">Legal link</a></li>\n        <li><a href=\"#\">Legal link</a></li>\n      </ul>\n      <ul class=\"sdds-footer-social-links\">\n        <li><a href=\"#\">Social link</a></li>\n        <li><a href=\"#\">Social link</a></li>\n        <li><a href=\"#\">Social link</a></li>\n      </ul>\n      <div class=\"sdds-footer-main-brand\">\n        <p>Copyright &copy; 2022 Scania</p>\n      </div>\n    </div>\n  </div>\n    </div>\n  `,\n  );\n\nexport const Default = Template.bind({});\n\n"]}

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

@@ -0,0 +1,218 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Header',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    siteName: {
+      name: 'Site name',
+      description: 'Set a custom title for the header',
+      type: 'string',
+    },
+  },
+  args: {
+    siteName: 'Application',
+  },
+};
+const AllMenusTemplate = ({ siteName }) => formatHtmlPreview(`
+    <nav class='sdds-nav'>
+        <div class='sdds-nav__left'>
+          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
+          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
+              <span id='sdds-nav__mob-menu-icon'>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
+              </span>
+          </button>
+          <div class='sdds-nav__app-name'>${siteName}</div>
+        </div>
+
+        <div class='sdds-nav__center'>
+          <ul class='sdds-nav__inline-menu'>
+
+              <li class='sdds-nav__item'>
+                  <a class='sdds-nav__item-core' href='#'>
+                      <span class='sdds-nav__item-core-text'>Item 1</span>
+                  </a>
+              </li>
+
+              <li class='sdds-nav__item sdds-nav__item--active'>
+                  <a class='sdds-nav__item-core ' href='#'>
+                      <span class='sdds-nav__item-core-text'>Item 2</span>
+                  </a>
+              </li>
+
+              <li class='sdds-nav__item sdds-nav__dropdown'>
+              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
+                  <span class='sdds-nav__item-core-text'>Item 3</span>
+                  <span class='sdds-nav__dropdown-icon'>
+                        <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
+                    </span>
+              </button>
+              <ul class='sdds-nav__dropdown-menu'>
+                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
+                  <li class='sdds-nav__dropdown-item'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></li>
+                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
+              </ul>
+              </li>
+          </ul>
+
+          <ul class='sdds-nav__toolbar-menu'>
+              <li class='sdds-nav__item'>
+                  <a class='sdds-nav__item-core' href='#'>
+                      <span class='sdds-nav__item-core-text'>Item 4</span>
+                  </a>
+              </li>
+
+              <li class='sdds-nav__item sdds-nav__avatar'>
+                  <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>
+                      <img class="sdds-nav__avatar-img" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>
+                      <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>
+                          <span class='sdds-nav__avatar-title'>Employee Name</span>
+                          <span class='sdds-nav__avatar-subtitle'>Company Name</span>
+                      </span>
+                  </button>
+
+                  <ul class='sdds-nav__avatar-menu'>
+                      <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>
+                          <span class='sdds-nav__avatar-info'>
+                              <span class='sdds-nav__avatar-title'>Employee Name</span>
+                              <span class='sdds-nav__avatar-subtitle'>Company Name</span>
+                          </span>
+                      </li>
+                      <li class='sdds-nav__avatar-item'>
+                          <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>
+                      </li>
+                      <li class='sdds-nav__avatar-item'>
+                          <button class='sdds-nav__avatar-item-core'>Logout</button>
+                      </li>
+                  </ul>
+              </li>
+          </ul>
+        </div>
+
+        <div class='sdds-nav__right'>
+          <div class='sdds-nav__item sdds-nav__app-launcher'>
+              <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>
+                  <sdds-icon class="sdds-nav__app-launcher-btn-svg" name="bento" size="20px" ></sdds-icon> 
+              </button>
+              <ul class='sdds-nav__app-launcher-menu'>
+                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
+                      <p class='sdds-nav__app-launcher-category-title'>Category 1</p>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>
+                      <p class='sdds-nav__app-launcher-category-title'>Category 2</p>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <button class='sdds-nav__app-launcher-item-core'>Application 5 BTN</button>
+                  </li>
+                  <li class='sdds-nav__app-launcher-item'>
+                      <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>
+                  </li>
+              </ul>
+          </div>
+          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
+        </div>
+    </nav>
+
+    <script>
+    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
+    toggleAvatarMenu = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+    toggleMobileMenu = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+    toggleAppLauncher = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+    toggleInlineDropdown = () => {
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+
+    }
+
+    toggleSearchbar = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__searchbar--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+    }
+
+    closeDropdownsFromOverlay = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+
+    }
+    </script>
+    `);
+export const AllMenus = AllMenusTemplate.bind({});
+//# sourceMappingURL=header-all.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-all.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-all.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,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACxC,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwK/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,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 AllMenusTemplate = ({ 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'><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\n          <ul class='sdds-nav__toolbar-menu'>\n              <li class='sdds-nav__item'>\n                  <a class='sdds-nav__item-core' href='#'>\n                      <span class='sdds-nav__item-core-text'>Item 4</span>\n                  </a>\n              </li>\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\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                      <button class='sdds-nav__app-launcher-item-core'>Application 5 BTN</button>\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\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\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 AllMenus = AllMenusTemplate.bind({});\n"]}

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

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

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

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

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

@@ -0,0 +1,114 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Header',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    siteName: {
+      name: 'Site name',
+      description: 'Set a custom title for the header',
+      type: 'string',
+    },
+  },
+  args: {
+    siteName: 'Application',
+  },
+};
+const InlineMenuTemplate = ({ siteName }) => formatHtmlPreview(`
+    <nav class='sdds-nav'>
+        <div class='sdds-nav__left'>
+          <div class="sdds-nav__overlay" onclick="closeDropdownsFromOverlay()"></div>
+          <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>
+              <span id='sdds-nav__mob-menu-icon'>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>
+                  <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>
+              </span>
+          </button>
+          <div class='sdds-nav__app-name'>${siteName}</div>
+        </div>
+
+        <div class='sdds-nav__center'>
+          <ul class='sdds-nav__inline-menu'>
+
+              <li class='sdds-nav__item'>
+                  <a class='sdds-nav__item-core' href='#'>
+                      <span class='sdds-nav__item-core-text'>Item 1</span>
+                  </a>
+              </li>
+
+              <li class='sdds-nav__item sdds-nav__item--active'>
+                  <a class='sdds-nav__item-core ' href='#'>
+                      <span class='sdds-nav__item-core-text'>Item 2</span>
+                  </a>
+              </li>
+
+              <li class='sdds-nav__item sdds-nav__dropdown'>
+              <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>
+                  <span class='sdds-nav__item-core-text'>Item 3</span>
+                  <span class='sdds-nav__dropdown-icon'>
+                    <sdds-icon class="sdds-nav__dropdown-icon-svg" name="chevron_down" size="16px"></sdds-icon> 
+                  </span>
+              </button>
+              <ul class='sdds-nav__dropdown-menu'>
+                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
+                  <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3</a></li>
+                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
+              </ul>
+              </li>
+          </ul>
+        </div>
+
+        <div class='sdds-nav__right'>
+          <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>
+        </div>
+    </nav>
+
+    <script>
+    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
+    toggleMobileMenu = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.toggle("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.remove("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+
+    toggleInlineDropdown = () => {
+        document.getElementsByClassName("sdds-nav__item sdds-nav__dropdown")[0].classList.toggle("sdds-nav__dropdown--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__avatar--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+    }
+
+    closeDropdownsFromOverlay = () => {
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__mob-menu--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__app-launcher--opened");
+        document.getElementsByClassName("sdds-nav")[0].classList.remove("sdds-nav__searchbar--opened");
+
+    }
+    </script>
+    `);
+export const InlineMenu = InlineMenuTemplate.bind({});
+//# sourceMappingURL=header-inline.stories.js.map

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

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