@scania/tegel 0.0.61 → 0.0.72

package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js

@@ -1,145 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeItem from './sdds-footer-item/readme.md';
-import readmeLinkGroup from './sdds-footer-group/readme.md';
-export default {
-  title: 'Components/Footer',
-  parameters: {
-    notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer item': readmeItem },
-    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',
-      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    topPart: {
-      name: 'Top part',
-      description: 'Adds the top part of the footer with more links.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    topPart: false,
-  },
-};
-const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
-    <main>
-      <div class="sdds-u-p3 ">
-        <div class="sdds-body-01">
-          Resize the window to see how the footer behaves on smaller/bigger screens.
-        </div>
-      </div>
-    </main>
-    <sdds-footer
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      ${topPart
-  ? `
-      <div slot="top">
-        <sdds-footer-group title-text="Title">
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-
-        <sdds-footer-group title-text="Title">
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-
-        <sdds-footer-group title-text="Title">
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-
-        <sdds-footer-group title-text="Title">
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-      </div>
-      `
-  : ''}
-      <div slot="main-left">
-        <sdds-footer-group>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> Link text</a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-      </div>
-      <div slot="main-right">
-        <sdds-footer-group>
-          <sdds-footer-item >
-            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
-          </sdds-footer-item>
-          <sdds-footer-item >
-            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
-          </sdds-footer-item>
-        </sdds-footer-group>
-      </div>
-    </sdds-footer>
-  
-  `);
-export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-footer.stories.js.map

package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sdds-footer.stories.js","sourceRoot":"","sources":["../../../../src/components/footer/webcomponent/sdds-footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,eAAe,MAAM,+BAA+B,CAAC;AAE5D,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE;IAC5F,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,WAAW,EACT,0GAA0G;MAC5G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,KAAK;GACf;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CACf;;;;;;;;;MASE,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;QAGxF,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDL;EACG,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCH,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './sdds-footer-item/readme.md';\nimport readmeLinkGroup from './sdds-footer-group/readme.md';\n\nexport default {\n  title: 'Components/Footer',\n  parameters: {\n    notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer item': readmeItem },\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      description:\n        'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    topPart: {\n      name: 'Top part',\n      description: 'Adds the top part of the footer with more links.',\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    <main>\n      <div class=\"sdds-u-p3 \">\n        <div class=\"sdds-body-01\">\n          Resize the window to see how the footer behaves on smaller/bigger screens.\n        </div>\n      </div>\n    </main>\n    <sdds-footer\n    ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n    >\n      ${\n        topPart\n          ? `\n      <div slot=\"top\">\n        <sdds-footer-group title-text=\"Title\">\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n        </sdds-footer-group>\n\n        <sdds-footer-group title-text=\"Title\">\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n        </sdds-footer-group>\n\n        <sdds-footer-group title-text=\"Title\">\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n        </sdds-footer-group>\n\n        <sdds-footer-group title-text=\"Title\">\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n        </sdds-footer-group>\n      </div>\n      `\n          : ''\n      }\n      <div slot=\"main-left\">\n        <sdds-footer-group>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> Link text</a>\n          </sdds-footer-item>\n        </sdds-footer-group>\n      </div>\n      <div slot=\"main-right\">\n        <sdds-footer-group>\n          <sdds-footer-item >\n            <a href=\"#\"> <sdds-icon name=\"truck\"></sdds-icon></a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> <sdds-icon name=\"truck\"></sdds-icon></a>\n          </sdds-footer-item>\n          <sdds-footer-item >\n            <a href=\"#\"> <sdds-icon name=\"truck\"></sdds-icon></a>\n          </sdds-footer-item>\n        </sdds-footer-group>\n      </div>\n    </sdds-footer>\n  \n  `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,220 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header/Native',
-  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: 'Sets a custom title for the header.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  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--selected'>
-                  <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--selected'><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

@@ -1 +0,0 @@
-{"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,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,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/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 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--selected'>\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--selected'><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

@@ -1,50 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header/Native',
-  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: 'Sets a custom title for the header.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  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

@@ -1 +0,0 @@
-{"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

@@ -1,121 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Header/Native',
-  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: 'Sets a custom title for the header.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  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>
-
-              <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>
-
-        <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

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