@worksafevictoria/wcl7.5 1.9.0-beta.4 → 1.9.0-beta.5

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>

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

@@ -12,7 +12,7 @@
         />
 
         <div class="ffh-result__risk--info">
-          <img :src="riskIcon" class="ffh-result__risk--info--img" />
+          <img :src="riskIcon" class="ffh-result__risk--info--img" alt="risk icon" />
           <h3 class="ffh-result__risk--info--title">
             {{ riskTitle }}
           </h3>
@@ -42,83 +42,75 @@
 </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 RichText from '../../../Paragraphs/RichText/index.vue'
-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 RichText from "../../../Paragraphs/RichText/index.vue";
+import CaretLeft from "../../../../assets/icons/caret-left.svg?url";
 
 export default {
-  name: 'RiskLevel',
+  name: "RiskLevel",
   components: { Column, Row, Container, CtaButton, RichText },
   props: {
     riskPoints: {
       type: Array,
-      default: () => {}
-    }
+      default: () => {},
+    },
   },
   data() {
     return {
       CaretLeft,
-      headerTitle: 'Your results',
+      headerTitle: "Your results",
       headerMessage:
-        'These are you results based on the weight of the object being dropped and how high in meters you are up.'
-    }
+        "These are you results based on the weight of the object being dropped and how high in meters you are up.",
+    };
   },
   computed: {
     riskIcon() {
       if (this.riskPoints && this.riskPoints[0]?.risksResult?.icon) {
-        return `${this.riskPoints[0].risksResult.icon}`
+        return `${this.riskPoints[0].risksResult.icon}`;
       }
-      return ''
+      return "";
     },
     riskTitle() {
       if (this.riskPoints && this.riskPoints[0]?.risksResult?.title) {
-        return this.riskPoints[0].risksResult.title
+        return this.riskPoints[0].risksResult.title;
       }
-      return ''
+      return "";
     },
     riskMessge() {
       if (this.riskPoints && this.riskPoints[0]?.risksResult?.message) {
-        return this.riskPoints[0].risksResult.message
+        return this.riskPoints[0].risksResult.message;
       }
-      return ''
+      return "";
     },
     speedLevel() {
       let speedImpactMS =
-        this.riskPoints && this.riskPoints[0]
-          ? this.riskPoints[0].speedImpactMS
-          : ''
+        this.riskPoints && this.riskPoints[0] ? this.riskPoints[0].speedImpactMS : "";
 
       let speedImpactKmH =
-        this.riskPoints && this.riskPoints[0]
-          ? this.riskPoints[0].speedImpactKmH
-          : ''
+        this.riskPoints && this.riskPoints[0] ? this.riskPoints[0].speedImpactKmH : "";
 
-      return `Speed at impact: ${speedImpactMS} metres per second and ${speedImpactKmH} kilometres per hour`
+      return `Speed at impact: ${speedImpactMS} metres per second and ${speedImpactKmH} kilometres per hour`;
     },
     timeLevel() {
       let timeImpact =
-        this.riskPoints && this.riskPoints[0]
-          ? this.riskPoints[0].timeImpact
-          : ''
+        this.riskPoints && this.riskPoints[0] ? this.riskPoints[0].timeImpact : "";
 
-      return `Time until impact: ${timeImpact} seconds`
+      return `Time until impact: ${timeImpact} seconds`;
     },
     energyLevel() {
       let energyImpact =
-        this.riskPoints && this.riskPoints[0]
-          ? this.riskPoints[0]?.energyImpact
-          : ''
+        this.riskPoints && this.riskPoints[0] ? this.riskPoints[0]?.energyImpact : "";
 
-      return `Energy at impact: ${energyImpact} joules`
-    }
-  }
-}
+      return `Energy at impact: ${energyImpact} joules`;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../includes/scss/all';
-@import './styles';
+@import "../../../../includes/scss/all";
+@import "./styles";
 </style>