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

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>