@worksafevictoria/wcl7.5 1.1.0-beta.7 → 1.1.0-beta.70

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

@@ -1,70 +1,107 @@
 import WebformPara from './index.vue'
 
 export default {
-    title: 'Paragraphs/Webform',
-    component: WebformPara,
-    argTypes: {
-      preview: {
-        control: 'boolean',
-        defaultValue: true,
-        table: {
-          disable: true
-        }
+  title: 'Paragraphs/Webform',
+  component: WebformPara,
+  tags: ['autodocs'],
+  argTypes: {
+    preview: {
+      control: 'boolean',
+      table: {
+        disable: true,
       },
-      contentApiUrl: {
-        control: 'text',
-        defaultValue: process.env.CONTENT_API_URL
+    },
+    processID: {
+      control: 'text',
+      table: {
+        disable: true,
       },
-      processID: {
-        control: 'text',
-        defaultValue: `proc-id-form-api
-          .toLowerCase()
-          .split(' ')
-          .join('-')}`,
-        table: {
-          disable: true
-        }
+    },
+    formid: {
+      control: 'text',
+    },
+    type: {
+      control: 'text',
+      table: {
+        disable: true,
+      },
+    },
+    webFormJson: {
+      control: 'object',
+      table: {
+        disable: true,
       },
-      formid: {
-        control: 'string',
-        defaultValue: 'review_of_an_agent_decision',
-        table: {
-          disable: true
-        }
+    },
+    changed: {
+      table: {
+        disable: true,
       },
-      type: {
-        control: 'text',
-        defaultValue: 'api',
-        table: {
-          disable: true
-        }
+    },
+    submitted: {
+      table: {
+        disable: true,
       },
-      webFormJson: {
-        control: 'object',
-        table: {
-            disable: true
-          }
-      }
-    }
-  }
+    },
+    rendered: {
+      table: {
+        disable: true,
+      },
+    },
+    nextPage: {
+      table: {
+        disable: true,
+      },
+    },
+    prevPage: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    preview: true,
+    type: 'api',
+    formid: 'review_of_an_agent_decision',
+    // contentApiUrl: process.env.CONTENT_API_URL,
+    contentApiUrl: 'https://content-dev-v2.api.worksafe.vic.gov.au',
+    processID: `proc-id-form-api
+          .toLowerCase()
+          .split(' ')
+          .join('-')}`,
+  },
+}
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { WebformPara },
-  props: Object.keys(argTypes),
+  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="$props" />
-        </div>
-    </div>
-    `
+      <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>
+          <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({})
-Default.args = {
-    type: 'api',
-    formid: 'review_of_an_agent_decision',
-  }
+
+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,
+  contentApiUrl: 'https://content-dev-v2.api.worksafe.vic.gov.au',
+  processID: `proc-id-form-api
+      .toLowerCase()
+      .split(' ')
+      .join('-')}`,
+}

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"
@@ -15,16 +15,19 @@
           @prevPage="() => $emit('prevPage')"
         />
         <i v-if="preview" class="fa fa-info-circle text-muted">
-          preview mode. submission logged to console
-        </i> -->
+          <span> preview mode. submission logged to console</span>
+        </i>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import FormHandler from '../../SubComponents/FormInstance/components/handler/index.vue'
+import colors from '../../../includes/scss/vars/src/colors.scss?inline'
+
 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/Breadcrumb/index.stories.js

@@ -4,19 +4,11 @@ import mockData from './constants'
 export default {
   title: 'SubComponents/Breadcrumb',
   component: Breadcrumb,
-  argTypes: {
-    breadcrumbItems: {
-      control: 'array'
-    },
-    rtl: {
-      control: 'boolean'
-    }
-  }
-}
-
-export const Default = {
+  tags: ['autodocs'],
   args: {
     breadcrumbItems: mockData,
     rtl: false
   }
 }
+
+export const Default = {}

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

@@ -3,40 +3,11 @@ import CardGroup from './index.vue'
 export default {
   title: 'SubComponents/CardGroup',
   component: { CardGroup },
+  tags: ['autodocs'],
   argTypes: {
-    collectionTitle: {
-      control: 'text'
-    },
-    titleTag: {
-      control: 'text'
-    },
-    cards: {
-      type: 'number'
-    },
     background: {
       control: 'select',
       options: ['grey', 'yellow', 'white']
-    },
-    showImage: {
-      control: 'boolean'
-    },
-    link: {
-      control: 'text'
-    },
-    date: {
-      control: 'text'
-    },
-    location: {
-      control: 'text'
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    columns: {
-      type: 'number'
-    },
-    emptyCardsText: {
-      control: 'text'
     }
   }
 }

package/src/components/SubComponents/CardGroup/index.vue

@@ -26,7 +26,7 @@
         class="card_group__card"
         :class="{
           [`card_group__card--${card.colour}`]: card.pillText,
-          [`card_group__card--none`]: !card.pillText
+          [`card_group__card--none`]: !card.pillText,
         }"
         :card-header-title="card.title"
         :caret="getCaret(card)"
@@ -40,7 +40,7 @@
         :taxonomies="{
           industry: card.industry,
           topic: card.topic,
-          language: card.language
+          language: card.language,
         }"
       >
         <template v-slot:cardTop>
@@ -55,9 +55,9 @@
     <template
       v-if="
         loading ||
-          (cards.length === 0 && !loading) ||
-          $slots.cardGroupFooter ||
-          (!loading && showLoadMore)
+        (cards.length === 0 && !loading) ||
+        $slots.cardGroupFooter ||
+        (!loading && showLoadMore)
       "
       v-slot:cardGridFooter
     >
@@ -93,7 +93,7 @@ import Column from './../../Containers/Column/index.vue'
 import {
   isAbsoluteUrl,
   navigateToPath,
-  isGovSite
+  isGovSite,
 } from './../../../../lib/utility'
 import CardBody from './cardbody.vue'
 import CardTop from './cardtop.vue'
@@ -109,57 +109,57 @@ export default {
     CardBody,
     CardTop,
     CtaButton,
-    BSpinner
-},
+    BSpinner,
+  },
   props: {
     bundle: {
       type: Array,
       required: false,
-      default: () => []
+      default: () => [],
     },
     caret: {
       type: String,
       default: undefined,
       validator: (value) =>
-        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0
+        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0,
     },
     cards: {
       type: Array,
       required: true,
-      default: () => []
+      default: () => [],
     },
     background: {
       type: String,
-      default: 'none'
+      default: 'none',
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     columns: {
       type: Number,
-      default: 3
+      default: 3,
     },
     showLoadMore: {
       type: Boolean,
-      default: false
+      default: false,
     },
     emptyCardsText: {
       type: String,
-      default: 'No results returned'
-    }
+      default: 'No results returned',
+    },
   },
   computed: {
     allCardsRTL() {
@@ -167,7 +167,7 @@ export default {
         return this.rtl
       }
       return this.cards.every((card) => this.rtl || card.rtl)
-    }
+    },
   },
   methods: {
     getCaret(card) {
@@ -181,24 +181,30 @@ export default {
       // Some custom logic for gov caretaker logic
       if (process.env.CARETAKER && process.env.CARETAKER === 'true') {
         if (!isGovSite(card?.selectedCard?.link)) {
-          this.$store.commit('page/SET_CARETAKER_REF', 'card-group')
-          this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          // this.$store.commit('page/SET_CARETAKER_REF', 'card-group')
+          // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
+          if (this.$pageStore) {
+            this.$pageStore.caretaker.referrer = 'card-group'
+          }
+          if (this.$bus) {
+            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
+          }
         } else {
           navigateToPath.call(
             this,
             card?.selectedCard?.link,
-            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
           )
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.link,
-          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
         )
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -4,6 +4,7 @@ import svg from './../../../assets/icons/instagram.svg?raw'
 export default {
   title: 'SubComponents/CTA',
   component: CtaButton,
+  tags: ['autodocs'],
   argTypes: {
     glyph: {
       control: ['object', 'text'],
@@ -13,30 +14,6 @@ export default {
       control: 'text',
       table: { disable: true }
     },
-    url: {
-      control: 'text'
-    },
-    isCentred: {
-      control: 'boolean'
-    },
-    rtl: {
-      control: 'boolean'
-    },
-    slim: {
-      control: 'boolean'
-    },
-    stretch: {
-      control: 'boolean'
-    },
-    textOnly: {
-      control: 'boolean'
-    },
-    workwell: {
-      control: 'boolean'
-    },
-    disabled: {
-      control: 'boolean'
-    },
     isFluid: {
       control: 'boolean',
       table: { disable: true }

package/src/components/SubComponents/CtaButton/index.vue

@@ -75,77 +75,77 @@ export default {
   components: {
     arrowRight,
     arrowLeft,
-    icon
+    icon,
   },
   props: {
     type: {
       type: String,
       default: 'default',
       validator: (value) =>
-        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0
+        ['default', 'white', 'gray', 'workwell', 'dark'].indexOf(value) >= 0,
     },
     url: {
       type: String,
       required: false,
-      default: ''
+      default: '',
     },
     alt: {
       type: String,
-      default: ''
+      default: '',
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     glyph: {
       type: [Object, String],
       required: false,
-      default: () => null
+      default: () => null,
     },
     glyphHeight: {
       type: Number,
       required: false,
-      default: 15
+      default: 15,
     },
     glyphWidth: {
       type: Number,
       required: false,
-      default: 25
+      default: 25,
     },
     workwell: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isCentred: {
       type: Boolean,
-      default: false
+      default: false,
     },
     textOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isFluid: {
       type: Boolean,
-      default: true
+      default: true,
     },
     stretch: {
       type: Boolean,
-      default: false
+      default: false,
     },
     slim: {
       type: Boolean,
-      default: false
+      default: false,
     },
     focusOutline: {
       type: String,
       default: 'default',
-      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0
-    }
+      validator: (value) => ['default', 'light', 'dark'].indexOf(value) >= 0,
+    },
   },
   data() {
     return {
       arrowRight,
-      arrowLeft
+      arrowLeft,
     }
   },
   computed: {
@@ -188,12 +188,12 @@ export default {
       return this.isCentred
         ? { ['wcl-cta__arrow']: hasArrow }
         : {
-            ['wcl-cta__arrow']: hasArrow
+            ['wcl-cta__arrow']: hasArrow,
           }
     },
     textClass() {
       return this.isCentred ? {} : {}
-    }
+    },
   },
   methods: {
     clicked() {
@@ -201,15 +201,17 @@ export default {
       var attrs
       if (theEl && theEl.length > 0) {
         attrs = {
-          group: this.$store?.state?.page?.content?.title,
+          //group: this.$store?.state?.page?.content?.title,
+          group: this.$pageStore?.content?.title,
           label: theEl[0]?.innerText?.split('\n')[0],
-          data: this.url
+          data: this.url,
         }
       } else {
         attrs = {
-          group: this.$store?.state?.page?.content?.title,
+          //group: this.$store?.state?.page?.content?.title,
+          group: this.$pageStore?.content?.title,
           label: '',
-          data: this.url
+          data: this.url,
         }
       }
       // push event to gtm
@@ -225,8 +227,8 @@ export default {
         this.$router.push(this.url)
       }
       this.$emit('clicked')
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

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

@@ -3,34 +3,7 @@ import FormAddressPostcode from './index.vue'
 export default {
   title: 'SubComponents/FormAddressPostcode',
   component: FormAddressPostcode,
-  argTypes: {
-    showShadow: {
-      control: 'boolean'
-    },
-    inputPlaceholder: {
-      control: 'text'
-    },
-    showFullAddress: {
-      control: 'boolean'
-    },
-    geocode: {
-      control: 'boolean'
-    },
-    reverseGeocode: {
-      control: 'boolean'
-    },
-    baseUrl: {
-      control: 'text'
-    },
-    inputClassName: {
-      control: 'text'
-    }
-  }
-}
-
-
-export const Default = {
-  
+  tags: ['autodocs'],
   args: {
     showShadow: false,
     inputPlaceholder: 'Search for a suburb or postcode',
@@ -41,3 +14,5 @@ export const Default = {
     inputClassName: 'class-name'
   }
 }
+
+export const Default = {}