@worksafevictoria/wcl7.5 1.10.0 → 1.12.0

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

@@ -12,14 +12,18 @@
       <div
         :role="mini ? 'link' : null"
         :class="type + '-strip__inner-wrap'"
-        :tabindex="mini ? 0 : false"
+        :tabindex="mini ? 0 : -1"
         :style="mini ? 'cursor: pointer;' : false"
         @click="mini ? handleClick() : false"
         @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="{
@@ -28,7 +32,7 @@
             [`${type}-strip__content--right`]: rtl,
           }"
         >
-          <span
+          <h2
             :class="{
               [`${type}-strip__heading`]: true,
               [`${type}-strip__heading--left`]: !rtl,
@@ -36,14 +40,14 @@
             }"
           >
             {{ stripTitle }}
-          </span>
+          </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>
@@ -55,16 +59,16 @@
 </template>
 
 <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,
@@ -76,15 +80,15 @@ export default {
     },
     stripHeading: {
       type: String,
-      default: "",
+      default: '',
     },
     stripContent: {
       type: String,
-      default: "",
+      default: '',
     },
     url: {
       type: String,
-      default: "#",
+      default: '#',
     },
     type: {
       type: String,
@@ -99,7 +103,7 @@ export default {
       default: false,
     },
   },
-  emits: ["update:modelValue", "dismissed"],
+  emits: ['update:modelValue', 'dismissed'],
   data() {
     return {
       dismissibleAlert: this.modelValue,
@@ -108,34 +112,34 @@ export default {
       dismissIcon,
       infoIcon,
       chevronIcon,
-    };
+    }
   },
   watch: {
     modelValue(val) {
-      this.dismissibleAlert = val;
+      this.dismissibleAlert = val
     },
     dismissibleAlert(val) {
       if (val !== this.modelValue) {
-        this.$emit("update:modelValue", val);
+        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 ''
       }
     },
   },
@@ -147,18 +151,18 @@ export default {
         link: this.mini ? this.url : false,
         clickedOnPage: this.$route.path,
         globalStrip: false,
-      };
+      }
       if (this.$gtm) {
         this.$gtm.push({
           event: `custom.interaction.${this.type}.click`,
           ...attrs,
-        });
+        })
       }
-      this.$router.push(this.url);
+      this.$router.push(this.url)
     },
     handleDismissed() {
-      this.$emit("update:modelValue", false);
-      this.$emit("dismissed");
+      this.$emit('update:modelValue', false)
+      this.$emit('dismissed')
 
       if (this.$gtm) {
         const attrs = {
@@ -166,19 +170,19 @@ export default {
           label: this.stripHeading,
           clickedOnPage: this.$route.path,
           globalStrip: false,
-        };
+        }
         this.$gtm.push({
           event: `custom.interaction.${this.type}.close`,
           ...attrs,
-        });
+        })
       }
     },
   },
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "../../../includes/scss/all";
+@import '../../../includes/scss/all';
 .red {
   .alert-strip {
     &__inner {
@@ -312,7 +316,7 @@ export default {
         max-width: 794px;
       }
 
-      @include mq("sm") {
+      @include mq('sm') {
         flex-direction: column;
         margin-right: 16px;
 

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;

package/src/components/Paragraphs/Calculator/CardContainer/index.vue

@@ -37,6 +37,7 @@
                   width="16"
                   class="btn-up"
                   @click="incrementValue"
+                  alt="collapse icon"
                 />
 
                 <img
@@ -45,6 +46,7 @@
                   width="16"
                   class="btn-down"
                   @click="decrementValue"
+                  alt="expand icon"
                 />
               </div>
             </div>
@@ -85,50 +87,50 @@
 </template>
 
 <script>
-import Container from '../../../Containers/Container/index.vue'
-import Column from '../../../Containers/Column/index.vue'
-import Row from '../../../Containers/Row/index.vue'
-import CtaButton from '../../../SubComponents/CtaButton/index.vue'
-import SelectableCards from '../../SelectableCards/index.vue'
-import CaretDown from '../../../../assets/icons/caret-down.svg?url'
-import CaretUp from '../../../../assets/icons/caret-up.svg?url'
-import CaretRight from '../../../../assets/icons/caret-right.svg?url'
-import CaretLeft from '../../../../assets/icons/caret-left.svg?url'
+import Container from "../../../Containers/Container/index.vue";
+import Column from "../../../Containers/Column/index.vue";
+import Row from "../../../Containers/Row/index.vue";
+import CtaButton from "../../../SubComponents/CtaButton/index.vue";
+import SelectableCards from "../../SelectableCards/index.vue";
+import CaretDown from "../../../../assets/icons/caret-down.svg?url";
+import CaretUp from "../../../../assets/icons/caret-up.svg?url";
+import CaretRight from "../../../../assets/icons/caret-right.svg?url";
+import CaretLeft from "../../../../assets/icons/caret-left.svg?url";
 
 export default {
-  name: 'CardContainer',
+  name: "CardContainer",
   components: {
     Column,
     Container,
     Row,
     CtaButton,
-    SelectableCards
+    SelectableCards,
   },
   props: {
     iconIsBordered: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isWeight: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isHeight: {
       type: Boolean,
-      default: false
+      default: false,
     },
     titles: {
       type: Object,
-      default: () => []
+      default: () => [],
     },
     weights: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     heights: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -136,111 +138,108 @@ export default {
       CaretDown,
       CaretRight,
       CaretLeft,
-      typeCard: 'control-selectcards',
-      cardItemTextAlign: 'center',
+      typeCard: "control-selectcards",
+      cardItemTextAlign: "center",
       title: null,
       cards: null,
       cardUnit: null,
-      placeHolder: '000',
+      placeHolder: "000",
       inputValueDisplay: null,
       minValue: 0.25,
       maxValue: 500,
       selectedCard: null,
-      selectedInput: null
-    }
+      selectedInput: null,
+    };
   },
   computed: {
     isButtonDisabled() {
       // Call the function to get its result, then check if either selectedCard is null or inputValueDisplay is null
-      return this.getValueWithoutUnits === null
+      return this.getValueWithoutUnits === null;
     },
     getValueWithoutUnits() {
       // Ensure that inputValueDisplay is not null before attempting to replace
       if (this.inputValueDisplay !== null) {
         // Remove units (e.g., 'kg' or 'meters') from the input value
-        const valueWithoutUnits = this.inputValueDisplay.replace(
-          /kg|meters/i,
-          ''
-        )
+        const valueWithoutUnits = this.inputValueDisplay.replace(/kg|meters/i, "");
         // Convert the remaining value to a numeric representation
-        const numericValue = parseFloat(valueWithoutUnits)
+        const numericValue = parseFloat(valueWithoutUnits);
         // Check if numericValue is a valid number
         if (!isNaN(numericValue)) {
           // Use toFixed(2) to display the number with two decimal places
-          return parseFloat(numericValue.toFixed(2))
+          return parseFloat(numericValue.toFixed(2));
         } else {
-          return null
+          return null;
         }
       } else {
-        return null
+        return null;
       }
-    }
+    },
   },
   mounted() {
-    this.inputValueDisplay = null
+    this.inputValueDisplay = null;
     if (this.isWeight) {
-      this.title = this.titles.weight
-      this.cards = this.weights
-      this.cardUnit = ' kg'
-      this.placeHolder = this.placeHolder + this.cardUnit
-      this.minValue = 0.25
-      this.maxValue = 500
+      this.title = this.titles.weight;
+      this.cards = this.weights;
+      this.cardUnit = " kg";
+      this.placeHolder = this.placeHolder + this.cardUnit;
+      this.minValue = 0.25;
+      this.maxValue = 500;
     } else {
-      this.title = this.titles.height
-      this.cards = this.heights
-      this.cardUnit = ' meters'
-      this.placeHolder = this.placeHolder + this.cardUnit
-      this.minValue = 2
-      this.maxValue = 250
+      this.title = this.titles.height;
+      this.cards = this.heights;
+      this.cardUnit = " meters";
+      this.placeHolder = this.placeHolder + this.cardUnit;
+      this.minValue = 2;
+      this.maxValue = 250;
     }
   },
   methods: {
     handlePrevScreen() {
-      this.$emit('prevScreen')
+      this.$emit("prevScreen");
     },
     handleNextScreen() {
       // Only emit the 'nextScreen' event if the button is not disabled
       if (!this.isButtonDisabled) {
-        this.selectedInput = { value: this.getValueWithoutUnits }
+        this.selectedInput = { value: this.getValueWithoutUnits };
 
-        this.inputValueDisplay = null
-        this.$emit('nextScreen', this.selectedInput)
+        this.inputValueDisplay = null;
+        this.$emit("nextScreen", this.selectedInput);
       }
     },
     selectedCardChangeFocus(card) {
       // if statement added to overcome issue of lost values when function is called twice
       if (card.value !== undefined) {
-        this.selectedCard = card
-        this.selectedInput = null
-        this.inputValueDisplay = card.value + ' ' + this.cardUnit
-        this.$nextTick(() => this.$refs.calNextBtn.$el.focus())
+        this.selectedCard = card;
+        this.selectedInput = null;
+        this.inputValueDisplay = card.value + " " + this.cardUnit;
+        this.$nextTick(() => this.$refs.calNextBtn.$el.focus());
       }
     },
     clearCard() {
-      this.selectedInput = null
+      this.selectedInput = null;
 
-      this.selectedCard = null
-      this.$refs.cardDeck.clearCard()
+      this.selectedCard = null;
+      this.$refs.cardDeck.clearCard();
     },
     incrementValue() {
       if (this.selectedCard !== null) {
-        this.$refs.cardDeck.clearCard()
+        this.$refs.cardDeck.clearCard();
       }
 
-      let newValue = Math.min(this.getValueWithoutUnits + 1, this.maxValue)
-      this.inputValueDisplay = newValue + this.cardUnit
+      let newValue = Math.min(this.getValueWithoutUnits + 1, this.maxValue);
+      this.inputValueDisplay = newValue + this.cardUnit;
 
-      this.selectedInput = { value: newValue }
+      this.selectedInput = { value: newValue };
     },
     decrementValue() {
       if (this.selectedCard !== null) {
-        this.$refs.cardDeck.clearCard()
+        this.$refs.cardDeck.clearCard();
       }
 
-      let newValue = Math.max(this.getValueWithoutUnits - 1, this.minValue)
-      this.inputValueDisplay = newValue + this.cardUnit
+      let newValue = Math.max(this.getValueWithoutUnits - 1, this.minValue);
+      this.inputValueDisplay = newValue + this.cardUnit;
 
-      this.selectedInput = { value: newValue }
+      this.selectedInput = { value: newValue };
     },
     // Validate the input value on blur
     validateInput() {
@@ -251,28 +250,28 @@ export default {
         this.getValueWithoutUnits <= this.maxValue
       ) {
         // Value is within the range, update the input value
-        this.inputValueDisplay = this.getValueWithoutUnits + this.cardUnit
+        this.inputValueDisplay = this.getValueWithoutUnits + this.cardUnit;
 
         // alternate..
-        this.selectedInput = { value: this.getValueWithoutUnits }
+        this.selectedInput = { value: this.getValueWithoutUnits };
       } else {
         // Value is outside the range, leave the input blank
-        this.inputValueDisplay = null
+        this.inputValueDisplay = null;
 
-        this.selectedInput = null
+        this.selectedInput = null;
       }
     },
     // Handle input focus
     handleInputFocus() {
       if (this.selectedCard !== null) {
-        this.$refs.cardDeck.clearCard()
+        this.$refs.cardDeck.clearCard();
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../includes/scss/all';
-@import './styles';
+@import "../../../../includes/scss/all";
+@import "./styles";
 </style>