@worksafevictoria/wcl7.5 1.8.0 → 1.9.0-beta.10

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

@@ -14,17 +14,13 @@
           class="social-share__button"
         >
           <div class="social-share__circle--black">
-            <a
-              tabindex="0"
-              class="social-share__anchor"
-              :href="`mailto:?body=${url}`"
-            >
+            <a tabindex="0" class="social-share__anchor" :href="`mailto:?body=${url}`">
               <span class="visually-hidden">Email</span>
               <img
                 role="presentation"
                 class="social-share__img"
                 :src="emailIcon"
-                alt=""
+                alt="social share email icon"
               />
             </a></div
         ></b-button>
@@ -45,7 +41,7 @@
                 role="presentation"
                 class="social-share__img"
                 :src="facebookIcon"
-                alt=""
+                alt="social share facebook icon"
               />
             </a></div
         ></b-button>
@@ -66,7 +62,7 @@
                 role="presentation"
                 class="social-share__img"
                 :src="twitterIcon"
-                alt=""
+                alt="social share twitter icon"
               />
             </a></div
         ></b-button>
@@ -86,7 +82,7 @@
                 role="presentation"
                 class="social-share__img-pdf"
                 :src="officeFilePdfIcon"
-                alt=""
+                alt="social share pdf icon"
               />
             </a></div
         ></b-button>
@@ -96,64 +92,64 @@
 </template>
 
 <script>
-import emailIcon from '../../../assets/icons/SocialShare/email-white.svg?url'
-import facebookIcon from '../../../assets/icons/SocialShare/facebook-white.svg?url'
-import twitterIcon from '../../../assets/icons/SocialShare/x-icon-white.svg?url'
-import officeFilePdfIcon from '../../../assets/icons/SocialShare/office-file-pdf.svg?url'
-import { BButton, BButtonGroup } from 'bootstrap-vue-next'
+import emailIcon from "../../../assets/icons/SocialShare/email-white.svg?url";
+import facebookIcon from "../../../assets/icons/SocialShare/facebook-white.svg?url";
+import twitterIcon from "../../../assets/icons/SocialShare/x-icon-white.svg?url";
+import officeFilePdfIcon from "../../../assets/icons/SocialShare/office-file-pdf.svg?url";
+import { BButton, BButtonGroup } from "bootstrap-vue-next";
 
 export default {
-    name: 'SocialShare',
-    components: { BButtonGroup, BButton },
-    props: {
-        rtl: {
-            type: Boolean,
-            default: false
-        }
+  name: "SocialShare",
+  components: { BButtonGroup, BButton },
+  props: {
+    rtl: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-        return {
-            url: null,
-            emailIcon,
-            facebookIcon,
-            twitterIcon,
-            officeFilePdfIcon,
-            mobileToggle: false,
-            rightToggle: true
-        };
+  },
+  data() {
+    return {
+      url: null,
+      emailIcon,
+      facebookIcon,
+      twitterIcon,
+      officeFilePdfIcon,
+      mobileToggle: false,
+      rightToggle: true,
+    };
+  },
+  computed: {
+    showFacebook() {
+      return true;
     },
-    computed: {
-        showFacebook() {
-            return true;
-        },
-        showTwitter() {
-            return true;
-        },
-        showEmail() {
-            return true;
-        },
-        showPdf() {
-            return this.$canPrint && this.$canPrint();
-        }
+    showTwitter() {
+      return true;
     },
-    mounted() {
-      let winHref = window.location.href
-          if (winHref.toLowerCase().includes("worksafe")) {
-            this.url = window.location.href;
-        }
+    showEmail() {
+      return true;
     },
-    methods: {
-        savePdf() {
-            window.printOnLoad = true;
-            let URL = `/pdf${window.location.pathname}`;
-            window.open(URL);
-        }
+    showPdf() {
+      return this.$canPrint && this.$canPrint();
+    },
+  },
+  mounted() {
+    let winHref = window.location.href;
+    if (winHref.toLowerCase().includes("worksafe")) {
+      this.url = window.location.href;
     }
-}
+  },
+  methods: {
+    savePdf() {
+      window.printOnLoad = true;
+      let URL = `/pdf${window.location.pathname}`;
+      window.open(URL);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 
 .social-share {
   background: $white;
@@ -167,7 +163,7 @@ export default {
   left: 0;
   z-index: 2;
 
-  @include mq('sm') {
+  @include mq("sm") {
     position: relative;
     top: auto;
     left: auto;
@@ -179,7 +175,7 @@ export default {
   &__header {
     font-size: 14px;
     line-height: 50px;
-    @include mq('sm') {
+    @include mq("sm") {
       line-height: 40px;
     }
   }
@@ -191,7 +187,7 @@ export default {
     align-content: center;
     margin: auto;
 
-    @include mq('sm') {
+    @include mq("sm") {
       display: block;
       margin: 0;
       flex-direction: unset;
@@ -226,7 +222,7 @@ export default {
     left: 0px;
     position: relative;
 
-    @include mq('sm') {
+    @include mq("sm") {
       display: none;
     }
   }
@@ -238,10 +234,10 @@ export default {
     border: 0;
     margin-bottom: 8px;
 
-    @include mq('sm') {
+    @include mq("sm") {
       margin-right: 8px;
     }
-    @include mq('xs') {
+    @include mq("xs") {
       margin-bottom: 0px;
     }
     a {
@@ -264,7 +260,7 @@ export default {
 
   &__vr {
     border: 0;
-    @include mq('sm') {
+    @include mq("sm") {
       border-left: 2px solid $lightgray;
       margin-left: 12px;
     }
@@ -289,7 +285,7 @@ export default {
     }
   }
 }
-@include mq('sm') {
+@include mq("sm") {
   .fixed {
     position: fixed;
     bottom: 0;
@@ -312,7 +308,7 @@ export default {
   left: inherit;
   right: 0;
 
-  @include mq('sm') {
+  @include mq("sm") {
     border-radius: 0;
   }
 }

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"
@@ -20,116 +18,130 @@
         @keypress.enter="mini ? handleClick() : false"
       >
         <div :class="`${type}-strip__icon`">
-          <img v-if="type === 'alert'" :src="exclamationIcon" alt="" />
-          <img v-else :src="infoIcon" alt="" />
+          <img
+            v-if="type === 'alert'"
+            :src="exclamationIcon"
+            alt="alert exclamation icon"
+          />
+          <img v-else :src="infoIcon" alt="alert information icon" />
         </div>
         <div
           :class="{
             [`${type}-strip__content`]: true,
             [`${type}-strip__content--left`]: !rtl,
-            [`${type}-strip__content--right`]: rtl
+            [`${type}-strip__content--right`]: rtl,
           }"
         >
-          <span
+          <h2
             :class="{
               [`${type}-strip__heading`]: true,
               [`${type}-strip__heading--left`]: !rtl,
-              [`${type}-strip__heading--right`]: rtl
+              [`${type}-strip__heading--right`]: rtl,
             }"
-            >{{ stripTitle }}</span
           >
+            {{ stripTitle }}
+          </h2>
           <rich-text :content="stripContent" :without-container="true" />
         </div>
         <img
           v-if="mini"
           height="16"
           class="alert-strip__icon--caret"
-          alt=""
+          alt="alert icon"
           :src="chevronIcon"
         />
       </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 +150,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 +316,7 @@ export default {
         max-width: 794px;
       }
 
-      @include mq('sm') {
+      @include mq("sm") {
         flex-direction: column;
         margin-right: 16px;
 
@@ -333,13 +346,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/Paragraphs/Accordion/AccordionItem/index.vue

@@ -19,18 +19,16 @@
         @click.prevent="toggleAccordion"
         @keypress.enter="toggleAccordion"
       >
-        <span
-          v-if="preHeading && showPreHeading"
-          class="accordion-item__pre-heading"
-          >{{ preHeading }}</span
-        >
+        <span v-if="preHeading && showPreHeading" class="accordion-item__pre-heading">{{
+          preHeading
+        }}</span>
         <rich-text :tag="'h4'" :tag-class="'card-title'" :content="title" />
         <icon
           v-show="showAccordion && content"
           width="18"
           height="12"
           class="accordion-icon"
-          :icon-alt="'collapse'"
+          :icon-alt="'collapse icon'"
           :glyph="CaretUp"
           :class="{
             '--with-pre-heading': preHeading && showPreHeading,
@@ -41,7 +39,7 @@
           width="18"
           height="12"
           class="accordion-icon"
-          :icon-alt="'expand'"
+          :icon-alt="'expand icon'"
           :glyph="CaretDown"
           :class="{
             '--with-pre-heading': preHeading && showPreHeading,
@@ -64,14 +62,14 @@
 </template>
 
 <script>
-import CaretDown from '../../../../assets/icons/caret-down.svg?url'
-import CaretUp from '../../../../assets/icons/caret-up.svg?url'
-import RichText from '../../RichText/index.vue'
-import Icon from '../../../SubComponents/Icon/index.vue'
-import { BCard, BCardBody } from 'bootstrap-vue-next'
+import CaretDown from "../../../../assets/icons/caret-down.svg?url";
+import CaretUp from "../../../../assets/icons/caret-up.svg?url";
+import RichText from "../../RichText/index.vue";
+import Icon from "../../../SubComponents/Icon/index.vue";
+import { BCard, BCardBody } from "bootstrap-vue-next";
 
 export default {
-  name: 'AccordionItem',
+  name: "AccordionItem",
   components: {
     RichText,
     Icon,
@@ -81,11 +79,11 @@ export default {
   props: {
     title: {
       type: String,
-      default: 'Item',
+      default: "Item",
     },
     preHeading: {
       type: String,
-      default: 'PRE-HEADING',
+      default: "PRE-HEADING",
     },
     content: {
       type: String,
@@ -109,7 +107,7 @@ export default {
     },
     itemid: {
       type: String,
-      default: 'Item',
+      default: "Item",
     },
   },
   data: () => ({
@@ -119,28 +117,28 @@ export default {
   }),
   mounted() {
     this.$nextTick(() => {
-      this.showAccordion = this.open
-    })
+      this.showAccordion = this.open;
+    });
   },
   methods: {
     toggleAccordion() {
-      this.showAccordion = !this.showAccordion
+      this.showAccordion = !this.showAccordion;
       if (this.showAccordion) {
         if (this.$bus) {
-          this.$bus.$emit('accordionItemOpen', this.meta) // this.$root.$emit('accordionItemOpen', this.meta)
+          this.$bus.$emit("accordionItemOpen", this.meta); // this.$root.$emit('accordionItemOpen', this.meta)
         }
       } else {
         if (this.$bus) {
-          this.$bus.$emit('accordionItemClose', this.meta) // this.$root.$emit('accordionItemClose', this.meta)
+          this.$bus.$emit("accordionItemClose", this.meta); // this.$root.$emit('accordionItemClose', this.meta)
         }
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
-@import '../../../../includes/scss/all';
+@import "../../../../includes/scss/all";
 .subcomponent--accordion-item {
   .accordion-item {
     border-radius: 6px;