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

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

@@ -0,0 +1,174 @@
+<script setup>
+import { ref } from 'vue'
+import HeroHeader from './../../../Global/HeroHeader/index.vue'
+import CardContainer from './../CardContainer/index.vue'
+import Breakout from './../../Breakout/index.vue'
+import SectionGroup from './../../../Containers/SectionGroup/index.vue'
+import CardGroup from './../../../SubComponents/CardGroup/index.vue'
+import Breadcrumb from './../../../SubComponents/Breadcrumb/index.vue'
+import RichText from './../../RichText/index.vue'
+import SelectableCards from './../../SelectableCards/index.vue'
+
+const props = defineProps({
+  injuryPage: {
+    type: String,
+    default: null,
+  },
+  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 screen = ref(1)
+const selectedCard = ref(null)
+
+function nextScreen(card) {
+  selectedCard.value = card
+  screen.value = 2
+}
+
+function onCrumbClick({ item, index, event }) {
+  screen.value = 1
+}
+</script>
+
+<template>
+  <div class="injuries-app">
+    <div v-if="injuryPage === 'physicalInjury' && screen === 1">
+      <hero-header
+        :image="null"
+        :show-mask="false"
+        :title="heroHeader.title"
+        :description="heroHeader.description"
+        :bg-color="null"
+        :show-social="false"
+        class="hero-header"
+      />
+      <breakout :title="breakout.title" :body="breakout.body" />
+
+      <card-container
+        ref="physicalCardContainer"
+        :titles="titles.physical"
+        :cards="cards"
+        :button-role="'modal-quest'"
+        @nextScreen="nextScreen"
+      />
+    </div>
+
+    <div
+      v-if="
+        injuryPage === 'mentalInjury' ||
+        injuryPage === 'otherInjury' ||
+        screen === 2
+      "
+    >
+      <breadcrumb
+        :breadcrumb-items="breadcrumbItems"
+        :intercept-clicks="true"
+        @item-click="onCrumbClick"
+      />
+
+      <section-group
+        :background-variant="'lavendergray'"
+        class="injuries-app__injury"
+      >
+        <rich-text
+          :content="selectedCard?.value || cards.content"
+          :without-container="true"
+        />
+      </section-group>
+
+      <card-group
+        class="injuries-app__rtw-cards"
+        :title="titles.rtwCards?.heading"
+        :title-tag="'h3'"
+        :cards="rtwCards"
+        :loading="false"
+        :columns="3"
+        :show-load-more="false"
+        :background="'white'"
+      />
+
+      <selectable-cards
+        class="injuries-app__contact-info"
+        :title="titles.cardContactInformaton?.heading"
+        :button-role="'none'"
+        :columns-per-row="4"
+        :cards="contactCards"
+        :icon-is-bordered="false"
+        :card-type="'control-selectcards'"
+        :card-text-align="'center'"
+        :is-selectable="'false'"
+      ></selectable-cards>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.injuries-app {
+  .wcl-hero-header {
+    border: none;
+  }
+
+  .wcl-breadcrumb {
+    margin: 50px 0 20px 0;
+    :deep(.breadcrumb) {
+      font-size: 12px;
+    }
+
+    &--ltr {
+      :deep(.breadcrumb-item:first-of-type::before) {
+        content: '<';
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &__injury {
+    border-radius: 8px !important;
+    :deep(a.cta-button) {
+      display: none;
+    }
+  }
+
+  &__rtw-cards {
+    @media (min-width: 1024px) {
+      :deep(.section-group__heading) {
+        width: 75%;
+      }
+    }
+  }
+
+  &__contact-info {
+    :deep(.card-unit) {
+      padding: 0;
+      font-weight: bold;
+    }
+  }
+}
+</style>

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

@@ -1,26 +1,79 @@
 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,
+} 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: 'Physical 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,
+  },
+}

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

@@ -1,41 +1,109 @@
+<script setup>
+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 Footer from './Footer/index.vue'
+
+const props = defineProps({
+  homePage: {
+    type: Boolean,
+    default: false,
+  },
+  injuryPage: {
+    type: String,
+    default: null,
+  },
+  textMedia: {
+    type: Object,
+    required: true,
+  },
+  selectInjuries: {
+    type: Object,
+    required: true,
+  },
+  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: () => [],
+  },
+})
+</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="!homePage"
+      :breadcrumbItems="breadcrumbItems"
+      :injuryPage="injuryPage"
+      :titles="titles"
+      :heroHeader="heroHeader"
+      :cards="cards"
+      :breakout="breakout"
+      :rtwCards="rtwCards"
+      :contactCards="contactCards"
+    />
+
+    <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',
+  },
+}