@3t-transform/threeteeui 0.0.24 → 0.1.0

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

@@ -1,151 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { TttxList } from '../tttx-list';
-describe('tttx-list', () => {
-  it('renders a spinner before loading in data', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list name=\'before-load\' />',
-    });
-    expect(page.root).toEqualHtml(`
-          <tttx-list name='before-load'>
-            <mock:shadow-root>
-              <div class="list-item-container" tabindex="0">
-              </div>
-              <div class="load-indicator"><tttx-loading-spinner size='large' /></div>
-            </mock:shadow-root>
-          </tttx-list>
-        `);
-  });
-  it('renders a No Data message if not loading and empty', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list name=\'empty-list\' />',
-    });
-    page.doc.dispatchEvent(new CustomEvent('listPageLoad', {
-      detail: {
-        name: 'empty-list',
-        lastPage: true,
-        items: []
-      }
-    }));
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-          <tttx-list name="empty-list">
-            <mock:shadow-root>
-              <div class="list-item-container" tabindex="0">
-                No data to display
-              </div>
-            </mock:shadow-root>
-          </tttx-list>
-        `);
-  });
-  it('renders a simple list template when no template is provided', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list name=\'simple-list\' />',
-    });
-    page.doc.dispatchEvent(new CustomEvent('listPageLoad', {
-      detail: {
-        name: 'simple-list',
-        lastPage: true,
-        items: [
-          { text: 'A row with only text' },
-          { text: 'A row with text and an icon', icon: 'settings' },
-          { text: 'A row with text and a coloured icon', icon: 'warning', iconColor: '#ff0000' }
-        ]
-      }
-    }));
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-      <tttx-list name="simple-list">
-        <mock:shadow-root>
-          <div class="list-item-container" tabindex="0">
-            <div class="tttx-list__row">
-              <div class="generic-template__content">
-                A row with only text
-              </div>
-            </div>
-            <div class="tttx-list__row">
-              <div class="generic-template__content">
-                <span class="material-symbols-rounded">settings</span>A row with text and an icon
-              </div>
-            </div>
-            <div class="tttx-list__row">
-              <div class="generic-template__content">
-                <span class="material-symbols-rounded" style="color: #ff0000;">warning</span>A row with text and a coloured icon
-              </div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tttx-list>
-    `);
-  });
-  it('dispatches an event when clicking a row', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list name=\'clickable-list\' />',
-    });
-    page.doc.dispatchEvent(new CustomEvent('listPageLoad', {
-      detail: {
-        name: 'clickable-list',
-        lastPage: true,
-        items: [
-          { text: 'A row with only text' },
-        ]
-      }
-    }));
-    await page.waitForChanges();
-  });
-  it('clears the list data when receiving a listClearDataCache event', async () => {
-    const page = await newSpecPage({
-      components: [TttxList],
-      html: '<tttx-list name=\'clearable-list\' />',
-    });
-    page.doc.dispatchEvent(new CustomEvent('listPageLoad', {
-      detail: {
-        name: 'clearable-list',
-        lastPage: true,
-        items: [
-          { text: 'A row with only text' },
-        ]
-      }
-    }));
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-          <tttx-list name="clearable-list">
-            <mock:shadow-root>
-              <div class="list-item-container" tabindex="0">
-                <div class="tttx-list__row">
-                  <div class="generic-template__content">
-                    A row with only text
-                  </div>
-                </div>
-              </div>
-            </mock:shadow-root>
-          </tttx-list>
-        `);
-    page.doc.dispatchEvent(new CustomEvent('listClearDataCache', {
-      detail: {
-        name: 'clearable-list'
-      }
-    }));
-    await page.waitForChanges();
-    expect(page.root).toEqualHtml(`
-          <tttx-list name="clearable-list">
-            <mock:shadow-root>
-              <div class="list-item-container" tabindex="0">
-                No data to display
-              </div>
-            </mock:shadow-root>
-          </tttx-list>
-        `);
-  });
-  // describe('when selectable', () => {
-  //     it('renders rows with a checkbox', () => {
-  //     });
-  //     it('responds with the selected row data when a listActionSelectedEvent event is dispatched', () => {
-  //     });
-  //     it('removes selected rows when listActionSelectedEvent instructs it to', () => {
-  //     });
-  // });
-});

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,146 +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>
-              <input class="standalone" type="text">
-              <span class="errorBubble">
-                <span class="material-symbols-rounded validationicon">
-                  warning
-                </span>
-              </span>
-            </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>
-              <input class="standalone" type="text">
-              <span class="errorBubble">
-                <span class="material-symbols-rounded validationicon">
-                  warning
-                </span>
-              </span>
-            </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>
-              <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>
-            </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">
-              <input class="invalid standalone" required="" type="text">
-              <span class="errorBubble visible">
-                <span class="material-symbols-rounded validationicon">
-                  warning
-                </span>
-                The field is required
-              </span>
-            </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-table/test/tttx-table.e2e.js

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

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

@@ -1,166 +0,0 @@
-// SPACING
-$spacing-unit: 4px;
-
-// REGULAR
-$horizontal-spacing: $spacing-unit * 4;
-$vertical-spacing: $spacing-unit * 2;
-$base-padding: $vertical-spacing $horizontal-spacing;
-$base-height: $spacing-unit * 9;
-$component-spacing: $spacing-unit * 4;
-
-// SMALL
-$horizontal-spacing-sm: $spacing-unit * 2;
-$vertical-spacing-sm: $spacing-unit * 1;
-$base-padding-sm: $vertical-spacing-sm $horizontal-spacing-sm;
-$base-height-sm: $spacing-unit * 7;
-
-// COLOURS
-$grey-0: #212121;
-$grey-1: #363636;
-$grey-2: #4c4c4c;
-$grey-3: #636363;
-$grey-4: #757575;
-$grey-5: #9e9e9e;
-$grey-6: #aeaeae;
-$grey-7: #c8c8c8;
-$grey-8: #e3e3e3;
-$grey-9: #f0f0f0;
-
-$white: white;
-$black: $grey-0;
-$transparent: transparent;
-
-$blue-0: #00187c;
-$blue-1: #032e8c;
-$blue-2: #0849a3;
-$blue-3: #0951a8;
-$blue-4: #1169ba;
-$blue-5: #1479c6;
-$blue-6: #5194d2;
-$blue-7: #7aacdd;
-$blue-8: #b9d5ed;
-$blue-9: #e7f1f9;
-
-$red-0: #7c0000;
-$red-1: #8c0000;
-$red-2: #a30000;
-$red-3: #a80000;
-$red-4: #ba0000;
-$red-5: #dc0000;
-$red-6: #d25151;
-$red-7: #dd7a7a;
-$red-8: #edc1c1;
-$red-9: #f9e7e7;
-
-$black-1: #e6e6e6;
-
-$brand: $blue-0;
-$accent: $blue-5;
-$accent-selected: $blue-9;
-$error: $red-5;
-
-$severity-critical: #dc0000;
-$severity-warning: #f59500;
-$severity-success: #a2bb31;
-$severity-info: $accent;
-
-$ui-primary: $black;
-$ui-secondary: $grey-4;
-$ui-disabled: $grey-2;
-$ui-placeholder: $grey-5;
-
-$ui-background: $grey-9;
-$ui-sheet: $white;
-$ui-border: #d5d5d5;
-
-// BORDERS
-$ui-border-radius: 4px;
-$ui-border-width: 1px;
-
-// TYPOGRAPHY
-$font-size-default: 16px;
-$font-size-small: 14px;
-
-.material-symbols-rounded {
-    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-}
-
-.skeleton {
-  animation: skeleton-loading 1s linear infinite alternate;
-  border-radius: 4px;
-  width: 100%;
-}
-
-@keyframes skeleton-loading {
-  0% {
-    background-color: hsl(200, 20%, 80%);
-  }
-
-  100% {
-    background-color: hsl(200, 20%, 95%);
-  }
-}
-
-:host {
-  display: block;
-}
-
-table {
-  box-sizing: border-box;
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  border: 1px solid #ddd;
-  border-bottom: none;
-}
-
-thead tr {
-  height: 52px;
-  color: #757575;
-}
-
-tbody tr {
-  height: 48px;
-  color: #212121;
-}
-
-tr {
-
-  /* Cell typography */
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-
-  /* center the contents vertically */
-  display: flex;
-  align-items: center;
-
-  /* Border */
-  border-bottom: 1px solid #ddd;
-
-}
-
-.selected {
-  background-color: #F0F0F0;
-}
-
-.checked {
-  background-color: #e7f1f9;
-}
-
-td,
-th {
-  min-width: 300px;
-  margin-left: 16px;
-  display: flex;
-  align-items: left;
-}
-
-.skeleton {
-  height: 24px;
-  display: block;
-}
-
-.align-right {
-  margin-left: auto;
-}

package/dist/collection/components/molecules/tttx-table/tttx-table.js

@@ -1,174 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Host, h } from '@stencil/core';
-export class TttxTable {
-  constructor() {
-    this.headers = [];
-    this.data = [];
-    this.loading = false;
-    this.selected = -1;
-  }
-  handleKeyDown(ev) {
-    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-      this.updateSelectedIndex(ev.key);
-      this.emitRowSelected();
-    }
-  }
-  updateSelectedIndex(key) {
-    if (this.selected === -1) {
-      this.selected = 0;
-    }
-    else {
-      const isArrowDown = key === 'ArrowDown';
-      const isArrowUp = key === 'ArrowUp';
-      if (isArrowDown && this.selected < this.data.length - 1) {
-        this.selected++;
-      }
-      else if (isArrowUp && this.selected > 0) {
-        this.selected--;
-      }
-    }
-  }
-  emitRowSelected() {
-    this.rowSelected.emit(this.data[this.selected]);
-  }
-  rowSelectedHandler(row) {
-    this.rowSelected.emit(row);
-    this.selected = this.data.findIndex((item) => item === row);
-  }
-  headerClickedHandler(key) {
-    this.headerClicked.emit(key);
-  }
-  render() {
-    return (h(Host, null, h("table", null, h("thead", null, h("tr", null, this.loading ?
-      [1, 2, 3].map(() => (h("th", null, h("div", { class: "skeleton" })))) :
-      this.headers && this.headers.map((header) => (h("th", { scope: "col", onClick: () => this.headerClickedHandler(header.key) }, header.label))))), h("tbody", null, this.loading ?
-      [1, 2, 3].map(() => (h("tr", null, h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" })), h("td", null, h("div", { class: "skeleton" }))))) :
-      Object.keys(this.data).map((key, index) => (h("tr", { class: index === this.selected ? 'selected' : '', onClick: () => this.rowSelectedHandler(this.data[key]) }, this.headers.map((header) => (h("td", null, this.data[key][header.key], " ", header.actions && h("tttx-icon", { class: "align-right", icon: "more_vert" }, h("div", { slot: "popover" }, h("tttx-popover-content", { header: "The humble egg", body: "Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not.", linkcontext: "Wikipedia_egg", linktext: "Learn more about eggs" })))))))))))));
-  }
-  static get is() { return "tttx-table"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-table.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-table.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "headers": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "any[]",
-          "resolved": "any[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "any[]",
-          "resolved": "any[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selected": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "-1"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "rowSelected",
-        "name": "rowSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "headerClicked",
-        "name": "headerClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}