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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.17.0-beta.11",
+  "version": "1.17.0-beta.13",
   "description": "WorkSafe Victoria Component Library - GitHub Actions Migration Test",
   "main": "src/index.js",
   "license": "MIT",

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

@@ -8,14 +8,16 @@
       controls
       indicators
       label-indicators="Select a slide to display"
+      indicators-button-label="Slide"
       keyboard
       :fade="true"
       background="#ababab"
       img-width="100%"
       img-height="auto"
-    >
-      <BCarouselSlide
-        v-for="item in filteredCarouselItems"
+     >
+     <BCarouselSlide
+        v-for="(item, index) in filteredCarouselItems"
+        :id="`slide-${index}`"
         :key="item.id"
         :img-src="getImageURL(item.imageURL)"
         :img-alt="item.imageAlt"
@@ -24,7 +26,8 @@
         <span 
           :class="carousel-caption" 
           :aria-label="item.title ? item.title : 'No caption available'"
-          :style="item.title === null || item.title === '' ? 'height: 32px;' : null">{{ item.title }}</span>
+          :style="item.title === null || item.title === '' ? 'height: 32px;' : null">{{ item.title }}
+        </span>
       </BCarouselSlide>
     </BCarousel>
   </div>
@@ -60,6 +63,17 @@ props: {
     default: false,
   },
 },
+mounted() {
+  // Remove aria-controls and aria-owns from carousel indicators for accessibility
+  const carouselElement = this.$el.querySelector('.carousel-indicators');
+  if (carouselElement) {
+    const ceChildren = carouselElement.children;
+    for (let i = 0; i < ceChildren.length; i++) {
+      ceChildren[i].removeAttribute('aria-controls');
+    }
+    carouselElement.removeAttribute('aria-owns');
+  }
+},
 computed: {
   filteredCarouselItems() {
     

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

@@ -181,7 +181,6 @@ export default {
       }
       if (this.backgroundVariant) {
         let bgColour
-        console.log('this.backgroundVariant:-', this.backgroundVariant)
         switch (this.backgroundVariant) {
           case 'grey':
           case 'light':

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

@@ -8,6 +8,7 @@ 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'
+import PlannerNameModal from './../Planners/PlannerNameModal.vue'
 
 const props = defineProps({
   injuryPage: {
@@ -46,6 +47,7 @@ const props = defineProps({
 
 const screen = ref(1)
 const selectedCard = ref(null)
+const showModal = ref(false)
 
 // local copy of breadcrumb items allowed to mutate
 const breadcrumbItemsLocal = ref([...props.breadcrumbItems])
@@ -87,7 +89,9 @@ function onCrumbClick({ index }) {
   // you can add logic for index === 1 here, or just leave it as no-op.
 }
 
-function nextScreenAgent() {}
+function nextScreenAgent(card) {
+  showModal.value = true
+}
 </script>
 
 <template>
@@ -172,6 +176,8 @@ function nextScreenAgent() {}
         @nextScreen="nextScreenAgent"
       />
     </div>
+
+    <PlannerNameModal class="injuries-app__new-planner" v-model="showModal" />
   </div>
 </template>
 

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

@@ -0,0 +1,56 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { BModal, BFormInput } from 'bootstrap-vue-next'
+import CtaButton from './../../../SubComponents/CtaButton/index.vue'
+
+const inputValue = ref('')
+
+function handleSubmit() {
+  console.log('handle Submit', inputValue.value)
+  if (!inputValue.value.trim()) return
+}
+</script>
+
+<template>
+  <b-modal
+    aria-labelledby="injuries-app__modal"
+    no-close-on-backdrop
+    centered
+    no-footer
+    size="lg"
+  >
+    <template #default="{ close }">
+      <div class="p-3">
+        <h3 class="fw-bold mb-3 modal-title__new-planner">Name your planner</h3>
+        <p class="mb-2 modal-description__new-planner">
+          Give your planner a name so you can easily find it and pick up where
+          you left off.
+        </p>
+
+        <label for="modal2CB" class="fw-bold mb-4">
+          Injured workers first name
+        </label>
+
+        <BFormInput
+          id="modal2CB"
+          name="modal2CB"
+          placeholder=""
+          v-model="inputValue"
+          class="mb-4 input__new-planner"
+        />
+
+        <CtaButton ref="calNextBtn" @click="handleSubmit">Next</CtaButton>
+      </div>
+    </template>
+  </b-modal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.modal-description__new-planner) {
+  width: 65%;
+}
+
+:deep(.input__new-planner) {
+  width: 60%;
+}
+</style>

package/src/index.js

@@ -59,6 +59,12 @@ import Search from './components/SubComponents/Search/index.vue'
 import VideoThumbnail from './components/SubComponents/VideoThumbnail/index.vue'
 import ResourceGroup from './components/SubComponents/ResourceGroup/index.vue'
 
+// Export Return to Work components
+import RtwHeader from './components/Paragraphs/RTWPlanner/Header/index.vue'
+import RtwFooter from './components/Paragraphs/RTWPlanner/Footer/index.vue'
+import RtwHomepageApp from './components/Paragraphs/RTWPlanner/HomePage/index.vue'
+export { RtwHeader, RtwFooter, RtwHomepageApp }
+
 // Export Global Components
 export {
   Container,