@3t-transform/threeteeui 0.0.14 → 0.0.16

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

@@ -1,102 +1,109 @@
-export default {
-  title: 'molecules/tttx Form',
-  component: 'tttx-form',
-};
-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>`;
+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>`;