@worksafevictoria/wcl7.5 1.1.1 → 1.1.3

package/.storybook/main.js

@@ -5,7 +5,8 @@ const config = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-a11y'
+    '@storybook/addon-a11y',
+    'storybook-addon-deep-controls'
   ],
   framework: {
     name: '@storybook/vue3-vite',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,9 @@
     "bootstrap-vue": "^2.23.1",
     "bootstrap-vue-next": "^0.15.5",
     "date-fns": "^2.30.0",
+    "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"
   },

package/src/components/Global/AppHeader/ModalSearch/index.vue

@@ -17,6 +17,7 @@
       >
       <search
         ref="searchInputBox"
+        :google-search-flag="googleSearchFlag"
         :initial-search-query="searchQuery"
         :page-limit="pageLimit"
         :page-number="pageNumber"
@@ -31,7 +32,7 @@
 </template>
 
 <script>
-import Close from '../../../../assets/icons/close.svg'
+import Close from '../../../../assets/icons/close.svg?url'
 import Search from '../../../SubComponents/Search/index.vue'
 
 export default {
@@ -45,6 +46,10 @@ export default {
     contentParser: {
       type: Function,
       required: true
+    },
+    googleSearchFlag: {
+      type: String,
+      default: 'googlerest'
     }
   },
   data() {

package/src/components/Global/AppHeader/index.stories.js

@@ -18,45 +18,42 @@ const contentParser = () => {
 export default {
   title: 'Global/AppHeader',
   component: AppHeader,
+  tags: ['autodocs'],
   data() {
     return {
       appHeaderData
     }
   },
   argTypes: {
-    headerMenu: {
-      control: 'object',
-      defaultValue: appHeaderData
-    },
     contentParser: {
-      control: 'function',
-      defaultValue: contentParser,
       table: { disable: true }
-    },
-    isWorkWell: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    authenticated: {
-      control: 'boolean',
-      defaultValue: false
     }
+  },
+  args: {
+    headerMenu: appHeaderData,
+    contentParser: contentParser,
+    isWorkWell: false,
+    authenticated: false,
+    mainContent: 'Some dummy main content required for this example',
+    footerContent: 'Some dummy footer content required for this example'
   }
 }
 
-const DefaultContent = (args, { argTypes }) => ({
+const DefaultContent = (args) => ({
   components: { AppHeader },
-  props: Object.keys(argTypes),
+  setup() {
+    return { args }
+  },
   template: `
   <div>
   <app-header
-  v-bind="$props"
+  v-bind="args"
   />
     <main>
       <div class="container">
         <div class="row">
           <div class="col">
-            {{$props.mainContent}}
+            {{args.mainContent}}
           </div>
         </div>
       </div>
@@ -65,7 +62,7 @@ const DefaultContent = (args, { argTypes }) => ({
       <div class="container">
         <div class="row">
           <div class="col">
-          {{$props.footerContent}}
+          {{args.footerContent}}
           </div>
         </div>
       </div>
@@ -75,8 +72,3 @@ const DefaultContent = (args, { argTypes }) => ({
 })
 
 export const Default = DefaultContent.bind({})
-
-Default.args = {
-  mainContent: 'Some dummy main content required for this example',
-  footerContent: 'Some dummy footer content required for this example'
-}

package/src/components/Global/AppHeader/index.vue

@@ -416,14 +416,14 @@
 
 <script>
 import ModalSearch from './ModalSearch/index.vue'
-import Close from './../../../assets/icons/close.svg'
-import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg'
-import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg'
-import CaretRight from './../../../assets/icons/caret-right.svg'
-import CaretDown from './../../../assets/icons/caret-down.svg'
-import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg'
-import CaretLeft from './../../../assets/icons/caret-left.svg'
-import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg'
+import Close from './../../../assets/icons/close.svg?component'
+import WorkSafeLogo from './../../../assets/icons/AppFooter/worksafe-footer-logo.svg?url'
+import WorkWellLogo from './../../../assets/icons/AppFooter/logo-workwell-reversed.svg?url'
+import CaretRight from './../../../assets/icons/caret-right.svg?component'
+import CaretDown from './../../../assets/icons/caret-down.svg?component'
+import SearchIcon from './../../../assets/icons/AppHeader/search-32px.svg?component'
+import CaretLeft from './../../../assets/icons/caret-left.svg?component'
+import MenuIcon from './../../../assets/icons/AppHeader/menu-32px.svg?component'
 
 export default {
   components: {
@@ -527,6 +527,7 @@ export default {
       this.windowWidth = window.innerWidth
     },
     firstLevelClick(item, ref) {
+      console.log('in first level click')
       // Reset screen to fix whitespace
       if (window && window.scrollTo && this.screen === 'desktop') {
         window.scrollTo(0, 0)