@worksafevictoria/wcl7.5 1.1.0-beta.110 → 1.1.0-beta.112

package/package.json

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

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

@@ -4,18 +4,12 @@
     <b-card
       :id="cardId"
       no-body
-      :tag="
-        buttonRole === 'radio' ? 'div' : isSelectable ? 'button' : 'article'
-      "
+      :tag="buttonRole === 'radio' ? 'div' : isSelectable ? 'button' : 'article'"
       class="card-grid-item__card"
       :class="cardClass"
       :role="buttonRole"
       :aria-checked="
-        buttonRole === 'radio'
-          ? isSelectable && selected
-            ? 'true'
-            : 'false'
-          : false
+        buttonRole === 'radio' ? (isSelectable && selected ? 'true' : 'false') : false
       "
       :aria-expanded="
         isExpandable ? (isSelectable && selected ? 'true' : 'false') : false
@@ -30,10 +24,8 @@
         :class="[
           {
             rtl: rtl,
-            [`card-grid-item__control-radio`]:
-              isSelectable && buttonRole === 'radio',
-            [`card-grid-item__selected-radio`]:
-              selected && buttonRole === 'radio',
+            [`card-grid-item__control-radio`]: isSelectable && buttonRole === 'radio',
+            [`card-grid-item__selected-radio`]: selected && buttonRole === 'radio',
           },
         ]"
       >
@@ -101,11 +93,7 @@
             >
             </card-grid-item-icon>
           </b-card-title>
-          <card-grid-item-caret
-            v-if="caretPosition === 'top'"
-            :caret="caret"
-            :rtl="rtl"
-          >
+          <card-grid-item-caret v-if="caretPosition === 'top'" :caret="caret" :rtl="rtl">
           </card-grid-item-caret>
 
           <card-grid-item-icon
@@ -131,13 +119,14 @@
         </div>
         <b-card-text
           v-if="$slots.cardDescription || description"
-          text-tag="div"
+          tag="div"
           class="card-grid-item__body"
           :class="{
             rtl: rtl,
           }"
         >
           <div
+            v-if="$slots.cardDescription || description"
             class="card-grid-item__description"
             :class="{
               [descriptionClass]: !!descriptionClass,
@@ -170,11 +159,7 @@
           </div>
         </b-card-text>
       </b-card-body>
-      <div
-        v-if="$slots.cardFooter"
-        class="card-grid-item__footer"
-        :class="{ rtl: rtl }"
-      >
+      <div v-if="$slots.cardFooter" class="card-grid-item__footer" :class="{ rtl: rtl }">
         <slot name="cardFooter"></slot>
       </div>
       <div
@@ -193,15 +178,15 @@
 </template>
 
 <script>
-import CardGridItemIcon from './card-grid-item-icon.vue'
-import CardGridItemCaret from './card-grid-item-caret.vue'
-import RichText from '../../Paragraphs/RichText/index.vue'
-import { parseISO } from 'date-fns'
-import { isAbsoluteUrl, isGovSite } from '../../../../lib/utility'
-import { BCard, BCardBody, BCardTitle, BCardText } from 'bootstrap-vue-next'
+import CardGridItemIcon from "./card-grid-item-icon.vue";
+import CardGridItemCaret from "./card-grid-item-caret.vue";
+import RichText from "../../Paragraphs/RichText/index.vue";
+import { parseISO } from "date-fns";
+import { isAbsoluteUrl, isGovSite } from "../../../../lib/utility";
+import { BCard, BCardBody, BCardTitle, BCardText } from "bootstrap-vue-next";
 
 export default {
-  name: 'CardGridItem',
+  name: "CardGridItem",
   components: {
     CardGridItemIcon,
     CardGridItemCaret,
@@ -214,9 +199,8 @@ export default {
   props: {
     backgroundVariant: {
       type: String,
-      default: 'white',
-      validator: (value) =>
-        ['white', 'transparent', 'light'].indexOf(value) >= 0,
+      default: "white",
+      validator: (value) => ["white", "transparent", "light"].indexOf(value) >= 0,
     },
     imageSrc: {
       type: String,
@@ -235,7 +219,7 @@ export default {
     },
     descriptionClass: {
       type: String,
-      default: '',
+      default: "",
     },
     glyphSrc: {
       type: [Object, String],
@@ -247,21 +231,16 @@ export default {
     },
     iconSize: {
       type: String,
-      default: 'small',
-      validator: (value) =>
-        ['xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
+      default: "small",
+      validator: (value) => ["xsmall", "small", "medium", "large"].indexOf(value) >= 0,
     },
     iconPosition: {
       type: String,
-      default: 'top',
+      default: "top",
       validator: (value) =>
-        [
-          'top',
-          'top-left',
-          'top-right',
-          'after-title',
-          'before-description',
-        ].indexOf(value) >= 0,
+        ["top", "top-left", "top-right", "after-title", "before-description"].indexOf(
+          value
+        ) >= 0,
     },
     iconIsBordered: {
       type: Boolean,
@@ -276,14 +255,13 @@ export default {
     },
     invertOnSelectBackground: {
       type: String,
-      default: 'none',
-      validator: (value) => ['none', 'yellow', 'black'].indexOf(value) >= 0,
+      default: "none",
+      validator: (value) => ["none", "yellow", "black"].indexOf(value) >= 0,
     },
     borderOnSelectBackground: {
       type: String,
-      default: 'none',
-      validator: (value) =>
-        ['none', 'yellow', 'black', 'blue'].indexOf(value) >= 0,
+      default: "none",
+      validator: (value) => ["none", "yellow", "black", "blue"].indexOf(value) >= 0,
     },
     rtl: {
       type: Boolean,
@@ -291,49 +269,47 @@ export default {
     },
     headerSize: {
       type: String,
-      default: 'custom',
+      default: "custom",
       validator: (value) =>
-        ['medium', 'large', 'extra-large', 'extra-2x-large', 'custom'].indexOf(
-          value,
-        ) >= 0,
+        ["medium", "large", "extra-large", "extra-2x-large", "custom"].indexOf(value) >=
+        0,
     },
     headerTextAlign: {
       type: String,
-      default: 'left',
-      validator: (value) => ['left', 'center', 'right'].indexOf(value) >= 0,
+      default: "left",
+      validator: (value) => ["left", "center", "right"].indexOf(value) >= 0,
     },
     headerTag: {
       type: String,
       required: false,
-      default: 'h3',
+      default: "h3",
     },
     caret: {
       type: String,
       default: undefined,
       validator: (value) =>
-        ['down', 'up', 'right', 'left', 'external'].indexOf(value) >= 0,
+        ["down", "up", "right", "left", "external"].indexOf(value) >= 0,
     },
     caretPosition: {
       type: String,
-      default: 'top',
-      validator: (value) =>
-        ['top', 'bottom', 'after-title'].indexOf(value) >= 0,
+      default: "top",
+      validator: (value) => ["top", "bottom", "after-title"].indexOf(value) >= 0,
     },
     cardPadding: {
       type: String,
-      default: 'none',
+      default: "none",
       validator: (value) =>
-        ['none', 'xsmall', 'small', 'medium', 'large'].indexOf(value) >= 0,
+        ["none", "xsmall", "small", "medium", "large"].indexOf(value) >= 0,
     },
     borderType: {
       type: String,
-      default: 'none',
+      default: "none",
       validator: (value) =>
-        ['none', 'thin', 'shadow', 'thick', 'dark'].indexOf(value) >= 0,
+        ["none", "thin", "shadow", "thick", "dark"].indexOf(value) >= 0,
     },
     cardTextAlign: {
       type: String,
-      default: 'left',
+      default: "left",
     },
     disableSelect: {
       type: Boolean,
@@ -341,11 +317,11 @@ export default {
     },
     pillText: {
       type: String,
-      default: '',
+      default: "",
     },
     buttonRole: {
       type: String,
-      default: 'link',
+      default: "link",
     },
     isSelected: {
       type: Boolean,
@@ -383,20 +359,18 @@ export default {
       return {
         [`card-grid-item__card--hasIcon`]:
           (this.imageSrc || this.glyphSrc) &&
-          (this.iconPosition === 'top' || this.iconPosition === 'top-left'),
+          (this.iconPosition === "top" || this.iconPosition === "top-left"),
         [`card-grid-item__card--selectable`]: this.isSelectable,
-        [`card-grid-item__card--selected-inverted--` +
-        this.invertOnSelectBackground]:
+        [`card-grid-item__card--selected-inverted--` + this.invertOnSelectBackground]:
           this.selected &&
           this.invertOnSelectBackground &&
-          this.invertOnSelectBackground !== 'none',
-        [`card-grid-item__card--selected-border--` +
-        this.borderOnSelectBackground]:
+          this.invertOnSelectBackground !== "none",
+        [`card-grid-item__card--selected-border--` + this.borderOnSelectBackground]:
           this.selected &&
           this.borderOnSelectBackground &&
-          this.borderOnSelectBackground !== 'none',
+          this.borderOnSelectBackground !== "none",
         [`card-grid-item__card--selected-focus`]:
-          this.selected && this.buttonRole === 'radio',
+          this.selected && this.buttonRole === "radio",
         [`card-grid-item__card--selected-link`]:
           this.selected && !this.invertOnSelectBackground,
         [`card-grid-item__card--padding-${this.cardPadding}`]: true,
@@ -404,89 +378,87 @@ export default {
         [`card-grid-item__card--bg-${this.backgroundVariant}`]: true,
         [`card-grid-item__card--select-${this.buttonRole}`]: true,
         [`card-grid-item__card--align-${this.cardTextAlign}`]: true,
-      }
+      };
     },
     urlHostname() {
-      return window.location.protocol + '//' + window.location.host
+      return window.location.protocol + "//" + window.location.host;
     },
   },
   mounted() {
-    this.selected = this.isSelected
+    this.selected = this.isSelected;
   },
   created() {
-    this.parentGrid = this.getParentGridItem()
+    this.parentGrid = this.getParentGridItem();
     if (this.parentGrid) {
-      this.parentGrid.registerChild(this)
-      this.setCardId()
-      this.isSelectable = !this.disableSelect && this.parentGrid.isSelectable
+      this.parentGrid.registerChild(this);
+      this.setCardId();
+      this.isSelectable = !this.disableSelect && this.parentGrid.isSelectable;
     }
   },
   beforeDestroy() {
     if (this.parentGrid) {
-      this.parentGrid.deregisterChild(this)
+      this.parentGrid.deregisterChild(this);
     }
   },
   methods: {
     cardClicked(ev) {
       if (this.isSelectable) {
-        this.parentGrid.cardSelected(this, ev)
+        this.parentGrid.cardSelected(this, ev);
       }
 
       if (this.$gtm) {
-        this.fireGTM()
+        this.fireGTM();
       }
     },
     cardTitleClicked(ev) {
       if (this.isCardTitleSelectable) {
-        this.parentGrid.cardTitleSelected(this, ev)
+        this.parentGrid.cardTitleSelected(this, ev);
       }
     },
     getParentGridItem() {
-      let counter = 0
-      const maxParentDepth = 10
-      let currentParent = this.$parent
-      let gridParent
+      let counter = 0;
+      const maxParentDepth = 10;
+      let currentParent = this.$parent;
+      let gridParent;
       while (maxParentDepth > counter) {
-        counter += 1
+        counter += 1;
         if (currentParent && Array.isArray(currentParent.cards)) {
-          gridParent = currentParent
-          break
+          gridParent = currentParent;
+          break;
         } else if (currentParent) {
-          currentParent = currentParent.$parent
+          currentParent = currentParent.$parent;
         }
       }
-      return gridParent
+      return gridParent;
     },
     setCardId() {
       this.cardId = this.parentGrid.cardIdPrefix
-        ? this.parentGrid.cardIdPrefix +
-          '-' +
-          this.parentGrid.getChildIndex(this)
-        : undefined
+        ? this.parentGrid.cardIdPrefix + "-" + this.parentGrid.getChildIndex(this)
+        : undefined;
     },
     setGridMetaData(gridColumnSize, isMobileView, isTabletView) {
-      this.gridColumnSize = gridColumnSize
-      this.isMobileView = isMobileView
-      this.isTabletView = isTabletView
+      this.gridColumnSize = gridColumnSize;
+      this.isMobileView = isMobileView;
+      this.isTabletView = isTabletView;
     },
     handleFocus(ev) {
-      this.parentGrid.handleFocus(ev)
+      this.parentGrid.handleFocus(ev);
     },
     fireGTM() {
-      let theEl = this.$slots?.cardDescription
+      let theEl = this.$slots?.cardDescription;
       if (theEl && theEl.length > 0) {
         var content = {
           content: this.$diffInDays(
-            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created),
+            parseISO(theEl[0]?.componentOptions?.propsData?.card?.created)
           ),
-        }
+        };
       }
       if (this.$gtm) {
         // format link
-        const linkStr = this.link
-        let linkURL = linkStr
+        const linkStr = this.link;
+        let linkURL = linkStr;
         if (linkStr !== false && !linkStr.includes(this.urlHostname)) {
-          linkURL = this.urlHostname + linkStr
+          linkURL = this.urlHostname + linkStr;
         }
         // gather attrs
         let attrs = {
@@ -494,46 +466,45 @@ export default {
           data: linkURL,
           ...content,
           ...this.taxonomies,
-        }
+        };
         // fire the default event
         this.$gtm.push({
-          event: 'custom.interaction.tile.click',
+          event: "custom.interaction.tile.click",
           group: this?.parentGrid?.title,
           ...attrs,
-        })
-        if (this.pillText === 'News') {
+        });
+        if (this.pillText === "News") {
           this.$gtm.push({
-            event: 'custom.interaction.news.click',
-            group: 'News',
+            event: "custom.interaction.news.click",
+            group: "News",
             ...attrs,
-          })
+          });
         }
-        if (this.pillText === 'Event') {
+        if (this.pillText === "Event") {
           this.$gtm.push({
-            event: 'custom.interaction.event.click',
-            group: 'Event',
+            event: "custom.interaction.event.click",
+            group: "Event",
             ...attrs,
-          })
+          });
         }
-        if (this.pillText === 'Safety alert') {
+        if (this.pillText === "Safety alert") {
           this.$gtm.push({
-            event: 'custom.interaction.safety.click',
-            group: 'Safety alert',
+            event: "custom.interaction.safety.click",
+            group: "Safety alert",
             ...attrs,
-          })
+          });
         }
         if (
           (this.link,
           this.isAbsoluteUrl(this.link) &&
-            (this.$config
-              ? this.$config.public.caretaker
-              : process.env.CARETAKER) === 'false')
+            (this.$config ? this.$config.public.caretaker : process.env.CARETAKER) ===
+              "false")
         ) {
           this.$gtm.push({
-            event: 'custom.interaction.outboundlink',
+            event: "custom.interaction.outboundlink",
             category: this.cardHeaderTitle,
             label: this.link,
-          })
+          });
         }
       }
       // for non gov sites and when caretaker mode is on, analytics is fired from listenersCaretaker.js
@@ -541,23 +512,21 @@ export default {
         this.link &&
         this.isAbsoluteUrl(this.link) &&
         isGovSite(this.link) &&
-        (this.$config
-          ? this.$config.public.caretaker
-          : process.env.CARETAKER) === 'true'
+        (this.$config ? this.$config.public.caretaker : process.env.CARETAKER) === "true"
       ) {
         this.$gtm.push({
-          event: 'custom.interaction.outboundlink',
+          event: "custom.interaction.outboundlink",
           category: this.cardHeaderTitle,
           label: this.link,
-        })
+        });
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 
 .card-grid-item {
   height: 100%;
@@ -809,7 +778,7 @@ export default {
       align-items: center;
     }
     :deep(.card_item__control-radio span) {
-      background-image: url('../../../assets/icons/tick.svg');
+      background-image: url("../../../assets/icons/tick.svg");
       background-position: center;
       background-repeat: no-repeat;
       filter: invert(1);
@@ -858,7 +827,7 @@ export default {
       line-height: 80px;
 
       @media screen and (max-width: 1199px) and (min-width: 768px) {
-        @include fp('font-size', 60, 72);
+        @include fp("font-size", 60, 72);
       }
     }
 

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

@@ -26,23 +26,17 @@
           >
             {{ data.label }}
             <span class="sortImg" v-if="data.field.sortable">
-              <img
-                v-if="data.field.thAttr['aria-sort'] === 'none'"
-                :src="sortIconNeutral"
-                alt="image indicating no sort"
-                style="width: 0.55rem; height: 0.9rem"
-              />
               <img
                 v-if="data.field.thAttr['aria-sort'] === 'ascending'"
-                :src="sortIconAsc"
+                :src="CaretUp"
                 alt="image indicating ascending sort"
-                style="width: 0.55rem; height: 0.9rem"
+                class="iconAsc"
               />
               <img
                 v-else-if="data.field.thAttr['aria-sort'] === 'descending'"
-                :src="sortIconDesc"
+                :src="CaretDown"
                 alt="image indicating descending sort"
-                style="width: 0.55rem; height: 0.9rem"
+                class="iconDesc"
               />
             </span>
           </span>
@@ -56,12 +50,14 @@
 </template>
 
 <script>
-import SectionGroup from './../../Containers/SectionGroup/index.vue'
-import RichText from '../../Paragraphs/RichText/index.vue'
-import { BTable } from 'bootstrap-vue-next'
+import SectionGroup from "./../../Containers/SectionGroup/index.vue";
+import RichText from "../../Paragraphs/RichText/index.vue";
+import { BTable } from "bootstrap-vue-next";
+import CaretUp from "./../../../assets/icons/caret-up.svg?url";
+import CaretDown from "./../../../assets/icons/caret-down.svg?url";
 
 export default {
-  name: 'TabulatedData',
+  name: "TabulatedData",
   components: { SectionGroup, RichText, BTable },
   props: {
     items: {
@@ -82,7 +78,7 @@ export default {
     },
     caption: {
       type: String,
-      default: '',
+      default: "",
       required: false,
     },
     sortBy: {
@@ -93,42 +89,33 @@ export default {
   },
   data() {
     return {
-      newSortBy: this.sortBy ? [{ key: this.sortBy, order: 'asc' }] : [],
+      newSortBy: this.sortBy ? [{ key: this.sortBy, order: "asc" }] : [],
       //sortDesc: false,
-      sortIconNeutral:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-      sortIconDesc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-      sortIconAsc:
-        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'%3e%3cpath fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/%3e%3cpath fill='black' d='M51 101l25-23 24-22H1l25 22z'/%3e%3c/svg%3e",
-    }
+      CaretUp,
+      CaretDown,
+    };
   },
   computed: {
     isFluid() {
-      return this.isFixedWidth
+      return this.isFixedWidth;
     },
   },
   methods: {
     accessSort(fieldVar) {
-      //this.sortBy = fieldVar.key
-      if (
-        fieldVar.thAttr['aria-sort'] === 'none' ||
-        fieldVar.thAttr['aria-sort'] === 'descending'
-      ) {
-        this.newSortBy = [{ key: fieldVar.key, order: 'asc' }]
-        //this.sortDesc = false
+      const currentSort = fieldVar.thAttr["aria-sort"];
+      if (currentSort === "ascending") {
+        this.newSortBy = [{ key: fieldVar.key, order: "desc" }];
       } else {
-        this.newSortBy = [{ key: fieldVar.key, order: 'desc' }]
-        //this.sortDesc = true
+        this.newSortBy = [{ key: fieldVar.key, order: "asc" }];
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss">
 .paragraph--tabulated-data {
-  @import '../../../includes/scss/all';
+  @import "../../../includes/scss/all";
 
   .section-group__block {
     margin-top: -32px;

package/src/components/SubComponents/ResourceGroup/index.vue

@@ -14,10 +14,7 @@
       :background-variant="background"
       @selected="selectedCard"
     >
-      <template
-        v-if="enableBundleFilter && bundle.length > 1"
-        v-slot:gridHeaderRight
-      >
+      <template v-if="enableBundleFilter && bundle.length > 1" v-slot:gridHeaderRight>
         <switcher
           v-if="enableBundleFilter"
           :options="bundle"
@@ -48,8 +45,7 @@
           :class="{
             [`card_group__card--${card.colour}`]: card.pillText,
             [`card_group__card--none`]: !card.pillText,
-            [`card_group__card--${cardResourseType}`]:
-              'card_group__card--resourse-group',
+            [`card_group__card--${cardResourseType}`]: 'card_group__card--resourse-group',
           }"
           :card-header-title="card.title"
           :caret="getCaret(card)"
@@ -75,10 +71,7 @@
           </template>
 
           <!-- footer - download button -->
-          <template
-            v-if="cardResourseType === 'resource-group'"
-            v-slot:cardFooter
-          >
+          <template v-if="cardResourseType === 'resource-group'" v-slot:cardFooter>
             <card-footer :card="card" :resource-type="cardResourseType" />
           </template>
         </card-grid-item>
@@ -120,24 +113,20 @@
 </template>
 
 <script>
-import Column from './../../Containers/Column/index.vue'
-import CardGrid from './../../Common/CardGrid/index.vue'
-import CardGridItem from './../../Common/CardGridItem/index.vue'
-import CardTop from './cardtop.vue'
-import CardBody from './cardbody.vue'
-import CardFooter from './cardfooter.vue'
-import CtaButton from './../CtaButton/index.vue'
-import DirectoryFilters from './../../Global/DirectoryFilters/index.vue'
-import Switcher from './switcher.vue'
-import {
-  isAbsoluteUrl,
-  navigateToPath,
-  isGovSite,
-} from './../../../../lib/utility'
-import { BSpinner } from 'bootstrap-vue-next'
+import Column from "./../../Containers/Column/index.vue";
+import CardGrid from "./../../Common/CardGrid/index.vue";
+import CardGridItem from "./../../Common/CardGridItem/index.vue";
+import CardTop from "./cardtop.vue";
+import CardBody from "./cardbody.vue";
+import CardFooter from "./cardfooter.vue";
+import CtaButton from "./../CtaButton/index.vue";
+import DirectoryFilters from "./../../Global/DirectoryFilters/index.vue";
+import Switcher from "./switcher.vue";
+import { isAbsoluteUrl, navigateToPath, isGovSite } from "./../../../../lib/utility";
+import { BSpinner } from "bootstrap-vue-next";
 
 export default {
-  name: 'ResourceGroup',
+  name: "ResourceGroup",
   components: {
     Column,
     CardGrid,
@@ -153,15 +142,15 @@ export default {
   props: {
     background: {
       type: String,
-      default: 'white',
+      default: "white",
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     titleTag: {
       type: String,
-      default: 'h2',
+      default: "h2",
     },
     rtl: {
       type: Boolean,
@@ -169,7 +158,7 @@ export default {
     },
     bundle: {
       type: Array,
-      default: () => [''],
+      default: () => [""],
     },
     columns: {
       type: Number,
@@ -202,7 +191,7 @@ export default {
     },
     resourceType: {
       type: String,
-      default: 'resource-group',
+      default: "resource-group",
     },
     showLoadMore: {
       type: Boolean,
@@ -210,7 +199,7 @@ export default {
     },
     emptyCardsText: {
       type: String,
-      default: 'No results returned',
+      default: "No results returned",
     },
     loading: {
       type: Boolean,
@@ -221,10 +210,10 @@ export default {
   async mounted() {
     if (this.displayedCards.length === 0) {
       console.log(
-        '🚀 ~ mounted ~ this.displayedCards.length:',
-        this.displayedCards.length,
-      )
-      await this.loadFiltersAndContent()
+        "🚀 ~ mounted ~ this.displayedCards.length:",
+        this.displayedCards.length
+      );
+      await this.loadFiltersAndContent();
     }
   },
   // TODO useAsyncData <script setup>
@@ -248,96 +237,91 @@ export default {
         selected: {},
         availableBundles: [],
       },
-    }
+    };
   },
   computed: {
     allCardsRTL() {
       if (this.displayedCards.length === 0) {
-        return this.rtl
+        return this.rtl;
       }
-      return this.displayedCards.every((card) => this.rtl || card.rtl)
+      return this.displayedCards.every((card) => this.rtl || card.rtl);
     },
   },
   fetchOnServer: true,
-  fetchKey: 'wcl-card-group',
+  fetchKey: "wcl-card-group",
   methods: {
     async loadFiltersAndContent() {
       await Promise.all([
         this.fetchFilters ? this.loadFilters() : Promise.resolve(),
         this.loadMoreCards(true),
-      ])
-      console.log(
-        '🚀 ~ loadFiltersAndContent ~ this.fetchFilters:',
-        this.fetchFilters,
-      )
+      ]);
+      console.log("🚀 ~ loadFiltersAndContent ~ this.fetchFilters:", this.fetchFilters);
     },
     init() {
       this.allCards = {
         total: 0,
         cards: [],
-      }
-      this.displayLimit = 0
-      this.hasMorePages = false
-      this.displayedCards = []
-      this.bundleCache = {}
+      };
+      this.displayLimit = 0;
+      this.hasMorePages = false;
+      this.displayedCards = [];
+      this.bundleCache = {};
     },
     async fetchCards(currentDisplayedCards, allCards, addMoreBy, bundles) {
       const shouldMakeNewFetchCall =
-        currentDisplayedCards.length + addMoreBy > allCards.cards.length
+        currentDisplayedCards.length + addMoreBy > allCards.cards.length;
 
       if (shouldMakeNewFetchCall) {
         const cardBundles = await Promise.all(
-          bundles.map((bundle, index) =>
-            this.getBundle(bundle, addMoreBy, index),
-          ),
-        )
+          bundles.map((bundle, index) => this.getBundle(bundle, addMoreBy, index))
+        );
 
-        allCards = this.getShuffledCards(cardBundles)
+        allCards = this.getShuffledCards(cardBundles);
 
         if (
-          this.type === 'paragraph--cards_group_latest' ||
-          this.type === 'paragraph--browse_content' ||
-          this.type === 'paragraph--resource_group' ||
-          this.type === 'paragraph--resource_list'
+          this.type === "paragraph--cards_group_latest" ||
+          this.type === "paragraph--browse_content" ||
+          this.type === "paragraph--resource_group" ||
+          this.type === "paragraph--resource_list"
         ) {
-          allCards.cards = this.sortByDate(allCards.cards)
+          allCards.cards = this.sortByDate(allCards.cards);
         }
       }
-      return allCards
+      return allCards;
     },
     async loadMoreCards(init) {
       const attrs = {
         group: this.$pageStore?.content?.title,
         //group: this.$store?.state?.page?.content?.title,
-      }
+      };
       if (this.$gtm && !init) {
-        this.$gtm.push({ event: 'custom.interaction.showmore.click', ...attrs })
+        this.$gtm.push({ event: "custom.interaction.showmore.click", ...attrs });
       }
       if (init) {
-        this.init()
+        this.init();
       }
-      this.loader = true
-      const addMoreBy = this.initialDisplyLimit
-      this.displayLimit += addMoreBy
+      this.loader = true;
+      const addMoreBy = this.initialDisplyLimit;
+      this.displayLimit += addMoreBy;
       const bundles =
         this.filters.availableBundles.length > 0
           ? this.filters.availableBundles
-          : this.bundle
+          : this.bundle;
       this.allCards = await this.fetchCards(
         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)
+      this.hasMorePages = this.allCards.total > this.allCards.cards.length;
+      this.displayedCards = this.allCards.cards.slice(0, this.displayLimit);
 
-      this.loader = false
+      this.loader = false;
     },
     getBundle(bundle, addMoreBy, index) {
-      let start
-      const rows = addMoreBy
+      let start;
+      const rows = addMoreBy;
       const cache = (this.bundleCache[bundle] = this.bundleCache[bundle] || {
         response: {
           results: [],
@@ -346,177 +330,166 @@ export default {
         qs: {
           start,
         },
-      })
+      });
 
       if (cache.qs.start === undefined) {
-        start = 0
+        start = 0;
       } else if (cache.response.numFound > cache.response.results.length) {
-        start = cache.response.results.length
+        start = cache.response.results.length;
       } else {
-        return Promise.resolve(cache.response)
+        return Promise.resolve(cache.response);
       }
 
       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
-        },
-      )
+      };
+      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 shuffled = [];
       const bundleWithMostCards = cardBundles.reduce(
         (a, b) => (a.results.length > b.results.length ? a : b),
-        { results: [] },
-      ).results.length
+        { results: [] }
+      ).results.length;
 
       for (let i = 0; i < bundleWithMostCards; i++) {
         cardBundles.forEach((bundle) => {
           if (bundle.results[i]) {
-            shuffled.push(bundle.results[i])
+            shuffled.push(bundle.results[i]);
           }
-        })
+        });
       }
 
       const total = cardBundles.reduce((acc, bundle) => {
-        return acc + bundle.numFound
-      }, 0)
+        return acc + bundle.numFound;
+      }, 0);
 
-      return { cards: shuffled, total }
+      return { cards: shuffled, total };
     },
     loadFilters() {
       return this.fetchFilters().then((taxonomies) => {
-        console.log('🚀 ~ returnthis.fetchFilters ~ taxonomies:', taxonomies)
-        this.filters.taxonomies = taxonomies
-        return Promise.resolve(taxonomies)
-      })
+        console.log("🚀 ~ returnthis.fetchFilters ~ taxonomies:", taxonomies);
+        this.filters.taxonomies = taxonomies;
+        return Promise.resolve(taxonomies);
+      });
     },
     onFilter(filters) {
-      this.bundleCache = {}
+      this.bundleCache = {};
       Object.keys(filters).forEach((filter) => {
-        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid)
-      })
-      this.loadMoreCards(true)
+        this.filters.selected[filter] = filters[filter].map((obj) => obj.tid);
+      });
+      this.loadMoreCards(true);
     },
     onSwitcher(switchToBundle) {
-      this.filters.selected = {}
-      this.filters.availableBundles.length = 0
+      this.filters.selected = {};
+      this.filters.availableBundles.length = 0;
       if (switchToBundle) {
-        this.filters.availableBundles.push(switchToBundle)
+        this.filters.availableBundles.push(switchToBundle);
       }
-      this.loadMoreCards(true)
+      this.loadMoreCards(true);
     },
     async reset() {
-      this.bundleCache = {}
-      this.filters.selected = {}
-      this.filters.availableBundles.length = 0
-      await this.loadMoreCards(true)
+      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
+        return new Date(b.dateSort) - new Date(a.dateSort);
+      });
+      return sorted;
     },
     handleLoadMore() {
-      this.loadMoreCards(false)
+      this.loadMoreCards(false);
     },
 
     getCaret(card) {
       if (card.link && isAbsoluteUrl(card.link)) {
-        return 'external'
+        return "external";
       } else {
-        return undefined
+        return undefined;
       }
     },
     selectedCard(card) {
       // Some custom logic for gov caretaker logic
       if (
-        (this.$config
-          ? this.$config.public.caretaker
-          : process.env.CARETAKER) === 'true'
+        (this.$config ? this.$config.public.caretaker : process.env.CARETAKER) === "true"
       ) {
         if (!isGovSite(card?.selectedCard?.link)) {
           // this.$store.commit('page/SET_CARETAKER_REF', 'list-group')
           // this.$root.$emit('caretaker-open', card?.selectedCard?.link)
           if (this.$pageStore) {
-            this.$pageStore.caretaker.referrer = 'list-group'
+            this.$pageStore.caretaker.referrer = "list-group";
           }
           if (this.$bus) {
-            this.$bus.$emit('caretaker-open', card?.selectedCard?.link)
+            this.$bus.$emit("caretaker-open", card?.selectedCard?.link);
           }
         } else {
           navigateToPath.call(
             this,
             card?.selectedCard?.link,
-            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
-          )
+            card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+          );
         }
       } else {
         navigateToPath.call(
           this,
           card?.selectedCard?.link,
-          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true,
-        )
+          card?.ev?.ctrlKey === true || card?.ev?.metaKey === true
+        );
       }
     },
     focussed(ev) {
-      const path = ev.path || (ev.composedPath && ev.composedPath())
-      const theTabbedCards = path.find(
-        (el) => el['_prevClass'] === 'tabbed-cards',
-      )
+      const path = ev.path || (ev.composedPath && ev.composedPath());
+      const theTabbedCards = path.find((el) => el["_prevClass"] === "tabbed-cards");
       if (ev.shiftKey && theTabbedCards) {
-        ev.preventDefault()
-        let selectedTabbedCards =
-          theTabbedCards.getElementsByClassName('isSelected')
-        let selectedCard = selectedTabbedCards[0].getElementsByTagName('button')
-        let thePrevLGItem =
-          ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
-            'button',
-          )
+        ev.preventDefault();
+        let selectedTabbedCards = theTabbedCards.getElementsByClassName("isSelected");
+        let selectedCard = selectedTabbedCards[0].getElementsByTagName("button");
+        let thePrevLGItem = ev.target?.parentElement?.parentElement?.previousSibling?.getElementsByTagName(
+          "button"
+        );
         if (thePrevLGItem) {
-          thePrevLGItem[0].focus()
+          thePrevLGItem[0].focus();
         } else {
-          selectedCard[0].focus()
+          selectedCard[0].focus();
         }
       } else if (!ev.shiftKey && theTabbedCards) {
-        ev.preventDefault()
-        let selectedTabbedCards =
-          theTabbedCards.getElementsByClassName('isSelected')
-        let nextTabbedCard =
-          selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
-            'button',
-          )
-        let theNextLGItem =
-          ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
-            'button',
-          )
+        ev.preventDefault();
+        let selectedTabbedCards = theTabbedCards.getElementsByClassName("isSelected");
+        let nextTabbedCard = selectedTabbedCards[0]?.parentElement?.nextSibling?.getElementsByTagName(
+          "button"
+        );
+        let theNextLGItem = ev.target?.parentElement?.parentElement?.nextSibling?.getElementsByTagName(
+          "button"
+        );
         if (theNextLGItem) {
-          theNextLGItem[0].focus()
+          theNextLGItem[0].focus();
         } else if (nextTabbedCard) {
-          nextTabbedCard[0].focus()
+          nextTabbedCard[0].focus();
         } else {
-          let nextFocus = this.focusNextElement()
+          let nextFocus = this.focusNextElement();
           if (this.$bus) {
-            this.$bus.$emit('last-focus-out')
+            this.$bus.$emit("last-focus-out");
           }
-          nextFocus.focus()
+          nextFocus.focus();
         }
       } else {
-        return true
+        return true;
       }
     },
     focusNextElement(reverse, activeElem) {
       /*check if an element is defined or use activeElement*/
       activeElem =
-        activeElem instanceof HTMLElement ? activeElem : document.activeElement
+        activeElem instanceof HTMLElement ? activeElem : document.activeElement;
 
       let queryString = [
           'a:not([disabled]):not([tabindex="-1"])',
@@ -525,23 +498,19 @@ export default {
           'select:not([disabled]):not([tabindex="-1"])',
           '[tabindex]:not([disabled]):not([tabindex="-1"])',
           /* add custom queries here */
-        ].join(','),
+        ].join(","),
         queryResult = Array.prototype.filter.call(
           document.querySelectorAll(queryString),
           (elem) => {
             /*check for visibility while always include the current activeElement*/
-            return (
-              elem.offsetWidth > 0 ||
-              elem.offsetHeight > 0 ||
-              elem === activeElem
-            )
-          },
+            return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem === activeElem;
+          }
         ),
         indexedList = queryResult
           .slice()
           .filter((elem) => {
             /* filter out all indexes not greater than 0 */
-            return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? false : true;
           })
           .sort((a, b) => {
             /* sort the array by index from smallest to largest */
@@ -549,34 +518,33 @@ export default {
               ? a.tabIndex < b.tabIndex
                 ? -1
                 : b.tabIndex < a.tabIndex
-                  ? 1
-                  : 0
+                ? 1
+                : 0
               : a.tabIndex != 0
-                ? -1
-                : b.tabIndex != 0
-                  ? 1
-                  : 0
+              ? -1
+              : b.tabIndex != 0
+              ? 1
+              : 0;
           }),
         focusable = [].concat(
           indexedList,
           queryResult.filter((elem) => {
             /* filter out all indexes above 0 */
-            return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false
-          }),
-        )
+            return elem.tabIndex == 0 || elem.tabIndex == -1 ? true : false;
+          })
+        );
 
       /* if reverse is true return the previous focusable element
      if reverse is false return the next focusable element */
       return reverse
-        ? focusable[focusable.indexOf(activeElem) - 1] ||
-            focusable[focusable.length - 1]
-        : focusable[focusable.indexOf(activeElem) + 1] || focusable[0]
+        ? focusable[focusable.indexOf(activeElem) - 1] || focusable[focusable.length - 1]
+        : focusable[focusable.indexOf(activeElem) + 1] || focusable[0];
     },
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-@import '../../../includes/scss/all';
+@import "../../../includes/scss/all";
 $cardTextPadding: 16px;
 $borderRadius: 8px;
 
@@ -597,8 +565,14 @@ $borderRadius: 8px;
 .card_group {
   &--resource-list {
     :deep(.card-body) {
-      padding-left: $cardTextPadding !important;
-      padding-right: $cardTextPadding !important;
+      padding-left: 13px !important;
+      padding-right: 13px !important;
+    }
+    @media screen and (min-width: 768px) {
+      :deep(.card-body) {
+        padding-left: $cardTextPadding !important;
+        padding-right: $cardTextPadding !important;
+      }
     }
   }
 }

package/src/components/SubComponents/ResourceGroup/styles.scss

@@ -185,6 +185,7 @@ $white: #ffffff !default;
     &--resource-list {
       flex: 0 0 100%;
       max-width: 100%;
+      padding: 0;
       @media screen and (min-width: 768px) {
         flex: 0 0 29%;
         max-width: 29%;
@@ -209,6 +210,7 @@ $white: #ffffff !default;
                 background-color: $lightgray;
                 border-radius: 0 0px 5px 5px;
                 margin-left: -16px;
+                margin-right: -16px;
                 justify-content: space-between;
             }