@worksafevictoria/wcl7.5 1.4.0 → 1.6.0

package/.storybook/preview.js

@@ -1,9 +1,13 @@
 /** @type { import('@storybook/vue3').Preview } */
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import './../src/assets/styles/stylesheet.scss'
 import { setup } from '@storybook/vue3'
 
+import { createBootstrap } from 'bootstrap-vue-next'
+
+// Add the necessary CSS
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
+
 //Custom fonts
 import './../src/assets/styles/webfonts.css'
 
@@ -12,38 +16,41 @@ import './../src/assets/styles/stylesheet.scss'
 
 // Storybook css
 import './../src/assets/styles/storybook.scss'
-
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './../src/assets/styles/stylesheet.scss'
 
 setup((app) => {
   app.component('NuxtLink', {
     props: {
       to: {
         type: String,
-        required: true
-      }
+        required: true,
+      },
     },
-    template: '<a target="_blank" :href="`https://ws-ui.wsvdigital.com.au${this.to}`"><slot></slot></a>'
+    template:
+      '<a target="_blank" :href="`https://ws-ui.wsvdigital.com.au${this.to}`"><slot></slot></a>',
   })
+  app.use(createBootstrap())
 })
 
 const preview = {
   parameters: {
     options: {
       storySort: {
-        method: 'alphabetical'
-      }     
+        method: 'alphabetical',
+      },
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i
-      }
+        date: /Date$/i,
+      },
     },
     viewport: {
-      viewports: INITIAL_VIEWPORTS
-    }
-  }
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
 }
 
 export default preview

package/bin/deploy.sh

@@ -22,4 +22,4 @@ cd storybook-static
 
 # Deploy to GH-Pages
 cd ..
-node node_modules/gh-pages/bin/gh-pages.js -d storybook-static -t true
+node node_modules/gh-pages/bin/gh-pages.js -d storybook-static

package/lib/utility.js

@@ -34,23 +34,25 @@ function isGovSite(url) {
   }
 }
 
-function navigateToPath(path, newTab) {
+function navigateToPath(path, newTab, nuxtRouter) {
   const url = String(path).startsWith('www.') ? `http://${path}` : path
   const isAbsolute = isAbsoluteUrl(url)
-  if (!isAbsolute && this.$router && !newTab) {
-    this.$router.push({
-      path: url
+  const router = nuxtRouter ? nuxtRouter : this.$router
+  if (!isAbsolute && router && !newTab) {
+    router.push({
+      path: url,
     })
-  } else if (!isAbsolute && this.$router && newTab) {
+  } else if (!isAbsolute && router && newTab) {
     const hrefTag = Object.assign(document.createElement('a'), {
       target: '_blank',
-      href: url
+      href: url,
     })
     hrefTag.click()
   } else {
     const hrefTag = Object.assign(document.createElement('a'), {
-      target: isAbsolute ? '_blank' : '_self',
-      href: url
+      // target: newTab ? '_blank' : '_self',
+      target: '_blank',
+      href: url,
     })
     hrefTag.click()
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {
@@ -43,8 +43,7 @@
     "@storybook/cli": "^7.6.20",
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
-    "bootstrap-vue": "^2.23.1",
-    "bootstrap-vue-next": "^0.25.10",
+    "bootstrap-vue-next": "^0.26.18",
     "date-fns": "^2.30.0",
     "formiojs": "4.13.13",
     "storybook-addon-deep-controls": "^0.6.2",
@@ -88,7 +87,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "1.77.6",
-    "sass-loader": "^13.3.2",
     "semantic-release": "^19.0.3",
     "storybook": "^7.5.1",
     "stylelint": "^15.11.0",
@@ -99,5 +97,6 @@
     "vite-svg-loader": "^5.1.0",
     "vitest": "^0.34.6",
     "vue-jest": "^3.0.7"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

package/src/assets/icons/AppFooter/x-ws-footer.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1024_13)">
+<path d="M11.8946 8.04107L18.8121 0H17.1729L11.1664 6.98195L6.36901 0H0.835815L8.09038 10.5579L0.835815 18.9902H2.47514L8.81815 11.6171L13.8845 18.9902H19.4177L11.8942 8.04107H11.8946ZM9.64929 10.651L8.91425 9.59963L3.06581 1.23406H5.58372L10.3035 7.98534L11.0385 9.03668L17.1736 17.8123H14.6557L9.64929 10.6514V10.651Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1024_13">
+<rect width="18.5819" height="19" fill="white" transform="translate(0.835815)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/AppFooter/x-ww-footer.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18.58 19">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #356041;
+      }
+
+      .cls-3 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-1" width="18.58" height="19"/>
+    </clipPath>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer_2">
+    <g id="Layer_1-2">
+      <g class="cls-3">
+        <path class="cls-2" d="M11.06,8.04L17.98,0h-1.64l-6.01,6.98L5.53,0H0l7.25,10.56L0,18.99h1.64l6.34-7.37,5.07,7.37h5.53l-7.52-10.95h0ZM8.81,10.65l-.74-1.05L2.23,1.23h2.52l4.72,6.75.73,1.05,6.14,8.78h-2.52l-5.01-7.16h0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/assets/icons/SocialShare/x-icon-white.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18.58 19">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: none;
+      }
+
+      .cls-3 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-2" width="18.58" height="19"/>
+    </clipPath>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer_2">
+    <g id="Layer_1-2">
+      <g class="cls-3">
+        <path class="cls-1" d="M11.06,8.04L17.98,0h-1.64l-6.01,6.98L5.53,0H0l7.25,10.56L0,18.99h1.64l6.34-7.37,5.07,7.37h5.53l-7.52-10.95h0ZM8.81,10.65l-.74-1.05L2.23,1.23h2.52l4.72,6.75.73,1.05,6.14,8.78h-2.52l-5.01-7.16h0Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/assets/styles/modal.scss

@@ -10,3 +10,54 @@
     border: none !important;
   }
 }
+
+.modal-dialog {
+  .modal-content {
+    .modal-body {
+      .section-group__block {
+        max-width: 100%;
+      }
+    }
+    border-radius: 8px;
+  }
+  .modal-body {
+    padding: 32px;
+    fieldset {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      legend {
+        font-size: 28px;
+        font-weight: 700;
+        line-height: 32px;
+        letter-spacing: 0px;
+        margin-bottom: 32px;
+      }
+      .option {
+        margin-bottom: 32px;
+        flex-basis: 50%;
+        display: flex;
+        @media screen and (max-width: 600px) {
+          flex-basis: 100%;
+        }
+        input[type='checkbox'] {
+          height: 24px;
+          border: 1px solid #bababa;
+          width: 24px;
+          cursor: pointer;
+        }
+        label {
+          margin: 0px;
+          width: 80%;
+          position: relative;
+          left: 16px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .modal-footer,
+  .modal-header {
+    border: none;
+  }
+}

package/src/components/Common/CardGrid/index.vue

@@ -11,9 +11,8 @@
     :title-tag="titleTag"
     class="card-grid"
     :content-class="contentClass"
-    :class="{
-      [uniqueClass]: true
-    }"
+    :class="`cardGrid-${gridId}`"
+    :card-browse-content="cardBrowseContent"
   >
     <template v-if="$slots.gridHeaderRight" v-slot:headerRight>
       <slot name="gridHeaderRight"></slot>
@@ -26,12 +25,12 @@
         ref="cardRow"
         :class="{
           ['card-grid__row--' + rowSpacing]: true,
-          ['card-grid__row--' + rowClasses]: true
+          ['card-grid__row--' + rowClasses]: true,
         }"
       >
         <column
           v-for="(item, index) in cards"
-          :key="`${redrawCounter}-${index}-${$options._uid}`"
+          :key="`${redrawCounter}-${index}-${gridId}`"
           ref="cardColumns"
           :lg="largeViewPort"
           :md="mediumViewPort"
@@ -39,7 +38,7 @@
           cols="12"
           class="card-grid__column"
           :class="{
-            ['card-grid__column--' + columnSpacing]: true
+            ['card-grid__column--' + columnSpacing]: true,
           }"
         >
           <slot name="cardItem" :card="item" :index="index"></slot>
@@ -56,7 +55,7 @@
 import Row from './../../Containers/Row/index.vue'
 import Column from './../../Containers/Column/index.vue'
 import SectionGroup from './../../Containers/SectionGroup/index.vue'
-import debounce from 'lodash/debounce'
+import { debounce } from 'lodash-es'
 
 export default {
   name: 'CardGrid',
@@ -64,52 +63,52 @@ export default {
   props: {
     title: {
       type: String,
-      default: null
+      default: null,
     },
     subHeading: {
       type: String,
-      default: null
+      default: null,
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     cards: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     columnsPerRow: {
       type: Number,
-      default: 3
+      default: 3,
     },
     forceLgColumnsPerRow: {
       type: Number,
-      default: undefined
+      default: undefined,
     },
     forceMdColumnsPerRow: {
       type: Number,
-      default: undefined
+      default: undefined,
     },
     forceSmColumnsPerRow: {
       type: Number,
-      default: undefined
+      default: undefined,
     },
     size: {
       type: String,
       default: 'page',
       validator: (value) =>
-        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0
+        ['half-content', 'content', 'page', 'full'].indexOf(value) >= 0,
     },
     isSelectable: {
-      type: Boolean
+      type: Boolean,
     },
     cardIdPrefix: {
       type: String,
-      default: null
+      default: null,
     },
     backgroundVariant: {
       type: String,
@@ -122,45 +121,53 @@ export default {
           'grey',
           'yellow',
           'white',
-          'lightblue'
-        ].indexOf(value) >= 0
+          'lightblue',
+        ].indexOf(value) >= 0,
     },
     applyBackgroundOn: {
       type: String,
       default: 'section',
       validator: (value) =>
-        ['content', 'block', 'container', 'section'].indexOf(value) >= 0
+        ['content', 'block', 'container', 'section'].indexOf(value) >= 0,
     },
     noPaddingTop: {
-      type: Boolean
+      type: Boolean,
     },
     noPaddingBottom: {
-      type: Boolean
+      type: Boolean,
     },
     rowSpacing: {
       type: String,
       default: 'large',
-      validator: (value) => ['none', 'small', 'large'].indexOf(value) >= 0
+      validator: (value) => ['none', 'small', 'large'].indexOf(value) >= 0,
     },
     rowClasses: {
       type: String,
-      default: null
+      default: null,
     },
     columnSpacing: {
       type: String,
       default: 'default',
-      validator: (value) => ['default', 'none'].indexOf(value) >= 0
+      validator: (value) => ['default', 'none'].indexOf(value) >= 0,
     },
     contentClass: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
+    cardBrowseContent: {
+      type: Boolean,
+      default: false,
+    },
+    gridId: {
+      type: String,
+      default: 'default',
+    },
   },
   data() {
     return {
       childCards: [],
       redrawCounter: 0,
-      setColumnSizeDebounce: debounce(this.setColumnSize, 500)
+      setColumnSizeDebounce: debounce(this.setColumnSize, 500),
     }
   },
   computed: {
@@ -187,38 +194,35 @@ export default {
       }
       return 6
     },
-    uniqueClass() {
-      return `cardGrid-${this.$options._uid}`
-    }
   },
   watch: {
     cards: {
-      handler: function() {
+      handler: function () {
         this.redrawCounter += 1
         this.setColumnSizeDebounce()
       },
-      deep: true
+      deep: true,
     },
     columnsPerRow: {
-      handler: function() {
+      handler: function () {
         this.setColumnSizeDebounce()
-      }
+      },
     },
     forceSmColumnsPerRow: {
-      handler: function() {
+      handler: function () {
         this.setColumnSizeDebounce()
-      }
+      },
     },
     forceMdColumnsPerRow: {
-      handler: function() {
+      handler: function () {
         this.setColumnSizeDebounce()
-      }
+      },
     },
     forceLgColumnsPerRow: {
-      handler: function() {
+      handler: function () {
         this.setColumnSizeDebounce()
-      }
-    }
+      },
+    },
   },
   mounted() {
     window.addEventListener('resize', this.setColumnSizeDebounce)
@@ -228,16 +232,32 @@ export default {
     window.removeEventListener('resize', this.setColumnSizeDebounce)
   },
   methods: {
+    cardTitleSelected(selectedCard, ev) {
+      this.clearCards()
+      selectedCard.selected = !!!selectedCard.selected
+      const selectedCardModelIndex = this.getChildIndex(selectedCard)
+
+      this.$emit('selected-title', {
+        selectedCard: selectedCard.selected
+          ? this.cards[selectedCardModelIndex]
+          : null,
+        selectedCardModelIndex,
+        ev,
+      })
+    },
     cardSelected(selectedCard, ev) {
       this.clearCards()
       selectedCard.selected = !!!selectedCard.selected
       const selectedCardModelIndex = this.getChildIndex(selectedCard)
+
       this.$emit('selected', {
         selectedCard: selectedCard.selected
-          ? this.cards[selectedCardModelIndex]
+          ? this.cardBrowseContent
+            ? this.childCards[selectedCardModelIndex]
+            : this.cards[selectedCardModelIndex]
           : null,
         selectedCardModelIndex,
-        ev
+        ev,
       })
     },
     clearCards(selectedCard) {
@@ -277,15 +297,15 @@ export default {
           this.$emit('isMobileOrTabletView', isMobileView || isTabletView)
           this.$emit('gridColumnSize', gridColumnSize)
           this.childCards.forEach((card) =>
-            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView)
+            card.setGridMetaData(gridColumnSize, isMobileView, isTabletView),
           )
         }
       })
     },
     handleFocus(ev) {
       this.$emit('focussed', ev)
-    }
-  }
+    },
+  },
 }
 </script>
 

package/src/components/Common/CardGridItem/card-grid-item-caret.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { getCurrentInstance } from 'vue'
 import Icon from './../../SubComponents/Icon/index.vue'
 import ChevUp from './../../../assets/icons/chev-up.svg?raw'
 import CaretUp from './../../../assets/icons/caret-up.svg?url'
@@ -71,11 +72,13 @@ export default {
     },
     //Identify if this is a tabbed card WSV2-374
     isTabbedCard() {
-      const TabCardClassList = this.$parent.$el.classList
-      if (TabCardClassList.contains('tabbed-card')) {
-        return true
+      const instance = getCurrentInstance();
+      const parentEl = instance?.parent?.proxy?.$el.parentNode;
+
+      if (parentEl && parentEl.classList.contains('tabbed-card')) {
+        return true;
       } else {
-        return false
+        return false;
       }
     },
     //If isTabbedCard, then supportive text must be displayed for up and down carets. WSV2-374