[SDPAP-7677] add compact card collection mapping (#1291)

* feat(@dpc-sdp/ripple-nuxt-tide): add compact card collection mapping

* feat(@dpc-sdp/ripple-nuxt-tide): add custom compact card columns

* feat(@dpc-sdp/ripple-nuxt-tide): move `rpl-card-compact-grid` loader position

* feat(@dpc-sdp/ripple-nuxt-tide): compact card padding is being overriden in prod build due to ordering

* feat(@dpc-sdp/ripple-nuxt-tide): update compact card breakpoints

* feat(@dpc-sdp/ripple-card): compact card image to always be on top

---------

Co-authored-by: David Featherston <david.featherstone@dpc.vic.gov.au>

packages/components/Molecules/Card/CardCompact.vue

@@ -65,29 +65,20 @@ $rpl-card-compact-image-height: rem(52px) !default;
     &:hover {
       box-shadow: none;
     }
-  }
-
-  .rpl-card-content__details {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0;
 
-    @include rpl_breakpoint('s') {
+    .rpl-card-content__details {
+      display: flex;
       flex-direction: column;
       align-items: stretch;
+      padding: 0;
     }
   }
 
   &__image {
     width: $rpl-card-compact-image-width;
     height: $rpl-card-compact-image-height;
     flex: 0 0 auto;
-    padding-right: rem(20px);
-
-    @include rpl_breakpoint('s') {
-      padding-bottom: rem(20px);
-    }
+    padding-bottom: rem(20px);
   }
 
   &__title {

packages/components/Molecules/Card/CardCompactGrid.vue

@@ -2,7 +2,7 @@
   <div class="rpl-card-compact-grid">
     <h2 v-if="title" class="rpl-card-compact__title">{{ title }}</h2>
     <rpl-row v-if="cards && cards.length" row-gutter class="rpl-card-compact__cards">
-      <rpl-col catchChildError v-for="(card, index) in cards" :key="index" cols="full" :colsBp="cardColsSetting" class="rpl-card-compact__card-col">
+      <rpl-col catchChildError v-for="(card, index) in cards" :key="index" cols="full" :colsBp="childColsBp" class="rpl-card-compact__card-col">
         <rpl-card-compact
           class="rpl-card-compact__card"
           :image="card.image"
@@ -18,24 +18,26 @@
 <script>
 import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import RplCardCompact from './CardCompact'
+import provideChildCols from "@dpc-sdp/ripple-global/mixins/ProvideChildCols"
+
 export default {
   name: 'RplCardCompactGrid',
+  mixins: [provideChildCols],
   components: {
     RplRow,
     RplCol,
     RplCardCompact
   },
   props: {
     title: String,
-    cards: Array
-  },
-  data () {
-    return {
-      cardColsSetting: {
+    cards: Array,
+    childColsBp: {
+      type: Object,
+      default: () => ({
         s: 6,
         m: 4,
         l: 3
-      }
+      })
     }
   }
 }

packages/ripple-nuxt-tide/lib/config/layout.config.js

@@ -9,5 +9,15 @@ module.exports = {
       m: 6,
       xxxl: 4
     }
+  },
+  compactCardColsSetting: {
+    wide: {
+      s: 6,
+      l: 4,
+      xl: 3
+    },
+    narrow: {
+      s: 6
+    }
   }
 }

packages/ripple-nuxt-tide/lib/core/component-loader.js

@@ -62,6 +62,8 @@ const loadComponent = (name, dynamicComponentsConfig) => {
       return () => import(/* webpackChunkName: 'rpl-card-promo' */ '@dpc-sdp/ripple-card').then(m => m.RplCardPromo)
     case 'rpl-card-navigation-featured':
       return () => import(/* webpackChunkName: 'rpl-card-navigation-featured' */ '@dpc-sdp/ripple-card').then(m => m.RplCardNavigationFeatured)
+    case 'rpl-card-compact-grid':
+      return () => import(/* webpackChunkName: 'rpl-card-compact-grid' */ '@dpc-sdp/ripple-card').then(m => m.RplCardCompactGrid)
     case 'rpl-campaign-primary':
       return () => import(/* webpackChunkName: 'rpl-campaign-primary' */ '@dpc-sdp/ripple-campaign-primary')
     case 'rpl-campaign-secondary':

packages/ripple-nuxt-tide/modules/landing-page/mapping-filters.js

@@ -216,6 +216,19 @@ module.exports = {
   statisticsGrid: (blocks) => blocks.map(b => ({
     'heading': b.field_statistic_heading,
     'body': b.field_statistic_body
-  }))
-
+  })),
+
+  compactCards: (cards) => {
+    if (!Array.isArray(cards)) return []
+
+    return cards.map(card => ({
+      title: card.field_paragraph_title,
+      summary: card.field_paragraph_summary,
+      image: card.field_paragraph_media?.field_media_image?.url,
+      link: {
+        text: '',
+        url: card.field_paragraph_link?.url || '#'
+      }
+    }))
+  }
 }

packages/ripple-nuxt-tide/modules/landing-page/tide.config.js

@@ -1,5 +1,5 @@
 // Grid columns setting for cards.
-const { cardColsSetting } = require('../../lib/config/layout.config.js')
+const { cardColsSetting, compactCardColsSetting } = require('../../lib/config/layout.config.js')
 
 // TODO: This `edgeClasses` is kind of deprecated in design.
 // It can make a dynamic landing page component(e.g CTA) grow to edge, but none item is using it now.
@@ -36,7 +36,9 @@ module.exports = {
       'field_landing_page_component.field_paragraph_items.field_paragraph_keydates',
       'field_landing_page_component.field_paragraph_items.field_paragraph_media.field_media_image',
       'field_landing_page_component.field_complex_image_media.field_media_image',
-      'field_landing_page_component.field_statistic_block'
+      'field_landing_page_component.field_statistic_block',
+      'field_landing_page_component.field_compact_card',
+      'field_landing_page_component.field_compact_card.field_paragraph_media.field_media_image'
     ]
   },
 
@@ -501,6 +503,18 @@ module.exports = {
             filters: ['statisticsGrid']
           }
         }
+      },
+
+      'paragraph--compact_card_collection': {
+        component: 'rpl-card-compact-grid',
+        props: {
+          title: 'field_paragraph_title',
+          cards: {
+            field: 'field_compact_card',
+            filters: ['compactCards']
+          }
+        },
+        childCols: compactCardColsSetting
       }
 
     }