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

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/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/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/mock/control-selectable-cards.js

@@ -1,58 +1,101 @@
 export const mockSelectableCards = [
   {
     name: 'Bolt',
-    icon:
-      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
     value: '0.2500',
-    units: 'kg'
+    units: 'kg',
   },
   {
     name: 'Screwdriver',
-    icon:
-      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
     value: '0.2600',
-    units: 'kg'
+    units: 'kg',
   },
   {
     name: 'Hammer',
-    icon:
-      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
     value: '0.5',
-    units: 'kg'
+    units: 'kg',
   },
   {
     name: 'Electric drill',
-    icon:
-      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
     value: '2',
-    units: 'kg'
+    units: 'kg',
   },
   {
     name: 'Sledge Hammer',
-    icon:
-      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
     value: '5',
-    units: 'kg'
+    units: 'kg',
   },
   {
     name: 'Scaffolding platform',
-    icon:
-      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%202%20object.svg',
     value: '50',
-    units: 'kg'
+    units: 'kg',
   },
   {
     name: 'Anvil',
-    icon:
-      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
     value: '75',
-    units: 'kg'
+    units: 'kg',
   },
   {
     name: 'Window pane',
-    icon:
-      'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
     value: '250',
-    units: 'kg'
-  }
+    units: 'kg',
+  },
+]
+
+export const mockModalSelectableCards = [
+  {
+    name: 'Acquired brain injury',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: 'The return to work planner is not suitable for this injury type',
+    description: `<p>Includes mild, moderate, severe and profound acquired brain injury (ABI), brain damage and brain injury</p> 
+                <p>Exludes concussion and fractured skull alone.</p> <p>Please click for more information and how you can get support</p> 
+                <p><a href='/return-work-mental-injuries' class='cta-button white'>More information</a></p>`,
+  },
+  {
+    name: 'Hearing loss',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: 'The return to work planner is not suitable for this injury type',
+    description: `<p>Includes mild, moderate, severe and profound acquired brain injury (ABI), brain damage and brain injury</p> 
+                <p>Exludes concussion and fractured skull alone.</p> <p>Please click for more information and how you can get support</p> 
+                <p><a href='/return-work-mental-injuries' class='cta-button white'>More information</a></p>`,
+  },
+  {
+    name: 'Respiratory condition',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: 'The return to work planner is not suitable for this injury type',
+    description: `<p>Includes mild, moderate, severe and profound acquired brain injury (ABI), brain damage and brain injury</p> 
+                <p>Exludes concussion and fractured skull alone.</p> <p>Please click for more information and how you can get support</p> 
+                <p><a href='/return-work-mental-injuries' class='cta-button white'>More information</a></p>`,
+  },
+  {
+    name: 'Severe injury',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: 'The return to work planner is not suitable for this injury type',
+    description: `<p>Includes mild, moderate, severe and profound acquired brain injury (ABI), brain damage and brain injury</p> 
+                <p>Exludes concussion and fractured skull alone.</p> <p>Please click for more information and how you can get support</p> 
+                <p><a href='/return-work-mental-injuries' class='cta-button white'>More information</a></p>`,
+  },
+  {
+    name: 'Serious injury',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: 'The return to work planner is not suitable for this injury type',
+    description: `<p>Includes mild, moderate, severe and profound acquired brain injury (ABI), brain damage and brain injury</p> 
+                <p>Exludes concussion and fractured skull alone.</p> <p>Please click for more information and how you can get support</p> 
+                <p><a href='/return-work-mental-injuries' class='cta-button white'>More information</a></p>`,
+  },
+  {
+    name: 'Mental injury',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: 'The return to work planner is not suitable for this injury type',
+    description: `<p>Includes mild, moderate, severe and profound acquired brain injury (ABI), brain damage and brain injury</p> 
+                <p>Exludes concussion and fractured skull alone.</p> <p>Please click for more information and how you can get support</p> 
+                <p><a href='/return-work-mental-injuries' class='cta-button white'>More information</a></p>`,
+  },
 ]

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

@@ -1,83 +0,0 @@
-<template>
-  <div>
-    <TextMedia
-      :media-type="'image'"
-      :title-text="textMedia.title"
-      :title-tag="textMedia.titleTag"
-      :content="textMedia.content"
-      :image="textMedia.image"
-      :rtl="textMedia.rtl"
-    />
-
-    <Container fluid class="my-4">
-      <h2>Select your injury</h2>
-
-      <TextMedia
-        :media-type="'icon'"
-        :title-text="'Physical injuries'"
-        :content="`<p>
-        Physical injuries include anything that occurs to an employees body.
-            This tool supports employers to manage the return to work process
-            for non-complex physical injuries only.
-      </p><p><a href=&quot;#&quot; class=&quot;cta-button&quot;>Continue to planner</a></p>`"
-        :glyph="PhysicalInjury"
-        :icon-alt="'PhysicalInjury icon'"
-        :glyph-height="60"
-        :glyph-width="60"
-      />
-
-      <TextMedia
-        :media-type="'icon'"
-        :title-text="'Mental injuries'"
-        :content="`<p>
-        Mental injuries are complex and require tailored information for
-            employers to support injured workers with their return to work. This
-            tool does not currently give guidance for mental injuries.
-      </p><p><a href=&quot;#&quot; class=&quot;cta-button white&quot;>Continue to planner</a></p>`"
-        :glyph="MentalInjury"
-        :icon-alt="'MentalInjury icon'"
-        :glyph-height="60"
-        :glyph-width="60"
-      />
-
-      <TextMedia
-        :media-type="'icon'"
-        :title-text="'Other'"
-        :content="`<p>
-        If you are unsure about the injury type of your employee, gaining
-            additional support, reach out to your agent to get more information.
-      </p><p><a href=&quot;#&quot; class=&quot;cta-button white&quot;>More information</a></p>`"
-        :glyph="OtherInjury"
-        :icon-alt="'Other icon'"
-        :glyph-height="60"
-        :glyph-width="60"
-      />
-    </Container>
-  </div>
-</template>
-
-<script setup>
-import { defineProps } from 'vue'
-
-import Container from './../../../Containers/Container/index.vue'
-import TextMedia from './../../TextMedia/index.vue'
-import PhysicalInjury from './../../../../assets/icons/Physical-injury.svg?url'
-import MentalInjury from './../../../../assets/icons/Mental-injury.svg?url'
-import OtherInjury from './../../../../assets/icons/other.svg?url'
-const emit = defineEmits(['newPlan'])
-
-const props = defineProps({
-  textMedia: {
-    type: Object,
-    required: true,
-  },
-})
-</script>
-
-<style scoped>
-.lightgrey-bg {
-  border-radius: 12px;
-  border: 4px solid #727272;
-  background: #f5f5f5;
-}
-</style>