@3t-transform/threeteeui 0.1.7 → 0.1.8

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

@@ -1,232 +0,0 @@
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxForm } from '../tttx-form';
-describe('tttx-form', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [TttxForm],
-      html: '<tttx-form></tttx-form>',
-    });
-    expect(page.root).toEqualHtml(`
-            <tttx-form>
-                <mock:shadow-root>
-                    <form>
-                        <fieldset></fieldset>
-                    </form>
-                </mock:shadow-root>
-            </tttx-form>
-        `);
-  });
-  it('renders a single form item', async () => {
-    const singleFormItemSchema = {
-      properties: {
-        input: {
-          type: 'string',
-          format: 'string',
-          form: {
-            type: 'text',
-            label: 'Input Field',
-            validation: {
-              required: {
-                message: 'Please enter something'
-              }
-            }
-          }
-        }
-      }
-    };
-    const page = await newSpecPage({
-      components: [TttxForm],
-      html: `<tttx-form formschema='${JSON.stringify(singleFormItemSchema)}'></tttx-form>`,
-    });
-    expect(page.root).toEqualHtml(`
-            <tttx-form formschema='${JSON.stringify(singleFormItemSchema)}'>
-                <mock:shadow-root>
-                    <form>
-                    <fieldset>
-                        <label class="inputBlock">
-                            Input Field
-                            <input autocomplete="off" data-required="Please enter something" name="input" placeholder="" required="" type="text" />
-                            <div class="errorBubble"></div>
-                        </label>
-                        <input class="button primary-blue" type="submit" value="Save">
-                    </fieldset>
-                    </form>
-                </mock:shadow-root>
-            </tttx-form>
-        `);
-  });
-  it('renders without validation', async () => {
-    const singleFormItemSchema = {
-      properties: {
-        input: {
-          type: 'string',
-          format: 'string',
-          form: {
-            type: 'text',
-            label: 'Input Field'
-          }
-        }
-      }
-    };
-    const page = await newSpecPage({
-      components: [TttxForm],
-      html: `<tttx-form formschema='${JSON.stringify(singleFormItemSchema)}'></tttx-form>`,
-    });
-    expect(page.root).toEqualHtml(`
-            <tttx-form formschema='${JSON.stringify(singleFormItemSchema)}'>
-                <mock:shadow-root>
-                    <form>
-                    <fieldset>
-                        <label class="inputBlock">
-                            Input Field
-                            <span class="optional">
-                                (optional)
-                            </span>
-                            <input autocomplete="off" name="input" placeholder="" type="text" />
-                            <div class="errorBubble"></div>
-                        </label>
-                        <input class="button primary-blue" type="submit" value="Save">
-                    </fieldset>
-                    </form>
-                </mock:shadow-root>
-            </tttx-form>
-        `);
-  });
-  it('renders a complex form', async () => {
-    const formSchema = {
-      properties: {
-        title: {
-          type: 'string',
-          format: 'string',
-          form: {
-            type: 'text',
-            placeholder: 'Mr, Mrs, Dr, Hon Rev',
-            label: 'Title',
-          },
-        },
-        forename: {
-          type: 'string',
-          format: 'string',
-          form: {
-            type: 'text',
-            placeholder: 'John',
-            label: 'Forename',
-            validation: {
-              required: {
-                message: 'Please enter your forename',
-              },
-            },
-          },
-        },
-        surname: {
-          type: 'string',
-          format: 'string',
-          form: {
-            type: 'text',
-            placeholder: 'Doe',
-            label: 'Surname',
-            validation: {
-              required: {
-                message: 'Please enter your surname',
-              },
-            },
-          },
-        },
-        postcode: {
-          type: 'string',
-          format: 'string',
-          form: {
-            type: 'text',
-            placeholder: 'AB10',
-            label: 'Start of postcode',
-            validation: {
-              required: {
-                message: 'Please enter the beginning of your postcode',
-              },
-              pattern: {
-                pattern: '^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$',
-                message: 'Please enter the first half of your postcode. EG: ZZ99',
-              },
-              maxlength: 4,
-            },
-          },
-        },
-        age: {
-          type: 'number',
-          format: 'number',
-          form: {
-            type: 'number',
-            placeholder: '',
-            label: 'Age',
-            validation: {
-              required: {
-                message: 'Please enter your age',
-              },
-              badInput: {
-                message: 'Please enter a number',
-              },
-            },
-          },
-        },
-        dob: {
-          type: 'string',
-          format: 'date-time',
-          form: {
-            type: 'date',
-            placeholder: '',
-            label: 'Date of birth',
-            validation: {
-              required: {
-                message: 'Please enter your date of birth',
-              },
-              minmax: {
-                min: '1900-01-01',
-                max: '2100-12-31',
-                message: 'Please enter a date between 1900 and 2100',
-              },
-            },
-          },
-        },
-      },
-    };
-    const page = await newSpecPage({
-      components: [TttxForm],
-      template: () => (h("tttx-form", { formschema: formSchema })),
-    });
-    expect(page.root).toEqualHtml(`
-            <tttx-form>
-                <mock:shadow-root>
-                    <form>
-                        <fieldset>
-                            <label class="inputBlock">Title<span class="optional">&nbsp;(optional)</span>
-                                <input autocomplete="off" name="title" placeholder="Mr, Mrs, Dr, Hon Rev" type="text" />
-                                <div class="errorBubble"></div>
-                            </label>
-                            <label class="inputBlock">Forename
-                                <input autocomplete="off" data-required="Please enter your forename" name="forename" placeholder="John" required="" type="text"/>
-                                <div class="errorBubble"></div>
-                            </label>
-                            <label class="inputBlock">Surname
-                                <input autocomplete="off" data-required="Please enter your surname" name="surname" placeholder="Doe" required="" type="text">
-                                <div class="errorBubble"></div>
-                            </label>
-                            <label class="inputBlock">Start of postcode
-                                <input autocomplete="off" data-pattern="Please enter the first half of your postcode. EG: ZZ99" data-required="Please enter the beginning of your postcode" maxlength="4" name="postcode" pattern="^([A-Za-z][0-9])$|^([A-Za-z][0-9]{2})$|^([A-Za-z]{2}[0-9])$|^([A-Za-z]{2}[0-9]{2})$|^([A-Za-z][0-9][A-Za-z])$|^([A-Za-z]{2}[0-9][A-Za-z])$|^(GIR|BF|BX|XX)$" placeholder="AB10" required="" type="text">
-                                <div class="errorBubble"></div>
-                            </label>
-                            <label class="inputBlock">Age
-                                <input autocomplete="off" data-badinput="Please enter a number" data-required="Please enter your age" name="age" placeholder="" required="" type="number">
-                                <div class="errorBubble"></div>
-                            </label>
-                            <label class="inputBlock">Date of birth
-                                <input autocomplete="off" data-range="Please enter a date between 1900 and 2100" data-required="Please enter your date of birth" max="2100-12-31" min="1900-01-01" name="dob" placeholder="" required="" type="date">
-                                <div class="errorBubble"></div>
-                            </label>
-                            <input type="submit" class="button primary-blue" value="Save"></fieldset>
-                    </form>
-                </mock:shadow-root>
-            </tttx-form>
-        `);
-  });
-});

package/dist/collection/components/molecules/tttx-list/test/ttttx-list.spec.e2e.js

@@ -1,26 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-describe('tttx-list', () => {
-  it('sanitises the html of the element property', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<tttx-list></tttx-list>');
-    await page.$eval('tttx-list', (elm) => {
-      elm.data = [{ element: '<span><tttx-icon icon="egg" color="blue"></tttx-icon></span>Test<script>alert(4)</script>' }];
-    });
-    await page.waitForChanges();
-    const element = await page.find('tttx-list');
-    expect(element).toEqualHtml(`
-    <tttx-list class="hydrated">
-        <mock:shadow-root>
-        <ul class="list">
-            <li class="item">
-            <span class="item-content">
-                <span><tttx-icon class="hydrated" icon="egg" color="blue"></tttx-icon></span>
-                Test
-            </span>
-            </li>
-        </ul>
-        </mock:shadow-root>
-    </tttx-list>
-    `);
-  });
-});

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

@@ -1,183 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxList } from '../tttx-list';
-describe('tttx-list', () => {
-  it('renders data using JS objects (with icon, clickable)', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list></tttx-list>',
-    });
-    page.rootInstance.data = [{ icon: 'info', element: '<span><tttx-icon icon="egg" color="blue" /></span> Test', clickable: true }];
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-list>
-        <mock:shadow-root>
-          <ul class="list">
-            <li class="item clickable">
-              <span class="item-content">
-                <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
-                Test
-              </span>
-              <tttx-icon class="align-right" icon="info"></tttx-icon>
-            </li>
-          </ul>
-        </mock:shadow-root>
-      </tttx-list>
-    `);
-  });
-  it('renders data using JS objects (with icon, clickable:false)', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list></tttx-list>',
-    });
-    page.rootInstance.data = [{ icon: 'info', element: '<span><tttx-icon icon="egg" color="blue" /></span> Test' }];
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-        <tttx-list>
-            <mock:shadow-root>
-            <ul class="list">
-                <li class="item">
-                <span class="item-content">
-                    <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
-                    Test
-                </span>
-                <tttx-icon class="align-right" icon="info"></tttx-icon>
-                </li>
-            </ul>
-            </mock:shadow-root>
-        </tttx-list>
-        `);
-  });
-  it('renders data using JS objects (without icon, clickable)', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list></tttx-list>',
-    });
-    page.rootInstance.data = [{ element: '<span><tttx-icon icon="egg" color="blue" /></span> Test', clickable: true }];
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-        <tttx-list>
-            <mock:shadow-root>
-            <ul class="list">
-                <li class="item clickable">
-                <span class="item-content">
-                    <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
-                    Test
-                </span>
-                </li>
-            </ul>
-            </mock:shadow-root>
-        </tttx-list>
-        `);
-  });
-  it('renders data using JS objects (without icon, clickable:false)', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list></tttx-list>',
-    });
-    page.rootInstance.data = [{ element: '<span><tttx-icon icon="egg" color="blue" /></span> Test' }];
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-        <tttx-list>
-            <mock:shadow-root>
-            <ul class="list">
-                <li class="item">
-                <span class="item-content">
-                    <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
-                    Test
-                </span>
-                </li>
-            </ul>
-            </mock:shadow-root>
-        </tttx-list>
-        `);
-  });
-  it('renders data using JSON', async () => {
-    const data = '[{ "icon": "info", "element": "<span><tttx-icon icon=\\"egg\\" color=\\"blue\\" /></span> Test", "clickable": true }]';
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: `<tttx-list data='${data}'></tttx-list>`,
-    });
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-        <tttx-list data="[{ &quot;icon&quot;: &quot;info&quot;, &quot;element&quot;: &quot;<span><tttx-icon icon=\\&quot;egg\\&quot; color=\\&quot;blue\\&quot; /></span> Test&quot;, &quot;clickable&quot;: true }]">
-            <mock:shadow-root>
-            <ul class="list">
-                <li class="item clickable">
-                <span class="item-content">
-                    <span><tttx-icon icon="egg" color="blue"></tttx-icon></span>
-                    Test
-                </span>
-                <tttx-icon class="align-right" icon="info"></tttx-icon>
-                </li>
-            </ul>
-            </mock:shadow-root>
-        </tttx-list>
-        `);
-  });
-  it('renders nothing when there is no data', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list></tttx-list>',
-    });
-    page.rootInstance.data = [];
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-        <tttx-list>
-            <mock:shadow-root>
-            <ul class="list">
-            </ul>
-            </mock:shadow-root>
-        </tttx-list>
-        `);
-  });
-  it('emits listRowClick event when a clickable row is clicked', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list name="test-list"></tttx-list>',
-    });
-    const eventSpy = jest.fn();
-    page.doc.addEventListener('listRowClick', eventSpy);
-    page.rootInstance.data = [
-      { element: '<div>Item 1</div>', clickable: true, rowData: 'Item 1' },
-      { element: '<div>Item 2</div>', clickable: false, rowData: 'Item 2' },
-    ];
-    await page.waitForChanges();
-    const clickableItem = page.root.shadowRoot.querySelector('.clickable');
-    clickableItem.dispatchEvent(new Event('click'));
-    expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
-      detail: { name: 'test-list', data: 'Item 1' },
-    }));
-  });
-  it('does not emit listRowClick event when a non-clickable row is clicked', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list></tttx-list>',
-    });
-    const eventSpy = jest.fn();
-    page.doc.addEventListener('listRowClick', eventSpy);
-    page.rootInstance.data = [
-      { element: '<div>Item 1</div>', clickable: true, rowData: 'Item 1' },
-      { element: '<div>Item 2</div>', clickable: false, rowData: 'Item 2' },
-    ];
-    await page.waitForChanges();
-    const nonClickableItem = page.root.shadowRoot.querySelector(':not(.clickable)');
-    await nonClickableItem.dispatchEvent(new Event('click'));
-    expect(eventSpy).not.toHaveBeenCalled();
-  });
-  it('does not emit listRowClick event when a row without rowData is clicked', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list></tttx-list>',
-    });
-    const eventSpy = jest.fn();
-    page.doc.addEventListener('listRowClick', eventSpy);
-    page.rootInstance.data = [
-      { element: '<div>Item 1</div>', clickable: true },
-      { element: '<div>Item 2</div>', clickable: false },
-    ];
-    await page.waitForChanges();
-    const nonClickableItem = page.root.shadowRoot.querySelector('.clickable');
-    await nonClickableItem.dispatchEvent(new Event('click'));
-    expect(eventSpy).not.toHaveBeenCalled();
-  });
-});

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

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

@@ -1,219 +0,0 @@
-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="icon-left">
-                <tttx-icon color="grey" icon="info"></tttx-icon>
-              </div>
-              <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 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">
-                <input class="standalone" type="text">
-                <div class="icon-right">
-                  <tttx-icon color="grey" icon="info"></tttx-icon>
-                </div>
-                <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();
-  });
-});