@3t-transform/threeteeui 0.1.5 → 0.1.7

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

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

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

@@ -0,0 +1,232 @@
+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-form/tttx-form.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;
+}
+
 .button {
   font-family: Roboto, serif;
   box-sizing: border-box;