@3t-transform/threeteeui 0.1.27 → 0.1.28

package/dist/collection/components/molecules/tttx-sorter/test/tttx-sorter.spec.js

@@ -0,0 +1,87 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxSorter } from '../tttx-sorter';
+const sorterData = { sorterOptions: [{ optionLabel: 'Expiry date' }, { optionLabel: 'Qualification name' }] };
+describe('tttx-sorter', () => {
+  it('renders without errors', async () => {
+    const page = await newSpecPage({
+      components: [TttxSorter],
+      html: `<tttx-sorter field-options-data='${JSON.stringify(sorterData)}'></tttx-sorter>`,
+    });
+    expect(page.root).toBeDefined();
+    expect(page.root)
+      .toEqualHtml(`<tttx-sorter field-options-data="{&quot;sorterOptions&quot;:[{&quot;optionLabel&quot;:&quot;Expiry date&quot;},{&quot;optionLabel&quot;:&quot;Qualification name&quot;}]}" id="sorter__undefined">
+        <mock:shadow-root>
+          <div class="sorter-container" tabindex="0">
+            <button class="arrow-toggle-button" type="button">
+              <tttx-icon color="black" icon="arrow_downward"></tttx-icon>
+            </button>
+            <div class="dropdown-selector">
+              <div class="dropdown-selector-button">
+                <div class="dropdown-selector-text"></div>
+                <div class="dropdown-selector-chevron">
+                  <tttx-icon color="black" icon="expand_more"></tttx-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </tttx-sorter>`);
+    expect(page.rootInstance).toBeInstanceOf(TttxSorter);
+  });
+  it('renders null without errors when no data passesd in', async () => {
+    const page = await newSpecPage({
+      components: [TttxSorter],
+      html: '<tttx-sorter></tttx-sorter>',
+    });
+    expect(page.root).toBeDefined();
+    expect(page.root).toEqualHtml(`
+        <tttx-sorter>
+          <mock:shadow-root></mock:shadow-root>
+        </tttx-sorter>`);
+    expect(page.rootInstance).toBeInstanceOf(TttxSorter);
+  });
+  it('emits sorterChangeEvent when sort toggle button is clicked', async () => {
+    const page = await newSpecPage({
+      components: [TttxSorter],
+      html: `<tttx-sorter field-options-data='${JSON.stringify(sorterData)}' sorter-key='basic-sorter'></tttx-sorter>`,
+    });
+    await page.waitForChanges();
+    const toggleButton = page.root.shadowRoot.querySelector('.arrow-toggle-button');
+    const eventSpy = jest.fn();
+    page.doc.addEventListener('sorterChangeEvent', eventSpy);
+    await page.waitForChanges();
+    await toggleButton.dispatchEvent(new Event('click'));
+    expect(eventSpy).toHaveBeenCalled();
+    expect(eventSpy.mock.calls[0][0].detail).toEqual({ sortField: '', sorterDirection: 'ascending', sorterKey: 'basic-sorter' });
+  });
+  it('emits sorterChangeEvent when sort toggle button is clicked', async () => {
+    const page = await newSpecPage({
+      components: [TttxSorter],
+      html: `<tttx-sorter field-options-data='${JSON.stringify(sorterData)}' sorter-key='basic-sorter' default-sort-direction='ascending'></tttx-sorter>`,
+    });
+    await page.waitForChanges();
+    const toggleButton = page.root.shadowRoot.querySelector('.arrow-toggle-button');
+    const eventSpy = jest.fn();
+    page.doc.addEventListener('sorterChangeEvent', eventSpy);
+    await page.waitForChanges();
+    await toggleButton.dispatchEvent(new Event('click'));
+    expect(eventSpy).toHaveBeenCalled();
+    expect(eventSpy.mock.calls[0][0].detail).toEqual({ sortField: '', sorterDirection: 'descending', sorterKey: 'basic-sorter' });
+  });
+  it('emits sorterChangeEvent when dropdown option is selected', async () => {
+    const page = await newSpecPage({
+      components: [TttxSorter],
+      html: `<tttx-sorter field-options-data='${JSON.stringify(sorterData)}' sorter-key='basic-sorter' default-sort-direction='descending'></tttx-sorter>`,
+    });
+    const dropdownSelector = page.root.shadowRoot.querySelector('.dropdown-selector');
+    await dropdownSelector.dispatchEvent(new Event('click'));
+    await page.waitForChanges();
+    const dropdownOption = page.root.shadowRoot.querySelector('.dropdown-option');
+    const eventSpy = jest.fn();
+    page.doc.addEventListener('sorterChangeEvent', eventSpy);
+    await page.waitForChanges();
+    await dropdownOption.dispatchEvent(new Event('click'));
+    expect(eventSpy).toHaveBeenCalledTimes(1);
+    expect(eventSpy.mock.calls[0][0].detail).toEqual({ sortField: 'Expiry date', sorterDirection: 'descending', sorterKey: 'basic-sorter' });
+  });
+});

package/dist/collection/components/molecules/tttx-sorter/tttx-sorter.css

@@ -9,6 +9,8 @@
   border: 1px solid #d5d5d5;
   border-radius: 4px;
   font-weight: 400;
+  box-sizing: border-box;
+  height: 36px;
 }
 @media (max-width: 475px) {
   .sorter-container {
@@ -50,7 +52,6 @@
   padding-right: 4px;
   align-items: center;
   color: #212121;
-  box-sizing: border-box;
   width: 100%;
 }
 @media (max-width: 475px) {

package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('tttx-standalone-input', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<tttx-standalone-input></tttx-standalone-input>');
+    const element = await page.find('tttx-standalone-input');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/molecules/tttx-standalone-input/test/tttx-standalone-input.spec.js

@@ -0,0 +1,215 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxInput } from '../tttx-standalone-input';
+describe('tttx-standalone-input', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input>
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <div class="input-container">
+                <input class="standalone" type="text">
+                <span class="errorBubble">
+                  <span class="material-symbols-rounded validationicon">
+                    warning
+                  </span>
+                </span>
+              </div>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with the left icon', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input iconleft="info" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input iconleft="info">
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <div class="input-container">
+                <tttx-icon color="grey" icon="info" id="icon-left"></tttx-icon>
+                <input class="standalone" type="text">
+                <span class="errorBubble">
+                  <span class="material-symbols-rounded validationicon">
+                    warning
+                  </span>
+                </span>
+              </div>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with the right icon', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input iconright="info" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input iconright="info">
+            <label class="inputBlock">
+              <span class="optional">
+                (optional)
+              </span>
+              <div class="input-container">
+                <tttx-icon color="grey" icon="info" id="icon-right"></tttx-icon>
+                <input class="standalone" type="text">
+                <span class="errorBubble">
+                  <span class="material-symbols-rounded validationicon">
+                    warning
+                  </span>
+                </span>
+              </div>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the input field with an error message', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input required showerrormsg errormsg="The field is required" />',
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-standalone-input errormsg="The field is required" required="" showerrormsg="">
+            <label class="inputBlock">
+              <div class="input-container">
+                <input class="invalid standalone" required="" type="text">
+                <span class="errorBubble visible">
+                  <span class="material-symbols-rounded validationicon">
+                    warning
+                  </span>
+                  The field is required
+                </span>
+              </div>
+            </label>
+        </tttx-standalone-input>
+        `);
+  });
+  it('renders the label as inline', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input inline />',
+    });
+    expect(page.root).toEqualHtml(`
+      <tttx-standalone-input inline="">
+          <label class="inputInline">
+            <span class="optional">
+              (optional)
+            </span>
+            <div class="input-container">
+              <input class="standalone" type="text">
+              <span class="errorBubble">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+              </span>
+            </div>
+          </label>
+      </tttx-standalone-input>
+      `);
+  });
+  it('renders the input with an icon within the field', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input inputicon="search" />',
+    });
+    expect(page.root).toEqualHtml(`
+      <tttx-standalone-input inputicon="search">
+          <label class="inputBlock">
+            <span class="optional">
+              (optional)
+            </span>
+            <div class="input-container">
+              <tttx-icon class="input-icon" icon="search" color="grey"></tttx-icon>
+              <input class="standalone" type="text">
+              <span class="errorBubble">
+                <span class="material-symbols-rounded validationicon">
+                  warning
+                </span>
+              </span>
+            </div>
+          </label>
+      </tttx-standalone-input>
+      `);
+  });
+  it('renders the input without the errorbubble', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input showerrorbubble="false" />',
+    });
+    expect(page.root).toEqualHtml(`
+      <tttx-standalone-input showerrorbubble="false">
+          <label class="inputBlock">
+            <span class="optional">
+              (optional)
+            </span>
+            <div class="input-container">
+              <input class="standalone" type="text">
+            </div>
+          </label>
+      </tttx-standalone-input>
+      `);
+  });
+  it('can trigger onInput handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('valueChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.value = 'a';
+    const event = new CustomEvent('input', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onFocus handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('focusChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.focus();
+    const event = new CustomEvent('focus', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onBlur handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('blurChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    input.blur();
+    const event = new CustomEvent('blur', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+  it('can trigger onInvalid handler', async () => {
+    const page = await newSpecPage({
+      components: [TttxInput],
+      html: '<tttx-standalone-input />',
+    });
+    const callbackFn = jest.fn();
+    page.doc.addEventListener('invalidChanged', callbackFn);
+    const input = page.root.querySelector('input');
+    // Doesn't work:
+    // input.setCustomValidity('required');
+    // input.checkValidity();
+    const event = new CustomEvent('invalid', { composed: true, bubbles: true });
+    input.dispatchEvent(event);
+    expect(callbackFn).toHaveBeenCalled();
+  });
+});

package/dist/collection/components/molecules/tttx-standalone-input/tttx-standalone-input.css

@@ -2,13 +2,9 @@
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
 }
 
-.material-symbols-rounded {
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
-}
-
 .material-symbols-rounded {
   font-family: "Material Symbols Rounded", sans-serif;
-  font-weight: normal;
+  font-weight: 400;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
@@ -80,7 +76,6 @@
   background-color: transparent;
   height: 26px;
   font-size: 14px;
-  line-height: 16px;
   border-radius: none;
   z-index: 2;
   color: #dc0000;
@@ -90,7 +85,6 @@
   width: 16px;
   height: 16px;
   font-size: 16px;
-  line-height: 19px;
   margin-right: 4px;
   vertical-align: middle;
   color: #dc0000;
@@ -128,8 +122,6 @@ label.inputInline .input-container {
 label {
   font-weight: 500;
   font-size: 16px;
-  line-height: 19px;
-  margin-bottom: 16px;
 }
 
 input:not([type=submit]) {
@@ -139,7 +131,6 @@ input:not([type=submit]) {
   height: 36px;
   padding: 0 16px;
   font-size: 16px;
-  line-height: 19px;
   border: 1px solid #d5d5d5;
   border-radius: 4px;
   margin-top: 4px;
@@ -168,9 +159,9 @@ input.invalid:invalid, input.standalone.invalid {
 }
 
 input ~ .errorBubble {
+  min-height: 27px;
   position: relative;
   font-size: 14px;
-  line-height: 16px;
   font-weight: normal;
   width: 100%;
   font-family: "Roboto", sans-serif;
@@ -179,17 +170,17 @@ input ~ .errorBubble {
   align-content: center;
   align-items: center;
   justify-items: center;
-  margin-top: 4px;
 }
 
 input ~ .errorBubble:not(.visible) {
-  display: none;
+  visibility: hidden;
 }
 
 input ~ .errorBubble span {
   color: #dc0000;
   font-size: 16px;
   margin-right: 4px;
+  height: 16px;
 }
 
 input.invalid:invalid ~ .errorBubble {
@@ -199,6 +190,7 @@ input.invalid:invalid ~ .errorBubble {
   width: 100%;
   font-family: "Roboto", sans-serif;
   color: #dc0000;
+  visibility: visible;
 }
 
 input:focus {
@@ -209,15 +201,6 @@ input:focus-visible {
   outline: none;
 }
 
-.secondarylabel {
-  color: #757575;
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: normal;
-  display: flex;
-  margin-top: 4px;
-}
-
 :host {
   display: block;
 }

package/dist/collection/components/molecules/tttx-toolbar/test/tttx-toolbar.spec.js

@@ -0,0 +1,52 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxToolbar } from '../tttx-toolbar';
+describe('tttx-standalone-input', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [TttxToolbar],
+      html: `
+              <tttx-toolbar>
+                <span slot="before"><div>Before</div></span>
+                <span slot="center"><div>Center</div></span>
+                <span slot="after"><div>After</div></span>
+              </tttx-toolbar>
+            `,
+    });
+    expect(page.root).toEqualHtml(`
+          <tttx-toolbar class="bordered">
+            <mock:shadow-root>
+              <slot name="before"></slot>
+              <slot name="center"></slot>
+              <slot name="after"></slot>
+            </mock:shadow-root>
+            <span slot="before"><div>Before</div></span>
+            <span slot="center"><div>Center</div></span>
+            <span slot="after"><div>After</div></span>
+          </tttx-toolbar>
+        `);
+  });
+  it('renders without a border', async () => {
+    const page = await newSpecPage({
+      components: [TttxToolbar],
+      html: `
+            <tttx-toolbar border="false">
+              <span slot="before"><div>Before</div></span>
+              <span slot="center"><div>Center</div></span>
+              <span slot="after"><div>After</div></span>
+            </tttx-toolbar>
+          `,
+    });
+    expect(page.root).toEqualHtml(`
+        <tttx-toolbar border="false">
+          <mock:shadow-root>
+            <slot name="before"></slot>
+            <slot name="center"></slot>
+            <slot name="after"></slot>
+          </mock:shadow-root>
+          <span slot="before"><div>Before</div></span>
+          <span slot="center"><div>Center</div></span>
+          <span slot="after"><div>After</div></span>
+        </tttx-toolbar>
+      `);
+  });
+});

package/dist/collection/shared/test/domsanitiser.options.spec.js

@@ -0,0 +1,23 @@
+import domSanitiserOptions from '../domsanitiser.options';
+describe('dom sanitiser options', () => {
+  it('allows tags beginning with "tttx-"', async () => {
+    const tagName = 'tttx-custom-element';
+    const result = domSanitiserOptions.
+      CUSTOM_ELEMENT_HANDLING.
+      tagNameCheck(tagName);
+    expect(result).not.toBe(null);
+  });
+  it('disallows tags not beginning with "tttx-"', async () => {
+    const tagName = 'custom-element';
+    const result = domSanitiserOptions.
+      CUSTOM_ELEMENT_HANDLING.
+      tagNameCheck(tagName);
+    expect(result).toBe(null);
+  });
+  it('allows all attributes', async () => {
+    const result = domSanitiserOptions.
+      CUSTOM_ELEMENT_HANDLING.
+      attributeNameCheck();
+    expect(result).toBe(true);
+  });
+});