@3t-transform/threeteeui 0.0.23 → 0.0.24

package/dist/collection/components/atoms/tttx-keyvalue-block/test/tttx-keyvalue-block.spec.js

@@ -0,0 +1,164 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxKeyvalueBlock } from '../tttx-keyvalue-block';
+describe('tttx-keyvalue-block', () => {
+  it('renders multiple key value pairs', async () => {
+    const keyValuePair = {
+      'Name': 'John Doe',
+      'Date of birth': '14 Jan 1981',
+      'Start of postcode': 'AB10'
+    };
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValuePair)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
+                <mock:shadow-root>
+                    <dl>
+                        <dt>
+                            Name
+                        </dt>
+                        <dd>
+                            John Doe
+                        </dd>
+                        <dt>
+                            Date of birth
+                        </dt>
+                        <dd>
+                            14 Jan 1981
+                        </dd>
+                        <dt>
+                            Start of postcode
+                        </dt>
+                        <dd>
+                            AB10
+                        </dd>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders an array of key value subtitles', async () => {
+    const keyValueArray = [
+      { title: "title", subTitle: "sub", data: "data" },
+      { title: "title2", subTitle: "sub2", data: "data2" }
+    ];
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block keyvalues='${JSON.stringify(keyValueArray)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
+                <mock:shadow-root>
+                    <dl>
+                        <dt class="mainTitle">
+                            title
+                        </dt>
+                        <dt class="subTitle">
+                            sub
+                        </dt>
+                        <dd>
+                            data
+                        </dd>
+                        <dt class="mainTitle">
+                            title2
+                        </dt>
+                        <dt class="subTitle">
+                            sub2
+                        </dt>
+                        <dd>
+                            data2
+                        </dd>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders multiple horizontal key value pairs', async () => {
+    const keyValuePair = {
+      'Name': 'John Doe',
+      'Date of birth': '14 Jan 1981',
+      'Start of postcode': 'AB10'
+    };
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValuePair)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block horizontal="true" keyvalues='{"Name":"John Doe","Date of birth":"14 Jan 1981","Start of postcode":"AB10"}'>
+                <mock:shadow-root>
+                    <dl class="horizontal">
+                        <div>
+                            <dt>
+                                Name
+                            </dt>
+                            <dd>
+                                John Doe
+                            </dd>
+                        </div>
+                        <div>
+                            <dt>
+                                Date of birth
+                            </dt>
+                            <dd>
+                                14 Jan 1981
+                            </dd>
+                        </div>
+                        <div>
+                            <dt>
+                                Start of postcode
+                            </dt>
+                            <dd>
+                                AB10
+                            </dd>
+                        </div>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+  it('renders an array of horizontal key value subtitles', async () => {
+    const keyValueArray = [
+      { title: "title", subTitle: "sub", data: "data" },
+      { title: "title2", subTitle: "sub2", data: "data2" }
+    ];
+    const page = await newSpecPage({
+      components: [TttxKeyvalueBlock],
+      html: `<tttx-keyvalue-block horizontal="true" keyvalues='${JSON.stringify(keyValueArray)}' />`
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+            <tttx-keyvalue-block horizontal="true" keyvalues='[{"title":"title","subTitle":"sub","data":"data"},{"title":"title2","subTitle":"sub2","data":"data2"}]'>
+                <mock:shadow-root>
+                    <dl class="horizontal">
+                        <div>
+                            <dt class="mainTitle">
+                                title
+                            </dt>
+                            <dt class="subTitle">
+                                sub
+                            </dt>
+                            <dd>
+                                data
+                            </dd>
+                        </div>
+                        <div>
+                            <dt class="mainTitle">
+                                title2
+                            </dt>
+                            <dt class="subTitle">
+                                sub2
+                            </dt>
+                            <dd>
+                                data2
+                            </dd>
+                        </div>
+                    </dl>
+                </mock:shadow-root>
+            </tttx-keyvalue-block>
+        `);
+  });
+});

package/dist/collection/components/atoms/tttx-keyvalue-block/tttx-keyvalue-block.js

@@ -24,20 +24,17 @@ export class TttxKeyvalueBlock {
     for (let i = 0; i < values.length; i++) {
       const value = values[i];
       if (this.horizontal) {
-        elements.push(h("div", null, h("dt", { class: 'mainTitle' }, value.title), h("dt", { class: 'subTitle' }, value.subTitle), h("dd", null, value.data)));
+        elements.push(h("div", null, h("dt", { class: "mainTitle" }, value.title), h("dt", { class: "subTitle" }, value.subTitle), h("dd", null, value.data)));
       }
       else {
-        elements.push(h("dt", { class: 'mainTitle' }, value.title));
-        elements.push(h("dt", { class: 'subTitle' }, value.subTitle));
+        elements.push(h("dt", { class: "mainTitle" }, value.title));
+        elements.push(h("dt", { class: "subTitle" }, value.subTitle));
         elements.push(h("dd", null, value.data));
       }
     }
     return elements;
   }
   render() {
-    if (!this.keyvalues) {
-      return;
-    }
     let values;
     if (typeof this.keyvalues === 'string') {
       values = JSON.parse(this.keyvalues);
@@ -52,7 +49,7 @@ export class TttxKeyvalueBlock {
     else {
       elements = this.renderSingleElements(values);
     }
-    return (h(Host, null, h("dl", { class: this.horizontal ? 'horizontal' : null }, elements)));
+    return (h(Host, null, h("dl", { class: this.horizontal ? "horizontal" : null }, elements)));
   }
   static get is() { return "tttx-keyvalue-block"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/tttx-loading-spinner/Test/tttx-loading-spinner.spec.js

@@ -0,0 +1,64 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { TttxLoadingSpinner } from '../tttx-loading-spinner';
+describe('tttx-loading-spinner', () => {
+  it('renders the loading text when the loading message prop is set to true', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.loadingMessage = true;
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div><div class='loading-text'>Loading, please wait...</div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders without the loading text when the loading message prop is set to false', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.loadingMessage = false;
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders the small spinner when the size prop is set to small', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.size = 'small';
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner small'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+  it('renders the large spinner when the size prop is set to large', async () => {
+    const page = await newSpecPage({
+      components: [TttxLoadingSpinner],
+      html: '<tttx-loading-spinner></tttx-loading-spinner>',
+    });
+    page.rootInstance.size = 'large';
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <tttx-loading-spinner>
+        <mock:shadow-root>
+          <div class='spinner-container'><div class="loading-box"><span class='spinner large'></span></div></div>
+        </mock:shadow-root>
+      </tttx-loading-spinner>
+    `);
+  });
+});

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

@@ -0,0 +1,151 @@
+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-list/tttx-list.css

@@ -0,0 +1,53 @@
+.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: 400;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  color: #9e9e9e;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid #d5d5d5;
+  height: 36px;
+  /* center the contents vertically */
+  display: flex;
+  align-items: center;
+}
+.item:first-of-type {
+  border-top: 1px solid #d5d5d5;
+}
+
+.align-right {
+  margin-left: auto;
+}
+
+.item-content {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,79 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from '@stencil/core';
+export class TttxList {
+  constructor() {
+    this.data = undefined;
+  }
+  renderListItem(item) {
+    // Onclick should return some row data. May need to rethink how we handle data, since we don't want to return a template
+    // Alternatively, could return some sort of row id/index instead
+    return h("li", { class: "item", onClick: () => { this.listSelectedEvent.emit({}); } }, item.element && h("span", { class: "item-content", innerHTML: item.element }), item.chevron && h("tttx-icon", { class: "align-right", icon: "chevron_right" }));
+  }
+  render() {
+    if (!this.data)
+      return;
+    if (typeof this.data === 'string') {
+      this._data = JSON.parse(this.data);
+    }
+    else {
+      this._data = this.data;
+    }
+    return (h("ul", { class: "list" }, this._data && this._data.map((item) => this.renderListItem(item))));
+  }
+  static get is() { return "tttx-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | ListItem[]",
+          "resolved": "ListItem[] | string",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "listSelectedEvent",
+        "name": "listItemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/molecules/tttx-list/tttx-list.stories.js

@@ -0,0 +1,39 @@
+export default {
+  title: 'molecules/List',
+  component: 'tttx-list',
+};
+const TemplateStringList = ({ data }) => `
+    <tttx-list
+        data='${JSON.stringify(data)}'
+        id='list'
+    ></tttx-list>
+`;
+export const BasicStringList = TemplateStringList.bind({});
+BasicStringList.args = {
+  data: [
+    { chevron: true, element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
+    { chevron: true, element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { chevron: true, element: '<span><tttx-icon icon="add" /></span> Lee' },
+    { chevron: false, element: '<span><tttx-icon icon="egg" /></span> Ben' },
+  ]
+};
+const TemplateObjectList = ({ data }) => `
+    <tttx-list
+        id='list'
+    ></tttx-list>
+    <script>
+        if(!list) {
+            const list = document.getElementId('list');
+        }
+        list.data = ${JSON.stringify(data)};
+    </script>
+`;
+export const BasicObjectList = TemplateObjectList.bind({});
+BasicObjectList.args = {
+  data: [
+    { chevron: true, element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
+    { chevron: true, element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { chevron: true, element: '<span><tttx-icon icon="add" /></span> Lee' },
+    { chevron: true, element: '<span><tttx-icon icon="egg" /></span> Ben' },
+  ]
+};

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');
+  });
+});