feat(@dpc-sdp/ripple-tide-landing-page): support new 'highlight' cms …

…display option
dpc-sdp · Sep 9, 2024 · f487327 · f487327
1 parent 66d77de
commit f487327
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git a/examples/nuxt-app/test/features/landingpage/page-components.feature b/examples/nuxt-app/test/features/landingpage/page-components.feature
@@ -50,6 +50,10 @@ Feature: Home page
       | displayStyle | title                | content            | image                    |
       | profile      | Promo card (profile) | Sample description | /placeholders/medium.png |
 
+    Then a promo card with ID "979" should exist with the following properties
+      | displayStyle | title                  | content            | image |
+      | highlight    | Promo card (highlight) | Sample description |       |
+
   @mockserver
   Scenario: Page component - Nav card
     Then a nav card with ID "981" should exist with the following properties

diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json
@@ -511,6 +511,42 @@
         }
       }
     },
+    {
+      "uuid": "c509edfe-89a6-4b8d-b8e1-f72e6774da1x",
+      "component": "TideLandingPagePromoCard",
+      "id": "979",
+      "layout": "card",
+      "props": {
+        "displayStyle": "highlight",
+        "title": "Promo card (highlight)",
+        "summary": "Sample description",
+        "image": {
+          "src": "/placeholders/medium.png",
+          "focalPoint": {
+            "x": 707,
+            "y": 393
+          },
+          "alt": "Demo: Melbourne tram",
+          "width": 1413,
+          "height": 785,
+          "title": "Demo: Melbourne tram"
+        },
+        "link": {
+          "text": "",
+          "url": "/demo-destination"
+        },
+        "showMetadata": true,
+        "metadata": {
+          "dateStart": "2019-07-02 09:00:00",
+          "dateEnd": "2019-07-07 10:00:00",
+          "topic": "Demo Topic",
+          "contentType": "Event",
+          "fvRecommendationStatus": "",
+          "inductionYear": "",
+          "isGrantOngoing": false
+        }
+      }
+    },
     {
       "uuid": "e92bbc8b-a2b6-4fdf-aa10-2329a0b0bc5a",
       "component": "TideLandingPageNavCard",

diff --git a/packages/ripple-tide-landing-page/components/global/TideLandingPage/PromoCard.vue b/packages/ripple-tide-landing-page/components/global/TideLandingPage/PromoCard.vue
@@ -18,9 +18,9 @@
   <RplPromoCard
     v-else
     :title="title"
-    :image="displayStyle !== 'noImage' ? image : null"
+    :image="promoImage"
     :url="url"
-    :highlight="displayStyle === 'noImage' || !image"
+    :highlight="displayStyle === 'highlight'"
   >
     <p>{{ summary }}</p>
     <template v-if="showMetadata && metadataExists" #meta>
@@ -44,7 +44,7 @@ interface Props {
       y: number
     }
   } | null
-  displayStyle: 'noImage' | 'thumbnail' | 'profile'
+  displayStyle: 'noImage' | 'thumbnail' | 'profile' | 'highlight'
   showMetadata: boolean
   metadata: {
     contentType: string
@@ -61,4 +61,10 @@ const metadataExists = computed(
     props.metadata.topic?.length > 0 ||
     props.metadata.isGrantOngoing
 )
+
+const promoImage = computed(() => {
+  return props.displayStyle === 'thumbnail' || props.displayStyle === 'profile'
+    ? props.image
+    : null
+})
 </script>
diff --git a/packages/ripple-tide-landing-page/mapping/components/promo-card/promo-card-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/promo-card/promo-card-mapping.ts
@@ -3,7 +3,7 @@ import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'
 import { genericCardMapping, ITideCardBase } from '../generic-card-mapping.js'
 
 export interface ITidePromoCard extends ITideCardBase {
-  displayStyle: 'noImage' | 'thumbnail' | 'profile'
+  displayStyle: 'noImage' | 'thumbnail' | 'profile' | 'highlight'
 }
 
 export const promoCardMapping = (