@worksafevictoria/wcl7.5 1.1.0-beta.60 → 1.1.0-beta.62

package/.storybook/preview.js

@@ -1,7 +1,5 @@
 /** @type { import('@storybook/vue3').Preview } */
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import './../src/assets/styles/stylesheet.scss'
 import { setup } from '@storybook/vue3'
 
 //Custom fonts
@@ -12,6 +10,8 @@ import './../src/assets/styles/stylesheet.scss'
 
 // Storybook css
 import './../src/assets/styles/storybook.scss'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './../src/assets/styles/stylesheet.scss'
 
 
 setup((app) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.60",
+  "version": "1.1.0-beta.62",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -43,7 +43,6 @@
     "@storybook/cli": "^7.6.20",
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
-    "bootstrap-vue": "^2.23.1",
     "bootstrap-vue-next": "^0.25.10",
     "date-fns": "^2.30.0",
     "formiojs": "4.13.13",

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

@@ -1,10 +1,7 @@
 <template>
   <section-group class="sticky-top">
     <b-navbar class="paragraph--scrollspy" :class="{ rtl: rtl }">
-      <b-list-group
-        v-b-scrollspy="scrollSpy"
-        class="flex-column"
-      >
+      <b-list-group v-b-scrollspy="scrollSpy" class="flex-column">
         <div class="scrollspy__title">{{ title }}</div>
         <b-list-group-item
           v-for="(item, index) in itemList"
@@ -22,29 +19,41 @@
 
 <script>
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
-import { BNavbar, BListGroup, BListGroupItem, vBScrollspy } from 'bootstrap-vue-next'
+import {
+  BNavbar,
+  BListGroup,
+  BListGroupItem,
+  vBScrollspy,
+} from 'bootstrap-vue-next'
 
 export default {
   name: 'ScrollSpy',
   components: { SectionGroup, BNavbar, BListGroup, BListGroupItem },
-  directives: { 'b-scrollspy':vBScrollspy },
+  directives: { 'b-scrollspy': vBScrollspy },
   props: {
     title: {
       type: String,
-      default: 'On this page'
+      default: 'On this page',
     },
     itemList: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     scrollSpy: {
       type: Object,
-      default: () => {return{ element: 'body', offset: 100, method: 'auto' }}
-    }
+      default: () => {
+        return {
+          element: 'body',
+          offset: 100,
+          method: 'auto',
+          contentQuery: '[id]',
+        }
+      },
+    },
   },
   methods: {
     scrollToAnchor(anchor) {
@@ -52,11 +61,11 @@ export default {
       if (anchorElement) {
         anchorElement.focus()
         anchorElement.scrollIntoView({
-          behavior: 'smooth'
+          behavior: 'smooth',
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -67,42 +67,45 @@ export default {
     CardGrid,
     CardGridItem,
     CardBody,
-    CardTop
+    CardTop,
+  },
+  emits: {
+    selected: false,
   },
   props: {
     cards: {
       type: Array,
       required: true,
-      default: () => []
+      default: () => [],
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     headingTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     iconIsBordered: {
       type: Boolean,
-      default: true
+      default: true,
     },
     columns: {
       type: Number,
-      default: 4
+      default: 4,
     },
     cardType: {
       type: String,
-      default: null
+      default: null,
     },
     cardTextAlign: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   methods: {
     selectedCardChangeFocus(card) {
@@ -110,7 +113,7 @@ export default {
     },
     clearCard() {
       this.$refs.cardgrid.clearCards()
-    }
-  }
+    },
+  },
 }
 </script>

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

@@ -1,84 +1,84 @@
 import WebformPara from './index.vue'
 
 export default {
-    title: 'Paragraphs/Webform',
-    component: WebformPara,
-    tags: ['autodocs'],
-    argTypes: {
-      preview: {
-        control: 'boolean',
-        table: {
-          disable: true
-        }
+  title: 'Paragraphs/Webform',
+  component: WebformPara,
+  tags: ['autodocs'],
+  argTypes: {
+    preview: {
+      control: 'boolean',
+      table: {
+        disable: true,
       },
-      processID: {
-        control: 'text',
-        table: {
-          disable: true
-        }
+    },
+    processID: {
+      control: 'text',
+      table: {
+        disable: true,
       },
-      formid: {
-        control: 'string',
-        table: {
-          disable: true
-        }
+    },
+    formid: {
+      control: 'string',
+      table: {
+        disable: true,
       },
-      type: {
-        control: 'text',
-        table: {
-          disable: true
-        }
+    },
+    type: {
+      control: 'text',
+      table: {
+        disable: true,
       },
-      webFormJson: {
-        control: 'object',
-        table: {
-            disable: true
-          }
+    },
+    webFormJson: {
+      control: 'object',
+      table: {
+        disable: true,
       },
-      changed: {
-        table: {
-          disable: true
-        }
+    },
+    changed: {
+      table: {
+        disable: true,
+      },
+    },
+    submitted: {
+      table: {
+        disable: true,
       },
-      submitted: {
-        table: {
-          disable: true
-        }
+    },
+    rendered: {
+      table: {
+        disable: true,
       },
-      rendered: {
-        table: {
-          disable: true
-        }
+    },
+    nextPage: {
+      table: {
+        disable: true,
       },
-      nextPage: {
-        table: {
-          disable: true
-        }
+    },
+    prevPage: {
+      table: {
+        disable: true,
       },
-      prevPage: {
-        table: {
-          disable: true
-        }
-      }
     },
-    args: {
-      preview: true,
-      type: 'api',
-      formid: 'review_of_an_agent_decision',
-      contentApiUrl: process.env.CONTENT_API_URL,
-      processID: `proc-id-form-api
+  },
+  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('-')}`
-    },
-  }
+          .join('-')}`,
+  },
+}
 
-  const Template = (args) => ({
-    components: { WebformPara },
-    setup() {
-      return { args }
-    },
-    template: `
+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>
@@ -87,8 +87,22 @@ export default {
           <div style="background-color: lightgrey">
             <webform-para v-bind="args" />
           </div>
+          <b>Change contentApiUrl from "staging" to "dev" if form not found (file form may only exist in dev)</b>
       </div>
-      `
-  })
-  
-  export const Default = Template.bind({})
+      `,
+})
+
+export const Default = Template.bind({})
+
+export const Files = Template.bind()
+// export const Files = {}
+Files.args = {
+  preview: false,
+  type: 'api',
+  formid: 'bbtest_webform_file_upload',
+  contentApiUrl: process.env.CONTENT_API_URL,
+  processID: `proc-id-form-api
+      .toLowerCase()
+      .split(' ')
+      .join('-')}`,
+}

package/src/components/SubComponents/FormInstance/services/registry-factory.js

@@ -132,7 +132,7 @@ export class RegisterFactory {
         factory: MarkupFormElement
       },
       {
-        isApplicable: ['disabled_managed_file'],
+        isApplicable: ['managed_file'],
         factory: FileFormElement
       },
       {

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

@@ -0,0 +1,57 @@
+import FormInstance from '../index.vue'
+import fileupload from './mocks/fileupload.json'
+
+export default {
+    title: 'Form/File Upload',
+    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-advanced-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-advanced-controls',
+      preview: true,
+      contentApiUrl:process.env.CONTENT_API_URL
+  
+    }
+  }
+
+export const FileUpload = {args : {
+    type: 'managed_file',
+    webFormJson: fileupload,
+  
+  }
+}

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

@@ -0,0 +1,25 @@
+{
+    "c1": {
+      "#type": "managed_file",
+      "#title": "file1",
+      "#webform": "kitchen_sink_formio_v1",
+      "#webform_id": "kitchen_sink_formio_v1--file1",
+      "#webform_key": "file1",
+      "#description": {
+        "#theme": "webform_html_editor_markup",
+        "#markup": "Sign above"
+      },
+      "#description_display": "after",
+      "#webform_element": true,
+      "#input": true,
+      "#markup": "",
+      "#required": false,
+      "#title_display": "before",
+      "#id": "edit-file1",
+      "#name": "file1",
+      "#value": "",
+      "#label_attributes": {
+        "webform-remove-for-attribute": true
+      }
+    }
+  }

package/src/main.js

@@ -1,18 +1,10 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
-import './style.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
-import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
-import 'bootstrap'
-import 'bootstrap-vue'
 import App from './App.vue'
-import BootstrapVue from 'bootstrap-vue'
 import BootstrapVueNext from 'bootstrap-vue-next'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
 
 createApp(App).mount('#app')
 .use(BootstrapVueNext)
-.use(BootstrapVue)