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

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

@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <div class="my-planners" v-if="!currentPlannerId">
+      <h2 class="fw-bold mt-4">My planners</h2>
+      <h5 class="fw-bold mb-3">In progress planners</h5>
+      <div
+        v-if="inProgress.length === 0"
+        class="bg-light-subtle text-center py-3 rounded mb-4 fw-bold text-muted"
+      >
+        No planners in progress
+      </div>
+      <div v-else>
+        <BCard
+          v-for="planner in inProgress"
+          :key="planner.id"
+          class="mb-3 p-0 shadow-sm border-0 in-progress rounded"
+        >
+          <BCardBody
+            class="d-flex justify-content-between align-items-center p-0"
+            role="button"
+            @click="selectPlanner(planner.id)"
+          >
+            <span class="fw-bold">{{ planner.name }}</span>
+            <BBadge
+              pill
+              role="button"
+              size="lg"
+              variant="light"
+              class="fw-bold pa-2 px-3 d-flex align-items-center"
+              @click.prevent="deletePlan(planner)"
+            >
+              Delete planner
+              <DeleteIcon class="ms-2" style="width: 2em; height: 2em" />
+            </BBadge>
+          </BCardBody>
+        </BCard>
+      </div>
+      <h5 class="fw-bold mb-3 mt-4">Completed planners</h5>
+      <div
+        v-if="completed.length === 0"
+        class="bg-light-subtle text-center py-3 rounded mb-4 fw-bold text-muted"
+      >
+        No completed planners
+      </div>
+      <div v-else>
+        <BCard
+          v-for="planner in completed"
+          :key="planner.id"
+          class="mb-3 shadow-sm border-0 bg-success-subtle rounded"
+        >
+          <BCardBody class="d-flex justify-content-between align-items-center">
+            <a href="#" class="fw-bold text-dark text-decoration-underline">
+              {{ planner.name }}
+            </a>
+            <BBadge
+              pill
+              role="button"
+              size="lg"
+              variant="light"
+              class="fw-bold pa-2 px-3 d-flex align-items-center"
+            >
+              Delete planner
+              <DeleteIcon class="ms-2" style="width: 2em; height: 2em" />
+            </BBadge>
+          </BCardBody>
+        </BCard>
+      </div>
+      <h5 class="fw-bold mb-3 mt-4">Create a new planner</h5>
+      <div
+        class="add-planner d-flex justify-content-between align-items-center p-3 rounded mb-4"
+        role="button"
+        @click="showModal = true"
+      >
+        <a href="#" class="fw-bold text-dark text-decoration-underline">
+          Add a new planner
+        </a>
+        <PlusCircleIcon class="me-2" style="width: 2em; height: 2em" />
+      </div>
+      <BModal
+        v-model="showModal"
+        hide-footer
+        centered
+        size="lg"
+        content-class="rounded-4 shadow-lg"
+        no-footer
+      >
+        <template #header>
+          <button
+            type="button"
+            class="btn-close ms-auto"
+            aria-label="Close"
+            @click="showModal = false"
+          ></button>
+        </template>
+
+        <div class="p-3">
+          <h3 class="fw-bold mb-3">Name your planner</h3>
+          <p class="mb-4">
+            Give your planner a name so you can easily find it and pick up where
+            you left off.
+          </p>
+
+          <label class="fw-bold mb-2">Injured workers first name</label>
+          <BFormInput v-model="newPlannerName" placeholder="" class="mb-4" />
+
+          <CtaButton @click="addPlanner">Next</CtaButton>
+        </div>
+      </BModal>
+    </div>
+    <PlanTasks
+      v-if="currentPlannerId"
+      :tasks="tasks"
+      :activePlanner="activePlanner"
+      @updatePlanner="savePlan"
+    />
+  </div>
+</template>
+
+<script setup>
+import { BCard, BCardBody, BModal, BFormInput } from 'bootstrap-vue-next'
+import { CtaButton } from '@worksafevictoria/wcl7.5'
+import PlusCircleIcon from './icons/PlusCircleIcon.vue'
+import DeleteIcon from './icons/DeleteIcon.vue'
+import PlanTasks from './PlanTasks.vue'
+
+const props = defineProps({
+  page: { type: Object, required: true },
+  createNew: { type: Boolean, default: false },
+})
+
+const tasks = ref([])
+const showModal = ref(false)
+const inProgress = computed(() =>
+  planners.value.filter(
+    (p) => !p.tasksCompleted || p.tasksCompleted.length <= 7,
+  ),
+)
+const completed = computed(() => [])
+
+const plannersCookie = useCookie('planners', { default: () => [] })
+
+onMounted(() => {
+  // if (props.createNew) {
+  //   showModal.value = true
+  // }
+  tasks.value = [
+    {
+      id: 't1',
+      title: '1. Get in contact with your injured worker',
+      subHeading:
+        'Tips on what you can say to your injured worker when contacting them',
+      content: [
+        {
+          id: 'c1',
+          expanded: false,
+          btnText: 'Contact your injured worker',
+          html: props.page.field_content[0].field_block_block.field_content[0]
+            .field_body.value,
+        },
+      ],
+    },
+    {
+      id: 't2',
+      title: '2. Manage payments',
+      subHeading:
+        'Find out your financial obligations while your employee is injured',
+      content: [
+        {
+          id: 'c2',
+          expanded: false,
+          btnText: "Continue paying your injured worker's wage",
+          html: props.page.field_content[1].field_block_block.field_content[0]
+            .field_body.value,
+        },
+        {
+          id: 'c3',
+          expanded: false,
+          btnText: "Processing your injured worker's medical payments",
+          html: props.page.field_content[2].field_block_block.field_content[0]
+            .field_body.value,
+        },
+      ],
+    },
+  ]
+})
+
+const planners = ref(plannersCookie.value)
+const currentPlannerId = ref(null)
+const newPlannerName = ref('')
+
+const addPlanner = () => {
+  if (!newPlannerName.value.trim()) return
+  const id = Date.now()
+  planners.value.push({
+    id,
+    name: newPlannerName.value,
+    tasksCompleted: [],
+  })
+  newPlannerName.value = ''
+  savePlanners()
+  newPlannerName.value = ''
+  showModal.value = false
+}
+
+const selectPlanner = (id) => {
+  currentPlannerId.value = id
+}
+
+const activePlanner = computed(() =>
+  planners.value.find((u) => u.id === currentPlannerId.value),
+)
+
+const savePlanners = () => {
+  plannersCookie.value = planners.value
+}
+
+const savePlan = (plan) => {
+  const index = planners.value.findIndex((u) => u.id === plan.id)
+  planners.value[index] = plan
+  savePlanners()
+}
+
+const deletePlan = (plan) => {
+  const index = planners.value.findIndex((u) => u.id === plan.id)
+  planners.value.splice(index, 1)
+  savePlanners()
+}
+</script>
+
+<style lang="scss" scoped>
+@import './../../../../includes/scss/all.scss';
+.add-planner {
+  border: 2px dashed $gray;
+  background-color: $lightgray;
+}
+.in-progress {
+  background-color: $lightblue;
+}
+</style>

package/src/components/Paragraphs/RTWPlanner/icons/ChevRightIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    width="1em"
+    height="1em"
+    class="chevron-right-icon"
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+</template>

package/src/components/Paragraphs/RTWPlanner/icons/DeleteIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="800px"
+    height="800px"
+    viewBox="0 0 1024 1024"
+  >
+    <path
+      fill="#000000"
+      d="M352 192V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64H96a32 32 0 0 1 0-64h256zm64 0h192v-64H416v64zM192 960a32 32 0 0 1-32-32V256h704v672a32 32 0 0 1-32 32H192zm224-192a32 32 0 0 0 32-32V416a32 32 0 0 0-64 0v320a32 32 0 0 0 32 32zm192 0a32 32 0 0 0 32-32V416a32 32 0 0 0-64 0v320a32 32 0 0 0 32 32z"
+    />
+  </svg>
+</template>

package/src/components/Paragraphs/RTWPlanner/icons/MentalInjury.vue

@@ -0,0 +1,42 @@
+<template>
+  <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>
+</template>

package/src/components/Paragraphs/RTWPlanner/icons/NotepadIcon.vue

@@ -0,0 +1,95 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="800px"
+    height="800px"
+    viewBox="0 0 32 32"
+  >
+    <defs>
+      <clipPath id="clip-notepad">
+        <rect width="32" height="32" />
+      </clipPath>
+    </defs>
+    <g id="notepad" clip-path="url(#clip-notepad)">
+      <g
+        id="Group_3042"
+        data-name="Group 3042"
+        transform="translate(-260 -156)"
+      >
+        <g id="Group_3024" data-name="Group 3024">
+          <g id="Group_3023" data-name="Group 3023">
+            <g id="Group_3022" data-name="Group 3022">
+              <g id="Group_3021" data-name="Group 3021">
+                <path
+                  id="Path_3967"
+                  data-name="Path 3967"
+                  d="M287.632,157.923h-3.559v-.757a1,1,0,0,0-2,0v.757h-2.721v-.757a1,1,0,1,0-2,0v.757h-2.721v-.757a1,1,0,0,0-2,0v.757H269.91v-.757a1,1,0,0,0-2,0v.757h-3.542a1,1,0,0,0-1,1v27.911a1,1,0,0,0,1,1h23.264a1,1,0,0,0,1-1V158.923A1,1,0,0,0,287.632,157.923Zm-1,27.911H265.368V159.923h2.542v.756a1,1,0,0,0,2,0v-.756h2.721v.756a1,1,0,0,0,2,0v-.756h2.721v.756a1,1,0,0,0,2,0v-.756h2.721v.756a1,1,0,0,0,2,0v-.756h2.559Z"
+                  fill="#344952"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+        <g id="Group_3041" data-name="Group 3041">
+          <g id="Group_3028" data-name="Group 3028">
+            <g id="Group_3027" data-name="Group 3027">
+              <g id="Group_3026" data-name="Group 3026">
+                <g id="Group_3025" data-name="Group 3025">
+                  <path
+                    id="Path_3968"
+                    data-name="Path 3968"
+                    d="M283.646,167.92H268.354a1,1,0,0,1,0-2h15.292a1,1,0,0,1,0,2Z"
+                    fill="#344952"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+          <g id="Group_3032" data-name="Group 3032">
+            <g id="Group_3031" data-name="Group 3031">
+              <g id="Group_3030" data-name="Group 3030">
+                <g id="Group_3029" data-name="Group 3029">
+                  <path
+                    id="Path_3969"
+                    data-name="Path 3969"
+                    d="M283.646,171.92H268.354a1,1,0,0,1,0-2h15.292a1,1,0,0,1,0,2Z"
+                    fill="#344952"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+          <g id="Group_3036" data-name="Group 3036">
+            <g id="Group_3035" data-name="Group 3035">
+              <g id="Group_3034" data-name="Group 3034">
+                <g id="Group_3033" data-name="Group 3033">
+                  <path
+                    id="Path_3970"
+                    data-name="Path 3970"
+                    d="M283.646,175.92H268.354a1,1,0,0,1,0-2h15.292a1,1,0,0,1,0,2Z"
+                    fill="#344952"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+          <g id="Group_3040" data-name="Group 3040">
+            <g id="Group_3039" data-name="Group 3039">
+              <g id="Group_3038" data-name="Group 3038">
+                <g id="Group_3037" data-name="Group 3037">
+                  <path
+                    id="Path_3971"
+                    data-name="Path 3971"
+                    d="M275.823,179.92h-7.469a1,1,0,0,1,0-2h7.469a1,1,0,0,1,0,2Z"
+                    fill="#344952"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/Paragraphs/RTWPlanner/icons/OtherInjury.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    fill="#000000"
+    height="800px"
+    width="800px"
+    version="1.1"
+    id="Layer_1"
+    viewBox="0 0 256 256"
+    xml:space="preserve"
+  >
+    <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>
+</template>

package/src/components/Paragraphs/RTWPlanner/icons/PhysicalInjury.vue

@@ -0,0 +1,13 @@
+<template>
+  <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>
+</template>

package/src/components/Paragraphs/RTWPlanner/icons/PlusCircleIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+    width="800px"
+    height="800px"
+    viewBox="0 0 32 32"
+    version="1.1"
+  >
+    <title>plus-circle</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs></defs>
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+      sketch:type="MSPage"
+    >
+      <g
+        id="Icon-Set-Filled"
+        sketch:type="MSLayerGroup"
+        transform="translate(-466.000000, -1089.000000)"
+        fill="#000000"
+      >
+        <path
+          d="M488,1106 L483,1106 L483,1111 C483,1111.55 482.553,1112 482,1112 C481.447,1112 481,1111.55 481,1111 L481,1106 L476,1106 C475.447,1106 475,1105.55 475,1105 C475,1104.45 475.447,1104 476,1104 L481,1104 L481,1099 C481,1098.45 481.447,1098 482,1098 C482.553,1098 483,1098.45 483,1099 L483,1104 L488,1104 C488.553,1104 489,1104.45 489,1105 C489,1105.55 488.553,1106 488,1106 L488,1106 Z M482,1089 C473.163,1089 466,1096.16 466,1105 C466,1113.84 473.163,1121 482,1121 C490.837,1121 498,1113.84 498,1105 C498,1096.16 490.837,1089 482,1089 L482,1089 Z"
+          id="plus-circle"
+          sketch:type="MSShapeGroup"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>

package/src/components/Paragraphs/RTWPlanner/icons/TickCircleIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    width="800px"
+    height="800px"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,26 @@
+import RTWPlanner from './index.vue'
+
+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 default {
+  title: 'Paragraphs/RTWPlanner',
+  component: RTWPlanner,
+  tags: ['autodocs'],
+  args: {
+    textMedia: textMedia,
+  },
+}
+
+export const ReturnToWork = {}

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

@@ -0,0 +1,41 @@
+<template>
+  <section-group
+    backgroundVariant="white"
+    size="page"
+    applyBackgroundOn="container"
+  >
+    <NavBar />
+
+    <div>
+      <!-- ✅ forward the prop -->
+      <Home :textMedia="textMedia" />
+    </div>
+
+    <div class="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>
+  </section-group>
+</template>
+
+<script>
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import NavBar from './NavBar/index.vue'
+import Home from './Home/index.vue'
+
+export default {
+  name: 'RTWPlanner',
+  components: {
+    SectionGroup,
+    NavBar,
+    Home,
+  },
+  props: {
+    textMedia: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+}
+</script>