@worksafevictoria/wcl7.5 1.9.0 → 1.11.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

@@ -12,25 +12,23 @@
       <a
         :id="'accordion' + itemid"
         role="button"
-        :aria-expanded="showAccordion ? 'true' : 'false'"
+        :aria-expanded="showAccordion"
         class="accordion-item__title"
         :aria-controls="'sect' + itemid"
         tabindex="0"
         @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;

package/src/components/Paragraphs/Accordion/StepperItem/index.vue

@@ -34,7 +34,7 @@
               width="18"
               height="12"
               class="stepper-icon"
-              :icon-alt="'collapse'"
+              :icon-alt="'collapse icon'"
               :glyph="CaretUp"
             />
             <icon
@@ -42,7 +42,7 @@
               width="18"
               height="12"
               class="stepper-icon"
-              :icon-alt="'expand'"
+              :icon-alt="'expand icon'"
               :glyph="CaretDown"
             />
           </div>
@@ -64,14 +64,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: 'StepperItem',
+  name: "StepperItem",
   components: {
     RichText,
     Icon,
@@ -81,7 +81,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: 'Item',
+      default: "Item",
     },
     content: {
       type: String,
@@ -109,7 +109,7 @@ export default {
     },
     itemid: {
       type: String,
-      default: 'Item',
+      default: "Item",
     },
   },
   data: () => ({
@@ -119,19 +119,19 @@ export default {
   }),
   mounted() {
     this.$nextTick(() => {
-      this.showAccordion = this.open
-    })
+      this.showAccordion = this.open;
+    });
   },
   methods: {
     toggleAccordion() {
-      this.showAccordion = !this.showAccordion
+      this.showAccordion = !this.showAccordion;
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
-@import '../../../../includes/scss/all';
+@import "../../../../includes/scss/all";
 .subcomponent--accordion-stepper {
   .accordion-stepper {
     border-radius: 6px;