@worksafevictoria/wcl7.5 1.1.0-beta.92 → 1.1.0-beta.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worksafevictoria/wcl7.5",
-  "version": "1.1.0-beta.92",
+  "version": "1.1.0-beta.94",
   "main": "src/index.js",
   "license": "MIT",
   "repository": {

package/src/components/Containers/HomepageHeader/index.stories.js

@@ -2,43 +2,66 @@ import HomepageHeader from './index.vue'
 
 const header = {
   title: 'This is sentence 1. This is sentence 2.',
-  description: 'description text'
+  description: 'description text',
 }
 
-const fetchMenu = () =>
-  Promise.resolve([
-    {
-      title: 'Report an incident',
-      relative: '/report-incident'
-    },
-    {
-      title: 'Report a case of COVID-19',
-      relative: '/report-confirmed-positive-case-covid-19'
-    },
-    {
-      title: 'Make a claim',
-      relative: '/before-claim'
-    },
-    {
-      title: 'Apply for a licence',
-      relative: '/apply-for-licence'
-    },
-    {
-      title: 'Pay or renew your insurance',
-      relative: '/pay-or-renew-your-workcover-insurance-premium'
-    }
-  ])
+// This is generated server side with useAsyncData
+// const fetchMenu = () =>
+//   Promise.resolve([
+//     {
+//       title: 'Report an incident',
+//       relative: '/report-incident'
+//     },
+//     {
+//       title: 'Report a case of COVID-19',
+//       relative: '/report-confirmed-positive-case-covid-19'
+//     },
+//     {
+//       title: 'Make a claim',
+//       relative: '/before-claim'
+//     },
+//     {
+//       title: 'Apply for a licence',
+//       relative: '/apply-for-licence'
+//     },
+//     {
+//       title: 'Pay or renew your insurance',
+//       relative: '/pay-or-renew-your-workcover-insurance-premium'
+//     }
+//   ])
+const headerLinks = [
+  {
+    text: 'Report an incident',
+    path: '/report-incident',
+  },
+  {
+    text: 'Report a case of COVID-19',
+    path: '/report-confirmed-positive-case-covid-19',
+  },
+  {
+    text: 'Make a claim',
+    path: '/before-claim',
+  },
+  {
+    text: 'Apply for a licence',
+    path: '/apply-for-licence',
+  },
+  {
+    text: 'Pay or renew your insurance',
+    path: '/pay-or-renew-your-workcover-insurance-premium',
+  },
+]
 
 const contentParser = () => {
   return Promise.resolve({
     results: [
       {
         title: 'Content title 1',
-        description: 'Content description 2'
-      }
+        description: 'Content description 2',
+      },
     ],
     offset: 0,
-    numFound: 1000
+    numFound: 1000,
   })
 }
 
@@ -48,31 +71,32 @@ export default {
   argTypes: {
     fetchMenu: {
       control: 'function',
-      table: { disable: true }
+      table: { disable: true },
     },
     contentParser: {
       control: 'function',
-      table: { disable: true }
-    }
+      table: { disable: true },
+    },
   },
   args: {
     heroHeader: header,
-    fetchMenu: fetchMenu,
-    contentParser: contentParser
-  }
+    // fetchMenu: fetchMenu,
+    contentParser: contentParser,
+    headerLinks: headerLinks,
+  },
 }
 
 const DefaultHH = (args) => ({
   components: { HomepageHeader },
   setup() {
-    return { args };
+    return { args }
   },
   mounted() {
     setTimeout(() => {
       this.$refs.hh.renderMenu()
     })
   },
-  template: '<homepage-header v-bind="args" ref="hh" />'
+  template: '<homepage-header v-bind="args" ref="hh" />',
 })
 
-export const Default = DefaultHH.bind({})
+export const Default = DefaultHH.bind({})

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

@@ -30,7 +30,7 @@
     <template v-slot:side>
       <div>
         <cta-button
-          v-for="(link, i) in links"
+          v-for="(link, i) in headerLinks"
           :key="i"
           class="iebtn"
           :url="link.path"
@@ -51,45 +51,34 @@
     </template>
   </hero-header>
 </template>
-<script setup>
+<script>
 import Search from './../../SubComponents/Search/index.vue'
 import CtaButton from './../../SubComponents/CtaButton/index.vue'
 import HeroHeader from './../../Global/HeroHeader/index.vue'
 import earthIcon from './../../../assets/icons/earth.svg?url'
 
-const props = defineProps({
-  contentParser: {
-    type: Function,
-    required: true,
+export default {
+  name: 'HomepageHeader',
+  components: {
+    Search,
+    CtaButton,
+    HeroHeader,
   },
-  heroHeader: {
-    type: Object,
-    required: true,
+  props: {
+    contentParser: {
+      type: Function,
+      required: true,
+    },
+    heroHeader: {
+      type: Object,
+      required: true,
+    },
+    headerLinks: { type: Array, required: true },
   },
-  fetchMenu: {
-    type: Function,
-    required: true,
-  },
-})
-
-const links = ref([])
 
-await useAsyncData('fetchData', async () => {
-  try {
-    await renderMenu()
-  } catch (err) {
-    console.log('🚀 ~ err:', err)
-  }
-})
-
-async function renderMenu() {
-  const menu = await props.fetchMenu()
-  links.value = (Array.isArray(menu) ? menu : []).map((item) => {
-    return {
-      text: item.title,
-      path: item.relative || item.absolute,
-    }
-  })
+  data: () => ({
+    earthIcon,
+  }),
 }
 </script>
 <style lang="scss" scoped>

package/src/components/Containers/HomepageHeaderNew/index.stories.js

@@ -2,29 +2,28 @@ import HomepageHeader from './index.vue'
 import { mockCarouselItems } from '../../../mock/carousel-items'
 
 
-const fetchMenu = () =>
-  Promise.resolve([
+const headerLinks = [
     {
-      title: 'Report an incident',
-      relative: '/report-incident'
+      text: 'Report an incident',
+      path: '/report-incident'
     },
     {
-      title: 'Report a case of COVID-19',
-      relative: '/report-confirmed-positive-case-covid-19'
+      text: 'Report a case of COVID-19',
+      path: '/report-confirmed-positive-case-covid-19'
     },
     {
-      title: 'Make a claim',
-      relative: '/before-claim'
+      text: 'Make a claim',
+      path: '/before-claim'
     },
     {
-      title: 'Apply for a licence',
-      relative: '/apply-for-licence'
+      text: 'Apply for a licence',
+      path: '/apply-for-licence'
     },
     {
-      title: 'Pay or renew your insurance',
-      relative: '/pay-or-renew-your-workcover-insurance-premium'
+      text: 'Pay or renew your insurance',
+      path: '/pay-or-renew-your-workcover-insurance-premium'
     }
-  ])
+  ]
 
   const contentParser = () => {
     return Promise.resolve({
@@ -53,10 +52,10 @@ export default {
     }
   },
   args: {
-    fetchMenu: fetchMenu,
     slideList: mockCarouselItems,
     isStorybook: true,
-    contentParser: contentParser
+    contentParser: contentParser,
+    headerLinks: headerLinks,
   }
 }
 

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

@@ -33,7 +33,7 @@
             >
               <div>
                 <cta-button
-                  v-for="(link, i) in links"
+                  v-for="(link, i) in headerLinks"
                   :key="i"
                   class="iebtn"
                   :url="link.path"
@@ -73,11 +73,7 @@ export default {
       type: Function,
       required: true,
     },
-    fetchMenu: {
-      type: Function,
-      required: true,
-    },
-    slideList: {
+   slideList: {
       type: Array,
       required: true,
       // default: mockCarouselItems
@@ -85,27 +81,16 @@ export default {
     isStorybook: {
       type: Boolean,
       default: false
-    }
-  },
-  async mounted() {
-    await this.renderMenu()
+    },
+    headerLinks: { 
+      type: Array, 
+      required: true 
+    },
   },
 
   data: () => ({
-    links: [],
     earthIcon,
-  }),
-  methods: {
-    async renderMenu() {
-      const menu = await this.fetchMenu()
-      this.links = (Array.isArray(menu) ? menu : []).map((item) => {
-        return {
-          text: item.title,
-          path: item.relative || item.absolute,
-        }
-      })
-    },
-  },
+  })
 }
 </script>
 

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

@@ -38,226 +38,250 @@
   </card-group>
 </template>
 
-<script setup>
+<script>
 import CardGroup from '../../SubComponents/CardGroup/index.vue'
 import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
 import Switcher from './switcher.vue'
 
-const nuxtApp = useNuxtApp()
-
-const hasMorePages = ref(false)
-const displayedCards = ref([])
-const loading = ref(true)
-const bundleCache = ref({})
-const displayLimit = ref(0)
-const allCards = ref(undefined)
-const filters = ref({
-  taxonomies: [],
-  selected: {},
-  availableBundles: [],
-})
-const props = defineProps({
-  background: {
-    type: String,
-    default: 'grey',
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  titleTag: {
-    type: String,
-    default: 'h2',
-  },
-  bundle: {
-    type: Array,
-    default: () => [''],
-  },
-  columns: {
-    type: Number,
-    default: 0,
-  },
-  initialDisplyLimit: {
-    type: Number,
-    default: 0,
-  },
-  fetchContent: {
-    type: Function,
-    required: true,
-  },
-  fetchFilters: {
-    type: Function,
-    required: false,
-    default: null,
-  },
-  enableBundleFilter: {
-    type: Boolean,
+export default {
+  name: 'BrowseContent',
+  components: {
+    CardGroup,
+    DirectoryFilters,
+    Switcher,
   },
-  getBundleAlias: {
-    type: Function,
-    required: false,
-    default: null,
-  },
-  showMore: {
-    type: Boolean,
+  props: {
+    background: {
+      type: String,
+      default: 'grey',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    titleTag: {
+      type: String,
+      default: 'h2',
+    },
+    bundle: {
+      type: Array,
+      default: () => [''],
+    },
+    columns: {
+      type: Number,
+      default: 0,
+    },
+    initialDisplyLimit: {
+      type: Number,
+      default: 0,
+    },
+    fetchContent: {
+      type: Function,
+      required: true,
+    },
+    fetchFilters: {
+      type: Function,
+      required: false,
+      default: null,
+    },
+    enableBundleFilter: {
+      type: Boolean,
+    },
+    getBundleAlias: {
+      type: Function,
+      required: false,
+      default: null,
+    },
+    showMore: {
+      type: Boolean,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
   },
-  type: {
-    type: String,
-    required: true,
+  // Temp use of mounted to replace fetch
+  async mounted() {
+    if (this.displayedCards.length === 0) {
+      await this.loadFiltersAndContent()
+    }
   },
-})
-
-await useAsyncData('fetchData', async () => {
-  try {
-    await Promise.all([
-      props.fetchFilters ? loadFilters() : Promise.resolve(),
-      loadMoreCards(true),
-    ])
-  } catch (err) {
-    console.log('🚀 ~ err:', err)
-  }
-})
-
-function initial() {
-  allCards.value = {
-    total: 0,
-    cards: [],
-  }
-  displayLimit.value = 0
-  hasMorePages.value = false
-  displayedCards.value = []
-  bundleCache.value = {}
-}
-async function fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
-  const shouldMakeNewFetchCall =
-    currentDisplayedCards.length + addMoreBy > allCards.cards.length
-  if (shouldMakeNewFetchCall) {
-    const cardBundles = await Promise.all(
-      bundles.map((bundle, index) => getBundle(bundle, addMoreBy, index)),
-    )
-    allCards = getShuffledCards(cardBundles)
-
-    if (
-      props.type === 'paragraph--cards_group_latest' ||
-      props.type === 'paragraph--browse_content'
-    ) {
-      allCards.cards = sortByDate(allCards.cards)
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   if (this.displayedCards.length === 0) {
+  //     await this.loadFiltersAndContent()
+  //   }
+  // },
+  data() {
+    return {
+      hasMorePages: false,
+      displayedCards: [],
+      loading: true,
+      bundleCache: {},
+      displayLimit: 0,
+      allCards: undefined,
+      filters: {
+        taxonomies: [],
+        selected: {},
+        availableBundles: [],
+      },
     }
-  }
-  return allCards
-}
+  },
+  fetchKey: 'ws-browscontent',
+  methods: {
+    async loadFiltersAndContent() {
+      await Promise.all([
+        this.fetchFilters ? this.loadFilters() : Promise.resolve(),
+        this.loadMoreCards(true),
+      ])
+    },
+    init() {
+      this.allCards = {
+        total: 0,
+        cards: [],
+      }
+      this.displayLimit = 0
+      this.hasMorePages = false
+      this.displayedCards = []
+      this.bundleCache = {}
+    },
+    async fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
+      const shouldMakeNewFetchCall =
+        currentDisplayedCards.length + addMoreBy > allCards.cards.length
+      if (shouldMakeNewFetchCall) {
+        const cardBundles = await Promise.all(
+          bundles.map((bundle, index) =>
+            this.getBundle(bundle, addMoreBy, index),
+          ),
+        )
+        allCards = this.getShuffledCards(cardBundles)
 
-async function loadMoreCards(init) {
-  const attrs = {
-    group: nuxtApp.$pageStore?.content?.title,
-  }
-  if (nuxtApp.$gtm && !init) {
-    nuxtApp.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
-  }
-  if (init) {
-    initial()
-  }
-  loading.value = true
-  const addMoreBy = props.initialDisplyLimit
-  displayLimit.value += addMoreBy
-  const bundles =
-    filters.value.availableBundles.length > 0
-      ? filters.value.availableBundles
-      : props.bundle
-  allCards.value = await fetchCards(
-    displayedCards.value,
-    allCards.value,
-    addMoreBy,
-    bundles,
-  )
-  hasMorePages.value = allCards.value.total > allCards.value.cards.length
-  displayedCards.value = allCards.value.cards.slice(0, displayLimit.value)
-  loading.value = false
-}
-async function getBundle(bundle, addMoreBy, index) {
-  let start
-  const rows = addMoreBy
-  const cache = (bundleCache.value[bundle] = bundleCache.value[bundle] || {
-    response: {
-      results: [],
-      numFound: 0,
+        if (
+          this.type === 'paragraph--cards_group_latest' ||
+          this.type === 'paragraph--browse_content'
+        ) {
+          allCards.cards = this.sortByDate(allCards.cards)
+        }
+      }
+      return allCards
     },
-    qs: {
-      start,
+    async loadMoreCards(init) {
+      const attrs = {
+        group: this.$pageStore?.content?.title,
+      }
+      if (this.$gtm && !init) {
+        this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
+      }
+      if (init) {
+        this.init()
+      }
+      this.loading = true
+      const addMoreBy = this.initialDisplyLimit
+      this.displayLimit += addMoreBy
+      const bundles =
+        this.filters.availableBundles.length > 0
+          ? this.filters.availableBundles
+          : this.bundle
+      this.allCards = await this.fetchCards(
+        this.displayedCards,
+        this.allCards,
+        addMoreBy,
+        bundles,
+      )
+      this.hasMorePages = this.allCards.total > this.allCards.cards.length
+      this.displayedCards = this.allCards.cards.slice(0, this.displayLimit)
+      this.loading = false
     },
-  })
-  if (cache.qs.start === undefined) {
-    start = 0
-  } else if (cache.response.numFound > cache.response.results.length) {
-    start = cache.response.results.length
-  } else {
-    return Promise.resolve(cache.response)
-  }
-  const qs = {
-    bundle,
-    rows,
-    start,
-  }
-  let response = await props.fetchContent(qs, filters.value.selected)
-  cache.qs.start = qs.start
-  cache.response.numFound = response.numFound
-  cache.response.results.push(...response.results)
-  return cache.response
-}
-function getShuffledCards(cardBundles) {
-  const shuffled = []
-  const bundleWithMostCards = cardBundles.reduce(
-    (a, b) => (a.results.length > b.results.length ? a : b),
-    { results: [] },
-  ).results.length
+    getBundle(bundle, addMoreBy, index) {
+      let start
+      const rows = addMoreBy
+      const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
+        response: {
+          results: [],
+          numFound: 0,
+        },
+        qs: {
+          start,
+        },
+      })
 
-  for (let i = 0; i < bundleWithMostCards; i++) {
-    cardBundles.forEach((bundle) => {
-      if (bundle.results[i]) {
-        shuffled.push(bundle.results[i])
+      if (cache.qs.start === undefined) {
+        start = 0
+      } else if (cache.response.numFound > cache.response.results.length) {
+        start = cache.response.results.length
+      } else {
+        return Promise.resolve(cache.response)
       }
-    })
-  }
 
-  const total = cardBundles.reduce((acc, bundle) => {
-    return acc + bundle.numFound
-  }, 0)
+      const qs = {
+        bundle,
+        rows,
+        start,
+      }
+      return this.fetchContent(qs, this.filters.selected, index).then(
+        (response) => {
+          cache.qs.start = qs.start
+          cache.response.numFound = response.numFound
+          cache.response.results.push(...response.results)
+          return cache.response
+        },
+      )
+    },
+    getShuffledCards(cardBundles) {
+      const shuffled = []
+      const bundleWithMostCards = cardBundles.reduce(
+        (a, b) => (a.results.length > b.results.length ? a : b),
+        { results: [] },
+      ).results.length
+
+      for (let i = 0; i < bundleWithMostCards; i++) {
+        cardBundles.forEach((bundle) => {
+          if (bundle.results[i]) {
+            shuffled.push(bundle.results[i])
+          }
+        })
+      }
 
-  return { cards: shuffled, total }
-}
-function loadFilters() {
-  return props.fetchFilters().then((taxonomies) => {
-    filters.value.taxonomies = taxonomies
+      const total = cardBundles.reduce((acc, bundle) => {
+        return acc + bundle.numFound
+      }, 0)
 
-    return Promise.resolve(taxonomies)
-  })
-}
-const onFilter = (fltrs) => {
-  bundleCache.value = {}
-  Object.keys(fltrs).forEach((filter) => {
-    filters.values.selected[filter] = fltrs[filter].map((obj) => obj.tid)
-  })
-  loadMoreCards(true)
-}
-const onSwitcher = (switchToBundle) => {
-  filters.value.selected = {}
-  filters.value.availableBundles.length = 0
-  if (switchToBundle) {
-    filters.value.availableBundles.push(switchToBundle)
-  }
-  loadMoreCards(true)
-}
-const reset = async () => {
-  bundleCache.value = {}
-  filters.value.selected = {}
-  filters.value.availableBundles.length = 0
-  await loadMoreCards(true)
-}
-function sortByDate(cards) {
-  const sorted = cards.sort((a, b) => {
-    return new Date(b.dateSort) - new Date(a.dateSort)
-  })
-  return sorted
+      return { cards: shuffled, total }
+    },
+    loadFilters() {
+      return this.fetchFilters().then((taxonomies) => {
+        this.filters.taxonomies = taxonomies
+        return Promise.resolve(taxonomies)
+      })
+    },
+    onFilter(filters) {
+      this.bundleCache = {}
+      Object.keys(filters).forEach((filter) => {
+        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid)
+      })
+      this.loadMoreCards(true)
+    },
+    onSwitcher(switchToBundle) {
+      this.filters.selected = {}
+      this.filters.availableBundles.length = 0
+      if (switchToBundle) {
+        this.filters.availableBundles.push(switchToBundle)
+      }
+      this.loadMoreCards(true)
+    },
+    async reset() {
+      this.bundleCache = {}
+      this.filters.selected = {}
+      this.filters.availableBundles.length = 0
+      await this.loadMoreCards(true)
+    },
+    sortByDate(cards) {
+      const sorted = cards.sort((a, b) => {
+        return new Date(b.dateSort) - new Date(a.dateSort)
+      })
+      return sorted
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>

package/src/components/Paragraphs/BrowseContent/setup.vue

@@ -0,0 +1,284 @@
+<template>
+  <card-group
+    :title="title"
+    :title-tag="titleTag"
+    :background="background"
+    :cards="displayedCards"
+    :loading="loading"
+    :columns="columns"
+    :show-load-more="showMore && hasMorePages"
+    :class="`wcl-browse-content card_group__card--col-${columns}`"
+    :card-browse-content="true"
+    @loadMore="() => loadMoreCards(false)"
+  >
+    <template
+      v-if="enableBundleFilter && bundle.length > 1"
+      v-slot:cardGroupFilter
+    >
+      <switcher
+        v-if="enableBundleFilter"
+        :options="bundle"
+        class="wcl-browse-content__switcher"
+        :get-option-alias="getBundleAlias"
+        @switched="onSwitcher"
+        @reset="onSwitcher"
+      />
+    </template>
+
+    <template v-if="filters.taxonomies.length > 0" v-slot:cardGroupPreContent>
+      <directory-filters
+        class="wcl-browse-content__filter"
+        :filters="filters"
+        :results="allCards.total"
+        :is-filtering="loading"
+        @onFilter="onFilter"
+        @onReset="reset"
+      />
+    </template>
+  </card-group>
+</template>
+
+<script setup>
+import CardGroup from '../../SubComponents/CardGroup/index.vue'
+import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
+import Switcher from './switcher.vue'
+
+const nuxtApp = useNuxtApp()
+
+const hasMorePages = ref(false)
+const displayedCards = ref([])
+const loading = ref(true)
+const bundleCache = ref({})
+const displayLimit = ref(0)
+const allCards = ref(undefined)
+const filters = ref({
+  taxonomies: [],
+  selected: {},
+  availableBundles: [],
+})
+const props = defineProps({
+  background: {
+    type: String,
+    default: 'grey',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  titleTag: {
+    type: String,
+    default: 'h2',
+  },
+  bundle: {
+    type: Array,
+    default: () => [''],
+  },
+  columns: {
+    type: Number,
+    default: 0,
+  },
+  initialDisplyLimit: {
+    type: Number,
+    default: 0,
+  },
+  fetchContent: {
+    type: Function,
+    required: true,
+  },
+  fetchFilters: {
+    type: Function,
+    required: false,
+    default: null,
+  },
+  enableBundleFilter: {
+    type: Boolean,
+  },
+  getBundleAlias: {
+    type: Function,
+    required: false,
+    default: null,
+  },
+  showMore: {
+    type: Boolean,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+})
+
+await useAsyncData('fetchData', async () => {
+  try {
+    await Promise.all([
+      props.fetchFilters ? loadFilters() : Promise.resolve(),
+      loadMoreCards(true),
+    ])
+  } catch (err) {
+    console.log('🚀 ~ err:', err)
+  }
+})
+
+function initial() {
+  allCards.value = {
+    total: 0,
+    cards: [],
+  }
+  displayLimit.value = 0
+  hasMorePages.value = false
+  displayedCards.value = []
+  bundleCache.value = {}
+}
+async function fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
+  const shouldMakeNewFetchCall =
+    currentDisplayedCards.length + addMoreBy > allCards.cards.length
+  if (shouldMakeNewFetchCall) {
+    const cardBundles = await Promise.all(
+      bundles.map((bundle, index) => getBundle(bundle, addMoreBy, index)),
+    )
+    allCards = getShuffledCards(cardBundles)
+
+    if (
+      props.type === 'paragraph--cards_group_latest' ||
+      props.type === 'paragraph--browse_content'
+    ) {
+      allCards.cards = sortByDate(allCards.cards)
+    }
+  }
+  return allCards
+}
+
+async function loadMoreCards(init) {
+  const attrs = {
+    group: nuxtApp.$pageStore?.content?.title,
+  }
+  if (nuxtApp.$gtm && !init) {
+    nuxtApp.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
+  }
+  if (init) {
+    initial()
+  }
+  loading.value = true
+  const addMoreBy = props.initialDisplyLimit
+  displayLimit.value += addMoreBy
+  const bundles =
+    filters.value.availableBundles.length > 0
+      ? filters.value.availableBundles
+      : props.bundle
+  allCards.value = await fetchCards(
+    displayedCards.value,
+    allCards.value,
+    addMoreBy,
+    bundles,
+  )
+  hasMorePages.value = allCards.value.total > allCards.value.cards.length
+  displayedCards.value = allCards.value.cards.slice(0, displayLimit.value)
+  loading.value = false
+}
+async function getBundle(bundle, addMoreBy, index) {
+  let start
+  const rows = addMoreBy
+  const cache = (bundleCache.value[bundle] = bundleCache.value[bundle] || {
+    response: {
+      results: [],
+      numFound: 0,
+    },
+    qs: {
+      start,
+    },
+  })
+  if (cache.qs.start === undefined) {
+    start = 0
+  } else if (cache.response.numFound > cache.response.results.length) {
+    start = cache.response.results.length
+  } else {
+    return Promise.resolve(cache.response)
+  }
+  const qs = {
+    bundle,
+    rows,
+    start,
+  }
+  let response = await props.fetchContent(qs, filters.value.selected)
+  cache.qs.start = qs.start
+  cache.response.numFound = response.numFound
+  cache.response.results.push(...response.results)
+  return cache.response
+}
+function getShuffledCards(cardBundles) {
+  const shuffled = []
+  const bundleWithMostCards = cardBundles.reduce(
+    (a, b) => (a.results.length > b.results.length ? a : b),
+    { results: [] },
+  ).results.length
+
+  for (let i = 0; i < bundleWithMostCards; i++) {
+    cardBundles.forEach((bundle) => {
+      if (bundle.results[i]) {
+        shuffled.push(bundle.results[i])
+      }
+    })
+  }
+
+  const total = cardBundles.reduce((acc, bundle) => {
+    return acc + bundle.numFound
+  }, 0)
+
+  return { cards: shuffled, total }
+}
+function loadFilters() {
+  return props.fetchFilters().then((taxonomies) => {
+    filters.value.taxonomies = taxonomies
+
+    return Promise.resolve(taxonomies)
+  })
+}
+const onFilter = (fltrs) => {
+  bundleCache.value = {}
+  Object.keys(fltrs).forEach((filter) => {
+    filters.values.selected[filter] = fltrs[filter].map((obj) => obj.tid)
+  })
+  loadMoreCards(true)
+}
+const onSwitcher = (switchToBundle) => {
+  filters.value.selected = {}
+  filters.value.availableBundles.length = 0
+  if (switchToBundle) {
+    filters.value.availableBundles.push(switchToBundle)
+  }
+  loadMoreCards(true)
+}
+const reset = async () => {
+  bundleCache.value = {}
+  filters.value.selected = {}
+  filters.value.availableBundles.length = 0
+  await loadMoreCards(true)
+}
+function sortByDate(cards) {
+  const sorted = cards.sort((a, b) => {
+    return new Date(b.dateSort) - new Date(a.dateSort)
+  })
+  return sorted
+}
+</script>
+<style lang="scss" scoped>
+.wcl-browse-content {
+  &__filter {
+    align-items: flex-end;
+    place-content: flex-end;
+  }
+
+  &.card_group__card--col-4 {
+    :deep(.card-grid__column .card-grid-item__description) {
+      display: none;
+    }
+  }
+
+  :deep(.card_group__card--blue .card_item__desc p) {
+    margin-top: 12px;
+  }
+
+  :deep(.card_group__card--red .card_item__desc p) {
+    margin-top: 12px;
+  }
+}
+</style>

package/src/components/Paragraphs/Directory/Records/HSCP/index.stories.js

@@ -4,12 +4,19 @@ const cpData =
     {
         title: 'Australian Nurses and Midwifery Federation - Victorian Branch',
         fulladdress: 'Level 8/535 Elizabeth St Melbourne VIC 3000',
-        workphone: '03 9275 9333',
-        tollfreephone: '1800 133 353',
-        email: 'ohs@anmfvic.asn.au',
+        workphone: '03 9555 9333',
+        tollfreephone: '1800 555 333',
+        email: 'ohs@test.com.au',
         website: 'https://www.anmfvic.asn.au/education-and-training/hsr-training/events',
+        contact1: 'Christina Groebl',
+        phone1: '03 9555 0222',
+        email1: 'cgroebl@test.com.au',
+        contact2: 'Joey Bradford',
+        phone2: '03 9555 0666',
+        email2: 'jbradford@test.com.au',
         courses: ['HSR Initial', 'HSR Refresher'],
-        // companyid: 'ACAR-A842BA'
+        trainingvenues: ['Melbourne CBD', 'All Regional Victoria - HQ in Melbourne'],
+        id: '1'
     }
 
 

package/src/components/Paragraphs/Directory/Records/HSCP/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="paragraph--directory__records--hscp">
     <container>
+      <!-- Main details -->
       <row>
         <column class="title">
-          <!-- <a target="_blank" :href="pageLink"> -->
+          <a href="javascript:void(0)" @click="this.visible = !this.visible">
             {{ item.title }}
-          <!-- </a> -->
+          </a>
         </column>
         <column class="address">
           <a target="_blank" :href="gMapLink">
@@ -13,25 +14,120 @@
           </a>
         </column>
         <column class="contact">
-          <div class="labl">Email</div>
+          <div class="label">Email</div>
           <a target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
             {{ item.email }}
           </a>
         </column>
         <column class="contact">
-          <div class="labl">Website</div>
+          <div class="label">Website</div>
           <a target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
             {{ item.website }}
           </a>
         </column>
         <column class="contact">
-          <div class="labl">Phone</div>
+          <div class="label">Phone</div>
           <a :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
             {{ item.tollfreephone || item.workphone }}
-          </a
-        >
+          </a>
+        </column>
+        <column class="hscp-caret" sm="1">
+          <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
+            <img
+              style="float: right;"
+              :src="CaretUp"
+              height="12"
+              width="17"
+              alt="Expand Detail">
+          </a>
+          <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
+            <img
+              style="float: right;"
+              :src="CaretDown"
+              height="12"
+              width="17"
+              alt="Expand Detail">
+          </a>
         </column>
       </row>
+      <!-- Additional Content -->
+      <template v-if="this.visible">
+        <row class="row-hscp-additional">
+          <column>
+            <h4>Contact Information</h4>
+          </column>
+        </row>
+        <row>
+          <column sm="3" class="label">
+            Contact
+          </column>
+          <column sm="3">
+            {{item.contact1}}
+          </column>
+          <column sm="3" class="label">
+            Contact
+          </column>
+          <column sm="3">
+            {{item.contact2}}
+          </column>
+        </row>
+        <row>
+          <column sm="3" class="label">
+            Phone
+          </column>
+          <column sm="3">
+            {{item.phone1}}
+          </column>
+          <column sm="3" class="label">
+            Phone
+          </column>
+          <column sm="3">
+            {{item.phone2}}
+          </column>
+        </row>
+        <row>
+          <column sm="3" class="label">
+            Email
+          </column>
+          <column sm="3">
+            {{item.email1}}
+          </column>
+          <column sm="3" class="label">
+            Email
+          </column>
+          <column sm="3">
+            {{item.email2}}
+          </column>
+        </row>
+        <row class="row-hscp-additional">
+          <column>
+            <h4>Training Venue Locations</h4>
+          </column>
+        </row>
+        <row>
+          <column>
+            <ul>
+              <li v-for="(venue) in item.trainingvenues" :key="venue.id">
+                {{venue}}
+              </li>
+            </ul> 
+          </column>
+        </row>
+        <row class="row-hscp-additional">
+          <column>
+            <h4>Training Courses</h4>
+          </column>
+        </row>
+        <row>
+          <column>
+            <ul>
+              <li v-for="(course) in item.courses" :key="course.id">
+                {{course}}
+              </li>
+            </ul> 
+          </column>
+        </row>
+      </template>
     </container>
   </div>
 </template>
@@ -39,6 +135,8 @@
 import Container from '../../../../Containers/Container/index.vue'
 import Row from '../../../../Containers/Row/index.vue'
 import Column from '../../../../Containers/Column/index.vue'
+import CaretUp from './../../../../../assets/icons/caret-up.svg?url'
+import CaretDown from './../../../../../assets/icons/caret-down.svg?url'
 
 export default {
   components: {
@@ -56,21 +154,43 @@ export default {
       default: false
     }
   },
-  computed: {
-    gMapLink() {
-      // return `https://google.com/maps?q=${this.item.title}%20${this.item.suburb},${this.item.postcode}`
-      return `https://google.com/maps?q=${this.item.title}%20${this.item.fulladdress}`
-    },
-   /*  pageLink() {
-        return `https://www1.worksafe.vic.gov.au/vwa/serviceproviderdirec.nsf/pages/${this.item.companyid}` 
-    } */
+  data() {
+    return {
+      visible: false,
+      CaretUp,
+      CaretDown,
+    }
   },
+  methods: {
+    handleClick(title) {
+      this.visible = !this.visible
+      if (this.$gtm) {
+        if (this.visible) {
+          this.$gtm.push({ event: 'custom.search.prs.open', title })
+        } else {
+          this.$gtm.push({
+            event: 'custom.search.prs.close',
+            title
+          })
+        }
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../styles.scss';
 
+.row-hscp-additional {
+  margin-top: 20px;
+}
+
+.hscp-caret {
+  justify-content: end;
+  align-content: end;
+  border-radius: 0px;
+}
 .paragraph--directory__records--hscp {
   
   a {
@@ -107,7 +227,7 @@ export default {
       color: inherit;
     }
   }
-  .labl {
+  .label {
       font-size: 15px;
       font-weight: bold;
   }

package/src/components/SubComponents/FormInstance/models/overrides/file.js

@@ -18,7 +18,7 @@ export class FileFormElement extends BaseFormElement {
         const blob = new Blob([byteArray], { type: 'text/plain' })
 
         return axios.post(
-          `https://content-dev-v2.api.worksafe.vic.gov.au/webform_rest/${this.webformElement['#webform']}/upload/file`,
+          `https://content-dev-v2.api.worksafe.vic.gov.au/webform_rest/${this.webformElement['#webform']}/upload/${this.webformElement['#webform_key']}`,
           blob,
           {
             headers: {
@@ -43,8 +43,6 @@ export class FileFormElement extends BaseFormElement {
           value: '',
         },
       ],
-      key: 'file',
-      type: 'file',
       input: true,
       fileKey: `files[${this.webformElement['#name']}]`,
     }

package/src/index.js

@@ -25,7 +25,7 @@ import RichText from './components/Paragraphs/RichText/index.vue'
 import TextMedia from './components/Paragraphs/TextMedia/index.vue'
 import Accordion from './components/Paragraphs/Accordion/index.vue'
 import TabbedCards from './components/Paragraphs/TabbedCards/index.vue'
-// import BrowseContent from './components/Paragraphs/BrowseContent/index.vue'
+import BrowseContent from './components/Paragraphs/BrowseContent/index.vue'
 import TaskFinder from './components/Paragraphs/TaskFinder/index.vue'
 import ListGroup from './components/Paragraphs/ListGroup/index.vue'
 import ScrollSpy from './components/Paragraphs/ScrollSpy/index.vue'
@@ -56,6 +56,9 @@ import Search from './components/SubComponents/Search/index.vue'
 import VideoThumbnail from './components/SubComponents/VideoThumbnail/index.vue'
 import ResourceGroup from './components/SubComponents/ResourceGroup/index.vue'
 
+// Temp Components for testing
+import BrowseContent2 from './components/Paragraphs/BrowseContent/setup.vue'
+
 // Export Global Components
 export {
   Container,
@@ -89,7 +92,7 @@ export {
   TextMedia,
   Accordion,
   TabbedCards,
-  // BrowseContent, moved to FE
+  BrowseContent,
   ListGroup,
   ScrollSpy,
   Directory,
@@ -128,3 +131,6 @@ export {
   DirectoryFilters,
   Switcher,
 }
+
+// Temp Components for testing
+export { BrowseContent2 }