@worksafevictoria/wcl7.5 1.1.10 → 1.1.12

package/src/components/SubComponents/FormInstance/stories/date.stories.js

@@ -0,0 +1,76 @@
+import FormInstance from '../index.vue'
+import date from './mocks/date.json'
+import datetime from './mocks/datetime.json'
+import time from './mocks/time.json'
+import datelist from './mocks/datelist.json'
+
+export default {
+    title: 'Form/Date Controls',
+    component: FormInstance,
+    argTypes: {
+      preview: {
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+          disable: true
+        }
+      },
+      contentApiUrl: {
+        control: 'text',
+       defaultValue: process.env.CONTENT_API_URL
+      },
+      processID: {
+        control: 'text',
+        defaultValue: 'proc-id-form-date-controls',
+        table: {
+          disable: true
+        }
+      },
+      formid: {
+        control: 'string',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      type: {
+        control: 'text',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      webFormJson: {
+        control: 'object'
+      }
+    },
+    args: {
+      processID: 'proc-id-form-date-controls',
+      preview: true,
+      contentApiUrl:process.env.CONTENT_API_URL
+    }
+  }
+
+export const Date = {}
+Date.args = {
+  type: 'date',
+  webFormJson: date
+}
+
+export const DateTime = {}
+DateTime.args = {
+  type: 'datetime',
+  webFormJson: datetime
+}
+
+export const Time = {}
+Time.args = {
+  type: 'webform_time',
+  webFormJson: time
+}
+
+export const DateList = {}
+DateList.args = {
+  type: 'date_list',
+  webFormJson: datelist
+}

package/src/components/SubComponents/FormInstance/stories/form-alert.stories.js

@@ -0,0 +1,93 @@
+import FormAlert from '../components/alert/index.vue'
+import wizard from './mocks/wizard.json'
+import FormInstance from '../index.vue'
+
+// export default Meta('Alerts')
+export default {
+    title: 'Form/Alerts',
+    component: FormInstance,
+    argTypes: {
+      preview: {
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+          disable: true
+        }
+      },
+      contentApiUrl: {
+        control: 'text',
+       defaultValue: process.env.CONTENT_API_URL
+      },
+      processID: {
+        control: 'text',
+        defaultValue: 'proc-id-form-alerts',
+        table: {
+          disable: true
+        }
+      },
+      formid: {
+        control: 'string',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      type: {
+        control: 'text',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      webFormJson: {
+        control: 'object'
+      }
+    },
+    args: {
+      processID: 'proc-id-form-alerts',
+      preview: true,
+      contentApiUrl:process.env.CONTENT_API_URL
+    }
+  }
+
+const ErrorForm = (args, { argTypes }) => ({
+  components: { FormAlert, FormInstance },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      webformJSON: wizard
+    }
+  },
+  template: `
+        <div>
+        <form-alert
+                v-bind="$props"
+                :message="'submission error'"
+                :fields="[{
+                    label: 'field label 5',
+                    elementClass: 'custom-formio-8',
+                    error: 'the selection is not unique'
+                }]"
+                :is-error="true"
+            />
+            <form-alert
+                v-bind="$props"
+                :message="'submission success'"
+                :is-error="false"
+            />
+            </form-alert>
+            <form-instance
+                v-bind="$props"
+                :formid="'formid'"
+                :content-api-url="'contentApiUrl'"
+                :web-form-json="webformJSON"
+                :preview="true"
+            />
+        </div>
+      `
+})
+
+export const Error = {}
+ErrorForm.args = {
+  webformJSON: wizard
+}

package/src/components/SubComponents/FormInstance/stories/index.stories.js

@@ -0,0 +1,63 @@
+import FormInstance from '../index.vue'
+import jahd from './mocks/jahd.json'
+import quad from './mocks/quad.json'
+
+export default {
+    title: 'Form/Full Form',
+    component: FormInstance,
+    argTypes: {
+      preview: {
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+          disable: true
+        }
+      },
+      contentApiUrl: {
+        control: 'text',
+       defaultValue: process.env.CONTENT_API_URL
+      },
+      processID: {
+        control: 'text',
+        defaultValue: 'proc-id-form-full-form',
+        table: {
+          disable: true
+        }
+      },
+      formid: {
+        control: 'string',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      type: {
+        control: 'text',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      webFormJson: {
+        control: 'object'
+      }
+    },
+    args: {
+      processID: 'proc-id-form-full-form',
+      preview: true,
+      contentApiUrl:process.env.CONTENT_API_URL
+    }
+}
+
+export const CustomValidation = {}
+CustomValidation.args = {
+  type: 'Jobs At Home Day',
+  webFormJson: jahd
+}
+
+export const CustomStyles = {}
+CustomStyles.args = {
+  type: 'Quad Bikes',
+  webFormJson: quad
+}
+

package/src/components/SubComponents/FormInstance/stories/layout.stories.js

@@ -0,0 +1,85 @@
+import FormInstance from '../index.vue'
+import container from './mocks/container.json'
+import section from './mocks/section.json'
+import table from './mocks/table.json'
+import details from './mocks/details.json'
+import fieldset from './mocks/fieldset.json'
+import flexbox from './mocks/flexbox.json'
+
+
+export default {
+    title: 'Form/Layout Controls',
+    component: FormInstance,
+    argTypes: {
+      preview: {
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+          disable: true
+        }
+      },
+      contentApiUrl: {
+        control: 'text',
+       defaultValue: process.env.CONTENT_API_URL
+      },
+      processID: {
+        control: 'text',
+        defaultValue: 'proc-id-form-layout-controls',
+        table: {
+          disable: true
+        }
+      },
+      formid: {
+        control: 'string',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      type: {
+        control: 'text',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      webFormJson: {
+        control: 'object'
+      }
+    },
+    args: {
+      processID: 'proc-id-form-layout-controls',
+      preview: true,
+      contentApiUrl:process.env.CONTENT_API_URL
+    }
+  }
+
+export const Container = {}
+Container.args = {
+  webFormJson: container
+}
+
+export const Details = {}
+Details.args = {
+  webFormJson: details
+}
+
+export const Fieldset = {}
+Fieldset.args = {
+  webFormJson: fieldset
+}
+
+export const Flexbox = {}
+Flexbox.args = {
+  webFormJson: flexbox
+}
+
+export const Section = {}
+Section.args = {
+  webFormJson: section
+}
+
+export const Table = {}
+Table.args = {
+  webFormJson: table
+}

package/src/components/SubComponents/FormInstance/stories/markup.stories.js

@@ -0,0 +1,91 @@
+import FormInstance from '../index.vue'
+import advancedhtml from './mocks/advancedhtml.json'
+import basichtml from './mocks/basichtml.json'
+import horizontalrule from './mocks/horizontalrule.json'
+import label from './mocks/label.json'
+import message from './mocks/message.json'
+import more from './mocks/more.json'
+
+// export default Meta('Markup Controls')
+export default {
+    title: 'Form/Markup Controls',
+    component: FormInstance,
+    argTypes: {
+      preview: {
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+          disable: true
+        }
+      },
+      contentApiUrl: {
+        control: 'text',
+       defaultValue: process.env.CONTENT_API_URL
+      },
+      processID: {
+        control: 'text',
+        defaultValue: 'proc-id-form-markup-controls',
+        table: {
+          disable: true
+        }
+      },
+      formid: {
+        control: 'string',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      type: {
+        control: 'text',
+        defaultValue: '',
+        table: {
+          disable: true
+        }
+      },
+      webFormJson: {
+        control: 'object'
+      }
+    },
+    args: {
+      processID: 'proc-id-form-markup-controls',
+      preview: true,
+      contentApiUrl:process.env.CONTENT_API_URL
+    }
+  }
+
+export const AdvancedHTML = {}
+AdvancedHTML.args = {
+  type: 'processed_text',
+  webFormJson: advancedhtml
+}
+
+export const BasicHTML = {}
+BasicHTML.args = {
+  type: 'webform_markup',
+  webFormJson: basichtml
+}
+
+export const HorizontalRule = {}
+HorizontalRule.args = {
+  type: 'webform_horizontal_rule',
+  webFormJson: horizontalrule
+}
+
+export const Label = {}
+Label.args = {
+  type: 'label',
+  webFormJson: label
+}
+
+export const Message = {}
+Message.args = {
+  type: 'webform_message',
+  webFormJson: message
+}
+
+export const More = {}
+More.args = {
+  type: 'webform_more',
+  webFormJson: more
+}

package/src/components/SubComponents/FormInstance/stories/mocks/address.json

@@ -0,0 +1,298 @@
+{
+  "c1": {
+    "#type": "webform_address",
+    "#title": "address1",
+    "#webform": "kitchen_sink_formio_v1",
+    "#webform_id": "kitchen_sink_formio_v1--address1",
+    "#webform_key": "address1",
+    "#webform_depth": 0,
+    "#webform_multiple": false,
+    "#webform_composite": true,
+    "#webform_composite_elements": {
+      "address": {
+        "#type": "textfield",
+        "#title": "Address",
+        "#admin_title": "Address",
+        "#webform_composite_id": "kitchen_sink_formio_v1--address1--address",
+        "#webform_composite_key": "address1__address",
+        "#webform_composite_parent_key": "address1"
+      },
+      "address_2": {
+        "#type": "textfield",
+        "#title": "Address 2",
+        "#admin_title": "Address 2",
+        "#webform_composite_id": "kitchen_sink_formio_v1--address1--address_2",
+        "#webform_composite_key": "address1__address_2",
+        "#webform_composite_parent_key": "address1"
+      },
+      "city": {
+        "#type": "textfield",
+        "#title": "City/Town",
+        "#admin_title": "City/Town",
+        "#webform_composite_id": "kitchen_sink_formio_v1--address1--city",
+        "#webform_composite_key": "address1__city",
+        "#webform_composite_parent_key": "address1"
+      },
+      "state_province": {
+        "#type": "select",
+        "#title": "State/Province",
+        "#options": {
+          "Alabama": "Alabama"
+        },
+        "#admin_title": "State/Province",
+        "#webform_composite_id": "kitchen_sink_formio_v1--address1--state_province",
+        "#webform_composite_key": "address1__state_province",
+        "#webform_composite_parent_key": "address1"
+      },
+      "postal_code": {
+        "#type": "textfield",
+        "#title": "ZIP/Postal Code",
+        "#admin_title": "ZIP/Postal Code",
+        "#webform_composite_id": "kitchen_sink_formio_v1--address1--postal_code",
+        "#webform_composite_key": "address1__postal_code",
+        "#webform_composite_parent_key": "address1"
+      },
+      "country": {
+        "#type": "select",
+        "#title": "Country",
+        "#options": {
+          "Afghanistan": "Afghanistan",
+          "Albania": "Albania"
+        },
+        "#admin_title": "Country",
+        "#webform_composite_id": "kitchen_sink_formio_v1--address1--country",
+        "#webform_composite_key": "address1__country",
+        "#webform_composite_parent_key": "address1"
+      }
+    },
+    "#webform_submission": null,
+    "#access": true,
+    "#webform_element": true,
+    "#title_display": "invisible",
+    "#required": false,
+    "#theme": "webform_composite_address",
+    "#defaults_loaded": true,
+    "#tree": true,
+    "#weight": 0.001,
+    "#processed": true,
+    "#description_display": "after",
+    "#errors": null,
+    "#id": "edit-address1",
+    "#name": "address1",
+    "#value": {
+      "address": "",
+      "address_2": "",
+      "city": "",
+      "state_province": "",
+      "postal_code": "",
+      "country": ""
+    },
+    "#initialize": true,
+    "address": {
+      "#type": "textfield",
+      "#title": "Address",
+      "#admin_title": "Address",
+      "#default_value": "",
+      "#maxlength": 255,
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_submission": null,
+      "#access": true,
+      "#webform_element": true,
+      "#input": true,
+      "#size": 60,
+      "#autocomplete_route_name": false,
+      "#theme": "input__textfield",
+      "#defaults_loaded": true,
+      "#tree": true,
+      "#weight": 0,
+      "#processed": true,
+      "#required": false,
+      "#title_display": "before",
+      "#description_display": "after",
+      "#errors": null,
+      "#id": "edit-address1-address",
+      "#name": "address1[address]",
+      "#value": "",
+      "#ajax_processed": false,
+      "#sorted": true,
+      "#after_build_done": true
+    },
+    "address_2": {
+      "#type": "textfield",
+      "#title": "Address 2",
+      "#admin_title": "Address 2",
+      "#default_value": "",
+      "#maxlength": 255,
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_submission": null,
+      "#access": true,
+      "#webform_element": true,
+      "#input": true,
+      "#size": 60,
+      "#autocomplete_route_name": false,
+      "#defaults_loaded": true,
+      "#tree": true,
+      "#weight": 0.001,
+      "#processed": true,
+      "#required": false,
+      "#title_display": "before",
+      "#description_display": "after",
+      "#errors": null,
+      "#id": "edit-address1-address-2",
+      "#name": "address1[address_2]",
+      "#value": "",
+      "#ajax_processed": false,
+      "#sorted": true,
+      "#after_build_done": true
+    },
+    "city": {
+      "#type": "textfield",
+      "#title": "City/Town",
+      "#admin_title": "City/Town",
+      "#default_value": "",
+      "#maxlength": 255,
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_submission": null,
+      "#access": true,
+      "#webform_element": true,
+      "#input": true,
+      "#size": 60,
+      "#autocomplete_route_name": false,
+      "#theme": "input__textfield",
+      "#defaults_loaded": true,
+      "#tree": true,
+      "#weight": 0.002,
+      "#processed": true,
+      "#required": false,
+      "#attributes": {
+        "data-drupal-selector": "edit-address1-city"
+      },
+      "#title_display": "before",
+      "#description_display": "after",
+      "#errors": null,
+      "#id": "edit-address1-city",
+      "#name": "address1[city]",
+      "#value": "",
+      "#ajax_processed": false,
+      "#sorted": true,
+      "#after_build_done": true
+    },
+    "state_province": {
+      "#type": "select",
+      "#title": "State/Province",
+      "#options": {
+        "_empty_": "- None -",
+        "Alabama": "Alabama"
+      },
+      "#admin_title": "State/Province",
+      "#default_value": "",
+      "#empty_option": "- None -",
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_submission": null,
+      "#access": true,
+      "#webform_element": true,
+      "#input": true,
+      "#multiple": false,
+      "#sort_options": false,
+      "#sort_start": 1,
+      "#theme": "select",
+      "#theme_wrappers": ["form_element"],
+      "#defaults_loaded": true,
+      "#tree": true,
+      "#weight": 0.003,
+      "#processed": true,
+      "#required": false,
+      "#title_display": "before",
+      "#description_display": "after",
+      "#errors": null,
+      "#id": "edit-address1-state-province",
+      "#name": "address1[state_province]",
+      "#value": "",
+      "#empty_value": "",
+      "#ajax_processed": false,
+      "#sorted": true,
+      "#after_build_done": true
+    },
+    "postal_code": {
+      "#type": "textfield",
+      "#title": "ZIP/Postal Code",
+      "#admin_title": "ZIP/Postal Code",
+      "#default_value": "",
+      "#maxlength": 255,
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_submission": null,
+      "#access": true,
+      "#webform_element": true,
+      "#input": true,
+      "#size": 60,
+      "#autocomplete_route_name": false,
+      "#theme": "input__textfield",
+      "#theme_wrappers": ["form_element"],
+      "#defaults_loaded": true,
+      "#tree": true,
+      "#weight": 0.004,
+      "#processed": true,
+      "#required": false,
+      "#attributes": {
+        "data-drupal-selector": "edit-address1-postal-code"
+      },
+      "#title_display": "before",
+      "#description_display": "after",
+      "#errors": null,
+      "#id": "edit-address1-postal-code",
+      "#name": "address1[postal_code]",
+      "#value": "",
+      "#ajax_processed": false,
+      "#sorted": true,
+      "#after_build_done": true
+    },
+    "country": {
+      "#type": "select",
+      "#title": "Country",
+      "#options": {
+        "_empty_": "- None -",
+        "Afghanistan": "Afghanistan",
+        "Albania": "Albania"
+      },
+      "#admin_title": "Country",
+      "#parents": ["address1", "country"],
+      "#default_value": "",
+      "#empty_option": "- None -",
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_submission": null,
+      "#access": true,
+      "#webform_element": true,
+      "#input": true,
+      "#multiple": false,
+      "#sort_options": false,
+      "#sort_start": 1,
+      "#theme": "select",
+      "#theme_wrappers": ["form_element"],
+      "#value_callback": [
+        "Drupal\\Core\\Render\\Element\\Select",
+        "valueCallback"
+      ],
+      "#defaults_loaded": true,
+      "#tree": true,
+      "#weight": 0.005,
+      "#processed": true,
+      "#required": false,
+      "#attributes": {
+        "data-drupal-selector": "edit-address1-country"
+      },
+      "#title_display": "before",
+      "#description_display": "after",
+      "#errors": null,
+      "#id": "edit-address1-country",
+      "#name": "address1[country]",
+      "#value": "",
+      "#empty_value": "",
+      "#ajax_processed": false,
+      "#sorted": true,
+      "#after_build_done": true
+    },
+    "#ajax_processed": false,
+    "#sorted": true,
+    "#after_build_done": true
+  }
+}