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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.14.0-beta.1",
+  "version": "1.14.0-beta.11",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/assets/icons/Mental-injury.svg

@@ -0,0 +1,40 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="800px"
+    height="800px"
+    viewBox="0 0 48 48"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M37.2847 25.6154L37.1193 25.2621C36.4062 23.7381 36.1988 22.1238 36.1366 20.6919C36.1052 19.9703 36.11 19.257 36.1176 18.6014C36.1187 18.5113 36.1198 18.4225 36.1209 18.335C36.1279 17.7692 36.1342 17.2553 36.123 16.7604C36.0756 14.8106 35.4636 12.9118 34.355 11.2858C33.0921 9.71615 31.4415 8.48173 29.5544 7.70176L29.5216 7.6882L29.4893 7.67348C26.935 6.50995 24.1507 5.908 21.3318 5.91114L21.3296 5.91115C17.7824 5.91115 14.3879 7.29451 11.8909 9.74531C9.39511 12.1949 8 15.5091 8 18.9569C8 21.0012 8.59295 23.3328 9.62467 25.4904C10.6588 27.653 12.0607 29.4888 13.5372 30.6266L14.3164 31.2271V40.1425C14.6413 40.5448 15.2724 41.0416 16.219 41.4724C17.3773 41.9997 18.5419 42.2133 19.2158 42.1583L19.2971 42.1516H19.3786C21.3349 42.1516 22.2503 41.5988 22.6443 41.2626C22.7871 41.1407 22.8864 41.026 22.953 40.9356V35.4002L25.4499 36.0456L25.4511 36.0459L25.4521 36.0462L25.4534 36.0465L25.4656 36.0495C25.4811 36.0533 25.5077 36.0597 25.5448 36.0683C25.619 36.0855 25.7345 36.1111 25.8852 36.1414C26.1875 36.202 26.6274 36.2802 27.1577 36.3457C28.2343 36.4785 29.6077 36.5491 30.9339 36.3545C32.2715 36.1584 33.3862 35.7193 34.1529 34.9857C34.8668 34.3024 35.4954 33.1581 35.4954 31.0618V29.352L37.1767 29.0874L37.1781 29.0872L37.1862 29.0858C37.1922 29.0847 37.2007 29.0832 37.2118 29.0811C37.2228 29.0791 37.2362 29.0765 37.2518 29.0735C37.315 29.061 37.413 29.0403 37.5345 29.0101C37.7834 28.9483 38.1014 28.854 38.4114 28.7232C38.7332 28.5875 38.9648 28.4464 39.1013 28.3262C39.1288 28.3019 39.1481 28.2825 39.1614 28.268C39.1565 28.2144 39.1378 28.1044 39.068 27.9264C38.9588 27.6481 38.7721 27.3265 38.5331 26.9938C38.2994 26.6687 38.0509 26.3816 37.8573 26.1735C37.762 26.071 37.6837 25.9916 37.632 25.9404C37.6189 25.9274 37.6075 25.9163 37.5982 25.9072C37.5892 25.8984 37.582 25.8915 37.5767 25.8865L37.5685 25.8786L37.5674 25.8777L37.2847 25.6154ZM24.953 37.9829C24.953 37.9829 25.7548 38.1901 26.953 38.3355C30.4936 38.7652 37.4954 38.655 37.4954 31.0618C37.4954 31.0618 40.7982 30.5421 41.1327 28.6545C41.4671 26.767 38.9308 24.4144 38.9308 24.4144C38.0683 22.5713 38.0953 20.4009 38.1207 18.3634C38.1277 17.8001 38.1346 17.2469 38.1225 16.7137C38.0654 14.3491 37.3155 12.0508 35.9624 10.0936C34.4807 8.23043 32.5377 6.77069 30.3183 5.85341C27.5022 4.57059 24.4343 3.90769 21.3296 3.91115C17.2639 3.91115 13.3648 5.49632 10.4899 8.31794C7.61508 11.1396 6 14.9665 6 18.9569C6 23.7578 8.74879 29.4615 12.3164 32.2108V40.7048C13.3287 42.828 17.1475 44.3338 19.3786 44.1516C24.1168 44.1516 24.953 41.416 24.953 41.416V37.9829Z"
+      fill="#333333"
+    />
+    <path
+      d="M26.7229 20.1457C27.4959 20.1457 27.2508 19.9188 27.8892 19.4947C28.5374 19.918 29.3023 20.1399 30.0828 20.1311L32.5622 19.2531C33.2609 18.6926 33.7405 17.9155 33.9208 17.0521C34.1012 16.1886 33.9713 15.291 33.5529 14.5096C33.1345 13.7281 32.4529 13.1103 31.6224 12.7594C31.4328 11.9234 30.9551 11.1756 30.2686 10.6402L27.8484 9.81597H27.5759C27.0375 9.05158 26.2294 8.50633 25.3049 8.28388L21.116 8C20.2535 8.06974 19.4402 8.41984 18.807 8.99394C18.5078 8.92529 18.2016 8.88971 17.8941 8.88787C17.1498 8.88936 16.4218 9.10047 15.7981 9.49572C15.1743 9.89097 14.6815 10.4535 14.379 11.1153L12.4074 12.4744C11.9169 13.1213 11.6528 13.9044 11.6541 14.7084C11.6492 15.0445 11.6951 15.3796 11.7903 15.7028C11.273 16.3559 10.9949 17.1586 11.0001 17.9832C10.9988 18.9396 11.3743 19.8601 12.0492 20.5554C12.1036 21.2401 12.3495 21.8973 12.7601 22.4558C13.1708 23.0143 13.7306 23.4529 14.379 23.7242C15.1261 24.1799 15.7587 24.7929 16.2302 25.518C16.7018 26.243 16.8964 27.0617 17 27.9138H21.116V23.9363C21.1151 23.2301 21.3176 22.5377 21.7005 21.9378C22.0834 21.3378 22.2979 20.8543 22.9489 20.5421C23.5588 20.315 24.1084 19.9569 24.5566 19.4947C25.195 19.9188 25.95 20.1457 26.7229 20.1457Z"
+      fill="#333333"
+    />
+    <path
+      d="M34 23.5C34 24.3284 33.3284 25 32.5 25C31.6716 25 31 24.3284 31 23.5C31 22.6716 31.6716 22 32.5 22C33.3284 22 34 22.6716 34 23.5Z"
+      fill="#333333"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 32H17V30H21V32Z"
+      fill="#333333"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 36H17V34H21V36Z"
+      fill="#333333"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 40H17V38H21V40Z"
+      fill="#333333"
+    />
+  </svg>

package/src/assets/icons/Physical-injury.svg

@@ -0,0 +1,11 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="#000000"
+    width="800px"
+    height="800px"
+    viewBox="-32 0 512 512"
+  >
+    <path
+      d="M277.37 11.98C261.08 4.47 243.11 0 224 0c-53.69 0-99.5 33.13-118.51 80h81.19l90.69-68.02zM342.51 80c-7.9-19.47-20.67-36.2-36.49-49.52L239.99 80h102.52zM224 256c70.69 0 128-57.31 128-128 0-5.48-.95-10.7-1.61-16H97.61c-.67 5.3-1.61 10.52-1.61 16 0 70.69 57.31 128 128 128zM80 299.7V512h128.26l-98.45-221.52A132.835 132.835 0 0 0 80 299.7zM0 464c0 26.51 21.49 48 48 48V320.24C18.88 344.89 0 381.26 0 422.4V464zm256-48h-55.38l42.67 96H256c26.47 0 48-21.53 48-48s-21.53-48-48-48zm57.6-128h-16.71c-22.24 10.18-46.88 16-72.89 16s-50.65-5.82-72.89-16h-7.37l42.67 96H256c44.11 0 80 35.89 80 80 0 18.08-6.26 34.59-16.41 48H400c26.51 0 48-21.49 48-48v-41.6c0-74.23-60.17-134.4-134.4-134.4z"
+    />
+  </svg>

package/src/assets/icons/icon-view-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140.743" height="128.766" viewBox="0 0 140.743 128.766"><g transform="translate(0 0)"><path d="M5.986,128.766A5.986,5.986,0,0,1,.45,120.507a.323.323,0,0,1,.083-.056.35.35,0,0,0,.073-.046L117.334,3.677a4.454,4.454,0,0,0,1.036-1.742l.107-.108a5.986,5.986,0,1,1,8.465,8.465L103,34.206a125.465,125.465,0,0,1,25.74,21.55,12.981,12.981,0,0,1,.042,17.348A125.8,125.8,0,0,1,115.556,85.64a118.682,118.682,0,0,1-16.05,11.144,90.43,90.43,0,0,1-17.951,7.984,63.583,63.583,0,0,1-18.927,3.054h-1.8a67.061,67.061,0,0,1-25.8-5.62L10.213,127.02A5.951,5.951,0,0,1,5.986,128.766Zm78.962-75.9a1.515,1.515,0,0,0-1.076.452L50.589,86.6A1.514,1.514,0,0,0,51,89.032,25.738,25.738,0,0,0,69.553,90.17,27.416,27.416,0,0,0,87.511,72.044a25.711,25.711,0,0,0-1.2-18.323,1.51,1.51,0,0,0-1.36-.854Z" transform="translate(8.661 0)" fill="#fff"/><path d="M44.106,51.784a1.461,1.461,0,0,0,.365-1.437A25.83,25.83,0,0,1,43.417,43.4,26.937,26.937,0,0,1,70.355,16.467,25.6,25.6,0,0,1,77.3,17.5a1.461,1.461,0,0,0,1.437-.371L90.354,5.506a1.52,1.52,0,0,0-.6-2.52A62.333,62.333,0,0,0,70.355,0C44.615-.342,18.874,17.664,3.388,34.718a12.87,12.87,0,0,0-.042,17.36,126.959,126.959,0,0,0,20.58,18.138,1.532,1.532,0,0,0,1.951-.174Z" transform="translate(0 21.038)" fill="#fff"/></g></svg>

package/src/assets/icons/other.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 256 256"
+  fill="currentColor"
+  role="img"
+  aria-label="Icon"
+  focusable="false"
+>
+  <g>
+    <circle cx="128" cy="22.4" r="21.1"/>
+    <path d="M223,51.5c-3.6-3.6-9.5-3.6-13.1,0l-23.3,23.3c0,0-18.1-18.2-18.3-18.3c-5.2-5.2-11.9-7.7-18.7-7.7H128h0h-21.6
+      c-6.8,0-13.5,2.6-18.7,7.7c-0.2,0.2-18.3,18.3-18.3,18.3L46.1,51.5c-3.6-3.6-9.5-3.6-13.1,0c-3.6,3.6-3.6,9.5,0,13.1l29.9,29.9
+      c3.6,3.6,9.5,3.6,13.1,0l18.4-18.5c0.5-0.5,1.1-0.8,1.9-0.8c1.5,0,2.6,1.2,2.6,2.6v23.8v44.9v95.1c0,0.5,0,0.9,0.1,1.4
+      c0.3,3.1,1.7,5.9,3.8,8c2.4,2.4,5.7,3.9,9.3,3.9c3.6,0,6.9-1.5,9.3-3.9c2.1-2.1,3.5-4.9,3.8-8c0-0.4,0.1-0.9,0.1-1.4v-92.4
+      c0-1.5,1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6v92.4c0,0.5,0,0.9,0.1,1.4c0.3,3.1,1.7,5.9,3.8,8c2.4,2.4,5.7,3.9,9.3,3.9s6.9-1.5,9.3-3.9
+      c2.1-2.1,3.5-4.9,3.8-8c0-0.4,0.1-0.9,0.1-1.4v-95.1h0V77.8c0-1.5,1.2-2.6,2.6-2.6c0.7,0,1.4,0.3,1.9,0.8L180,94.4
+      c3.6,3.6,9.5,3.6,13.1,0L223,64.5C226.6,60.9,226.6,55.1,223,51.5z"/>
+  </g>
+</svg>

package/src/components/Containers/SectionGroup/index.vue

@@ -50,7 +50,7 @@
             <slot name="preContent"></slot>
           </column>
         </row>
-        
+
         <div
           class="section-group__content section-group__row"
           :class="{
@@ -61,7 +61,7 @@
               subHeading ||
               $slots.headerRight
             ),
-            [`${contentClass}`]: hasContentClass
+            [`${contentClass}`]: hasContentClass,
           }"
           :style="applyBackgroundOn === 'content' ? backgroundStyle : null"
         >
@@ -99,7 +99,7 @@ export default {
       type: String,
       default: 'page',
       validator: (value) =>
-        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0
+        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0,
     },
     backgroundVariant: {
       type: String,
@@ -113,48 +113,48 @@ export default {
           'yellow',
           'white',
           'lightblue',
-          'lightred'
-        ].indexOf(value) >= 0
+          'lightred',
+        ].indexOf(value) >= 0,
     },
     applyBackgroundOn: {
       type: String,
       default: 'section',
       validator: (value) =>
-        ['content', 'block', 'container', 'section'].indexOf(value) >= 0
+        ['content', 'block', 'container', 'section'].indexOf(value) >= 0,
     },
     backgroundImage: {
       type: String,
-      default: ''
+      default: '',
     },
     noPaddingTop: {
-      type: Boolean
+      type: Boolean,
     },
     noPaddingBottom: {
-      type: Boolean
+      type: Boolean,
     },
     bordered: {
-      type: Boolean
+      type: Boolean,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     title: {
       type: String,
-      default: null
+      default: null,
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     contentClass: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   computed: {
     generatedClass() {
@@ -162,7 +162,7 @@ export default {
         rtl: this.rtl,
         [`section-group--noPaddingTop`]: this.noPaddingTop,
         [`section-group--noPaddingBottom`]: this.noPaddingBottom,
-        [`section-group--size-` + this.size]: !!this.size
+        [`section-group--size-` + this.size]: !!this.size,
       }
     },
     backgroundStyle() {
@@ -175,7 +175,7 @@ export default {
           [`background-size`]: `cover`,
           [`background-position`]: `center center`,
           color: '#ffffff',
-          ['border-radius']: borderRadius
+          ['border-radius']: borderRadius,
         }
       }
       if (this.backgroundVariant) {
@@ -206,14 +206,14 @@ export default {
         styles = {
           ...(styles || {}),
           [`background-color`]: bgColour,
-          ['border-radius']: borderRadius
+          ['border-radius']: borderRadius,
         }
       }
 
       if (this.bordered) {
         styles = {
           ...(styles || {}),
-          [`border`]: `1px solid ` + colors.gray
+          [`border`]: `1px solid ` + colors.gray,
         }
       }
 
@@ -221,7 +221,7 @@ export default {
     },
     hasContentClass() {
       return this.contentClass.length > 0
-    }
+    },
   },
   mounted() {
     window.addEventListener('resize', this.setColumnSize)
@@ -241,8 +241,8 @@ export default {
         this.$emit('isDesktopView', !isTabletView && !isMobileView)
         this.$emit('isMobileOrTabletView', isMobileView || isTabletView)
       })
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Paragraphs/Accordion/index.stories.js

@@ -5,7 +5,7 @@ const mockAccordionItems = [
     field_title: 'Item one',
     field_pre_heading: 'preheading text',
     field_rich_text: {
-      value:
+      processed:
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
     },
     id: 'id-1',
@@ -14,7 +14,7 @@ const mockAccordionItems = [
     field_title: 'Item two',
     field_pre_heading: 'preheading text',
     field_rich_text: {
-      value:
+      processed:
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
     },
     id: 'id-2',
@@ -23,7 +23,7 @@ const mockAccordionItems = [
     field_title: 'Item three',
     field_pre_heading: 'preheading text',
     field_rich_text: {
-      value:
+      processed:
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
     },
     id: 'id-3',

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

@@ -22,7 +22,7 @@
           <stepper-item
             v-if="isStepper"
             :itemid="item.id ? item.id : '' + index"
-            :content="hasContent(item) ? item.field_rich_text.value : ''"
+            :content="hasContent(item) ? item.field_rich_text.processed : ''"
             :title="item.field_title"
             class="accordion__item stepper"
             :rtl="rtl || item.field_rtl"
@@ -33,7 +33,7 @@
           <accordion-item
             v-if="!isStepper"
             :itemid="item.id ? item.id : '' + index"
-            :content="hasContent(item) ? item.field_rich_text.value : ''"
+            :content="hasContent(item) ? item.field_rich_text.processed : ''"
             :title="item.field_title"
             class="accordion__item"
             :rtl="rtl || item.field_rtl"
@@ -124,7 +124,7 @@ export default {
       return false
     },
     hasContent(item) {
-      return item?.field_rich_text?.value
+      return item?.field_rich_text?.processed
     },
   },
 }

package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.vue

@@ -63,7 +63,7 @@
         <div v-if="item.website">
           <row>
             <column>
-              <h4>Website</h4>
+              <h5>Website</h5>
             </column>
           </row>
           <row v-if="item.website !== ''">
@@ -72,40 +72,13 @@
               {{ item.website }}
             </a>
           </row>
-          <!-- <row v-if="item.phone1 !== ''">
-            <column sm="2" class="label"> Phone </column>
-            <column sm="4" class="dir-additional-records">
-              {{ item.phone1 }}
-            </column>
-          </row> -->
-          <row v-if="item.mobile1">
-            <column sm="2" class="label"> Mobile </column>
-            <column sm="4" class="dir-additional-records">
-              {{ item.mobile1 }}
-            </column>
-          </row>
-          <row v-if="item.email1">
-            <column sm="2" class="label" > Email </column>
-            <column sm="4" class="dir-additional-records">
-              {{ item.email1 }}
-            </column>
-          </row>
-        </div>
+         </div>
         <div v-if="item.serviceCategory">
           <row class="row-dir-additional">
             <column>
-              <h4>{{ item.serviceCategory }}</h4>
+              <h5>{{ item.serviceCategory }}</h5>
             </column>
           </row>
-          <!-- <row class="dir-additional-records">
-            <column>
-              <ul>
-                <li v-for="serv in item.services.split(',')" :key="serv.id">
-                  {{ serv }}
-                </li>
-              </ul>
-            </column>
-          </row> -->
         </div>
       </div>
     </container>

package/src/components/Paragraphs/Directory/Records/PRS/recordContent.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- eslint-disable vue/no-v-html  -->
   <container>
+    <div>
+      <hr />
+    </div>
     <row>
       <column sm="9">
         <div v-if="item.outcome" class="record-details__outcome">
@@ -89,3 +92,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+
+  .record-details__outcome {
+    margin-left: 20px !important;
+  }
+
+</style>

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

@@ -0,0 +1,83 @@
+<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>

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

@@ -0,0 +1,44 @@
+<template>
+  <BNavbar variant="light" class="border-bottom bg-white pb-0">
+    <BNavbarBrand>
+      <ChevRightIcon
+        class="ws-yellow"
+        style="width: 32px; height: 32px"
+      ></ChevRightIcon>
+      <strong>Return to Work Planner</strong>
+    </BNavbarBrand>
+    <BNavbarToggle target="nav-collapse" />
+    <BNavbarNav class="ms-auto align-items-center">
+      <BNavItem href="/return-work-home">
+        <strong>Home</strong>
+      </BNavItem>
+      <BNavItem href="/return-work-poc">
+        <NotepadIcon class="me-2" style="width: 1em; height: 1em" />
+        <strong>My Planners</strong>
+      </BNavItem>
+    </BNavbarNav>
+  </BNavbar>
+</template>
+
+<script setup>
+import ChevRightIcon from './../icons/ChevRightIcon.vue'
+import NotepadIcon from './../icons/NotepadIcon.vue'
+import {
+  BNavbar,
+  BNavbarBrand,
+  BNavbarToggle,
+  BNavbarNav,
+  BNavItem,
+} from 'bootstrap-vue-next'
+</script>
+
+<style lang="scss" scoped>
+@import './../../../../includes/scss/all.scss';
+.active {
+  color: black !important;
+  border-bottom: 5px solid $yellow;
+}
+.ws-yellow {
+  color: $yellow;
+}
+</style>

package/src/components/Paragraphs/RTWPlanner/Planners/PlanTasks.vue

@@ -0,0 +1,169 @@
+<template>
+  <Container>
+    <Row>
+      <Column col="12">
+        <h2 class="fw-bold my-4">{{ props.activePlanner?.name }}'s planner</h2>
+      </Column>
+    </Row>
+    <Row>
+      <Column col="12" md="8">
+        <div class="card shadow-sm border-3 rounded-3 p-4">
+          <BCardText v-html="activeContent.html"></BCardText>
+          <CtaButton
+            :rtl="
+              isTaskCompleted(activeTask.id, activeContent.id) ? true : false
+            "
+            :workwell="
+              isTaskCompleted(activeTask.id, activeContent.id) ? true : false
+            "
+            @click="toggleTask(activeTask.id, activeContent.id)"
+            class="mt-1"
+          >
+            {{
+              isTaskCompleted(activeTask.id, activeContent.id)
+                ? 'Completed'
+                : 'Mark Done'
+            }}
+          </CtaButton>
+        </div>
+        <div
+          role="button"
+          class="card shadow-sm border-3 rounded-3 p-4 mt-4 text-end"
+          :class="getNextTask() ? '' : 'disabled'"
+          @click="setActiveContent(getNextTask().task, getNextTask().content)"
+        >
+          <h4 class="fw-bold mt-0 mb-3">Go to next task</h4>
+          <p class="text-muted mb-0">
+            <span class="text-decoration-underline">
+              {{
+                getNextTask() ? getNextTask().content.btnText : 'No more tasks'
+              }}
+            </span>
+          </p>
+        </div>
+      </Column>
+      <Column col="12" md="4">
+        <div class="card shadow-sm border-3 rounded-3 p-4">
+          <h4 class="fw-bold mb-3">All tasks</h4>
+          <div v-for="task in props.tasks" :key="task.id" class="mb-3">
+            <p class="fw-bold">{{ task.title }}</p>
+            <div v-for="content in task.content" :key="content.id">
+              <button
+                class="d-flex justify-content-between align-items-center w-100 border-0 rounded-2 p-2 mb-2 text-start"
+                :class="
+                  isTaskCompleted(task.id, content.id)
+                    ? activeContent.id === content.id
+                      ? 'bg-success-subtle text-dark fw-bold active-done'
+                      : 'bg-success-subtle text-dark fw-bold'
+                    : activeContent.id === content.id
+                    ? 'active'
+                    : 'bg-light text-muted'
+                "
+                @click="setActiveContent(task, content)"
+              >
+                <span class="text-decoration-underline">
+                  {{ content.btnText }}
+                </span>
+                <span
+                  v-if="isTaskCompleted(task.id, content.id)"
+                  class="text-success"
+                >
+                  <TickCircleIcon
+                    class="ms-2"
+                    style="width: 2em; height: 2em"
+                  />
+                </span>
+                <span v-else class="text-muted">
+                  <TickCircleIcon
+                    class="ms-2"
+                    style="width: 2em; height: 2em"
+                  />
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </Column>
+    </Row>
+  </Container>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { CtaButton, Row, Column, Container } from '@worksafevictoria/wcl7.5'
+import TickCircleIcon from './icons/TickCircleIcon.vue'
+
+const props = defineProps({
+  activePlanner: { type: Object, required: true },
+  tasks: { type: Array, required: true }
+})
+
+const emit = defineEmits(['updatePlanner'])
+const tasks = ref([])
+const activeTask = ref(props.tasks[0] || { id: '', title: '', content: [] })
+const activeContent = ref(
+  props.tasks[0]?.content[0] || { btnText: '', html: '' }
+)
+
+const toggleTask = (taskId, contentId) => {
+  const key = `${taskId}_${contentId}`
+  const updatedPlanner = {
+    ...props.activePlanner,
+    tasksCompleted: [...props.activePlanner.tasksCompleted]
+  }
+  const index = updatedPlanner.tasksCompleted.indexOf(key)
+  if (index === -1) {
+    updatedPlanner.tasksCompleted.push(key)
+  } else {
+    updatedPlanner.tasksCompleted.splice(index, 1)
+  }
+  emit('updatePlanner', updatedPlanner)
+}
+
+const isTaskCompleted = (taskId, contentId) => {
+  const key = `${taskId}_${contentId}`
+  return props.activePlanner.tasksCompleted.includes(key)
+}
+
+const setActiveContent = (task, content) => {
+  console.log('🚀 ~ setActiveContent ~ task:', task)
+  activeTask.value = task
+  activeContent.value = content
+  scrollTo(0, 0)
+}
+
+const getNextTask = () => {
+  for (const task of props.tasks) {
+    for (const content of task.content) {
+      if (activeContent.value.id === content.id) {
+        const currentTaskIndex = props.tasks.indexOf(task)
+        const currentContentIndex = task.content.indexOf(content)
+        if (currentContentIndex + 1 < task.content.length) {
+          return { task, content: task.content[currentContentIndex + 1] }
+        } else if (currentTaskIndex + 1 < props.tasks.length) {
+          const nextTask = props.tasks[currentTaskIndex + 1]
+          return { task: nextTask, content: nextTask.content[0] }
+        } else {
+          return null
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@worksafevictoria/wcl7.5/src/includes/scss/all.scss';
+.active {
+  color: black !important;
+  background-color: $yellow !important;
+}
+.active-done {
+  border-left: 10px solid $green !important;
+}
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>