@worksafevictoria/wcl7.5 1.17.0-beta.1 → 1.17.0-beta.11

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

@@ -0,0 +1,433 @@
+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,
+  },
+]
+
+export const cardAgentContactInformaton = [
+  {
+    name: 'Allianz Australia Workers Compensation',
+    icon: '',
+    value: '',
+  },
+  {
+    name: 'EML (Employers Mutual Limited)',
+    icon: '',
+    value: '',
+  },
+  {
+    name: 'Gallagher Bassett Services Workers',
+    icon: '',
+    value: '',
+  },
+  {
+    name: 'Xchanging',
+    icon: '',
+    value: '',
+  },
+]

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

@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="rtw-app__footer d-flex justify-content-end gap-3 my-4 small fw-bold"
+  >
+    <a href="/return-work-help">Help</a>
+    <a href="/return-work-faq">FAQs</a>
+    <a href="/return-work-privacy">Privacy Policy</a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rtw-app {
+  &__footer {
+    border-top: 1px solid #bababa;
+    padding: 20px 0;
+
+    a {
+      color: black;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+      letter-spacing: 0px;
+      margin-left: 20px;
+    }
+  }
+
+  :deep(.wcl-media-text__content) {
+    padding-left: 20px;
+  }
+}
+</style>

package/src/components/Paragraphs/RTWPlanner/{NavBar → Header}/index.vue

@@ -1,15 +1,12 @@
 <template>
   <BNavbar variant="light" class="border-bottom bg-white pb-0">
-    <BNavbarBrand>
-      <ChevRightIcon
-        class="ws-yellow"
-        style="width: 32px; height: 32px"
-      ></ChevRightIcon>
+    <BNavbarBrand tag="h3">
+      <ChevRightIcon class="ws-yellow"></ChevRightIcon>
       <strong>Return to Work Planner</strong>
     </BNavbarBrand>
     <BNavbarToggle target="nav-collapse" />
     <BNavbarNav class="ms-auto align-items-center">
-      <BNavItem href="/return-work-home">
+      <BNavItem class="active" href="/return-work-home">
         <strong>Home</strong>
       </BNavItem>
       <BNavItem href="/return-work-poc">
@@ -34,11 +31,25 @@ import {
 
 <style lang="scss" scoped>
 @import './../../../../includes/scss/all.scss';
-.active {
-  color: black !important;
-  border-bottom: 5px solid $yellow;
+.rtw-app {
+  .navbar-brand {
+    font-size: 18px;
+  }
+  .navbar-nav {
+    .nav-item {
+      &.active {
+        border-bottom: 5px solid $yellow;
+        :deep(.nav-link) {
+          color: black !important;
+        }
+      }
+    }
+  }
 }
+
 .ws-yellow {
   color: $yellow;
+  width: 25px;
+  height: 25px;
 }
 </style>

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

@@ -0,0 +1,72 @@
+<script setup>
+import Container from './../../../Containers/Container/index.vue'
+import TextMedia from './../../TextMedia/index.vue'
+
+const props = defineProps({
+  textMedia: {
+    type: Object,
+    required: true,
+  },
+  selectInjuries: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<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>
+
+      <div>
+        <TextMedia
+          :media-type="'icon'"
+          :title-text="selectInjuries.physical.title"
+          :content="selectInjuries.physical.content"
+          :glyph="selectInjuries.physical.image.url"
+          :icon-alt="selectInjuries.physical.image.alt"
+          :glyph-height="60"
+          :glyph-width="60"
+        />
+
+        <TextMedia
+          :media-type="'icon'"
+          :title-text="selectInjuries.mental.title"
+          :content="selectInjuries.mental.content"
+          :glyph="selectInjuries.mental.image.url"
+          :icon-alt="selectInjuries.mental.image.alt"
+          :glyph-height="60"
+          :glyph-width="60"
+        />
+
+        <TextMedia
+          :media-type="'icon'"
+          :title-text="selectInjuries.other.title"
+          :content="selectInjuries.other.content"
+          :glyph="selectInjuries.other.image.url"
+          :icon-alt="selectInjuries.other.image.alt"
+          :glyph-height="60"
+          :glyph-width="60"
+        />
+      </div>
+    </Container>
+  </div>
+</template>
+
+<style scoped>
+.lightgrey-bg {
+  border-radius: 12px;
+  border: 4px solid #727272;
+  background: #f5f5f5;
+}
+</style>