@3t-transform/threeteeui 0.1.5 → 0.1.7

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

@@ -1,30 +1,30 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-export default {
-  title: 'molecules/List',
-  component: 'tttx-list',
-  parameters: {
-    actions: {
-      handles: ['listRowClick'],
-    },
-  },
-  decorators: [withActions],
-};
+import { withActions } from '@storybook/addon-actions/decorator';
+export default {
+  title: 'molecules/List',
+  component: 'tttx-list',
+  parameters: {
+    actions: {
+      handles: ['listRowClick'],
+    },
+  },
+  decorators: [withActions],
+};
 const TemplateStringList = ({ data }) => `
     <tttx-list
         data='${JSON.stringify(data)}'
         id='list'
         name='stringList'
     ></tttx-list>
-`;
-export const BasicStringList = TemplateStringList.bind({});
-BasicStringList.args = {
-  data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="orange" /></span> Lee' },
-    { element: '<span><tttx-icon icon="egg" color="red" /></span> Ben' },
-  ],
-};
+`;
+export const BasicStringList = TemplateStringList.bind({});
+BasicStringList.args = {
+  data: [
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg"  color="green" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="orange" /></span> Lee' },
+    { element: '<span><tttx-icon icon="egg" color="red" /></span> Ben' },
+  ],
+};
 const TemplateObjectList = ({ data }) => `
     <tttx-list
         id='objectList'
@@ -36,16 +36,16 @@ const TemplateObjectList = ({ data }) => `
         }
         objectList.data = ${JSON.stringify(data)};
     </script>
-`;
-export const BasicObjectList = TemplateObjectList.bind({});
-BasicObjectList.args = {
-  data: [
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
-  ],
-};
+`;
+export const BasicObjectList = TemplateObjectList.bind({});
+BasicObjectList.args = {
+  data: [
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee' },
+    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
+  ],
+};
 const TemplateClickableList = ({ data }) => `
     <tttx-list
         id='clickableList'
@@ -57,15 +57,15 @@ const TemplateClickableList = ({ data }) => `
         }
         clickableList.data = ${JSON.stringify(data)};
     </script>
-`;
-export const BasicClickableList = TemplateClickableList.bind({});
-BasicClickableList.args = {
-  data: [
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000', rowData: '[{ "name": "Demulon 1,000,000" }]' },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
-    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
-    { clickable: false, icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee ' },
-    { icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Ben' },
-  ],
-};
+`;
+export const BasicClickableList = TemplateClickableList.bind({});
+BasicClickableList.args = {
+  data: [
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" /></span> Demulon 1,000,000', rowData: '[{ "name": "Demulon 1,000,000" }]' },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Emma', rowData: [{ name: 'Emma' }] },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="green" /></span> Eulogio', rowData: 'Eulogio' },
+    { clickable: true, icon: 'chevron_right', element: '<span><tttx-icon icon="egg" color="red" /></span> Patrick' },
+    { clickable: false, icon: 'chevron_right', element: '<span><tttx-icon icon="add" /></span> Lee ' },
+    { icon: 'chevron_right', 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');
+  });
+});

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

@@ -0,0 +1,219 @@
+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();
+  });
+});

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

@@ -45,7 +45,6 @@
 
 .icon-right {
   margin-top: 5px;
-  margin-right: 4px;
 }
 
 .icon-left {
@@ -61,8 +60,10 @@
   padding-right: 4px;
 }
 
-.focused {
-  border-color: #1479c6;
+.input-icon {
+  position: absolute;
+  margin-top: 9px;
+  margin-left: 4px;
 }
 
 .errormsg {
@@ -104,6 +105,20 @@ label.inputBlock {
   line-height: 21px;
 }
 
+label.inputInline {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+}
+label.inputInline .input-container {
+  margin: 0 4px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  position: relative;
+}
+
 label {
   font-weight: 500;
   font-size: 16px;
@@ -129,10 +144,20 @@ input[type=date] {
   line-height: 37px;
 }
 
+/* Android device date alignment fix */
+@media (max-width: 600px) {
+  input[type=date] {
+    padding-top: 6px;
+  }
+}
 input.invalid:invalid, input.standalone.invalid {
   border: 1px solid #dc0000;
 }
 
+.input-icon ~ input {
+  padding: 0 32px;
+}
+
 input ~ .errorBubble {
   min-height: 27px;
   position: relative;
@@ -172,6 +197,10 @@ input:focus {
   border-color: #1479c6;
 }
 
+input:focus-visible {
+  outline: none;
+}
+
 :host {
   display: block;
 }