@3t-transform/threeteeui 0.1.5 → 0.1.7

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

@@ -1,127 +1,127 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/Form',
-  component: 'tttx-form',
-  parameters: {
-    actions: {
-      handles: ['dataSubmitted', 'dataChanged'],
-    },
-  },
-  decorators: [withActions],
-};
-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 jsonFormSchema = JSON.stringify(formSchema);
-export const ExampleFormFromJSON = () => `<tttx-form formSchema='${jsonFormSchema}'></tttx-form>`;
-const singleFormItemSchema = {
-  properties: {
-    input: {
-      type: 'string',
-      format: 'string',
-      form: {
-        type: 'text',
-        label: 'Input Field',
-        validation: {
-          required: {
-            message: 'Please enter something'
-          }
-        }
-      }
-    }
-  }
-};
-export const SingleFormItem = () => `<tttx-form formSchema='${JSON.stringify(singleFormItemSchema)}'></tttx-form>`;
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/Form',
+  component: 'tttx-form',
+  parameters: {
+    actions: {
+      handles: ['dataSubmitted', 'dataChanged'],
+    },
+  },
+  decorators: [withActions],
+};
+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 jsonFormSchema = JSON.stringify(formSchema);
+export const ExampleFormFromJSON = () => `<tttx-form formSchema='${jsonFormSchema}'></tttx-form>`;
+const singleFormItemSchema = {
+  properties: {
+    input: {
+      type: 'string',
+      format: 'string',
+      form: {
+        type: 'text',
+        label: 'Input Field',
+        validation: {
+          required: {
+            message: 'Please enter something'
+          }
+        }
+      }
+    }
+  }
+};
+export const SingleFormItem = () => `<tttx-form formSchema='${JSON.stringify(singleFormItemSchema)}'></tttx-form>`;

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

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

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

@@ -1,105 +1,105 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h } from '@stencil/core';
-import * as DOMPurify from 'dompurify';
-import domSanitiserOptions from '../../../shared/domsanitiser.options';
-export class TttxList {
-  constructor() {
-    this.data = undefined;
-    this.name = undefined;
-  }
-  onRowClickHandler(item) {
-    if (!item.clickable || !item.rowData)
-      return;
-    this.rowClick.emit({ name: this.name, data: item.rowData });
-  }
-  renderListItem(item) {
-    const cleanHTML = DOMPurify.sanitize(item.element, domSanitiserOptions);
-    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
-        this.onRowClickHandler(item);
-      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
-  }
-  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.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": true,
-        "complexType": {
-          "original": "string | ListItem[]",
-          "resolved": "ListItem[] | string",
-          "references": {
-            "ListItem": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "data",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "rowClick",
-        "name": "listRowClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from '@stencil/core';
+import * as DOMPurify from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+export class TttxList {
+  constructor() {
+    this.data = undefined;
+    this.name = undefined;
+  }
+  onRowClickHandler(item) {
+    if (!item.clickable || !item.rowData)
+      return;
+    this.rowClick.emit({ name: this.name, data: item.rowData });
+  }
+  renderListItem(item) {
+    const cleanHTML = DOMPurify.sanitize(item.element, domSanitiserOptions);
+    return (h("li", { class: `item  ${item.clickable ? 'clickable' : ''}`, onClick: () => {
+        this.onRowClickHandler(item);
+      } }, item.element && h("span", { class: "item-content", innerHTML: cleanHTML }), item.icon && h("tttx-icon", { class: "align-right ", icon: item.icon })));
+  }
+  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.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": true,
+        "complexType": {
+          "original": "string | ListItem[]",
+          "resolved": "ListItem[] | string",
+          "references": {
+            "ListItem": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "rowClick",
+        "name": "listRowClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}