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

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

@@ -7,55 +7,99 @@
     :sub-heading="subHeading"
     :columns-per-row="columns || 4"
     class="selectable-cards"
-    :is-selectable="true"
+    :is-selectable="isSelectable"
     :card-id-prefix="'selectable-cc-card'"
     @selected="selectedCardChangeFocus"
+    @selected-button-role="selectedButtonRole"
   >
-    <template v-slot:cardItem="{ card }">
-      <!-----CONTROL SELECTED CARD START-------->
+    <template v-slot:cardItem="slotProps">
       <card-grid-item
         v-if="cardType === 'control-selectcards'"
         class="control_selectcard"
-        :button-role="'radio'"
-        :glyph-src="card.icon"
+        :button-role="buttonRole"
+        :glyph-src="normalize(slotProps).icon"
         :icon-size="'medium'"
         :show-divider="false"
         :header-size="'medium'"
-        :card-header-title="card.name"
-        :card-padding="'small'"
+        :card-header-title="normalize(slotProps).name"
+        :card-padding="cardPadding"
         :border-type="'dark'"
         :border-on-select-background="'blue'"
         :icon-is-bordered="iconIsBordered"
         :card-text-align="cardTextAlign"
+        :is-selectable="isSelectable"
       >
-        <template v-slot:cardTop>
-          <card-top :card="card" :button-role="'radio'" :is-selectable="true" />
+        <template #cardTop>
+          <card-top
+            v-if="buttonRole !== 'none'"
+            :card="normalize(slotProps)"
+            :button-role="buttonRole"
+            :is-selectable="true"
+            @button-role-clicked="selectedButtonRole"
+          />
         </template>
-        <template v-slot:cardDescription>
-          <card-body :card="card" />
+
+        <template #cardDescription>
+          <card-body :card="normalize(slotProps)" />
         </template>
       </card-grid-item>
-      <!-----CONTROL SELECTED CARD  END-------->
+
       <card-grid-item
         v-else
         class="selectcard"
-        :glyph-src="card.icon"
+        :glyph-src="normalize(slotProps).icon"
         :show-divider="false"
         :header-size="'large'"
-        :card-header-title="card.name"
+        :card-header-title="normalize(slotProps).name"
         :card-padding="'small'"
         :invert-on-select-background="'black'"
         :border-type="'shadow'"
-        :description="card.description"
+        :description="normalize(slotProps).description"
       />
     </template>
-    <template v-slot:cardGridFooter>
-      <slot name="cardGridFooter"></slot>
+
+    <template #cardGridFooter>
+      <slot name="cardGridFooter" />
     </template>
   </card-grid>
+
+  <!-- Reusable modal lives here now -->
+  <BModal
+    v-if="showModalOnButtonRole"
+    v-model="showModal"
+    :size="modalSize"
+    :no-footer="noModalFooter"
+    :scrollable="true"
+    :class="modalClass"
+    @show="$emit('modal-open', modalCard)"
+    @hide="$emit('modal-close')"
+  >
+    <div v-if="modalCard" class="selectable-cards__modal">
+      <!-- Parent can fully control; -->
+      <slot name="modalTitle" :card="modalCard">
+        <h2 class="card-title">{{ modalCard.name }}</h2>
+      </slot>
+
+      <slot name="modalBody" :card="modalCard">
+        <div class="card-body">
+          <p v-if="modalCard.value" class="card-value">{{ modalCard.value }}</p>
+          <div
+            v-if="modalCard.description"
+            class="card-description"
+            v-html="modalCard.description"
+          />
+        </div>
+      </slot>
+
+      <slot name="modalFooter" :card="modalCard">
+        <div />
+      </slot>
+    </div>
+  </BModal>
 </template>
 
 <script>
+import { BModal } from 'bootstrap-vue-next'
 import CardGrid from './../../Common/CardGrid/index.vue'
 import CardGridItem from './../../Common/CardGridItem/index.vue'
 import CardBody from './cardbody.vue'
@@ -63,56 +107,86 @@ import CardTop from './cardtop.vue'
 
 export default {
   name: 'SelectableCards',
-  components: {
-    CardGrid,
-    CardGridItem,
-    CardBody,
-    CardTop,
-  },
+  components: { CardGrid, CardGridItem, CardBody, CardTop, BModal },
   emits: {
     selected: false,
+    'selected-button-role': false,
+    'modal-open': false,
+    'modal-close': false,
   },
   props: {
-    cards: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    title: {
-      type: String,
-      default: null,
-    },
-    headingTag: {
-      type: String,
-      default: 'h2',
-    },
-    subHeading: {
+    cards: { type: Array, required: true, default: () => [] },
+    title: { type: String, default: null },
+    headingTag: { type: String, default: 'h2' },
+    subHeading: { type: String, default: null },
+    iconIsBordered: { type: Boolean, default: true },
+    isSelectable: { type: Boolean, default: true },
+    columns: { type: Number, default: 4 },
+    cardType: { type: String, default: null },
+    cardTextAlign: { type: String, default: null },
+    buttonRole: { type: String, default: 'radio' },
+    cardPadding: {
       type: String,
-      default: null,
+      default: 'small',
+      validator: (value) =>
+        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
     },
-    iconIsBordered: {
+
+    /* New modal controls for reusability */
+    showModalOnButtonRole: {
       type: Boolean,
       default: true,
     },
-    columns: {
-      type: Number,
-      default: 4,
-    },
-    cardType: {
+    modalSize: {
       type: String,
-      default: null,
+      default: 'xl',
     },
-    cardTextAlign: {
+    modalClass: {
       type: String,
-      default: null,
+      default: 'wcl-card-modal__modal',
     },
+    noModalFooter: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      showModal: false,
+      modalCard: null,
+    }
   },
   methods: {
-    selectedCardChangeFocus(card) {
-      this.$emit('selected', card.selectedCard)
+    // Accept various slot shapes and return the raw card
+    normalize(slotProps) {
+      const c =
+        slotProps?.card?.selectedCard ??
+        slotProps?.card ??
+        slotProps?.item ??
+        slotProps?.selectedCard ??
+        slotProps
+      return c || {}
     },
+
+    selectedCardChangeFocus(payload) {
+      // If CardGrid emits { selectedCard }, keep behavior consistent
+      const card = payload?.selectedCard ?? payload
+      this.$emit('selected', card)
+    },
+
+    selectedButtonRole(card) {
+      // Receive raw card from <card-top> and bubble it up as raw object
+      this.$emit('selected-button-role', card)
+
+      // open the reusable modal here
+      if (this.showModalOnButtonRole) {
+        this.modalCard = card
+        this.showModal = true
+      }
+    },
+
     clearCard() {
-      this.$refs.cardgrid.clearCards()
+      this.$refs.cardgrid?.clearCards?.()
     },
   },
 }

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

@@ -177,6 +177,10 @@ export default {
     }
   }
 
+  &__title {
+    margin-bottom: 24px;
+  }
+
   /* variants */
   &.rtl {
     text-align: left;

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

@@ -164,7 +164,7 @@ export default {
         {
           field_title: this.transcriptTitle,
           field_rich_text: {
-            value: this.transcript,
+            processed: this.transcript,
           },
         },
       ]

package/src/components/SubComponents/Breadcrumb/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="wcl-breadcrumb"
-    :class="{ ['wcl-breadcrumb--rtl']: rtl, ['wcl-breadcrumb--ltr']: !rtl }"
+    :class="{ 'wcl-breadcrumb--rtl': rtl, 'wcl-breadcrumb--ltr': !rtl }"
   >
     <ol class="breadcrumb">
       <li
@@ -9,27 +9,60 @@
         :key="index"
         class="breadcrumb-item"
       >
-        <a v-if="item.href" :href="item.href" target="_self">{{ item.text }}</a>
-        <nuxt-link v-else-if="item.to" :to="item.to">{{ item.text }}</nuxt-link>
+        <!-- Plain anchor -->
+        <a
+          v-if="item.href"
+          :href="item.href"
+          target="_self"
+          @click="onClick(item, index, $event)"
+          >{{ item.text }}</a
+        >
+
+        <!-- NuxtLink (Nuxt 3 / Vue 3) -->
+        <nuxt-link
+          v-else-if="item.to"
+          :to="item.to"
+          @click="onClick(item, index, $event)"
+          >{{ item.text }}</nuxt-link
+        >
+
+        <!-- Fallback (no link) -->
+        <span v-else @click="onClick(item, index, $event)">{{
+          item.text
+        }}</span>
       </li>
     </ol>
   </div>
 </template>
+
 <script>
 export default {
   name: 'Breadcrumb',
   props: {
     breadcrumbItems: {
       type: Array,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      required: false
-    }
-  }
+      required: false,
+    },
+    // If true, prevent default navigation and let the parent handle it.
+    interceptClicks: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['item-click'],
+  methods: {
+    onClick(item, index, event) {
+      this.$emit('item-click', { item, index, event })
+      if (this.interceptClicks) event.preventDefault()
+    },
+  },
 }
 </script>
+
 <style lang="scss" scoped>
 @import '../../../includes/scss/vars/src/colors.scss';
 

package/src/components/SubComponents/FormInstance/services/logic-parser.js

@@ -1,7 +1,7 @@
 import {
   convertStringWithDotNotationToObject,
   generateUniqueId,
-  isEmpty
+  isEmpty,
 } from '../models/form-utils'
 
 export function parseElementStates(webformElement) {
@@ -75,17 +75,38 @@ function ruleToString(rule) {
 }
 
 function ruleItemToString(ruleItem, itemKey) {
-  const fieldName = itemKey.split(' ')[1] || itemKey.split(' ')[0]
-  const formElementID = fieldName?.match(/"([^']+)"/)[1]
+  // Regex 1: Matches standard selectors (name="foo"). Captures 'foo'.
+  const standardMatch = itemKey.match(/name="([^"]+)"/)
+  // Regex 2: Matches array selectors (name="foo[bar]"). Captures 'foo' and 'bar'.
+  const arrayMatch = itemKey.match(/name="([^"]+)\[([^\]]+)\]"/)
+
+  let formComponentID = null // The Formio component key (e.g., 'checkboxes')
+  let checkboxOptionKey = null // The specific option key (e.g., 'foo bar')
+
+  if (arrayMatch && arrayMatch[1] && arrayMatch[2]) {
+    // Array Notation found (e.g., name="checkboxes[foo bar]")
+    formComponentID = arrayMatch[1]
+    checkboxOptionKey = arrayMatch[2]
+  } else if (standardMatch && standardMatch[1]) {
+    // Standard Notation found (e.g., name="foobar")
+    formComponentID = standardMatch[1]
+  }
+
+  // ... (rest of the function)
+
+  // Now pass BOTH keys to getTrigger for array-based lookups
   const conditions = Object.keys(ruleItem)
     .map((elementProp) =>
-      formElementID ? getTrigger(formElementID, ruleItem, elementProp) : null
+      formComponentID
+        ? getTrigger(formComponentID, ruleItem, elementProp, checkboxOptionKey)
+        : null,
     )
     .filter((trigger) => !!trigger)
     .reduce((triggers, trigger) => {
       triggers.push(trigger)
       return triggers
     }, [])
+
   return conditions.join('')
 }
 
@@ -95,7 +116,7 @@ function createNewLogic(actionName, actionValue) {
     convertStringWithDotNotationToObject(
       defaultProps,
       actionName,
-      !!!actionValue
+      !!!actionValue,
     )
   } else {
     defaultProps[actionName] = !!!actionValue
@@ -104,7 +125,7 @@ function createNewLogic(actionName, actionValue) {
     name: generateUniqueId(),
     trigger: {
       type: 'javascript',
-      javascript: ''
+      javascript: '',
     },
     defaultProps,
     actions: [
@@ -114,20 +135,31 @@ function createNewLogic(actionName, actionValue) {
         property: {
           label: generateUniqueId(),
           value: actionName,
-          type: 'boolean'
+          type: 'boolean',
         },
-        state: actionValue
-      }
-    ]
+        state: actionValue,
+      },
+    ],
   }
 }
 
-function getTrigger(formElementID, ruleItem, prop) {
+function getTrigger(formComponentID, ruleItem, prop, checkboxOptionKey = null) {
   if (ruleItem.hasOwnProperty(prop)) {
     const value = ruleItem[prop] ?? ''
+
+    let variable = `data.{${formComponentID}}`
+    console.log('🚀 ~ getTrigger ~ variable:', variable)
     let valueDelimeter = typeof value === 'string' ? "'" : ''
     let expression = `${valueDelimeter}${value}${valueDelimeter}`
-    let variable = `data.{${formElementID}}`
+
+    if (checkboxOptionKey && prop === 'checked' && value === true) {
+      return `(${variable}['${checkboxOptionKey}']===true)`
+    }
+
+    if (checkboxOptionKey && prop === 'unchecked' && value === true) {
+      return `(!(${variable}['${checkboxOptionKey}']===true))`
+    }
+
     if (typeof value !== 'object' && prop === 'value') {
       return `${variable} === ${expression}`
     } else if (typeof value === 'object' && prop === 'value') {

package/src/components/SubComponents/MediaPlayer/index.vue

@@ -6,9 +6,8 @@
     <iframe
       v-if="provider === 'youtube'"
       class="videoFrame"
-      :src="
-        `https://www.youtube-nocookie.com/embed/${videoId}?iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1`
-      "
+      :src="`https://www.youtube-nocookie.com/embed/${videoId}?iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1`"
+      referrerpolicy="strict-origin-when-cross-origin"
       allowfullscreen
       allowtransparency
       allow="autoplay"
@@ -16,9 +15,8 @@
     <iframe
       v-if="provider === 'vimeo'"
       class="videoFrame"
-      :src="
-        `https://player.vimeo.com/video/${videoId}?color=02819e&autopause=0&byline=0&dnt=1&fun=0&playsinline=0&portrait=0&title=0&transparent=0`
-      "
+      :src="`https://player.vimeo.com/video/${videoId}?color=02819e&autopause=0&byline=0&dnt=1&fun=0&playsinline=0&portrait=0&title=0&transparent=0`"
+      referrerpolicy="strict-origin-when-cross-origin"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen;"
       allowtransparency
     ></iframe>
@@ -31,17 +29,17 @@ export default {
   props: {
     videoId: {
       type: String,
-      required: true
+      required: true,
     },
     provider: {
       type: String,
-      required: true
+      required: true,
     },
     rtl: {
       type: Boolean,
-      default: false
-    }
-  }
+      default: false,
+    },
+  },
 }
 </script>
 

package/src/components/SubComponents/ResourceGroup/index.vue

@@ -177,7 +177,7 @@ export default {
     },
     initialDisplyLimit: {
       type: Number,
-      default: 0,
+      default: 1000,
     },
     fetchContent: {
       type: Function,

package/src/includes/scss/vars/src/colors.module.scss

@@ -20,6 +20,8 @@ $yellow: #ffd229;
 $lightyellow: #fff6d4;
 $outline: #da47ff;
 $outline-dark: #ffffff;
+$lavendergray: #e5e8f2;
+
 // Functional colours
 $wsv-fun-dark-green: #576D2F;
 $wsv-fun-dark-blue: #104f77;
@@ -58,6 +60,7 @@ $theme-colors: (
   'lightyellow': $lightyellow,
   'outline': $outline,
   'outline-dark': $outline-dark,
+  'lavendergray': $lavendergray,
   // Functional colours
   'wsv-fun-dark-green':$wsv-fun-dark-green,
   'wsv-fun-dark-blue':$wsv-fun-dark-blue,

package/src/includes/scss/vars/src/colors.scss

@@ -20,6 +20,8 @@ $yellow: #ffd229;
 $lightyellow: #fff6d4;
 $outline: #da47ff;
 $outline-dark: #ffffff;
+$lavendergray: #e5e8f2;
+
 // Functional colours
 $wsv-fun-dark-green: #576D2F;
 $wsv-fun-dark-blue: #104f77;
@@ -59,6 +61,7 @@ $theme-colors: (
   'lightyellow': $lightyellow,
   'outline': $outline,
   'outline-dark': $outline-dark,
+  'lavendergray': $lavendergray,
   // Functional colours
   'wsv-fun-dark-green':$wsv-fun-dark-green,
   'wsv-fun-dark-blue':$wsv-fun-dark-blue,

package/src/index.js

@@ -2,12 +2,12 @@
 import Container from './components/Containers/Container/index.vue'
 import Row from './components/Containers/Row/index.vue'
 import Column from './components/Containers/Column/index.vue'
-import HomepageHeader from './components/Containers/HomepageHeader/index.vue'
+import HomepageHeader from './components/Containers/HomepageHeaderNew/index.vue'
 import Subheader from './components/Containers/Subheader/index.vue'
 import SectionGroup from './components/Containers/SectionGroup/index.vue'
 import CarouselComponent from './components/Containers/Carousel/index.vue'
 // Replace AppHeader with AppHeaderNew to introduce new header
-import AppHeader from './components/Global/AppHeader/index.vue'
+import AppHeader from './components/Global/AppHeaderNew/index.vue'
 import AppFooter from './components/Global/AppFooter/index.vue'
 import HeroHeader from './components/Global/HeroHeader/index.vue'
 import SocialShare from './components/Global/SocialShare/index.vue'