@worksafevictoria/wcl7.5 1.1.11 → 1.1.13

package/jest.config.js

@@ -1,23 +1,25 @@
 module.exports = {
   testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  },
   moduleFileExtensions: [
     'js',
     'json',
-    // tell Jest to handle `*.vue` files
     'vue'
   ],
   moduleNameMapper: {
     '\\.(css|less|sass|scss)$': '<rootDir>/src/mock/styleMock.js',
-    '(.*\\.svg)\\?(.*)$': '<rootDir>/src/mock/jest.svgtransformer.js'
+    '(.*\\.(svg))\\?(.*)$': '<rootDir>/src/mock/jest.svgtransformer.js',
+    '\\.(png)$': '<rootDir>/src/mock/jest.fileMock.js'
   },
   transform: {
-    // process `*.vue` files with `vue-jest`
-    '.*\\.(vue)$': '@vue/vue3-jest',
+    '.*\\.vue$': '@vue/vue3-jest',
     '^.+\\.js$': 'babel-jest',
     '.+\\.(svg)$': '<rootDir>/src/mock/jest.svgtransformer.js'
   },
-  transformIgnorePatterns: [],
-  collectCoverage: true,
-  collectCoverageFrom: ['<rootDir>/src/**/*.vue'],
+  transformIgnorePatterns:  ['!node_modules/'],
+  // collectCoverage: true, 
+  collectCoverageFrom: [  '<rootDir>/src/**/*.vue'],
   coverageReporters: ['text-summary', 'html', 'lcov', 'clover']
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,7 @@
     "generate-svgs": "svgpack src/assets/icons/* > src/assets/styles/generated-icons.scss"
   },
   "dependencies": {
+    "@formio/vue": "^5.0.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@storybook/cli": "^7.6.3",
     "axios": "^1.6.0",
@@ -45,10 +46,10 @@
     "bootstrap-vue": "^2.23.1",
     "bootstrap-vue-next": "^0.15.5",
     "date-fns": "^2.30.0",
+    "formiojs": "4.13.13",
     "storybook-addon-deep-controls": "^0.6.2",
     "vue": "^3.3.4",
     "vue-google-charts": "^1.1.0",
-    "vue-formio": "^4.0.8",
     "vue-scrollto": "^2.20.0"
   },
   "resolutions": {
@@ -69,8 +70,8 @@
     "@storybook/vue3-vite": "^7.5.1",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/vue3-jest": "^29.2.6",
     "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "^29.2.6",
     "babel-jest": "^29.2.6",
     "dotenv-webpack": "^8.1.0",
     "eslint": "^8.49.0",
@@ -92,9 +93,9 @@
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-scss": "^5.3.0",
-    "vue-jest": "^3.0.7",
     "vite": "^4.4.11",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "vue-jest": "^3.0.7"
   }
 }

package/src/components/Paragraphs/Directory/Records/CJ/index.vue

@@ -30,9 +30,9 @@
   </div>
 </template>
 <script>
-import Container from '../../../../Containers/Container'
-import Row from '../../../../Containers/Row'
-import Column from '../../../../Containers/Column'
+import Container from '../../../../Containers/Container/index.vue'
+import Row from '../../../../Containers/Row/index.vue'
+import Column from '../../../../Containers/Column/index.vue'
 import { format } from 'date-fns'
 
 export default {

package/src/components/Paragraphs/Directory/Records/ISP/index.vue

@@ -38,9 +38,9 @@
   </div>
 </template>
 <script>
-import Container from '../../../../Containers/Container'
-import Row from '../../../../Containers/Row'
-import Column from '../../../../Containers/Column'
+import Container from '../../../../Containers/Container/index.vue'
+import Row from '../../../../Containers/Row/index.vue'
+import Column from '../../../../Containers/Column/index.vue'
 import { calcDistance } from './distance'
 
 export default {

package/src/components/Paragraphs/Directory/Records/PRS/index.vue

@@ -19,8 +19,8 @@
   </div>
 </template>
 <script>
-import RecordDetails from './recordDetails'
-import RecordContent from './recordContent'
+import RecordDetails from './recordDetails.vue'
+import RecordContent from './recordContent.vue'
 export default {
   components: {
     RecordDetails,

package/src/components/Paragraphs/Directory/Records/PRS/recordContent.vue

@@ -32,9 +32,9 @@
   </container>
 </template>
 <script>
-import Container from '../../../../Containers/Container'
-import Row from '../../../../Containers/Row'
-import Column from '../../../../Containers/Column'
+import Container from '../../../../Containers/Container/index.vue'
+import Row from '../../../../Containers/Row/index.vue'
+import Column from '../../../../Containers/Column/index.vue'
 import { format } from 'date-fns'
 
 export default {

package/src/components/Paragraphs/Directory/Records/PRS/recordDetails.vue

@@ -23,9 +23,9 @@
   </container>
 </template>
 <script>
-import Container from '../../../../Containers/Container'
-import Row from '../../../../Containers/Row'
-import Column from '../../../../Containers/Column'
+import Container from '../../../../Containers/Container/index.vue'
+import Row from '../../../../Containers/Row/index.vue'
+import Column from '../../../../Containers/Column/index.vue'
 import { format } from 'date-fns'
 
 export default {

package/src/components/Paragraphs/Directory/Records/index.vue

@@ -13,9 +13,9 @@
   </div>
 </template>
 <script>
-import PrsRecord from './PRS'
-import IspRecord from './ISP'
-import CjRecord from './CJ'
+import PrsRecord from './PRS/index.vue'
+import IspRecord from './ISP/index.vue'
+import CjRecord from './CJ/index.vue'
 
 export default {
   components: {

package/src/components/Paragraphs/Directory/index.vue

@@ -49,10 +49,10 @@
 </template>
 <script>
 import { DIR_CONFIG } from './constants'
-import DirectoryFilters from '../../Global/DirectoryFilters'
-import Records from './Records/'
-import Pagination from '../../SubComponents/Pagination'
-import Loading from '../../SubComponents/Loading'
+import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
+import Records from './Records/index.vue'
+import Pagination from '../../SubComponents/Pagination/index.vue'
+import Loading from '../../SubComponents/Loading/index.vue'
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
 
 export default {

package/src/components/Paragraphs/TabbedCards/index.stories.js

@@ -4,33 +4,14 @@ import { tabbedCardsMockLinks } from '../../../mock/tabbed-cards'
 export default {
   title: 'Paragraphs/TabbedCards',
   component: TabbedCards,
-  argTypes: {
-    description: {
-      control: 'text',
-      defaultValue: 'Tabbed cards h2 heading'
-    },
-    heading: {
-      control: 'text',
-      defaultValue: 'Tabbed cards h2 heading'
-    },
-    tabbedCards: {
-      control: 'object',
-      defaultValue: tabbedCardsMockLinks
-    },
-    workwell: {
-      control: 'boolean',
-      defaultValue: false
-    }
+  tags: ['autodocs'],
+  args: {
+    description: 'Tabbed cards h2 heading',
+    heading: 'Tabbed cards h2 heading',
+    tabbedCards: tabbedCardsMockLinks,
+    workwell: false,
+    rtl: false
   }
 }
 
-const Template = (args, { argTypes }) => ({
-  components: { TabbedCards },
-  props: Object.keys(argTypes),
-  template: `
-    <tabbed-cards 
-      v-bind="$props"
-    /> `
-})
-
-export const Default = Template.bind({})
+export const Default = {}

package/src/components/Paragraphs/TabbedCards/index.vue

@@ -20,7 +20,7 @@
         :content-class="`tabbed-cards-content`"
         class="tabbed-cards__grid"
         @selected="(card, cardIndex) => setCurrentRow(rIndex, card)"
-        @focussed="focussed($event)"
+        @focusin="focussed($event)"
       >
         <template v-slot:cardItem="{ card }">
           <card-grid-item
@@ -46,8 +46,7 @@
         >
           <column class="listgroup-column">
             <div ref="listgroup" class="tabbed-cards__listGroup">
-              <component
-                :is="ListGroupComponent"
+              <list-group
                 :list="selectedCard.links"
                 :title="selectedCard.linksTitle"
                 :title-tag="selectedCard.linksTag"
@@ -69,10 +68,11 @@ import CardGrid from './../../Common/CardGrid/index.vue'
 import CardGridItem from './../../Common/CardGridItem/index.vue'
 import Column from './../../Containers/Column/index.vue'
 import Icon from './../../SubComponents/Icon/index.vue'
+import ListGroup from './../../Paragraphs/ListGroup/index.vue'
 
 export default {
   name: 'TabbedCards',
-  components: { CardGrid, CardGridItem, Icon, Column },
+  components: { CardGrid, CardGridItem, Icon, Column, ListGroup },
   props: {
     heading: {
       type: String,
@@ -120,19 +120,15 @@ export default {
       } else {
         return 3
       }
-    },
-    ListGroupComponent() {
-      //List group component import to fix storybook bug
-      return () => import('./../ListGroup/index.vue')
     }
   },
   mounted() {
     window.addEventListener('resize', this.updateScreenWidth)
     this.screenWidth = document.documentElement.clientWidth
-    this.$root.$on('last-focus-out', () => {
+    /* this.$root.$on('last-focus-out', () => {
       this.selectedCard = null
       this.selectedRow = null
-    })
+    }) */
     this.loaded = true
   },
   beforeDestroy() {
@@ -193,9 +189,7 @@ export default {
     },
     focussed(ev) {
       if (ev.shiftKey) {
-        let prevTabbedCard = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-          'button'
-        )[0]
+        let prevTabbedCard = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName('button')[0]
         if (
           prevTabbedCard &&
           prevTabbedCard.getAttribute('aria-expanded') === 'true'
@@ -209,17 +203,13 @@ export default {
       }
       const lG = this.$refs.listgroup
       const isListGroupOpen = Array.isArray(lG) && lG.length > 0
-      const cardIsSelected = ev.target.parentElement.classList.contains(
-        'isSelected'
-      )
+      const cardIsSelected = ev.target.parentElement.classList.contains('isSelected')
       if (cardIsSelected && isListGroupOpen) {
         ev.preventDefault()
         lG[0].getElementsByTagName('button')[0].focus()
       } else if (!cardIsSelected && isListGroupOpen) {
         ev.preventDefault()
-        let nextTabbedCard = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
-          'button'
-        )[0]
+        let nextTabbedCard = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName('button')[0]
         if (nextTabbedCard) {
           nextTabbedCard.focus()
         } else {

package/src/components/Paragraphs/Webform/index.stories.js

@@ -6,35 +6,27 @@ export default {
     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-api
-          .toLowerCase()
-          .split(' ')
-          .join('-')}`,
         table: {
           disable: true
         }
       },
       formid: {
         control: 'string',
-        defaultValue: 'review_of_an_agent_decision',
         table: {
           disable: true
         }
       },
       type: {
         control: 'text',
-        defaultValue: 'api',
         table: {
           disable: true
         }
@@ -45,26 +37,35 @@ export default {
             disable: true
           }
       }
-    }
+    },
+    args: {
+      preview: true,
+      type: 'api',
+      formid: 'review_of_an_agent_decision',
+      contentApiUrl: process.env.CONTENT_API_URL,
+      processID: `proc-id-form-api
+          .toLowerCase()
+          .split(' ')
+          .join('-')}`
+    },
   }
 
-const Template = (args, { argTypes }) => ({
-  components: { WebformPara },
-  props: Object.keys(argTypes),
-  template: `
-    <div>
-        <h2>This is a web page with embedded webform</h2>
-        <p> Below is an example webform</p>
-        <br>
-        <br>
-        <div style="background-color: lightgrey">
-          <webform-para v-bind="$props" />
-        </div>
-    </div>
-    `
-})
-export const Default = Template.bind({})
-Default.args = {
-    type: 'api',
-    formid: 'review_of_an_agent_decision',
-  }
+  const Template = (args) => ({
+    components: { WebformPara },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div>
+          <h2>This is a web page with embedded webform</h2>
+          <p> Below is an example webform</p>
+          <br>
+          <br>
+          <div style="background-color: lightgrey">
+            <webform-para v-bind="args" />
+          </div>
+      </div>
+      `
+  })
+  
+  export const Default = Template.bind({})

package/src/components/Paragraphs/Webform/index.vue

@@ -2,7 +2,7 @@
   <div class="webform_para container-sm container-md container-lg container-xl">
     <div class="row">
       <div class="col-12 col-md-9">
-       <!--  <form-handler
+        <form-handler
           :formid="formid"
           :web-form-json="webFormJson"
           :content-api-url="contentApiUrl"
@@ -16,15 +16,18 @@
         />
         <i v-if="preview" class="fa fa-info-circle text-muted">
           preview mode. submission logged to console
-        </i> -->
+        </i>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import FormHandler from '../../SubComponents/FormInstance/components/handler/index.vue'
+import colors from '../../../includes/scss/vars/src/colors.scss'
+
 export default {
-  name: 'WebformPara'/* ,
+  name: 'WebformPara',
   components: { FormHandler },
   props: {
     formid: {
@@ -87,7 +90,7 @@ export default {
       }
       return styles
     }
-  } */
+  } 
 }
 </script>
 
@@ -96,8 +99,8 @@ export default {
   width: 100%;
   padding-top: 32px;
   padding-bottom: 64px;
-  // :deep() {
-    // @import './../../SubComponents/FormInstance/style.scss';
-  // }
+  :deep() {
+    @import './../../SubComponents/FormInstance/style.scss';
+  }
 }
 </style>

package/src/components/SubComponents/FormInstance/components/alert/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    class="formalert alert"
+    :class="{
+      //'formalert--error': isError,
+      //'alert-danger': isError
+      //'alert-success': !isError
+    }"
+  >
+    <div><rich-text :content="message" /></div>
+    <div class="formalert__fields">
+      <div
+        v-for="({ label, error, elementClass }, index) in fields"
+        :key="index"
+        class="formalert__field"
+      >
+        <div class="formalert__fieldname" @click="goToError(elementClass)">
+          {{ label }}
+        </div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div class="formalert__fieldmessage" v-html="error"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { RichText } from '../../../../../index'
+export default {
+  name: 'FormAlert',
+  components: {},
+  components: {
+    RichText
+  },
+  props: {
+    message: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    isError: {
+      type: Boolean,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    processID: {
+      type: String,
+      required: true
+    },
+    sid: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted() {
+    if (this.$gtm) {
+      if (this.isError) {
+        let attrs = {
+          group: document.title,
+          errors: [
+            {
+              errorId: 'ER8002',
+              errorDetail: 'Form Error',
+              errorMessage: this.message
+            }
+          ],
+          processId: this.processID
+        }
+        this.$gtm.push({ event: 'custom.form.error', ...attrs })
+      }
+      if (!this.isError) {
+        let attrs = {
+          group: document.title,
+          data: undefined,
+          category: 'Form Success',
+          label: 'complete',
+          targetElement: undefined,
+          processId: this.processID,
+          submissionId: this.sid
+        }
+        this.$gtm.push({ event: 'custom.form.progress.complete', ...attrs })
+      }
+    }
+  },
+  methods: {
+    goToError(elementClass) {
+      if (elementClass) {
+        const element = document.querySelector('.' + elementClass)
+        if (element) {
+          const errorClass = 'server-side-error'
+          element.classList.add(errorClass)
+          setTimeout(() => element.classList.remove(errorClass), 1000)
+          element.scrollIntoView({ behavior: 'smooth' })
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.formalert {
+  padding: 1%;
+  margin-bottom: 1%;
+  :deep(.wysiwyg) {
+    a.cta-button {
+      text-decoration: none;
+    }
+  }
+}
+
+.formalert--error {
+  .formalert__message {
+    padding-bottom: 1%;
+  }
+}
+
+.formalert__fieldname {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.formalert__field > div {
+  padding-left: 1%;
+}
+</style>

package/src/components/SubComponents/FormInstance/components/custom/base-formio.js

@@ -0,0 +1,77 @@
+import * as Vue from 'vue'
+export const getBaseVueFormIOComponent = (vueOpts) => {
+  return Vue.createVNode({
+      extends: vueOpts,
+      props: {
+        component: {
+          type: Object,
+          default: () => {}
+        },
+        // eslint-disable-next-line vue/require-default-prop
+        instance: null,
+        styles: {
+          type: String,
+          default: ''
+        },
+        parentStyleClass: {
+          type: String,
+          default: ''
+        }
+      },
+      mounted() {
+        const created = createdMap[this.component['key']]
+        if (!!created) {
+          var css = document.createElement('style')
+          css.type = 'text/css'
+          css.setAttributeNode(document.createAttribute('scopped'))
+          css.appendChild(document.createTextNode(this.styles))
+          this.$el.appendChild(css)
+
+          if (vueOpts.mounted) {
+            vueOpts.mounted.apply(this)
+          }
+        }
+        createdMap[this.component['key']] = true
+      }
+    })
+}
+// export const getBaseVueFormIOComponent = (vueOpts) => {
+//   console.log("🚀 ~ getBaseVueFormIOComponent ~ vueOpts:", vueOpts)
+//   let smegga = Object.assign({
+//     ...vueOpts,
+//     props: {
+//       component: {
+//         type: Object,
+//         default: () => {}
+//       },
+//       // eslint-disable-next-line vue/require-default-prop
+//       instance: null,
+//       styles: {
+//         type: String,
+//         default: ''
+//       },
+//       parentStyleClass: {
+//         type: String,
+//         default: ''
+//       }
+//     },
+//     mounted() {
+//       const created = createdMap[this.component['key']]
+//       if (!!created) {
+//         var css = document.createElement('style')
+//         css.type = 'text/css'
+//         css.setAttributeNode(document.createAttribute('scopped'))
+//         css.appendChild(document.createTextNode(this.styles))
+//         this.$el.appendChild(css)
+
+//         if (vueOpts.mounted) {
+//           vueOpts.mounted.apply(this)
+//         }
+//       }
+//       createdMap[this.component['key']] = true
+//     }
+//   })
+//   console.log("🚀 ~ getBaseVueFormIOComponent ~ smegga:", smegga)
+//   return Vue.createVNode(smegga)
+// }
+const createdMap = {}