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

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

@@ -13,14 +13,14 @@
         <column class="contact">
           <div>Phone</div>
           <a :href="`tel:${item.contact.mobile || item.contact.phone}`"
-            ><span class="sr-only">Phone number</span
+            ><span class="sr-only visually-hidden">Phone number</span
             >{{ item.contact.mobile || item.contact.phone }}</a
           >
         </column>
         <column v-if="baseLocation && recordLocation" class="distance">
           <div>Distance</div>
           <div tabindex="0">
-            <span class="sr-only">Distance from your specified location</span>
+            <span class="sr-only visually-hidden">Distance from your specified location</span>
             {{
               calcDistance(
                 baseLocation.lat,
@@ -38,9 +38,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 { calcDistance } from './distance'
 
 export default {

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

@@ -19,8 +19,8 @@
   </div>
 </template>
 <script>
-import RecordDetails from './recordDetails'
-import RecordContent from './recordContent'
+import RecordDetails from './recordDetails.vue'
+import RecordContent from './recordContent.vue'
 export default {
   components: {
     RecordDetails,

package/src/components/Paragraphs/Directory/Records/PRS/recordContent.vue

@@ -32,9 +32,9 @@
   </container>
 </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/PRS/recordDetails.vue

@@ -23,9 +23,9 @@
   </container>
 </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/index.vue

@@ -2,26 +2,24 @@
   <div v-if="items.length" class="paragraph--directory__records">
     <template v-for="(item, index) in flatRecords">
       <prs-record v-if="item.type === 'prs'" :key="index" :item="item" />
-      <isp-record
-        v-if="item.type === 'isp'"
-        :key="index"
-        :item="item"
-        :location="baseLocation"
-      />
+      <isp-record v-if="item.type === 'isp'" :key="index" :item="item" :location="baseLocation" />
+      <hscp-record v-if="item.type === 'hscp'" :key="index" :item="item" />
       <cj-record v-if="item.type === 'cj'" :key="index" :item="item" />
     </template>
   </div>
 </template>
 <script>
-import PrsRecord from './PRS'
-import IspRecord from './ISP'
-import CjRecord from './CJ'
+import PrsRecord from './PRS/index.vue'
+import IspRecord from './ISP/index.vue'
+import CjRecord from './CJ/index.vue'
+import HscpRecord from './HSCP/index.vue'
 
 export default {
   components: {
     PrsRecord,
     IspRecord,
-    CjRecord
+    CjRecord,
+    HscpRecord
   },
   props: {
     items: {
@@ -142,6 +140,29 @@ export default {
             }
           })
         }
+        if (record.record_type === 'hscp') {
+          let {
+            record_id,
+            data: {
+              attributes: {
+                title,
+                hscp: { fulladdress, workphone, tollfreephone, email, website, courses, companyid } = {}
+              } = {}
+            } = {}
+          } = record
+          flatRecords.push({
+            id: record_id,
+            type: 'hscp',
+            title,
+            fulladdress,
+            workphone,
+            tollfreephone,
+            email,
+            website,
+            courses,
+            companyid
+          })
+        }
         if (record.record_type === 'cj') {
           let {
             record_id,

package/src/components/Paragraphs/Directory/Records/styles.scss

@@ -29,6 +29,7 @@
   font-size: 16px;
 
   &--isp,
+  &--hscp,
   &--cj {
     @include defaultStyle();
     @include itemStyle();

package/src/components/Paragraphs/Directory/constants.js

@@ -22,6 +22,29 @@ export const DIR_CONFIG = {
       }
     ]
   },
+  hscp: {
+    taxonomies: [
+      {
+        name: 'Service Type',
+        id: 'hscp_services',
+        record_id: 'record_hscp_services'
+      }
+    ],
+    sorting: [
+      {
+        label: 'Name A-Z',
+        field: 'record_title',
+        order: 'asc',
+        type: 'az'
+      },
+      {
+        label: 'Name Z-A',
+        field: 'record_title',
+        order: 'desc',
+        type: 'az'
+      }
+    ]
+  },
   prs: {
     taxonomies: [
       {
@@ -39,11 +62,6 @@ export const DIR_CONFIG = {
         id: 'court',
         record_id: 'record_prs_court'
       }
-      // {
-      //   name: 'Coram',
-      //   id: 'coram',
-      //   taxonomy_only: true
-      // }
     ],
     sorting: [
       {

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

@@ -26,9 +26,9 @@
       <div v-else class="paragraph--directory__loading-container">
         <loading />
       </div>
-      <div v-if="showPagination" align="center">
+      <div v-if="showPagination" align-items="center">
         <pagination
-          align="center"
+          align-items="center"
           aria-label="Page navigation to load more records"
           :rows="qs.rows"
           :offset="qs.start"
@@ -39,7 +39,7 @@
           @pageClicked="loadByPageNumber($event)"
         />
       </div>
-      <div v-if="noResultsFound" align="center">
+      <div v-if="noResultsFound" align-items="center">
         <div>
           <p>No records found, please try a different search.</p>
         </div>
@@ -49,10 +49,10 @@
 </template>
 <script>
 import { DIR_CONFIG } from './constants'
-import DirectoryFilters from '../../Global/DirectoryFilters'
-import Records from './Records/'
-import Pagination from '../../SubComponents/Pagination'
-import Loading from '../../SubComponents/Loading'
+import DirectoryFilters from '../../Global/DirectoryFilters/index.vue'
+import Records from './Records/index.vue'
+import Pagination from '../../SubComponents/Pagination/index.vue'
+import Loading from '../../SubComponents/Loading/index.vue'
 import SectionGroup from '../../Containers/SectionGroup/index.vue'
 
 export default {
@@ -62,30 +62,40 @@ export default {
     Records,
     Pagination,
     Loading,
-    SectionGroup
+    SectionGroup,
   },
   props: {
     options: {
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     fetchFilters: {
       type: Function,
-      required: true
+      required: true,
     },
     fetchRecords: {
       type: Function,
-      required: true
-    }
+      required: true,
+    },
   },
-  async fetch() {
+  // Temp use of mounted to replace fetch
+  async mounted() {
     await this.loadFilters(
-      this.DIR_CONFIG[this.options.field_directory_type].taxonomies
+      this.DIR_CONFIG[this.options.field_directory_type].taxonomies,
     )
     this.loadSortOptions(
-      this.DIR_CONFIG[this.options.field_directory_type].sorting
+      this.DIR_CONFIG[this.options.field_directory_type].sorting,
     )
   },
+  // TODO useAsyncData <script setup>
+  // async fetch() {
+  //   await this.loadFilters(
+  //     this.DIR_CONFIG[this.options.field_directory_type].taxonomies
+  //   )
+  //   this.loadSortOptions(
+  //     this.DIR_CONFIG[this.options.field_directory_type].sorting
+  //   )
+  // },
   fetchOnServer: true,
   fetchKey: 'ws-directory',
   data() {
@@ -93,25 +103,25 @@ export default {
       DIR_CONFIG,
       filters: {
         taxonomies: [],
-        sorting: []
+        sorting: [],
       },
       selectedFilters: {},
       qs: {
         record_type: this.options.field_directory_type,
         rows: this.options.field_directory_rows,
         start: 0,
-        ...this.defaultSortOrderOption(this.options.field_directory_type)
+        ...this.defaultSortOrderOption(this.options.field_directory_type),
       },
       records: [],
       total: 0,
-      loading: true
+      loading: true,
     }
   },
   computed: {
     apiUrl() {
       return Object.keys(this.qs)
         .map(
-          (k) => `${encodeURIComponent(k)}=${encodeURIComponent(this.qs[k])}`
+          (k) => `${encodeURIComponent(k)}=${encodeURIComponent(this.qs[k])}`,
         )
         .join('&')
     },
@@ -137,7 +147,7 @@ export default {
       return this.qs.lat && this.qs.lon
         ? { lat: this.qs.lat, lng: this.qs.lon }
         : false
-    }
+    },
   },
   watch: {
     apiUrl: {
@@ -145,7 +155,7 @@ export default {
       deep: false,
       handler() {
         this.getData()
-      }
+      },
     },
     selectedFilters: {
       immediate: false,
@@ -171,7 +181,7 @@ export default {
           this.qs.order = this.selectedFilters.sorting.order.value
         } else {
           const sortOrderDefaults = this.defaultSortOrderOption(
-            this.qs.record_type
+            this.qs.record_type,
           )
           this.qs.sort = sortOrderDefaults.sort
           this.qs.order = sortOrderDefaults.order
@@ -204,8 +214,8 @@ export default {
           this.$delete(this.qs, 'lat')
           this.$delete(this.qs, 'lon')
         }
-      }
-    }
+      },
+    },
   },
   methods: {
     async getData() {
@@ -223,25 +233,25 @@ export default {
           const taxonomies = await this.fetchFilters(
             taxonomy.id,
             taxonomy.record_id,
-            taxonomy.name
+            taxonomy.name,
           )
           this.filters.taxonomies.push(taxonomies)
           return Promise.resolve(taxonomies)
-        })
+        }),
       )
     },
     loadSortOptions(sortingList) {
       let opts = {
         name: 'order',
         title: 'Sort by',
-        terms: []
+        terms: [],
       }
       sortingList.forEach((sortOption) => {
         opts.terms.push({
           title: sortOption.label,
           value: sortOption.order,
           field: sortOption.field,
-          parent: sortOption.type
+          parent: sortOption.type,
         })
       })
       this.filters.sorting.push(opts)
@@ -252,7 +262,7 @@ export default {
       } else {
         return {
           sort: 'record_title',
-          order: 'asc'
+          order: 'asc',
         }
       }
     },
@@ -301,14 +311,14 @@ export default {
 
         window.scrollTo({
           top,
-          behavior: 'smooth'
+          behavior: 'smooth',
         })
       }
     },
     resetSortLabels() {
       this.filters.sorting = []
       this.loadSortOptions(
-        this.DIR_CONFIG[this.options.field_directory_type].sorting
+        this.DIR_CONFIG[this.options.field_directory_type].sorting,
       )
     },
     resetSearchFilters() {
@@ -317,15 +327,16 @@ export default {
         record_type: this.options.field_directory_type,
         rows: this.options.field_directory_rows,
         start: 0,
-        ...this.defaultSortOrderOption(this.options.field_directory_type)
+        ...this.defaultSortOrderOption(this.options.field_directory_type),
       }
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../../includes/scss/all';
+
 .paragraph--directory {
   &__loading-container {
     min-height: 250px;

package/src/components/Paragraphs/ListGroup/Link/list-link.stories.js

@@ -4,68 +4,64 @@ import { storyData, storyDataAr } from './../Constants'
 export default {
   title: 'Paragraphs/ListGroup',
   component: ListGroup,
+  tags: ['autodocs'],
   argTypes: {
-    darkBackground: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    items: {
-      control: 'object',
-      defaultValue: storyData.links
-    },
-    rtlItems: {
-      control: 'object',
-      defaultValue: storyDataAr.links
-    },
-    rtl: {
-      control: 'boolean',
-      defaultValue: false
-    },
-    titleTag: {
-      control: 'text',
-      defaultValue: 'h3'
-    },
-    showListItemNavigationArrow: {
-      control: 'boolean',
-      defaultValue: true
+    list: {
+      table: {
+        disable: true
+      }
     },
-    showLargeSpacing: {
-      control: 'boolean',
-      defaultValue: false
+    title: {
+      table: {
+        disable: true
+      }
     },
-    list: {
+    role: {
       table: {
         disable: true
       }
     },
-    showListLink: {
-      control: 'boolean',
-      defaultValue: true
+    subHeading: {
+      table: {
+        disable: true
+      }
     },
-    title: {
+    footerHeading: {
       table: {
         disable: true
       }
     }
+  },
+  args: {
+    darkBackground: false,
+    items: storyData.links,
+    rtlItems: storyDataAr.links,
+    rtl: false,
+    titleTag: 'h3',
+    showListItemNavigationArrow: true,
+    showLargeSpacing: false,
+    showListLink: true
   }
 }
 
-const Template = (args, { argTypes }) => ({
+const Template = (args) => ({
   components: { ListGroup },
+  setup() {
+    return { args };
+  },
   data() {
     return {
       storyData,
       storyDataAr
     }
   },
-  props: Object.keys(argTypes),
   template: `<list-group
-    v-bind="$props"
-    :list="rtl ? rtlItems : items"
-    :title="(rtl ? storyDataAr.title : storyData.title)"
-    :sub-heading="(rtl ? storyDataAr.subHeading : storyData.subHeading)"
-    :footer-heading="(rtl ? storyDataAr.footer : storyDataAr.footer)"
-    :show-list-link="showListLink"  />`
+    v-bind="args"
+    :list="args.rtl ? args.rtlItems : args.items"
+    :title="(args.rtl ? storyDataAr.title : storyData.title)"
+    :sub-heading="(args.rtl ? storyDataAr.subHeading : storyData.subHeading)"
+    :footer-heading="(args.rtl ? storyDataAr.footer : storyDataAr.footer)"
+    :show-list-link="args.showListLink" />`
 })
 
 export const Link = Template.bind({})