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

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

@@ -25,6 +25,7 @@
       :weights="weights || []"
       @nextScreen="nextScreen"
     />
+
     <card-container
       v-show="screen === 2"
       ref="heightCardContainer"
@@ -34,6 +35,7 @@
       @nextScreen="nextScreen"
       @prevScreen="prevScreen"
     />
+
     <risk-level
       v-show="screen === 3"
       :risk-points="riskPoints"
@@ -70,41 +72,41 @@ export default {
     CardContainer,
     ProgressBar,
     RiskLevel,
-    RichText
+    RichText,
   },
   props: {
     items: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     steeperStyle: {
       type: Boolean,
-      default: true
+      default: true,
     },
     titles: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     weights: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     heights: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     ffhPage: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     heroHeader: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     riskResults: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -112,14 +114,14 @@ export default {
       selectedWeight: null,
       selectedHeight: null,
       barItems: [],
-      g: 9.81
+      g: 9.81,
     }
   },
   computed: {
     updateBar() {
       const data = this.barItems
       const currentIndex = data.findIndex(
-        (item) => item.value === this.screen.toString()
+        (item) => item.value === this.screen.toString(),
       )
 
       if (data.length === this.screen) {
@@ -144,13 +146,13 @@ export default {
       }
 
       let speedImpactMS = Math.sqrt(
-        2 * Number(this.selectedHeight.value) * this.g
+        2 * Number(this.selectedHeight.value) * this.g,
       ).toFixed(2)
       let speedImpactKmH = (
         Math.sqrt(2 * Number(this.selectedHeight.value) * this.g) * 3.6
       ).toFixed(2)
       let timeImpact = Math.sqrt(
-        (2 * Number(this.selectedHeight.value)) / this.g
+        (2 * Number(this.selectedHeight.value)) / this.g,
       ).toFixed(2)
       let energyImpact = (
         Number(this.selectedHeight.value) *
@@ -177,10 +179,10 @@ export default {
           speedImpactMS: speedImpactMS,
           speedImpactKmH: speedImpactKmH,
           timeImpact: timeImpact,
-          energyImpact: energyImpact
-        }
+          energyImpact: energyImpact,
+        },
       ]
-    }
+    },
   },
   created() {
     this.barItems = JSON.parse(JSON.stringify(this.items))
@@ -218,7 +220,7 @@ export default {
 
         this.$nextTick(() => {
           const cardElement = this.$refs.weightCardContainer.$el.querySelector(
-            '#selectable-cc-card-0'
+            '#selectable-cc-card-0',
           )
           if (cardElement !== null) {
             cardElement.focus()
@@ -265,16 +267,16 @@ export default {
           label: labelVar,
           mass: massVar,
           height: heightVar,
-          energy: energyVar
+          energy: energyVar,
         }
         // fire the event
         this.$gtm.push({
           event: 'custom.interaction.droppedobject.click',
-          ...attrs
+          ...attrs,
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -0,0 +1,133 @@
+<script setup>
+import { ref } from 'vue'
+import SelectableCards from './../../SelectableCards/index.vue'
+import RichText from './../../RichText/index.vue'
+import CtaButton from './../../../SubComponents/CtaButton/index.vue'
+import CaretRight from './../../../../assets/icons/caret-right.svg?url'
+
+const emit = defineEmits(['nextScreen'])
+
+const props = defineProps({
+  titles: {
+    type: Object,
+    default: () => [],
+  },
+  cards: {
+    type: Array,
+    default: () => [],
+  },
+  iconIsBordered: {
+    type: Boolean,
+    default: false,
+  },
+  buttonRole: {
+    type: String,
+    default: 'none',
+  },
+})
+
+const selectedCard = ref(null)
+const isButtonDisabled = ref(true)
+
+function selectedCardChangeFocus(card) {
+  isButtonDisabled.value = false
+  selectedCard.value = card
+}
+
+function selectedButtonRole(card) {
+  selectedCard.value = card
+}
+
+function handleNextScreen() {
+  // Only emit the 'nextScreen' event if the button is not disabled
+  if (!isButtonDisabled.value && selectedCard.value) {
+    emit('nextScreen', selectedCard.value)
+  }
+}
+</script>
+
+<template>
+  <selectable-cards
+    ref="cardDeck"
+    :button-role="buttonRole"
+    :columns="3"
+    :title="titles && titles.heading"
+    :sub-heading="titles && titles.subHeading"
+    :cards="cards"
+    :icon-is-bordered="iconIsBordered"
+    :card-type="'control-selectcards'"
+    class="rtw-card-container control-selectablecards"
+    @selected="selectedCardChangeFocus"
+    @selected-button-role="selectedButtonRole"
+  >
+    <template v-slot:cardGridFooter>
+      <container class="rtw-card-container__footer">
+        <row>
+          <column>
+            <cta-button
+              ref="calNextBtn"
+              :glyph="CaretRight"
+              class="rtw-card-container__footer--next-btn"
+              :disabled="isButtonDisabled"
+              @clicked="handleNextScreen"
+              >Next</cta-button
+            >
+          </column>
+        </row>
+      </container>
+    </template>
+
+    <!-- provide modal content via scoped slots (purely presentational) -->
+    <template #modalTitle="{ card }">
+      <rich-text
+        class="wcl-injury-modal__card--title"
+        :tag="'h2'"
+        :tag-class="'card-title'"
+        :content="card?.name"
+      />
+    </template>
+
+    <template #modalBody="{ card }">
+      <div class="wcl-injury-modal__card">
+        <rich-text
+          :tag="'h5'"
+          class="wcl-injury-modal__card--content"
+          :content="card?.value"
+        />
+        <rich-text
+          class="wcl-injury-modal__card--description"
+          :content="card?.description"
+        />
+      </div>
+    </template>
+  </selectable-cards>
+</template>
+<style lang="scss" scoped>
+@import './../../../../includes//scss/all.scss';
+
+.rtw-card-container {
+  &__footer {
+    &--next-btn {
+      float: right;
+    }
+    .wcl-cta.default:disabled {
+      background-color: $gray-alt;
+      color: grey;
+      cursor: not-allowed; /* Change cursor to not-allowed */
+    }
+  }
+}
+.wcl-injury-modal {
+  &__card {
+    &--title {
+      font-weight: normal;
+    }
+
+    &--content {
+      color: #b5321d;
+      font-weight: normal;
+      margin: 15px 0;
+    }
+  }
+}
+</style>

package/src/components/Paragraphs/RTWPlanner/Constants.js

@@ -0,0 +1,410 @@
+export const textMedia = {
+  title: 'Return to Work Planner',
+  content:
+    '<p>An easy-to-use online guide that steps employers through the return to work process and meeting legal obligations for non major injuries.</p>',
+  image: {
+    url:
+      process.env.CONTENT_API_URL +
+      '/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
+    alt: 'Some alt text',
+  },
+  rtl: true,
+  titleTag: 'h1',
+}
+
+export const selectInjuries = {
+  physical: {
+    title: 'Physical injuries',
+    content: `<p>
+          Physical injuries include anything that occurs to an employee’s body.
+          This tool supports employers to manage the return to work process
+          for non-complex physical injuries only.
+        </p><p><a href='/return-work-physical' class='cta-button'>Continue to planner</a></p>`,
+    image: {
+      url:
+        process.env.CONTENT_API_URL +
+        '/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
+      alt: 'Some alt text',
+    },
+    rtl: true,
+    titleTag: 'h2',
+  },
+  mental: {
+    title: '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='/return-work-mental-injuries' class='cta-button white'>More information</a></p>`,
+    image: {
+      url:
+        process.env.CONTENT_API_URL +
+        '/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
+      alt: 'Some alt text',
+    },
+    rtl: true,
+    titleTag: 'h2',
+  },
+  other: {
+    title: 'Other',
+    content: `<p>
+                If you’re unsure about the injury type, reach out to your agent to
+                get more information.
+                </p><p><a href='/return-work-other' class='cta-button white'>More information</a></p>`,
+
+    image: {
+      url:
+        process.env.CONTENT_API_URL +
+        '/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
+      alt: 'Some alt text',
+    },
+    rtl: true,
+    titleTag: 'h2',
+  },
+}
+
+export const heroHeader = {
+  title: 'What kind of Physical Injury?',
+  description:
+    '<p>The tool is designed to provide guidance for non-complex physical injuries only. If you have multiple condition apply, please select the most severe condition. Inf noe of the complex coniditions apply. please progress to the planner.</p>',
+}
+
+export const cardTitles = {
+  physical: {
+    heading: 'The following physical injury types are not supported',
+    subHeading:
+      '<p>If you have multiple conditions apply, please select the most severe condition.</p>',
+  },
+  rtwCards: {
+    heading:
+      'WorkSafe links to help and support you with your hearing loss injury',
+    subHeading: '',
+  },
+  cardContactInformaton: {
+    heading: 'Agent contact information',
+    subHeading: '',
+  },
+}
+
+export const cardPhysicalBreakout = {
+  title: 'Progress to planer',
+  body: `<p class="intro">Guidance for non-complex physical injuries only.</p>
+        <p><a class="cta-button" href="www.google.com">Progress</a></p>`,
+}
+
+export const cardPhysical = [
+  {
+    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>`,
+  },
+]
+
+export const cardRTWCards = [
+  {
+    title: 'Hearning protection',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'This guidance explains hw to select, use and fit hearing protectors in the workplace.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Noise',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Hearning loss injury lik',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Crd description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Hearning protection',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'This guidance explains hw to select, use and fit hearing protectors in the workplace.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Noise',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Hearning loss injury lik',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Crd description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Hearning protection',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'This guidance explains hw to select, use and fit hearing protectors in the workplace.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Noise',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Hearning loss injury lik',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Crd description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+]
+
+export const cardContactInformaton = [
+  {
+    name: 'Allianz Australia Workers Compensation',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '1800 343 453',
+  },
+  {
+    name: 'EML (Employers Mutual Limited)',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '1800 343 453',
+  },
+  {
+    name: 'Gallagher Bassett Services Workers',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '1800 343 453',
+  },
+  {
+    name: 'Xchanging',
+    icon: 'https://content-dev-v2.api.worksafe.vic.gov.au/sites/default/files/icons/icon%201%20object.svg',
+    value: '1800 343 453',
+  },
+]
+
+export const cardRTWMentalCards = [
+  {
+    title: 'Mental injury support',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Your mental health is important and we want to make sure you get the support you need.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Claims',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Mental injury support',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Crd description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Mental injury support',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'This guidance explains hw to select, use and fit hearing protectors in the workplace.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Mental injury support',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Crd description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Mental injury support',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'This guidance explains hw to select, use and fit hearing protectors in the workplace.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Hearning loss injury lik',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Crd description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+]
+
+export const cardRTWOtherCards = [
+  {
+    title: 'Standard card',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Card description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Claims',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Standard card',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Card description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Standard card',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'This guidance explains hw to select, use and fit hearing protectors in the workplace.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Standard card',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Card description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Standard card',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'This guidance explains how to select, use and fit hearing protectors in the workplace.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+  {
+    title: 'Standard card',
+    imageSrc: '',
+    imageAlt: '',
+    description:
+      'Card description field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+    link: '/news/2021-08/news-kitchen-sink-11',
+    pillText: 'Tag',
+    colour: 'yellow',
+    date: '',
+    location: '',
+    rtl: false,
+  },
+]