@worksafevictoria/wcl7.5 1.1.0-beta.7 → 1.1.0-beta.71

package/src/components/Global/Strip/index.stories.js

@@ -9,23 +9,7 @@ const stripContentFull =
   export default {
     title: 'Global/Strip',
     component: Strip,
-    argTypes: {
-      stripHeading: {
-        control: 'text'
-      },
-      stripContent: {
-        control: 'text'
-      },
-      rtl: {
-        control: 'boolean'
-      },
-      type: {
-        control: 'text'
-      },
-      mini: {
-        control: 'boolean'
-      }
-    }
+    tags: ['autodocs'],
   }
   
   export const MiniAlertStrip = {

package/src/components/Global/Strip/index.vue

@@ -12,7 +12,7 @@
       @dismissed="handleDismissed()"
     >
       <div
-        :role="mini ? 'link' : false"
+        :role="mini ? 'link' : null"
         :class="type + '-strip__inner-wrap'"
         :tabindex="mini ? 0 : false"
         :style="mini ? 'cursor: pointer;' : false"
@@ -331,11 +331,15 @@ export default {
 
       a {
         color: $black;
-
-        &:focus {
+        text-decoration: none;
+      }
+      a:hover {   
           text-decoration: underline;
         }
-      }
+      a:focus {
+          text-decoration: underline;
+        }
+    
     }
     &__icon {
       &--caret {

package/src/components/Paragraphs/Accordion/AccordionItem/index.vue

@@ -6,7 +6,7 @@
       class="accordion-item"
       :class="{
         rtl: rtl,
-        '--with-pre-heading': preHeading && showPreHeading
+        '--with-pre-heading': preHeading && showPreHeading,
       }"
     >
       <a
@@ -33,7 +33,7 @@
           :icon-alt="'collapse'"
           :glyph="CaretUp"
           :class="{
-            '--with-pre-heading': preHeading && showPreHeading
+            '--with-pre-heading': preHeading && showPreHeading,
           }"
         />
         <icon
@@ -44,7 +44,7 @@
           :icon-alt="'expand'"
           :glyph="CaretDown"
           :class="{
-            '--with-pre-heading': preHeading && showPreHeading
+            '--with-pre-heading': preHeading && showPreHeading,
           }"
         />
       </a>
@@ -76,42 +76,42 @@ export default {
     RichText,
     Icon,
     BCard,
-    BCardBody
+    BCardBody,
   },
   props: {
     title: {
       type: String,
-      default: 'Item'
+      default: 'Item',
     },
     preHeading: {
       type: String,
-      default: 'PRE-HEADING'
+      default: 'PRE-HEADING',
     },
     content: {
       type: String,
-      default: null
+      default: null,
     },
     rtl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     open: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showPreHeading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     meta: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data: () => ({
     showAccordion: false,
     CaretDown,
-    CaretUp
+    CaretUp,
   }),
   mounted() {
     this.$nextTick(() => {
@@ -122,12 +122,16 @@ export default {
     toggleAccordion() {
       this.showAccordion = !this.showAccordion
       if (this.showAccordion) {
-        this.$root.$emit('accordionItemOpen', this.meta)
+        if (this.$bus) {
+          this.$bus.$emit('accordionItemOpen', this.meta) // this.$root.$emit('accordionItemOpen', this.meta)
+        }
       } else {
-        this.$root.$emit('accordionItemClose', this.meta)
+        if (this.$bus) {
+          this.$bus.$emit('accordionItemClose', this.meta) // this.$root.$emit('accordionItemClose', this.meta)
+        }
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

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

@@ -30,6 +30,7 @@ const mockAccordionItems = [
 export default {
   title: 'Paragraphs/Accordion',
   component: Accordion,
+  tags: ['autodocs'],
   argTypes: {
     titleTag: {
       control: 'select',

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

@@ -3,6 +3,7 @@ import Breakout from './index.vue'
 export default {
   title: 'Paragraphs/Breakout',
   component: Breakout,
+  tags: ['autodocs'],
   argTypes: {
     headingTag: {
       control: 'select',

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

@@ -5,6 +5,7 @@ const bundleContent = ['news', 'page']
 export default {
   title: 'Paragraphs/BrowseContent',
   component: { BrowseContent },
+  tags: ['autodocs'],
   argTypes: {
     background: {
       control: 'select',

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

@@ -8,6 +8,7 @@
     :columns="columns"
     :show-load-more="showMore && hasMorePages"
     :class="`wcl-browse-content card_group__card--col-${columns}`"
+    :card-browse-content="true"
     @loadMore="() => loadMoreCards(false)"
   >
     <template
@@ -47,63 +48,70 @@ export default {
   components: {
     CardGroup,
     DirectoryFilters,
-    Switcher
+    Switcher,
   },
   props: {
     background: {
       type: String,
-      default: 'grey'
+      default: 'grey',
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     titleTag: {
       type: String,
-      default: 'h2'
+      default: 'h2',
     },
     bundle: {
       type: Array,
-      default: () => ['']
+      default: () => [''],
     },
     columns: {
       type: Number,
-      default: 0
+      default: 0,
     },
     initialDisplyLimit: {
       type: Number,
-      default: 0
+      default: 0,
     },
     fetchContent: {
       type: Function,
-      required: true
+      required: true,
     },
     fetchFilters: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     enableBundleFilter: {
-      type: Boolean
+      type: Boolean,
     },
     getBundleAlias: {
       type: Function,
       required: false,
-      default: null
+      default: null,
     },
     showMore: {
-      type: Boolean
+      type: Boolean,
     },
     type: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-  async fetch() {
+  // Temp use of mounted to replace fetch
+  async mounted() {
     if (this.displayedCards.length === 0) {
       await this.loadFiltersAndContent()
     }
   },
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   if (this.displayedCards.length === 0) {
+  //     await this.loadFiltersAndContent()
+  //   }
+  // },
   data() {
     return {
       hasMorePages: false,
@@ -115,8 +123,8 @@ export default {
       filters: {
         taxonomies: [],
         selected: {},
-        availableBundles: []
-      }
+        availableBundles: [],
+      },
     }
   },
   fetchOnServer: true,
@@ -125,13 +133,13 @@ export default {
     async loadFiltersAndContent() {
       await Promise.all([
         this.fetchFilters ? this.loadFilters() : Promise.resolve(),
-        this.loadMoreCards(true)
+        this.loadMoreCards(true),
       ])
     },
     init() {
       this.allCards = {
         total: 0,
-        cards: []
+        cards: [],
       }
       this.displayLimit = 0
       this.hasMorePages = false
@@ -144,8 +152,8 @@ export default {
       if (shouldMakeNewFetchCall) {
         const cardBundles = await Promise.all(
           bundles.map((bundle, index) =>
-            this.getBundle(bundle, addMoreBy, index)
-          )
+            this.getBundle(bundle, addMoreBy, index),
+          ),
         )
         allCards = this.getShuffledCards(cardBundles)
 
@@ -160,7 +168,7 @@ export default {
     },
     async loadMoreCards(init) {
       const attrs = {
-        group: this.$store?.state?.page?.content?.title
+        group: this.$pageStore?.content?.title,
       }
       if (this.$gtm && !init) {
         this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
@@ -179,7 +187,7 @@ export default {
         this.displayedCards,
         this.allCards,
         addMoreBy,
-        bundles
+        bundles,
       )
       this.hasMorePages = this.allCards.total > this.allCards.cards.length
       this.displayedCards = this.allCards.cards.slice(0, this.displayLimit)
@@ -191,11 +199,11 @@ export default {
       const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
         response: {
           results: [],
-          numFound: 0
+          numFound: 0,
         },
         qs: {
-          start
-        }
+          start,
+        },
       })
 
       if (cache.qs.start === undefined) {
@@ -209,7 +217,7 @@ export default {
       const qs = {
         bundle,
         rows,
-        start
+        start,
       }
       return this.fetchContent(qs, this.filters.selected, index).then(
         (response) => {
@@ -217,14 +225,14 @@ export default {
           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: [] },
       ).results.length
 
       for (let i = 0; i < bundleWithMostCards; i++) {
@@ -273,8 +281,8 @@ export default {
         return new Date(b.dateSort) - new Date(a.dateSort)
       })
       return sorted
-    }
-  }
+    },
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -283,14 +291,17 @@ export default {
     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;
   }

package/src/components/Paragraphs/Calculator/Constants.js

@@ -29,9 +29,9 @@ export const barItems = [
 
 export const cardTitles = {
   weight: {
-    heading: 'Pick a object?',
+    heading: 'Pick an object?',
     subHeading:
-      '<p>Pick a object from the selections or if you know exactly how heavy the object that is being dropped is, enter the weight in input box below</p>',
+      '<p>Pick an object from the selections or if you know exactly how heavy the object that is being dropped is, enter the weight in input box below</p>',
     selectHeading: 'How heavy is the object?',
     selectSubHeading: 'Weight in kilograms, max is 500 kg'
   },

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

@@ -12,6 +12,7 @@ import {
 export default {
   title: 'Paragraphs/Calculator',
   component: Calculator,
+  tags: ['autodocs'],
   args: {
     items: barItems,
     titles: cardTitles,

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

@@ -30,9 +30,9 @@
   </div>
 </template>
 <script>
-import Container from '../../../../Containers/Container'
-import Row from '../../../../Containers/Row'
-import Column from '../../../../Containers/Column'
+import Container from '../../../../Containers/Container/index.vue'
+import Row from '../../../../Containers/Row/index.vue'
+import Column from '../../../../Containers/Column/index.vue'
 import { format } from 'date-fns'
 
 export default {

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

@@ -0,0 +1,32 @@
+import hscpRecord from './index.vue'
+
+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',
+        website: 'https://www.anmfvic.asn.au/education-and-training/hsr-training/events',
+        courses: ['HSR Initial', 'HSR Refresher'],
+        // companyid: 'ACAR-A842BA'
+    }
+
+
+export default {
+    title: 'Paragraphs/Directory/Record',
+    component: hscpRecord,
+    tags: ['autodocs'],
+    argTypes: {
+        location: {
+            control: ['object', 'boolean'],
+            table: { disable: true }
+          },
+    }
+}
+
+export const CourseProvider = {}
+
+CourseProvider.args = {
+    item: cpData,    
+}

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

@@ -0,0 +1,213 @@
+<template>
+  <div class="paragraph--directory__records--hscp">
+    <container>
+      <row>
+        <column class="title">
+          <!-- <a target="_blank" :href="pageLink"> -->
+            {{ item.title }}
+          <!-- </a> -->
+        </column>
+        <column class="address">
+          <a target="_blank" :href="gMapLink">
+            {{ item.fulladdress }}
+          </a>
+        </column>
+        <column class="contact">
+          <div class="labl">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>
+          <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>
+          <a :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
+            {{ item.tollfreephone || item.workphone }}
+          </a
+        >
+        </column>
+      </row>
+    </container>
+  </div>
+</template>
+<script>
+import Container from '../../../../Containers/Container/index.vue'
+import Row from '../../../../Containers/Row/index.vue'
+import Column from '../../../../Containers/Column/index.vue'
+
+export default {
+  components: {
+    Container,
+    Row,
+    Column
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    location: {
+      type: [Object, Boolean],
+      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}` 
+    } */
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../styles.scss';
+
+.paragraph--directory__records--hscp {
+  
+  a {
+        color: $black;
+        text-decoration: none;
+      }
+      a:hover {   
+          text-decoration: underline;
+        }
+      a:focus {
+          text-decoration: underline;
+        }
+
+  .name {
+        font-size: 1rem;
+        color: $black;
+        font-weight: 700;
+  }
+  .address {
+    font-size: 15px;
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+    a:hover {   
+          text-decoration: underline;
+        }
+      a:focus {
+          text-decoration: underline;
+        }
+  }
+  .phone {
+    a {
+      color: inherit;
+    }
+  }
+  .labl {
+      font-size: 15px;
+      font-weight: bold;
+  }
+}
+.paragraph--directory.hscp-filters {
+  .search {
+    color: $black;
+    border: 1px solid $gray;
+    border-radius: 8px;
+    padding: 10px 12px;
+    height: 42px;
+    background-repeat: no-repeat;
+    background-position: 96% 12px;
+    margin-bottom: 16px;
+    transition: none;
+  }
+  select {
+    -moz-appearance: none; /* Firefox */
+    -webkit-appearance: none; /* Safari and Chrome */
+    appearance: none;
+    height: 42px;
+    border-radius: 8px;
+    padding: 10px 12px;
+    width: 100%;
+    border: 1px solid $gray;
+    background-image: url('@worksafevictoria/wcl7.5/src/assets/icons/caret-down.svg');
+    background-position: 95% 50%;
+    background-repeat: no-repeat;
+    text-transform: capitalise;
+  }
+  .grid-column {
+    display: inline-block;
+    width: 25%;
+
+    @media (max-width: 767px) {
+      width: 50%;
+    }
+
+    @media (max-width: 539px) {
+      display: block;
+      width: 100%;
+      float: none;
+      margin-bottom: 16px;
+    }
+  }
+  .right {
+    float: right;
+    position: relative;
+  }
+
+  ul.records {
+    padding: 0;
+    margin: 0;
+
+    li {
+      text-align: left;
+      display: block;
+      width: 100%;
+      background: $white;
+      color: $black;
+      margin-bottom: 32px;
+      border: 1px solid $gray;
+      border-radius: 12px;
+      font-size: 14px;
+      padding: 16px;
+
+      .name {
+        font-size: 1rem;
+        color: $black;
+        font-weight: 700;
+      }
+      .address {
+        font-size: 15px;
+        a {
+          color: inherit;
+        }
+      }
+      .phone {
+        a {
+          color: inherit;
+        }
+        .labl {
+          font-size: 15px;
+          font-weight: bold;
+        }
+      }
+
+      @media (max-width: 767px) {
+        .name,
+        .address,
+        .phone {
+          margin-bottom: 5px;
+          width: 100%;
+        }
+      }
+      .pagination-container {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>
+