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

package/package.json

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

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

@@ -56,7 +56,8 @@
             }}</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,76 +18,11 @@
       margin-top: 5px;
     }
   }
+  
+  .ffh-cc-nav {
+    margin-top: 2rem;
 
-
-
-  &__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 {
+    &__back-col {
       font-weight: bold;
       line-height: 1.6;
       flex: 0 0 100%;
@@ -109,7 +44,7 @@
       }
     }
 
-    .ffh-cc-nav__right-col {
+    &__right-col {
       text-align: right;
       min-height: 30px;
       display: flex;
@@ -149,8 +84,69 @@
       }
     }
   }
-  
-  
 
+  &__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-if="screen === 1"
+      v-show="screen === 1"
       ref="weightCardContainer"
       :is-weight="true"
       :titles="titles.weight"
@@ -27,7 +27,7 @@
     />
 
     <card-container
-      v-if="screen === 2"
+      v-show="screen === 2"
       ref="heightCardContainer"
       :is-weight="false"
       :titles="titles.height"
@@ -37,7 +37,7 @@
     />
 
     <risk-level
-      v-if="screen === 3"
+      v-show="screen === 3"
       :risk-points="riskPoints"
       @prevScreen="prevScreen"
       @reset="resetApp"
@@ -208,57 +208,42 @@ 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
 
-        // reset Bar
-        this.barItems = JSON.parse(JSON.stringify(this.items))
-
-        this.$nextTick(() => {
-          if (this.$refs.weightCardContainer) {
-            this.$refs.weightCardContainer.clearCard()
+        this.$refs.weightCardContainer.clearCard()
+        this.$refs.heightCardContainer.clearCard()
 
-            const cardElement =
-              this.$refs.weightCardContainer.$el.querySelector(
-                '#selectable-cc-card-0',
-              )
+        // update Bar
+        this.barItems = JSON.parse(JSON.stringify(this.items)) // Reseting the data back to the original items
 
-            if (cardElement !== null) {
-              cardElement.focus()
-            }
-          }
-
-          // height container may not be in DOM yet, so guard it
-          if (this.$refs.heightCardContainer) {
-            this.$refs.heightCardContainer.clearCard()
+        this.$nextTick(() => {
+          const cardElement = this.$refs.weightCardContainer.$el.querySelector(
+            '#selectable-cc-card-0',
+          )
+          if (cardElement !== null) {
+            cardElement.focus()
           }
         })
       }
     },
     resetApp() {
-      // reset state first
-      this.selectedWeight = null
-      this.selectedHeight = null
+      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]
+
       this.screen = 1
 
       // reset Bar
-      this.barItems = JSON.parse(JSON.stringify(this.items))
+      this.barItems = JSON.parse(JSON.stringify(this.items)) // Reseting the data back to the original items
 
       this.$nextTick(() => {
-        // 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) {
+        if (this.$refs.ffhApp.scrollIntoView) {
           this.$refs.ffhApp.scrollIntoView({ behavior: 'smooth' })
         }
       })

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

@@ -56,7 +56,6 @@ 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,10 +43,6 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  showModalOnButtonRole: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 const screen = ref(1)
@@ -123,7 +119,6 @@ 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,6 +46,5 @@ 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="buttonRoleClicked"
+        @click.stop="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: false,
+      default: true,
     },
     modalSize: {
       type: String,