feat(@dpc-sdp/ripple-tide-landing-page): add compact card collection …

…i.e. category grid support

examples/nuxt-app/test/features/landingpage/home.feature

@@ -198,3 +198,10 @@ Feature: Home page
       | th   | Row One Column One   | Row One Column Two   | Row One Column Three   |
       | td   | Row Two Column One   | Row Two Column Two   | Row Two Column Three   |
       | td   | Row Three Column One | Row Three Column Two | Row Three Column Three |
+
+  @mockserver
+  Scenario: Page component - Category Grid i.e. compact cards
+    Then a category grid with ID "7052" should exist with the following cards
+      | title    | content          | image                                                                                                                             |
+      | Card one | Card one summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg |
+      | Card two | Card two summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg                   |

examples/nuxt-app/test/fixtures/landingpage/home.json

@@ -700,6 +700,41 @@
           ]
         ]
       }
+    },
+    {
+      "component":"TideLandingPageCategoryGrid",
+      "id":"7052",
+      "title":"Category Grid",
+      "props":{
+        "items":[
+          {
+            "title":"Card one",
+            "summary":"Card one summary",
+            "image":{
+              "src":"https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Aerial-shot-of-new-housing-development.jpg",
+              "alt":"",
+              "focalPoint":null,
+              "height":667,
+              "title":"",
+              "width":1000
+            },
+            "url":"/landing-page-cc-2"
+          },
+          {
+            "title":"Card two",
+            "summary":"Card two summary",
+            "image":{
+              "src":"https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg",
+              "alt":"",
+              "focalPoint":null,
+              "height":667,
+              "title":"",
+              "width":1000
+            },
+            "url":"/tav2-social-sharing-exists-landing-page-fe827f16"
+          }
+        ]
+      }
     }
   ],
   "meta": {

packages/ripple-test-utils/step_definitions/components/category-grid.ts

@@ -0,0 +1,33 @@
+import { Then, DataTable } from '@badeball/cypress-cucumber-preprocessor'
+
+Then(
+  'a category grid with ID {string} should exist with the following cards',
+  (id: string, dataTable: DataTable) => {
+    const table = dataTable.hashes()
+
+    cy.get(`[data-component-id="${id}"]`).as('component')
+    cy.get('@component')
+      .should('exist')
+      .should('have.attr', 'data-component-type', 'TideLandingPageCategoryGrid')
+
+    cy.get('@component').within(() => {
+      cy.get('.rpl-card--category-grid').as('items')
+    })
+
+    table.forEach((row, i: number) => {
+      cy.get('@items')
+        .eq(i)
+        .then((item) => {
+          cy.wrap(item).as('item')
+          cy.get('@item').find('.rpl-card__cta').should('contain', row.title)
+          cy.get('@item')
+            .find('.rpl-card__content')
+            .should('contain', row.content)
+          cy.get('@item')
+            .find('.rpl-image')
+            .should('have.attr', 'src')
+            .and('contain', row.image)
+        })
+    })
+  }
+)

packages/ripple-test-utils/step_definitions/components/index.ts

@@ -14,3 +14,4 @@ import './sliders'
 import './stats-grid'
 import './timeline'
 import './data-table'
+import './category-grid'

packages/ripple-tide-landing-page/components/global/TideLandingPage/CategoryGrid.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ITideCompactCard } from '../../../mapping/components/compact-cards/compact-cards-mapping'
+
+const props = defineProps<{
+  items: ITideCompactCard[]
+  hasSidebar: boolean
+}>()
+
+const columns = computed(() => {
+  let classes = 'rpl-col-12 rpl-col-6-s'
+
+  if (props.hasSidebar) {
+    return `${classes} rpl-col-7-m rpl-col-3-xl`
+  }
+
+  return `${classes} rpl-col-4-l rpl-col-3-xl`
+})
+</script>
+
+<template>
+  <ul class="rpl-grid">
+    <RplCategoryGridCard
+      v-for="(item, index) of items"
+      :key="index"
+      el="li"
+      :image="item?.image"
+      :url="item.url"
+      :title="item.title"
+      :class="columns"
+    >
+      <p v-if="item.summary">{{ item.summary }}</p>
+    </RplCategoryGridCard>
+  </ul>
+</template>

packages/ripple-tide-landing-page/mapping/components.ts

@@ -14,6 +14,7 @@ import contentCollectionMapping from './components/content-collection/content-co
 import webformMapping from './components/webforms/webforms-mapping'
 import complexImageMapping from './components/complex-image/complex-image-mapping'
 import dataTableMapping from './components/data-table/data-table-mapping'
+import compactCardsMapping from './components/compact-cards/compact-cards-mapping'
 
 export default {
   'paragraph--basic_text': basicTextMapping,
@@ -31,5 +32,6 @@ export default {
   'paragraph--content_collection_enhanced': contentCollectionMapping,
   'paragraph--embedded_webform': webformMapping,
   'paragraph--complex_image': complexImageMapping,
-  'paragraph--data_table': dataTableMapping
+  'paragraph--data_table': dataTableMapping,
+  'paragraph--compact_card_collection': compactCardsMapping
 }

packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.test.ts

@@ -0,0 +1,39 @@
+import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'
+import { expect, describe, it } from '@jest/globals'
+import { compactCardsMapping, ITideCompactCards } from './compact-cards-mapping'
+import rawData from './compact-cards'
+
+const result: TideDynamicPageComponent<ITideCompactCards> = {
+  component: 'TideLandingPageCategoryGrid',
+  id: '7052',
+  title: 'Compact Cards',
+  props: {
+    items: [
+      {
+        title: 'Card one',
+        summary: 'Card one summary',
+        image: {
+          src: 'https://develop.content.reference.sdp.vic.gov.au/sites/default/files/2023-08/Image2.jpg',
+          alt: '',
+          focalPoint: undefined,
+          height: 667,
+          title: '',
+          width: 1000
+        },
+        url: '/landing-page-cc-2'
+      },
+      {
+        title: 'Card two',
+        summary: 'Card two summary',
+        image: null,
+        url: '/tav2-social-sharing-exists-landing-page-fe827f16'
+      }
+    ]
+  }
+}
+
+describe('compactCardsMapping', () => {
+  it('maps a raw json api response to the correct structure', () => {
+    expect(compactCardsMapping(rawData)).toEqual(result)
+  })
+})

packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.ts

@@ -0,0 +1,50 @@
+import { getImageFromField } from '@dpc-sdp/ripple-tide-api'
+import {
+  TideDynamicPageComponent,
+  TideImageField
+} from '@dpc-sdp/ripple-tide-api/types'
+
+export interface ITideCompactCard {
+  title: string
+  summary?: string
+  image?: TideImageField
+  url: string
+}
+
+export interface ITideCompactCards {
+  items: ITideCompactCard[]
+}
+
+export const compactCardsMapping = (
+  field
+): TideDynamicPageComponent<ITideCompactCards> => {
+  return {
+    component: 'TideLandingPageCategoryGrid',
+    id: field.drupal_internal__id.toString(),
+    title: field?.field_paragraph_title,
+    props: {
+      items: field.field_compact_card.map((item) => {
+        return {
+          title: item.field_paragraph_title,
+          summary: item?.field_paragraph_summary,
+          image: getImageFromField(
+            item,
+            'field_paragraph_media.field_media_image'
+          ),
+          url: item.field_paragraph_link?.url
+        }
+      })
+    }
+  }
+}
+
+export const compactCardsIncludes = [
+  'field_landing_page_component.field_compact_card',
+  'field_landing_page_component.field_compact_card.field_paragraph_media.field_media_image'
+]
+
+export default {
+  includes: compactCardsIncludes,
+  mapping: compactCardsMapping,
+  contentTypes: ['landing_page']
+}