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

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

@@ -1,26 +1,93 @@
 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',
-}
+import {
+  textMedia,
+  selectInjuries,
+  heroHeader,
+  cardTitles,
+  cardPhysicalBreakout,
+  cardPhysical,
+  cardRTWCards,
+  cardContactInformaton,
+  cardRTWMentalCards,
+  cardRTWOtherCards,
+  cardAgentContactInformaton,
+} from './Constants'
 
 export default {
   title: 'Paragraphs/RTWPlanner',
   component: RTWPlanner,
   tags: ['autodocs'],
+  argTypes: {
+    homePage: {
+      control: 'boolean',
+      table: { disable: true },
+    },
+    injuryPage: {
+      type: String,
+      default: null,
+    },
+  },
+}
+
+export const ReturnToWork = {
   args: {
+    homePage: true,
     textMedia: textMedia,
+    selectInjuries: selectInjuries,
   },
 }
 
-export const ReturnToWork = {}
+export const PhysicalInjury = {
+  args: {
+    breadcrumbItems: [{ text: 'Nature of the injury', to: '/' }],
+    homePage: false,
+    injuryPage: 'physicalInjury',
+    titles: cardTitles,
+    heroHeader: heroHeader,
+    cards: cardPhysical,
+    breakout: cardPhysicalBreakout,
+    rtwCards: cardRTWCards,
+    contactCards: cardContactInformaton,
+  },
+}
+
+export const Mentalnjury = {
+  args: {
+    breadcrumbItems: [{ text: 'Mental Injury', to: '/' }],
+    homePage: false,
+    injuryPage: 'mentalInjury',
+    titles: cardTitles,
+    heroHeader: heroHeader,
+    cards: selectInjuries.mental,
+    breakout: cardPhysicalBreakout,
+    rtwCards: cardRTWMentalCards,
+    contactCards: cardContactInformaton,
+  },
+}
+
+export const Otherlnjury = {
+  args: {
+    breadcrumbItems: [{ text: 'Injury', to: '/' }],
+    homePage: false,
+    injuryPage: 'otherInjury',
+    titles: cardTitles,
+    heroHeader: heroHeader,
+    cards: selectInjuries.other,
+    breakout: cardPhysicalBreakout,
+    rtwCards: cardRTWOtherCards,
+    contactCards: cardContactInformaton,
+  },
+}
+
+export const SelectYourAgent = {
+  args: {
+    breadcrumbItems: [{ text: 'Physical Injury', to: '/' }],
+    injuryPage: 'selectAgent',
+    titles: cardTitles,
+    contactCards: cardAgentContactInformaton,
+  },
+}
+
+export const MyPlanner = {
+  args: {},
+}

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

@@ -1,41 +1,119 @@
+<script setup>
+import { computed } from 'vue'
+import SectionGroup from './../../Containers/SectionGroup/index.vue'
+import Header from './Header/index.vue'
+import HomePage from './HomePage/index.vue'
+import Injuries from './Injuries/index.vue'
+import MyPlanner from './Planners/index.vue'
+import Footer from './Footer/index.vue'
+
+const props = defineProps({
+  homePage: {
+    type: Boolean,
+    default: false,
+  },
+  injuryPage: {
+    type: String,
+    default: null,
+  },
+  textMedia: {
+    type: Object,
+    required: false,
+  },
+  selectInjuries: {
+    type: Object,
+    required: false,
+  },
+  titles: {
+    type: Object,
+    default: () => {},
+  },
+  heroHeader: {
+    type: Object,
+    default: () => {},
+  },
+  cards: {
+    type: Array,
+    default: () => [],
+  },
+  breakout: {
+    type: Object,
+    default: () => {},
+  },
+  rtwCards: {
+    type: Array,
+    default: () => [],
+  },
+  contactCards: {
+    type: Array,
+    default: () => [],
+  },
+  breadcrumbItems: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const showInjuries = computed(() =>
+  ['selectAgent', 'otherInjury', 'mentalInjury', 'physicalInjury'].includes(
+    props.injuryPage,
+  ),
+)
+</script>
+
 <template>
   <section-group
     backgroundVariant="white"
     size="page"
     applyBackgroundOn="container"
+    class="rtw-app"
   >
-    <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>
+    <Header />
+
+    <!-- ✅ forward the prop -->
+    <HomePage
+      v-if="homePage"
+      :textMedia="textMedia"
+      :selectInjuries="selectInjuries"
+    />
+
+    <Injuries
+      v-if="showInjuries"
+      :breadcrumbItems="breadcrumbItems"
+      :injuryPage="injuryPage"
+      :titles="titles"
+      :heroHeader="heroHeader"
+      :cards="cards"
+      :breakout="breakout"
+      :rtwCards="rtwCards"
+      :contactCards="contactCards"
+    />
+
+    <MyPlanner v-if="!showInjuries" />
+
+    <Footer />
   </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: () => ({}),
-    },
-  },
+<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: 700;
+      line-height: 20px;
+      letter-spacing: 0px;
+      margin-left: 20px;
+    }
+  }
+
+  :deep(.wcl-media-text__content) {
+    padding-left: 20px;
+  }
 }
-</script>
+</style>

package/src/components/Paragraphs/SelectableCards/Control/index.stories.js

@@ -1,5 +1,8 @@
 import SelectableCards from './../index.vue'
-import { mockSelectableCards } from '../../../../mock/control-selectable-cards'
+import {
+  mockSelectableCards,
+  mockModalSelectableCards,
+} from '../../../../mock/control-selectable-cards'
 
 export default {
   title: 'Paragraphs/SelectableCards',
@@ -7,24 +10,41 @@ export default {
   tags: ['autodocs'],
   argTypes: {
     cardType: {
-      table: { disable: true }
+      table: { disable: true },
     },
     cardTextAlign: {
-      table: { disable: true }
-    }
+      table: { disable: true },
+    },
   },
+  template:
+    '<selectable-cards v-bind="args" class="control-selectablecards" />',
+}
+
+export const Control = {
   args: {
     cards: mockSelectableCards,
     title: 'Pick an object?',
     headingTag: 'h2',
-    subHeading: 'Pick an object from the selections or if you know exactly how heavy is the object that is being dropped, enter the height in input box below.',
+    subHeading:
+      'Pick an object from the selections or if you know exactly how heavy is the object that is being dropped, enter the height in input box below.',
     iconIsBordered: false,
     columns: 4,
     cardType: 'control-selectcards',
-    cardTextAlign: 'center'
-    },
-  template:
-    '<selectable-cards v-bind="args" class="control-selectablecards" />'
-  }
+    cardTextAlign: 'center',
+  },
+}
 
-export const Control = {}
+export const Modal = {
+  args: {
+    cards: mockModalSelectableCards,
+    title: 'The following physical injury types are not supported',
+    headingTag: 'h2',
+    subHeading:
+      '<p>If you have multiple conditions apply, please select the most severe condition.</p>',
+    iconIsBordered: false,
+    columns: 4,
+    cardType: 'control-selectcards',
+    cardTextAlign: 'center',
+    buttonRole: 'modal-quest',
+  },
+}

package/src/components/Paragraphs/SelectableCards/cardbody.vue

@@ -1,17 +1,16 @@
+<script setup>
+const props = defineProps({
+  card: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
 <template>
   <p v-if="card.value" class="card-unit">{{ card.value }} {{ card.units }}</p>
 </template>
 
-<script>
-export default {
-  props: {
-    card: {
-      type: Object,
-      required: true
-    }
-  }
-}
-</script>
 <style lang="scss" scoped>
 .card-unit {
   margin: 0;

package/src/components/Paragraphs/SelectableCards/cardtop.vue

@@ -4,42 +4,49 @@
       v-if="card.pillText"
       class="card_item__pillTop pillTop"
       :class="{
-        [`card_item__pillTop--rtl-${!!card.rtl}`]: true
+        [`card_item__pillTop--rtl-${!!card.rtl}`]: true,
       }"
       aria-hidden="true"
     >
       {{ card.pillText }}
     </div>
+
     <div class="card_item__pillTop pillTopText card_item__pillTop--rtl-true">
       <label
         class="card_item__control"
         :class="{ [`card_item__control-${buttonRole}`]: true }"
-        ><span></span
-      ></label>
+        @click.stop="buttonRoleClicked"
+      >
+        <span></span>
+      </label>
     </div>
+
     <div class="card_item__spacer card_item__spacer--withTextOnly"></div>
   </div>
 </template>
 
 <script>
 export default {
-  components: {},
+  name: 'CardTop',
+  emits: {
+    'button-role-clicked': false,
+  },
   props: {
-    card: {
-      type: Object,
-      required: true
-    },
-    buttonRole: {
-      type: String,
-      default: 'radio'
+    card: { type: Object, required: true },
+    buttonRole: { type: String, default: 'radio' },
+    isSelectable: { type: Boolean, default: false },
+  },
+  methods: {
+    buttonRoleClicked() {
+      if (this.isSelectable) {
+        // Emit the raw card object (no wrapper, no stringify)
+        this.$emit('button-role-clicked', this.card)
+      }
     },
-    isSelectable: {
-      type: Boolean,
-      default: false
-    }
-  }
+  },
 }
 </script>
+
 <style lang="scss" scoped>
 @import '../../../includes/scss/all';
 $borderRadius: 8px;

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

@@ -6,22 +6,43 @@ export default {
   component: SelectableCards,
   argTypes: {
     cardType: {
-      table: { disable: true }
+      table: { disable: true },
     },
     cardTextAlign: {
-      table: { disable: true }
+      table: { disable: true },
     },
     iconIsBordered: {
-      table: { disable: true }
-    }
+      table: { disable: true },
+    },
+    buttonRole: {
+      type: String,
+      default: 'link',
+    },
   },
+}
+
+export const Default = {
   args: {
     cards: mockSelectableCards,
     title: 'Selectable cards',
     headingTag: 'h2',
     columns: 4,
-    subHeading: null
-    }
-  }
+    subHeading: null,
+    buttonRole: 'link',
+  },
+}
 
-export const Default = {}
+export const Simple = {
+  args: {
+    cards: mockSelectableCards,
+    title: 'Agent contact information',
+    headingTag: 'h2',
+    columns: 4,
+    subHeading: null,
+    iconIsBordered: false,
+    cardType: 'control-selectcards',
+    isSelectable: false,
+    buttonRole: 'none',
+    cardTextAlign: 'center',
+  },
+}