@worksafevictoria/wcl7.5 1.17.1 → 1.18.0-beta.2

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

@@ -7,6 +7,7 @@
     :cards="cards"
     class="ffh-card-container control-selectablecards"
     :card-type="typeCard"
+    :button-role="'radio'"
     :icon-is-bordered="iconIsBordered"
     :card-text-align="cardItemTextAlign"
     @selected="selectedCardChangeFocus"
@@ -55,8 +56,7 @@
             }}</span>
           </column>
         </row>
-      </container>
-      <container>
+
         <row>
           <column class="ffh-cc-nav__back-col" xs="12">
             <cta-button
@@ -87,18 +87,18 @@
 </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,
@@ -131,6 +131,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    buttonRole: {
+      type: String,
+      default: 'radio',
+    },
   },
   data() {
     return {
@@ -138,108 +142,111 @@ 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,
-    };
+    }
   },
   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() {
@@ -250,28 +257,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/CardContainer/styles.scss

@@ -18,11 +18,76 @@
       margin-top: 5px;
     }
   }
-  
-  .ffh-cc-nav {
-    margin-top: 2rem;
 
-    &__back-col {
+
+
+  &__footer {
+    &--title {
+      font-size: px-to-rem(26px);
+      font-weight: 700;
+      margin-bottom: 15px; 
+
+      span {
+        font-size: px-to-rem(16px);
+        font-weight: 400;
+      }
+    }
+    &--label {
+      font-size: px-to-rem(14px);
+      font-weight: 700;
+
+      @media screen and (min-width: 1200px) {
+          font-size: px-to-rem(16px);
+        }
+    }
+
+    .input-group {
+      position: relative;
+      margin-bottom: 10px;
+      
+      .input-with-arrows {
+        font-size: px-to-rem(22px);
+        font-weight: 700;
+        height: 64px;
+        border: 3px solid $gray;
+        border-radius: 10px;
+        width: 100%;
+
+        @media screen and (min-width: 768) {
+          font-size: px-to-rem(24px);
+        }
+      }
+
+      .input-group-btn {
+          border-radius: 0 10px 10px 0;
+          position: absolute;
+          background: $black;
+          width: 15%;
+          height: 64px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+          padding: 10px 0;
+          z-index: 9;
+          right: 0;
+          @media (min-width: 768px) {
+            width: 10%;
+          }
+          @media (min-width: 991px) {
+            width: 7%;
+          }
+        img {
+          width: 16px;
+          height: 16px;
+          filter: invert(100%);
+        }
+      }
+
+    }
+
+
+    .ffh-cc-nav__back-col {
       font-weight: bold;
       line-height: 1.6;
       flex: 0 0 100%;
@@ -44,7 +109,7 @@
       }
     }
 
-    &__right-col {
+    .ffh-cc-nav__right-col {
       text-align: right;
       min-height: 30px;
       display: flex;
@@ -84,69 +149,8 @@
       }
     }
   }
+  
+  
 
-  &__footer {
-    &--title {
-      font-size: px-to-rem(26px);
-      font-weight: 700;
-      margin-bottom: 15px; 
-
-      span {
-        font-size: px-to-rem(16px);
-        font-weight: 400;
-      }
-    }
-    &--label {
-      font-size: px-to-rem(14px);
-      font-weight: 700;
-
-      @media screen and (min-width: 1200px) {
-          font-size: px-to-rem(16px);
-        }
-    }
-  }
-  .input-group {
-    position: relative;
-    margin-bottom: 10px;
-    
-    .input-with-arrows {
-      font-size: px-to-rem(22px);
-      font-weight: 700;
-      height: 64px;
-      border: 3px solid $gray;
-      border-radius: 10px;
-      width: 100%;
-
-      @media screen and (min-width: 768) {
-        font-size: px-to-rem(24px);
-      }
-    }
-
-    .input-group-btn {
-        border-radius: 0 10px 10px 0;
-        position: absolute;
-        background: $black;
-        width: 15%;
-        height: 64px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        padding: 10px 0;
-        z-index: 9;
-        right: 0;
-        @media (min-width: 768px) {
-          width: 10%;
-        }
-        @media (min-width: 991px) {
-          width: 7%;
-        }
-      img {
-        width: 16px;
-        height: 16px;
-        filter: invert(100%);
-      }
-    }
 
-  }
 }

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

@@ -18,15 +18,16 @@
     </container>
 
     <card-container
-      v-show="screen === 1"
+      v-if="screen === 1"
       ref="weightCardContainer"
       :is-weight="true"
       :titles="titles.weight"
       :weights="weights || []"
       @nextScreen="nextScreen"
     />
+
     <card-container
-      v-show="screen === 2"
+      v-if="screen === 2"
       ref="heightCardContainer"
       :is-weight="false"
       :titles="titles.height"
@@ -34,8 +35,9 @@
       @nextScreen="nextScreen"
       @prevScreen="prevScreen"
     />
+
     <risk-level
-      v-show="screen === 3"
+      v-if="screen === 3"
       :risk-points="riskPoints"
       @prevScreen="prevScreen"
       @reset="resetApp"
@@ -70,41 +72,41 @@ export default {
     CardContainer,
     ProgressBar,
     RiskLevel,
-    RichText
+    RichText,
   },
   props: {
     items: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     steeperStyle: {
       type: Boolean,
-      default: true
+      default: true,
     },
     titles: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     weights: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     heights: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     ffhPage: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     heroHeader: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     riskResults: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -112,14 +114,14 @@ export default {
       selectedWeight: null,
       selectedHeight: null,
       barItems: [],
-      g: 9.81
+      g: 9.81,
     }
   },
   computed: {
     updateBar() {
       const data = this.barItems
       const currentIndex = data.findIndex(
-        (item) => item.value === this.screen.toString()
+        (item) => item.value === this.screen.toString(),
       )
 
       if (data.length === this.screen) {
@@ -144,13 +146,13 @@ export default {
       }
 
       let speedImpactMS = Math.sqrt(
-        2 * Number(this.selectedHeight.value) * this.g
+        2 * Number(this.selectedHeight.value) * this.g,
       ).toFixed(2)
       let speedImpactKmH = (
         Math.sqrt(2 * Number(this.selectedHeight.value) * this.g) * 3.6
       ).toFixed(2)
       let timeImpact = Math.sqrt(
-        (2 * Number(this.selectedHeight.value)) / this.g
+        (2 * Number(this.selectedHeight.value)) / this.g,
       ).toFixed(2)
       let energyImpact = (
         Number(this.selectedHeight.value) *
@@ -177,10 +179,10 @@ export default {
           speedImpactMS: speedImpactMS,
           speedImpactKmH: speedImpactKmH,
           timeImpact: timeImpact,
-          energyImpact: energyImpact
-        }
+          energyImpact: energyImpact,
+        },
       ]
-    }
+    },
   },
   created() {
     this.barItems = JSON.parse(JSON.stringify(this.items))
@@ -206,42 +208,57 @@ export default {
       })
     },
     prevScreen() {
+      // go back one screen
       this.screen--
+
+      // if we just went back to the first screen
       if (this.screen === 1) {
         this.selectedWeight = null
 
-        this.$refs.weightCardContainer.clearCard()
-        this.$refs.heightCardContainer.clearCard()
-
-        // update Bar
-        this.barItems = JSON.parse(JSON.stringify(this.items)) // Reseting the data back to the original items
+        // reset Bar
+        this.barItems = JSON.parse(JSON.stringify(this.items))
 
         this.$nextTick(() => {
-          const cardElement = this.$refs.weightCardContainer.$el.querySelector(
-            '#selectable-cc-card-0'
-          )
-          if (cardElement !== null) {
-            cardElement.focus()
+          if (this.$refs.weightCardContainer) {
+            this.$refs.weightCardContainer.clearCard()
+
+            const cardElement =
+              this.$refs.weightCardContainer.$el.querySelector(
+                '#selectable-cc-card-0',
+              )
+
+            if (cardElement !== null) {
+              cardElement.focus()
+            }
+          }
+
+          // height container may not be in DOM yet, so guard it
+          if (this.$refs.heightCardContainer) {
+            this.$refs.heightCardContainer.clearCard()
           }
         })
       }
     },
     resetApp() {
-      this.$refs.weightCardContainer.clearCard()
-      this.$refs.heightCardContainer.clearCard()
-
-      // added so that existing values are cleared and not reported to GTM if fired
-      //delete this.selectedWeight
-      //delete this.selectedHeight
-      //delete this.riskPoints[0]
-
+      // reset state first
+      this.selectedWeight = null
+      this.selectedHeight = null
       this.screen = 1
 
       // reset Bar
-      this.barItems = JSON.parse(JSON.stringify(this.items)) // Reseting the data back to the original items
+      this.barItems = JSON.parse(JSON.stringify(this.items))
 
       this.$nextTick(() => {
-        if (this.$refs.ffhApp.scrollIntoView) {
+        // these refs will only exist when their screen is rendered
+        if (this.$refs.weightCardContainer) {
+          this.$refs.weightCardContainer.clearCard()
+        }
+
+        if (this.$refs.heightCardContainer) {
+          this.$refs.heightCardContainer.clearCard()
+        }
+
+        if (this.$refs.ffhApp && this.$refs.ffhApp.scrollIntoView) {
           this.$refs.ffhApp.scrollIntoView({ behavior: 'smooth' })
         }
       })
@@ -265,16 +282,16 @@ export default {
           label: labelVar,
           mass: massVar,
           height: heightVar,
-          energy: energyVar
+          energy: energyVar,
         }
         // fire the event
         this.$gtm.push({
           event: 'custom.interaction.droppedobject.click',
-          ...attrs
+          ...attrs,
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>