@worksafevictoria/wcl7.5 1.9.0 → 1.10.0

package/.storybook/preview.js

@@ -28,7 +28,7 @@ setup((app) => {
       },
     },
     template:
-      '<a target="_blank" :href="`https://ws-ui.wsvdigital.com.au${this.to}`"><slot></slot></a>',
+      '<a target="_blank" :href="`https://ws-dev.worksafe.vic.gov.au${this.to}`"><slot></slot></a>',
   })
   app.use(createBootstrap())
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Common/CardGridItem/card-grid-item-icon.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="imageSrc || glyphSrc || glyphIconComponent"
-    class="card-grid-item-icon"
-  >
+  <div v-if="imageSrc || glyphSrc || glyphIconComponent" class="card-grid-item-icon">
     <div
       v-if="imageSrc"
       :aria-description="imageAlt"
@@ -10,7 +7,7 @@
       :class="{
         [`card-grid-item-icon--img-${
           isMobileView ? 'sm' : isTabletView ? 'md' : 'lg'
-        }-${gridColumnSize}`]: true
+        }-${gridColumnSize}`]: true,
       }"
       :style="`background-image:url(${imageSrc})`"
     >
@@ -20,7 +17,7 @@
       v-else-if="glyphSrc"
       class="card-grid-item-icon--icon"
       :class="{
-        [`card-grid-item-icon--icon-bordered-${iconSize}`]: iconIsBordered
+        [`card-grid-item-icon--icon-bordered-${iconSize}`]: iconIsBordered,
       }"
       :glyph="glyphSrc"
       :key="computedIconSize"
@@ -38,72 +35,72 @@
   </div>
 </template>
 <script>
-import Icon from './../../SubComponents/Icon/index.vue'
-import arrowRight from './../../../assets/icons/right-arrow.svg?component'
+import Icon from "./../../SubComponents/Icon/index.vue";
+import arrowRight from "./../../../assets/icons/right-arrow.svg?component";
 
 export default {
-  name: 'CardGridItemIcon',
+  name: "CardGridItemIcon",
   components: { Icon, arrowRight },
   props: {
     imageSrc: {
       type: String,
-      default: null
+      default: null,
     },
     imageAlt: {
       type: String,
-      default: null
+      default: null,
     },
     glyphSrc: {
       type: [Object, String],
-      default: null
+      default: null,
     },
     glyphIconComponent: {
       type: String,
-      default: null
+      default: null,
     },
     alt: {
       type: String,
-      default: ''
+      default: "",
     },
     isMobileView: {
-      type: Boolean
+      type: Boolean,
     },
     isTabletView: {
-      type: Boolean
+      type: Boolean,
     },
     gridColumnSize: {
       type: Number,
-      default: null
+      default: null,
     },
     iconSize: {
       type: String,
-      default: ''
+      default: "",
     },
     iconIsBordered: {
-      type: Boolean
-    }
+      type: Boolean,
+    },
   },
   computed: {
     computedIconSize() {
-      return this.iconSize === 'xsmall'
+      return this.iconSize === "xsmall"
         ? 16
-        : this.iconSize === 'small'
+        : this.iconSize === "small"
         ? 32
-        : this.iconSize === 'medium'
+        : this.iconSize === "medium"
         ? 64
         : 80;
-    }
+    },
   },
   data() {
     return {
       arrowRight,
-      glyphComponent: this.glyphIconComponent
-    }
-  }
-}
+      glyphComponent: this.glyphIconComponent,
+    };
+  },
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 .card-grid-item-icon {
   width: 100%;
 
@@ -115,9 +112,8 @@ export default {
     border-radius: 8px;
     width: 100%;
     height: 170px;
-    background-size: contain;
     background-position: center center;
-
+    background: no-repeat;
     &-lg {
       &-3,
       &-2,
@@ -142,6 +138,7 @@ export default {
         height: 233px;
       }
     }
+    background-size: contain;
   }
 
   &--icon {

package/src/components/Global/AppHeaderNew/styles.scss

@@ -246,10 +246,7 @@
 
       &:last-of-type {
         > a {
-          svg {
-            height: 23px;
-            width: 23px;
-          }
+          
           & > span {
             margin-right: 10px;
             @media screen and (max-width: 1010px) and (min-width: 981px) {

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

@@ -1,15 +1,13 @@
 <template>
-  <div v-show="showStrip" :class="`${type}-strip ${themeColor} ${layout}`">
+  <div :class="`${type}-strip ${themeColor} ${layout}`">
     <b-alert
       :class="`${type}-strip__inner`"
-      show
       v-model="dismissibleAlert"
       :dismissible="!mini"
+      show
       :variant="`${type === 'alert' ? 'danger' : 'information'}`"
-      :dismiss-label="
-        `Close ${type === 'alert' ? 'alert' : 'information'} message`
-      "
-      @dismissed="handleDismissed()"
+      :dismiss-label="`Close ${type === 'alert' ? 'alert' : 'information'} message`"
+      @dismissed="handleDismissed"
     >
       <div
         :role="mini ? 'link' : null"
@@ -27,17 +25,18 @@
           :class="{
             [`${type}-strip__content`]: true,
             [`${type}-strip__content--left`]: !rtl,
-            [`${type}-strip__content--right`]: rtl
+            [`${type}-strip__content--right`]: rtl,
           }"
         >
           <span
             :class="{
               [`${type}-strip__heading`]: true,
               [`${type}-strip__heading--left`]: !rtl,
-              [`${type}-strip__heading--right`]: rtl
+              [`${type}-strip__heading--right`]: rtl,
             }"
-            >{{ stripTitle }}</span
           >
+            {{ stripTitle }}
+          </span>
           <rich-text :content="stripContent" :without-container="true" />
         </div>
         <img
@@ -50,86 +49,95 @@
       </div>
     </b-alert>
     <div v-if="mini && type === 'alert'" class="alert-strip__link">
-      <nuxt-link :to="'/safety-alerts'">All safety alerts</nuxt-link>
+      <nuxt-link to="/safety-alerts">All safety alerts</nuxt-link>
     </div>
   </div>
 </template>
 
-<script setup>
-import { ref } from 'vue'
-
-const dismissibleAlert = ref(true)
-</script>
-
 <script>
-import exclamationIcon from '../../../assets/icons/Strip/Exclamation triangle fill.svg?url'
-import arrowIcon from '../../../assets/icons/Strip/Arrow right.svg?url'
-import dismissIcon from '../../../assets/icons/Strip/Dismiss.svg?url'
-import infoIcon from '../../../assets/icons/Strip/Info circle fill.svg?url'
-import chevronIcon from '../../../assets/icons/caret-right.svg?url'
-import RichText from '../../Paragraphs/RichText/index.vue'
-import { BAlert } from 'bootstrap-vue-next'
+import exclamationIcon from "../../../assets/icons/Strip/Exclamation triangle fill.svg?url";
+import arrowIcon from "../../../assets/icons/Strip/Arrow right.svg?url";
+import dismissIcon from "../../../assets/icons/Strip/Dismiss.svg?url";
+import infoIcon from "../../../assets/icons/Strip/Info circle fill.svg?url";
+import chevronIcon from "../../../assets/icons/caret-right.svg?url";
+import RichText from "../../Paragraphs/RichText/index.vue";
+import { BAlert } from "bootstrap-vue-next";
 
 export default {
-  name: 'Strip',
+  name: "Strip",
   components: {
     RichText,
-    BAlert
+    BAlert,
   },
   props: {
+    modelValue: {
+      type: Boolean,
+      default: true,
+    },
     stripHeading: {
       type: String,
-      default: ''
+      default: "",
     },
     stripContent: {
       type: String,
-      default: ''
+      default: "",
     },
     url: {
       type: String,
-      default: '#'
+      default: "#",
     },
     type: {
       type: String,
-      required: true
+      required: true,
     },
     mini: {
       type: Boolean,
-      default: true
+      default: true,
     },
     rtl: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
+  emits: ["update:modelValue", "dismissed"],
   data() {
     return {
-      showStrip: true,
+      dismissibleAlert: this.modelValue,
       exclamationIcon,
       arrowIcon,
       dismissIcon,
       infoIcon,
-      chevronIcon
-    }
+      chevronIcon,
+    };
+  },
+  watch: {
+    modelValue(val) {
+      this.dismissibleAlert = val;
+    },
+    dismissibleAlert(val) {
+      if (val !== this.modelValue) {
+        this.$emit("update:modelValue", val);
+      }
+    },
   },
   computed: {
     layout() {
-      return this.mini ? 'mini' : 'full'
+      return this.mini ? "mini" : "full";
     },
     themeColor() {
-      return this.type === 'alert' ? 'red' : 'blue'
+      return this.type === "alert" ? "red" : "blue";
     },
     stripTitle() {
-      if (this.mini && this.type === 'alert') {
-        return 'Safety alert'
-      } else if (this.mini && this.type === 'notice') {
-        return 'Information'
+      if (this.mini && this.type === "alert") {
+        return "Safety alert";
+      } else if (this.mini && this.type === "notice") {
+        return "Information";
       } else if (this.stripHeading) {
-        return this.stripHeading
+        return this.stripHeading;
       } else {
-        return ''
+        return "";
       }
-    }
+    },
   },
   methods: {
     handleClick() {
@@ -138,38 +146,39 @@ export default {
         label: this.stripContent,
         link: this.mini ? this.url : false,
         clickedOnPage: this.$route.path,
-        globalStrip: false
-      }
+        globalStrip: false,
+      };
       if (this.$gtm) {
         this.$gtm.push({
           event: `custom.interaction.${this.type}.click`,
-          ...attrs
-        })
+          ...attrs,
+        });
       }
-      this.$router.push(this.url)
+      this.$router.push(this.url);
     },
     handleDismissed() {
-      this.showStrip = false
-      this.$emit('dismissed')
+      this.$emit("update:modelValue", false);
+      this.$emit("dismissed");
 
       if (this.$gtm) {
         const attrs = {
           group: this.type,
           label: this.stripHeading,
           clickedOnPage: this.$route.path,
-          globalStrip: false
-        }
+          globalStrip: false,
+        };
         this.$gtm.push({
           event: `custom.interaction.${this.type}.close`,
-          ...attrs
-        })
+          ...attrs,
+        });
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
+
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 .red {
   .alert-strip {
     &__inner {
@@ -303,7 +312,7 @@ export default {
         max-width: 794px;
       }
 
-      @include mq('sm') {
+      @include mq("sm") {
         flex-direction: column;
         margin-right: 16px;
 
@@ -333,13 +342,12 @@ export default {
         color: $black;
         text-decoration: none;
       }
-      a:hover {   
-          text-decoration: underline;
-        }
+      a:hover {
+        text-decoration: underline;
+      }
       a:focus {
-          text-decoration: underline;
-        }
-    
+        text-decoration: underline;
+      }
     }
     &__icon {
       &--caret {

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

@@ -12,6 +12,8 @@
         >
         <b-form-input
           id="site-search"
+          autofocus
+          ref="siteSearch"
           v-model="searchQuery"
           name="search"
           aria-label="searchbar"
@@ -59,6 +61,7 @@ import { BButton, BInputGroup, BFormInput } from "bootstrap-vue-next";
 
 export default {
   components: { SearchListing, BButton, BInputGroup, BFormInput },
+  
   props: {
     pageLimit: {
       type: Number,
@@ -106,6 +109,7 @@ export default {
     },
   },
   mounted() {
+    
     if (this.searchType === "google") {
       this.setupGoogleStyle();
     } else {