@worksafevictoria/wcl7.5 1.17.0 → 1.18.0-beta.1

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"
@@ -87,18 +88,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 +132,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    buttonRole: {
+      type: String,
+      default: 'radio',
+    },
   },
   data() {
     return {
@@ -138,108 +143,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 +258,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/index.vue

@@ -25,6 +25,7 @@
       :weights="weights || []"
       @nextScreen="nextScreen"
     />
+
     <card-container
       v-show="screen === 2"
       ref="heightCardContainer"
@@ -34,6 +35,7 @@
       @nextScreen="nextScreen"
       @prevScreen="prevScreen"
     />
+
     <risk-level
       v-show="screen === 3"
       :risk-points="riskPoints"
@@ -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))
@@ -218,7 +220,7 @@ export default {
 
         this.$nextTick(() => {
           const cardElement = this.$refs.weightCardContainer.$el.querySelector(
-            '#selectable-cc-card-0'
+            '#selectable-cc-card-0',
           )
           if (cardElement !== null) {
             cardElement.focus()
@@ -265,16 +267,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>
 

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

@@ -0,0 +1,133 @@
+<script setup>
+import { ref } from 'vue'
+import SelectableCards from './../../SelectableCards/index.vue'
+import RichText from './../../RichText/index.vue'
+import CtaButton from './../../../SubComponents/CtaButton/index.vue'
+import CaretRight from './../../../../assets/icons/caret-right.svg?url'
+
+const emit = defineEmits(['nextScreen'])
+
+const props = defineProps({
+  titles: {
+    type: Object,
+    default: () => [],
+  },
+  cards: {
+    type: Array,
+    default: () => [],
+  },
+  iconIsBordered: {
+    type: Boolean,
+    default: false,
+  },
+  buttonRole: {
+    type: String,
+    default: 'none',
+  },
+})
+
+const selectedCard = ref(null)
+const isButtonDisabled = ref(true)
+
+function selectedCardChangeFocus(card) {
+  isButtonDisabled.value = false
+  selectedCard.value = card
+}
+
+function selectedButtonRole(card) {
+  selectedCard.value = card
+}
+
+function handleNextScreen() {
+  // Only emit the 'nextScreen' event if the button is not disabled
+  if (!isButtonDisabled.value && selectedCard.value) {
+    emit('nextScreen', selectedCard.value)
+  }
+}
+</script>
+
+<template>
+  <selectable-cards
+    ref="cardDeck"
+    :button-role="buttonRole"
+    :columns="3"
+    :title="titles && titles.heading"
+    :sub-heading="titles && titles.subHeading"
+    :cards="cards"
+    :icon-is-bordered="iconIsBordered"
+    :card-type="'control-selectcards'"
+    class="rtw-card-container control-selectablecards"
+    @selected="selectedCardChangeFocus"
+    @selected-button-role="selectedButtonRole"
+  >
+    <template v-slot:cardGridFooter>
+      <container class="rtw-card-container__footer">
+        <row>
+          <column>
+            <cta-button
+              ref="calNextBtn"
+              :glyph="CaretRight"
+              class="rtw-card-container__footer--next-btn"
+              :disabled="isButtonDisabled"
+              @clicked="handleNextScreen"
+              >Next</cta-button
+            >
+          </column>
+        </row>
+      </container>
+    </template>
+
+    <!-- provide modal content via scoped slots (purely presentational) -->
+    <template #modalTitle="{ card }">
+      <rich-text
+        class="wcl-injury-modal__card--title"
+        :tag="'h2'"
+        :tag-class="'card-title'"
+        :content="card?.name"
+      />
+    </template>
+
+    <template #modalBody="{ card }">
+      <div class="wcl-injury-modal__card">
+        <rich-text
+          :tag="'h5'"
+          class="wcl-injury-modal__card--content"
+          :content="card?.value"
+        />
+        <rich-text
+          class="wcl-injury-modal__card--description"
+          :content="card?.description"
+        />
+      </div>
+    </template>
+  </selectable-cards>
+</template>
+<style lang="scss" scoped>
+@import './../../../../includes//scss/all.scss';
+
+.rtw-card-container {
+  &__footer {
+    &--next-btn {
+      float: right;
+    }
+    .wcl-cta.default:disabled {
+      background-color: $gray-alt;
+      color: grey;
+      cursor: not-allowed; /* Change cursor to not-allowed */
+    }
+  }
+}
+.wcl-injury-modal {
+  &__card {
+    &--title {
+      font-weight: normal;
+    }
+
+    &--content {
+      color: #b5321d;
+      font-weight: normal;
+      margin: 15px 0;
+    }
+  }
+}
+</style>