@six-group/ui-library 4.2.2 → 4.2.3

package/dist/collection/components/six-header/assets/six-logo.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg"><g fill="#DE3919" fill-rule="nonzero"><path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"/><path d="m42.16.324h5.21v24.806h-5.21z"/><path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"/></g></svg>

package/dist/collection/components/six-header/test/six-header.spec.js

@@ -1,177 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { SixHeader } from "../six-header";
-describe('six-header', () => {
-    beforeEach(() => {
-        const mutationObserverMock = jest.fn(function MutationObserver() {
-            this.observe = jest.fn();
-            this.disconnect = jest.fn();
-            return this;
-        });
-        global.MutationObserver = mutationObserverMock;
-    });
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [SixHeader],
-            html: `<six-header></six-header>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <six-header>
-        <mock:shadow-root>
-          <header class="six-header">
-            <section class="six-header__menu">
-              <six-icon-button name="menu"></six-icon-button>
-            </section>
-            <section class="six-header__logo">
-             <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
-               <title>
-                 SIX
-               </title>
-               <g fill="#DE3919" fill-rule="nonzero">
-                 <path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"></path>
-                 <path d="m42.16.324h5.21v24.806h-5.21z"></path>
-                 <path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"></path>
-               </g>
-             </svg>
-
-            </section>
-            <section class="six-header__placeholder"></section>
-            <section class="six-header__custom">
-              <slot></slot>
-            </section>
-          </header>
-          <div class="six-header__search-field">
-            <slot name="search-field"></slot>
-          </div>
-        </mock:shadow-root>
-      </six-header>
-    `);
-    });
-    it('should render custom logo ', async () => {
-        // given
-        const html = `<six-header><div slot="logo">custom logo</div></six-header>`;
-        // when
-        const page = await newSpecPage({
-            components: [SixHeader],
-            html: html,
-        });
-        // then
-        expect(page.root).toEqualHtml(`
-      <six-header>
-        <mock:shadow-root>
-          <header class="six-header">
-            <section class="six-header__menu">
-              <six-icon-button name="menu"></six-icon-button>
-            </section>
-            <section>
-               <slot name="logo"></slot>
-            </section>
-            <section class="six-header__placeholder"></section>
-            <section class="six-header__custom">
-              <slot></slot>
-            </section>
-          </header>
-          <div class="six-header__search-field">
-            <slot name="search-field"></slot>
-          </div>
-        </mock:shadow-root>
-          <div slot="logo">
-            custom logo
-          </div>
-      </six-header>
-    `);
-    });
-    it('should render app switcher', async () => {
-        // given
-        const html = `<six-header>
-                    <six-menu slot="app-switcher-menu">
-                      <six-menu-item checked="false">Custody</six-menu-item>
-                      <six-menu-item checked="true">Swiss Interbank Clearing</six-menu-item>
-                    </six-menu>
-                  </six-header>`;
-        // when
-        const page = await newSpecPage({
-            components: [SixHeader],
-            html: html,
-        });
-        // then
-        expect(page.root).toEqualHtml(`
-      <six-header>
-        <mock:shadow-root>
-          <header class="six-header">
-            <section class="six-header__menu">
-              <six-icon-button name="menu"></six-icon-button>
-            </section>
-            <section class="six-header__logo">
-             <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
-               <title>
-                 SIX
-               </title>
-               <g fill="#DE3919" fill-rule="nonzero">
-                 <path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"></path>
-                 <path d="m42.16.324h5.21v24.806h-5.21z"></path>
-                 <path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"></path>
-               </g>
-             </svg>
-
-            </section>
-            <section class="six-header__placeholder"></section>
-            <section class="six-header__custom">
-              <slot></slot>
-            </section>
-            <section class="six-header__app-switcher">
-                <six-dropdown distance="13" placement="bottom-end" skidding="20">
-                  <div class="six-header__app-switcher-dropdown" slot="trigger">
-                    <a class="six-header__selected-app">Swiss Interbank Clearing</a>
-                    <six-icon-button name="apps"></six-icon-button>
-                  </div>
-                  <slot name="app-switcher-menu"></slot>
-               </six-dropdown>
-           </section>
-          </header>
-          <div class="six-header__search-field">
-            <slot name="search-field"></slot>
-          </div>
-        </mock:shadow-root>
-        <six-menu slot="app-switcher-menu">
-            <six-menu-item checked="false">Custody</six-menu-item>
-            <six-menu-item checked="true">Swiss Interbank Clearing</six-menu-item>
-        </six-menu>
-      </six-header>
-    `);
-    });
-    it('renders without hamburger menu', async () => {
-        const page = await newSpecPage({
-            components: [SixHeader],
-            html: `<six-header hide-hamburger-menu="true"></six-header>`,
-        });
-        expect(page.root).toEqualHtml(`
-      <six-header hide-hamburger-menu="true">
-        <mock:shadow-root>
-          <header class="six-header">
-            <section class="six-header__logo">
-            <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
-              <title>
-                SIX
-              </title>
-              <g fill="#DE3919" fill-rule="nonzero">
-                <path d="m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525"></path>
-                <path d="m42.16.324h5.21v24.806h-5.21z"></path>
-                <path d="m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545"></path>
-              </g>
-            </svg>
-
-            </section>
-            <section class="six-header__placeholder"></section>
-            <section class="six-header__custom">
-              <slot></slot>
-            </section>
-          </header>
-          <div class="six-header__search-field">
-            <slot name="search-field"></slot>
-          </div>
-        </mock:shadow-root>
-      </six-header>
-  `);
-    });
-});
-//# sourceMappingURL=six-header.spec.js.map

package/dist/collection/components/six-header/test/six-header.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"six-header.spec.js","sourceRoot":"","sources":["../../../../src/components/six-header/test/six-header.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,gBAAgB;YAC5D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,2BAA2B;SAClC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG,6DAA6D,CAAC;QAE3E,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,QAAQ;QACR,MAAM,IAAI,GAAG;;;;;gCAKe,CAAC;QAE7B,OAAO;QACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;QAEH,OAAO;QACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2C7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,sDAAsD;SAC7D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2B/B,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixHeader } from '../six-header';\n\ndescribe('six-header', () => {\n  beforeEach(() => {\n    const mutationObserverMock = jest.fn(function MutationObserver(this: MutationObserver): MutationObserver {\n      this.observe = jest.fn();\n      this.disconnect = jest.fn();\n      return this;\n    });\n    global.MutationObserver = mutationObserverMock;\n  });\n\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: `<six-header></six-header>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section class=\"six-header__logo\">\n             <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n               <title>\n                 SIX\n               </title>\n               <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n                 <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n                 <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n                 <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n               </g>\n             </svg>\n\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n      </six-header>\n    `);\n  });\n\n  it('should render custom logo ', async () => {\n    // given\n    const html = `<six-header><div slot=\"logo\">custom logo</div></six-header>`;\n\n    // when\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: html,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section>\n               <slot name=\"logo\"></slot>\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n          <div slot=\"logo\">\n            custom logo\n          </div>\n      </six-header>\n    `);\n  });\n\n  it('should render app switcher', async () => {\n    // given\n    const html = `<six-header>\n                    <six-menu slot=\"app-switcher-menu\">\n                      <six-menu-item checked=\"false\">Custody</six-menu-item>\n                      <six-menu-item checked=\"true\">Swiss Interbank Clearing</six-menu-item>\n                    </six-menu>\n                  </six-header>`;\n\n    // when\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: html,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section class=\"six-header__logo\">\n             <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n               <title>\n                 SIX\n               </title>\n               <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n                 <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n                 <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n                 <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n               </g>\n             </svg>\n\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n            <section class=\"six-header__app-switcher\">\n                <six-dropdown distance=\"13\" placement=\"bottom-end\" skidding=\"20\">\n                  <div class=\"six-header__app-switcher-dropdown\" slot=\"trigger\">\n                    <a class=\"six-header__selected-app\">Swiss Interbank Clearing</a>\n                    <six-icon-button name=\"apps\"></six-icon-button>\n                  </div>\n                  <slot name=\"app-switcher-menu\"></slot>\n               </six-dropdown>\n           </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n        <six-menu slot=\"app-switcher-menu\">\n            <six-menu-item checked=\"false\">Custody</six-menu-item>\n            <six-menu-item checked=\"true\">Swiss Interbank Clearing</six-menu-item>\n        </six-menu>\n      </six-header>\n    `);\n  });\n\n  it('renders without hamburger menu', async () => {\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: `<six-header hide-hamburger-menu=\"true\"></six-header>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-header hide-hamburger-menu=\"true\">\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__logo\">\n            <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n              <title>\n                SIX\n              </title>\n              <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n                <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\"></path>\n                <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\n                <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\"></path>\n              </g>\n            </svg>\n\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n      </six-header>\n  `);\n  });\n});\n"]}