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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.18.0",
+  "version": "1.18.1-beta.1",
   "description": "WorkSafe Victoria Component Library - GitHub Actions Migration Test",
   "main": "src/index.js",
   "license": "MIT",

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

@@ -56,8 +56,7 @@
             }}</span>
           </column>
         </row>
-      </container>
-      <container>
+
         <row>
           <column class="ffh-cc-nav__back-col" xs="12">
             <cta-button

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,7 +18,7 @@
     </container>
 
     <card-container
-      v-show="screen === 1"
+      v-if="screen === 1"
       ref="weightCardContainer"
       :is-weight="true"
       :titles="titles.weight"
@@ -27,7 +27,7 @@
     />
 
     <card-container
-      v-show="screen === 2"
+      v-if="screen === 2"
       ref="heightCardContainer"
       :is-weight="false"
       :titles="titles.height"
@@ -37,7 +37,7 @@
     />
 
     <risk-level
-      v-show="screen === 3"
+      v-if="screen === 3"
       :risk-points="riskPoints"
       @prevScreen="prevScreen"
       @reset="resetApp"
@@ -208,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' })
         }
       })

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

@@ -56,6 +56,7 @@ function handleNextScreen() {
     :cards="cards"
     :icon-is-bordered="iconIsBordered"
     :card-type="'control-selectcards'"
+    :showModalOnButtonRole="true"
     class="rtw-card-container control-selectablecards"
     @selected="selectedCardChangeFocus"
     @selected-button-role="selectedButtonRole"

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

@@ -43,6 +43,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  showModalOnButtonRole: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const screen = ref(1)
@@ -119,6 +123,7 @@ function nextScreenAgent(card) {
         :titles="titles.physical"
         :cards="cards"
         :button-role="'modal-quest'"
+        :showModalOnButtonRole="showModalOnButtonRole"
         @nextScreen="nextScreen"
       />
     </div>

package/src/components/Paragraphs/SelectableCards/Control/index.stories.js

@@ -46,5 +46,6 @@ export const Modal = {
     cardType: 'control-selectcards',
     cardTextAlign: 'center',
     buttonRole: 'modal-quest',
+    showModalOnButtonRole: true,
   },
 }

package/src/components/Paragraphs/SelectableCards/cardtop.vue

@@ -15,7 +15,7 @@
       <label
         class="card_item__control"
         :class="{ [`card_item__control-${buttonRole}`]: true }"
-        @click.stop="buttonRoleClicked"
+        @click="buttonRoleClicked"
       >
         <span></span>
       </label>

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

@@ -135,7 +135,7 @@ export default {
     /* New modal controls for reusability */
     showModalOnButtonRole: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     modalSize: {
       type: String,