@worksafevictoria/wcl7.5 1.17.0-beta.2 → 1.17.0-beta.4

package/src/components/Global/AppHeaderNew/styles.scss

@@ -5,8 +5,9 @@
   z-index: 27;
   position: relative;
   padding: 0px;
-  width: 100vw;
+  width: 100%;
   font-size: 14px;
+  overflow-x: hidden;
 
   &__wrap {
     position: relative;
@@ -386,11 +387,11 @@
 
 .logo {
   height: 85px;
-  padding: 15px 0%;
+  padding: 15px 10px 15px 0px;
   width: 100%;
   display: flex;
   align-items: center;
-  margin-right: 50px;
+  margin-right: 0;
   margin-left: -10px;
   background-color: white;
   width: 100vw;
@@ -398,12 +399,12 @@
   &__nav {
     display:inline-block;
     margin-left: 15px;
-    margin-right: 10px; 
+    margin-right: 0; 
     color: #000;
     width: 100%;
     text-align: right;
     font-weight: bold;
-    overflow-y:auto;
+    overflow-y: auto;
 
     a:focus {
       border: 1px solid #BABABA !important;

package/src/components/Global/HeroHeader/index.vue

@@ -12,8 +12,14 @@
         : false
     "
   >
-    <row v-if="type === 'hero'" class="wcl-hero-header__wrap wcl-hero-header__showmore">
-      <container class="wcl-hero-header__content-wrapper__content" :class="{ rtl }">
+    <row
+      v-if="type === 'hero'"
+      class="wcl-hero-header__wrap wcl-hero-header__showmore"
+    >
+      <container
+        class="wcl-hero-header__content-wrapper__content"
+        :class="{ rtl }"
+      >
         <row>
           <column class="wcl-hero-header__content-wrapper__content-col">
             <div>
@@ -37,14 +43,18 @@
     </row>
     <row class="wcl-hero-header__wrap">
       <div class="wcl-hero-header__content-wrapper">
-        <container class="wcl-hero-header__content-wrapper__content" :class="{ rtl }">
+        <container
+          class="wcl-hero-header__content-wrapper__content"
+          :class="{ rtl }"
+        >
           <row>
             <column
               :xs="generateGridValue(type)"
               class="wcl-hero-header__content-wrapper__content-col"
               :md="7"
               :class="{
-                [`wcl-hero-header__content-wrapper__content-col--split`]: $slots.side,
+                [`wcl-hero-header__content-wrapper__content-col--split`]:
+                  $slots.side,
               }"
             >
               <breadcrumb
@@ -59,7 +69,10 @@
                 :content="strippedTitle"
                 class="wcl-hero-header__title"
               />
-              <div v-if="subTitle || $slots.description" class="header-rich-text-wrap">
+              <div
+                v-if="subTitle || $slots.description"
+                class="header-rich-text-wrap"
+              >
                 <rich-text
                   v-if="subTitle"
                   :content="subTitle"
@@ -96,7 +109,7 @@
       </div>
       <!-- Type Default -->
       <column
-        v-if="type === 'default' && showMask"
+        v-if="type === 'default'"
         :md="'5'"
         :xs="'5'"
         class="wcl-hero-header__right"
@@ -104,7 +117,7 @@
         :offset-md="rtl ? 0 : 7"
         :offset-xs="rtl ? 0 : 7"
       >
-        <div class="wcl-hero-header__mask">
+        <div class="wcl-hero-header__mask" v-if="showMask">
           <hero-header-chevron />
         </div>
       </column>
@@ -112,7 +125,9 @@
       <column
         v-if="type === 'collection' && showMask"
         :sm="'7'"
-        :style="image && image.url ? `background-image:url(${image.url})` : false"
+        :style="
+          image && image.url ? `background-image:url(${image.url})` : false
+        "
         class="wcl-hero-header__right type-collection"
         :class="{ 'rtl-flip': rtl }"
         :offset-sm="rtl ? 0 : 5"
@@ -134,7 +149,9 @@
         :class="{ 'rtl-flip': rtl }"
         :offset-md="rtl ? 0 : 7"
         :offset-xs="rtl ? 0 : 7"
-        :style="image && image.url ? `background-image:url(${image.url})` : false"
+        :style="
+          image && image.url ? `background-image:url(${image.url})` : false
+        "
       >
         &nbsp;
       </column>
@@ -144,19 +161,19 @@
   </container>
 </template>
 <script>
-import SocialShare from "./../SocialShare/index.vue";
-import Container from "./../../Containers/Container/index.vue";
-import Row from "./../../Containers/Row/index.vue";
-import Column from "./../../Containers/Column/index.vue";
-import Breadcrumb from "./../../SubComponents/Breadcrumb/index.vue";
-import CtaButton from "./../../SubComponents/CtaButton/index.vue";
-import Icon from "./../../SubComponents/Icon/index.vue";
-import HeroHeaderChevron from "./../../../assets/images/hero-header-chevron.svg?component";
-import CaretDown from "./../../../assets/icons/chev-down-white.svg?url";
-import RichText from "./../../Paragraphs/RichText/index.vue";
+import SocialShare from './../SocialShare/index.vue'
+import Container from './../../Containers/Container/index.vue'
+import Row from './../../Containers/Row/index.vue'
+import Column from './../../Containers/Column/index.vue'
+import Breadcrumb from './../../SubComponents/Breadcrumb/index.vue'
+import CtaButton from './../../SubComponents/CtaButton/index.vue'
+import Icon from './../../SubComponents/Icon/index.vue'
+import HeroHeaderChevron from './../../../assets/images/hero-header-chevron.svg?component'
+import CaretDown from './../../../assets/icons/chev-down-white.svg?url'
+import RichText from './../../Paragraphs/RichText/index.vue'
 
 export default {
-  name: "HeroHeader",
+  name: 'HeroHeader',
   components: {
     Container,
     Row,
@@ -171,15 +188,15 @@ export default {
   props: {
     type: {
       type: String,
-      default: "default",
+      default: 'default',
     },
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     description: {
       type: String,
-      default: "",
+      default: '',
     },
     image: {
       type: Object,
@@ -223,33 +240,33 @@ export default {
       socialShareToggle: false,
       HeroHeaderChevron,
       CaretDown,
-    };
+    }
   },
   computed: {
     generatedClass() {
-      let c = `wcl-hero-header type-${this.type}`;
+      let c = `wcl-hero-header type-${this.type}`
       if (this.bgColor) {
-        c = c + " -with-bg";
+        c = c + ' -with-bg'
       }
-      return c;
+      return c
     },
     subTitle() {
-      let content = undefined;
+      let content = undefined
       if (this.description) {
-        if (typeof this.description === "string") {
-          content = this.description;
-        } else if (typeof this.description === "object") {
-          content = this.description.processed;
+        if (typeof this.description === 'string') {
+          content = this.description
+        } else if (typeof this.description === 'object') {
+          content = this.description.processed
         }
       }
-      if (content && !content.startsWith("<") && !this.tag?.startsWith("h")) {
-        content = `<p class="intro">${content}</p>`;
+      if (content && !content.startsWith('<') && !this.tag?.startsWith('h')) {
+        content = `<p class="intro">${content}</p>`
       }
-      return content;
+      return content
     },
     strippedTitle() {
-      if (this.type === "hero" && this.title.length > 122) {
-        return this.title.slice(0, 122) + "...";
+      if (this.type === 'hero' && this.title.length > 122) {
+        return this.title.slice(0, 122) + '...'
       }
       // Will reintroduce if business requirement
       // if (this.title?.includes('.')) {
@@ -258,7 +275,7 @@ export default {
       //     return sentences.map((sentence) => sentence.trim()).join('.<br/>')
       //   }
       // }
-      return this.title;
+      return this.title
     },
     // Will reintroduce if business requirement
     //   strippedDescription() {
@@ -271,57 +288,57 @@ export default {
   },
   mounted() {
     if (this.$bus) {
-      this.$bus.$on("scrollToTop", () => {
+      this.$bus.$on('scrollToTop', () => {
         setTimeout(() => {
-          const title = this.$refs.title;
+          const title = this.$refs.title
           if (title) {
-            title.$el.setAttribute("tabindex", 0);
-            title.$el.focus();
+            title.$el.setAttribute('tabindex', 0)
+            title.$el.focus()
           }
-        }, 500);
-      });
+        }, 500)
+      })
     }
   },
   beforeDestroy() {
     if (this.$bus) {
-      this.$bus.$off("scrollToTop");
+      this.$bus.$off('scrollToTop')
     }
   },
   methods: {
     generateGridValue(type) {
       switch (type) {
         //the prop type default
-        case "default":
-          return "6";
-        case "image":
-          return "6";
+        case 'default':
+          return '6'
+        case 'image':
+          return '6'
         default:
-          return "7";
+          return '7'
       }
     },
     showMore(ev) {
       if (ev?.target?.scrollIntoView) {
         ev.target.scrollIntoView({
-          behavior: "smooth",
+          behavior: 'smooth',
           alignToTop: true,
-          block: "start",
-        });
+          block: 'start',
+        })
       }
     },
     fireGTM() {
       let attrs = {
         label: this.cta.uri,
         document_title: this.cta.filename,
-      };
+      }
       if (this.$gtm) {
-        this.$gtm.push({ event: "custom.interaction.download", ...attrs });
+        this.$gtm.push({ event: 'custom.interaction.download', ...attrs })
       }
     },
   },
-};
+}
 </script>
 <style lang="scss" scoped>
-@import "./styles";
+@import './styles';
 
 .wysiwyg {
   :deep(.cta-button:last-child) {

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>