@worksafevictoria/wcl7.5 1.1.10 → 1.1.12

package/src/components/SubComponents/FormInstance/style.scss

@@ -0,0 +1,173 @@
+@import '../../../includes/scss/all.scss';
+@import '../../../assets/styles/generated-icons.scss';
+
+$button-base-unit: 8px;
+$min-width: 163px;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: 700;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+label {
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: $black;
+  line-height: 20px;
+}
+
+.radio {
+  label {
+    font-weight: normal;
+    font-size: 1rem;
+  }
+}
+.wizard-header {
+  &__steps {
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: $darkgray;
+  }
+}
+input,
+textarea {
+  border-radius: 8px;
+  border: 1px solid $gray;
+}
+
+.form-text {
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.more-text {
+  &__buttons {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+}
+
+.form-group,
+.formio-component {
+  margin-bottom: 32px;
+}
+
+.field-required:after,
+.tab-error::after {
+  content: ' (Required)';
+  font-size: 14px;
+  color: $red;
+  font-weight: normal;
+}
+
+.was-validated .form-control:invalid,
+.form-control.is-invalid {
+  border-color: $red;
+  background-image: none;
+}
+
+.formio-errors .error {
+  // color: $red;
+  font-size: 14px;
+}
+
+.formio-error-wrapper {
+  background-color: $white;
+}
+
+button.wcl-cta,
+button.btn-primary.btn-wizard-nav-next,
+button.btn-primary.btn-wizard-nav-previous,
+button.btn-wizard-nav-submit {
+  background: $orange;
+  color: $black;
+  position: relative;
+  text-decoration: none;
+  border-radius: $button-base-unit;
+  display: inline-flex;
+  caret-color: transparent;
+  font-size: $button-base-unit * 2;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 0px;
+  padding-top: ($button-base-unit * 2) + 1;
+  padding-bottom: ($button-base-unit * 2) - 1;
+  padding-left: $button-base-unit * 2;
+  padding-right: $button-base-unit * 2;
+  border: none;
+  margin-bottom: $button-base-unit * 2;
+
+  &:disabled,
+  &:hover {
+    color: $black;
+    background-color: $orange;
+    border-color: transparent;
+  }
+
+  &:after {
+    content: arrow-right();
+    margin-left: 16px;
+  }
+}
+
+button.btn-primary.btn-wizard-nav-previous {
+  &:after {
+    content: none;
+    margin-left: 0;
+  }
+  &:before {
+    content: arrow-left();
+    margin-right: 16px;
+  }
+}
+
+.formio-component-email {
+  
+  &:before {
+    content: url(../../../assets/icons/Email-circle-black.svg);
+    vertical-align: bottom;
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
+  }
+}
+
+.formio-component-phoneNumber {
+  
+  &:before {
+    content: url(../../../assets/icons/Phone-circle-black.svg);
+    vertical-align: bottom;
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
+  }
+}
+
+.info {
+  vertical-align: -webkit-baseline-middle;
+  vertical-align: middle;
+  &:before {
+    content: url(../../../assets/icons/Info-circle-fill.svg);
+    vertical-align: top !important;
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
+    
+  }
+}

package/src/components/SubComponents/FormInstance/tests/address.test.js

@@ -0,0 +1,255 @@
+import json from '../stories/mocks/address.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'address'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          components: [
+            {
+              customConditional:
+                "show = _.get(instance, 'parent.manualMode', false);",
+              input: true,
+              key: 'address',
+              label: 'Address',
+              tableView: false,
+              type: 'textfield'
+            },
+            {
+              customConditional:
+                "show = _.get(instance, 'parent.manualMode', false);",
+              input: true,
+              key: 'address_2',
+              label: 'Address 2',
+              tableView: false,
+              type: 'textfield'
+            },
+            {
+              customConditional:
+                "show = _.get(instance, 'parent.manualMode', false);",
+              input: true,
+              key: 'city',
+              label: 'Suburb',
+              tableView: false,
+              type: 'textfield'
+            },
+            {
+              customConditional:
+                "show = _.get(instance, 'parent.manualMode', false);",
+              input: true,
+              key: 'state_province',
+              label: 'State',
+              tableView: false,
+              type: 'textfield'
+            },
+            {
+              customConditional:
+                "show = _.get(instance, 'parent.manualMode', false);",
+              input: true,
+              key: 'postal_code',
+              label: 'Postcode',
+              tableView: false,
+              type: 'textfield'
+            },
+            {
+              customConditional:
+                "show = _.get(instance, 'parent.manualMode', false);",
+              input: true,
+              key: 'country',
+              label: 'Country',
+              tableView: false,
+              type: 'textfield'
+            }
+          ],
+          customClass: 'custom-formio-1',
+          defaultValue: {
+            address: '',
+            address_2: '',
+            city: '',
+            country: '',
+            postal_code: '',
+            state_province: ''
+          },
+          disabled: false,
+          enableManualMode: true,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--address1',
+          input: true,
+          key: 'address1',
+          label: 'address1',
+          mask: false,
+          provider: 'custom',
+          providerOptions: {
+            displayValueProperty: 'description',
+            params: { components: 'country:au', types: 'address' },
+            queryProperty: 'input',
+            responseProperty: 'predictions',
+            url: 'http://localhost/places/api/v1/place/autocomplete/json'
+          },
+          switchToManualModeLabel: "Can't find address? Switch to manual mode.",
+          type: 'address',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+
+  it(`should return a submission value for manual mode`, () => {
+    const submission = FormTestUtils.handleSubmission(json, {
+      mode: 'manual',
+      address: {
+        address: 'a1',
+        address_2: 'sd',
+        city: 'sd',
+        state_province: 'sd',
+        postal_code: 'sd',
+        country: 'sds'
+      }
+    })
+    expect(submission).toEqual({
+      address1: {
+        address: 'a1',
+        address_2: 'sd',
+        city: 'sd',
+        country: 'sds',
+        postal_code: 'sd',
+        state_province: 'sd'
+      }
+    })
+  })
+
+  it(`should return a submission value for api mode`, () => {
+    const submission = FormTestUtils.handleSubmission(json, {
+      mode: 'autocomplete',
+      address: {
+        description: '715 Sydney Rd, Brunswick VIC 3056, Australia',
+        matched_substrings: [
+          {
+            length: 3,
+            offset: 0
+          },
+          {
+            length: 3,
+            offset: 4
+          }
+        ],
+        place_id: 'ChIJe_yY7VRD1moR4FaCIXpujzc',
+        reference: 'ChIJe_yY7VRD1moR4FaCIXpujzc',
+        structured_formatting: {
+          main_text: '715 Sydney Road',
+          main_text_matched_substrings: [
+            {
+              length: 3,
+              offset: 0
+            },
+            {
+              length: 3,
+              offset: 4
+            }
+          ],
+          secondary_text: 'Brunswick VIC, Australia'
+        },
+        terms: [
+          {
+            offset: 0,
+            value: '715'
+          },
+          {
+            offset: 4,
+            value: 'Sydney Road'
+          },
+          {
+            offset: 17,
+            value: 'Brunswick'
+          },
+          {
+            offset: 27,
+            value: 'VIC'
+          },
+          {
+            offset: 32,
+            value: 'Australia'
+          }
+        ],
+        types: ['street_address', 'geocode']
+      },
+      geocode: {
+        address_components: [
+          {
+            long_name: '715',
+            short_name: '715',
+            types: ['street_number']
+          },
+          {
+            long_name: 'Sydney Road',
+            short_name: 'Sydney Rd',
+            types: ['route']
+          },
+          {
+            long_name: 'Brunswick',
+            short_name: 'Brunswick',
+            types: ['locality', 'political']
+          },
+          {
+            long_name: 'Moreland City',
+            short_name: 'Moreland',
+            types: ['administrative_area_level_2', 'political']
+          },
+          {
+            long_name: 'Victoria',
+            short_name: 'VIC',
+            types: ['administrative_area_level_1', 'political']
+          },
+          {
+            long_name: 'Australia',
+            short_name: 'AU',
+            types: ['country', 'political']
+          },
+          {
+            long_name: '3056',
+            short_name: '3056',
+            types: ['postal_code']
+          }
+        ],
+        formatted_address: '715 Sydney Rd, Brunswick VIC 3056, Australia',
+        geometry: {
+          location: {
+            lat: -37.7598676,
+            lng: 144.9631721
+          },
+          location_type: 'ROOFTOP',
+          viewport: {
+            northeast: {
+              lat: -37.75852881970849,
+              lng: 144.9646129302915
+            },
+            southwest: {
+              lat: -37.76122678029149,
+              lng: 144.9619149697085
+            }
+          }
+        },
+        place_id: 'ChIJe_yY7VRD1moR4FaCIXpujzc',
+        plus_code: {
+          compound_code: '6XR7+37 Brunswick VIC, Australia',
+          global_code: '4RJ66XR7+37'
+        },
+        types: ['street_address']
+      }
+    })
+    expect(submission).toEqual({
+      address1: {
+        address: '715 Sydney Road',
+        city: 'Brunswick',
+        country: 'Australia',
+        postal_code: '3056',
+        state_province: 'Victoria'
+      }
+    })
+  })
+})

package/src/components/SubComponents/FormInstance/tests/advancedhtml.test.js

@@ -0,0 +1,31 @@
+import json from '../stories/mocks/advancedhtml.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'advanced html'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          content: '<h2>Advanced HTML Heading 2</h2><p>para</p>',
+          customClass: 'custom-formio-1',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--processed_text',
+          input: false,
+          key: 'processed_text',
+          label: null,
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: false,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/autocomplete.test.js

@@ -0,0 +1,38 @@
+import json from '../stories/mocks/autocomplete.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'autocomplete'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          data: {
+            url:
+              '/api/v2/search-content?rows=3&field_language=8671&_format=json'
+          },
+          dataSrc: 'url',
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--autocomplete1',
+          input: true,
+          key: 'autocomplete1',
+          label: 'autocomplete - search worksafe content api',
+          labelPosition: 'top',
+          lazyLoad: true,
+          mask: false,
+          searchField: 'query',
+          selectValues: 'results',
+          template: '<span>{{ item.hero_header_title}}</span>',
+          type: 'select',
+          validate: { maxLength: 255, required: false },
+          valueProperty: 'hero_header_title'
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/basichtml.test.js

@@ -0,0 +1,31 @@
+import json from '../stories/mocks/basichtml.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'basic html'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          content: '<h2>Basic HTML Heading 2</h2><p>123</p>',
+          customClass: 'custom-formio-1',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--markup1',
+          input: false,
+          key: 'markup1',
+          label: null,
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: false,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/checkbox.test.js

@@ -0,0 +1,29 @@
+import json from '../stories/mocks/checkbox.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'checkbox'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          defaultValue: true,
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--checkbox1',
+          input: true,
+          key: 'checkbox1',
+          label: 'checkbox1',
+          labelPosition: 'bottom',
+          mask: false,
+          type: 'checkbox',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/checkboxes.test.js

@@ -0,0 +1,44 @@
+import json from '../stories/mocks/checkboxes.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'checkboxes'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          defaultValue: {},
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--checkboxes1',
+          inline: true,
+          input: true,
+          inputType: 'checkbox',
+          key: 'checkboxes1',
+          label: 'checkboxes1',
+          labelPosition: 'top',
+          mask: false,
+          optionsLabelPosition: 'right',
+          type: 'selectboxes',
+          validate: { required: false },
+          values: [
+            { label: 'l1', value: 'value1' },
+            { label: 'value2', value: 'value2' }
+          ]
+        }
+      ])
+    )
+  })
+
+  it(`should return a submission value`, () => {
+    const submission = FormTestUtils.handleSubmission(json, {
+      value1: false,
+      value2: true
+    })
+    expect(submission).toEqual({ checkboxes1: ['value2'] })
+  })
+})

package/src/components/SubComponents/FormInstance/tests/checkboxesother.test.js

@@ -0,0 +1,91 @@
+import json from '../stories/mocks/checkboxesother.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'checkboxes other'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          columns: [
+            {
+              components: [
+                {
+                  attributes: { counter: 3 },
+                  clearOnHide: true,
+                  customClass: 'custom-formio-3',
+                  defaultValue: {},
+                  disabled: false,
+                  hideLabel: true,
+                  id: 0,
+                  inline: false,
+                  input: true,
+                  inputType: 'checkbox',
+                  key: 0,
+                  label: 'enter a number',
+                  mask: false,
+                  optionsLabelPosition: 'right',
+                  type: 'selectboxes',
+                  validate: { required: false },
+                  values: [
+                    { label: 1, value: '1'},
+                    { label: 21, value: '21' },
+                    { label: 'Other…', value: '_other_' }
+                  ]
+                }
+              ],
+              width: 12
+            },
+            {
+              components: [
+                {
+                  attributes: { counter: 4 },
+                  clearOnHide: true,
+                  conditional: { eq: '_other_', show: true, when: 0 },
+                  customClass: 'custom-formio-4',
+                  decimalLimit: 0,
+                  delimiter: true,
+                  disabled: false,
+                  hideLabel: true,
+                  id: 0,
+                  input: true,
+                  inputFormat: 'plain',
+                  key: 0,
+                  label: 'Enter other…',
+                  mask: false,
+                  placeholder: 'Enter other…',
+                  requireDecimal: false,
+                  truncateMultipleSpaces: true,
+                  type: 'number',
+                  validate: { required: false }
+                }
+              ],
+              width: 12
+            }
+          ],
+          customClass: 'custom-formio-1',
+          defaultValue: {
+            checkboxes: {
+              content: '[]',
+              headers: { 'Content-Type': 'application/json; type=' }
+            },
+            other: null
+          },
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--co1',
+          input: false,
+          key: 'co1',
+          label: 'enter a number',
+          labelPosition: 'top',
+          mask: false,
+          type: 'columns',
+          validate: {}
+        }
+      ])
+    )
+  })
+})