Merge pull request #775 from dpc-sdp/bugfix/category-grid-feedback

[R20-1443][R20-1435] custom heading gap, fix links
dpc-sdp · Aug 16, 2023 · 24b64ab · 24b64ab
2 parents 89201db + d70cf4a
commit 24b64ab
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 19 deletions.
diff --git a/examples/nuxt-app/test/features/landingpage/home.feature b/examples/nuxt-app/test/features/landingpage/home.feature
@@ -202,6 +202,6 @@ Feature: Home page
   @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                   |
+      | title    | content          | image                                                                                                                             | url                 |
+      | 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 | /landing-page-cc-2  |
+      | Card two | Card two summary | https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/2018-19-State-Budget.jpg                   | https://google.com/ |
diff --git a/examples/nuxt-app/test/fixtures/landingpage/home.json b/examples/nuxt-app/test/fixtures/landingpage/home.json
@@ -731,7 +731,7 @@
               "title":"",
               "width":1000
             },
-            "url":"/tav2-social-sharing-exists-landing-page-fe827f16"
+            "url":"https://google.com/"
           }
         ]
       }

diff --git a/packages/nuxt-ripple/components/TideDynamicComponents.vue b/packages/nuxt-ripple/components/TideDynamicComponents.vue
@@ -48,6 +48,7 @@ const grouped: TideDynamicPageComponent<any> | TideDynamicComponentGroup =
       <component
         :is="item.component"
         :hasSidebar="hasSidebar"
+        :hasTitle="!!item.title"
         v-bind="item.props"
       ></component>
     </RplPageComponent>

diff --git a/packages/ripple-test-utils/step_definitions/components/category-grid.ts b/packages/ripple-test-utils/step_definitions/components/category-grid.ts
@@ -19,6 +19,7 @@ Then(
         .eq(i)
         .then((item) => {
           cy.wrap(item).as('item')
+          cy.get('@item').find('a').should('have.attr', 'href', row.url)
           cy.get('@item').find('.rpl-card__cta').should('contain', row.title)
           cy.get('@item')
             .find('.rpl-card__content')

diff --git a/packages/ripple-tide-landing-page/components/global/TideLandingPage/CategoryGrid.vue b/packages/ripple-tide-landing-page/components/global/TideLandingPage/CategoryGrid.vue
@@ -5,6 +5,7 @@ import { ITideCompactCard } from '../../../mapping/components/compact-cards/comp
 const props = defineProps<{
   items: ITideCompactCard[]
   hasSidebar: boolean
+  hasTitle: boolean
 }>()
 
 const columns = computed(() => {
@@ -19,7 +20,12 @@ const columns = computed(() => {
 </script>
 
 <template>
-  <ul class="rpl-grid">
+  <ul
+    :class="{
+      'rpl-grid': true,
+      'tide-category-grid--has-title': hasTitle
+    }"
+  >
     <RplCategoryGridCard
       v-for="(item, index) of items"
       :key="index"
@@ -33,3 +39,15 @@ const columns = computed(() => {
     </RplCategoryGridCard>
   </ul>
 </template>
+
+<style>
+@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
+
+.tide-category-grid--has-title {
+  margin-top: var(--rpl-sp-6);
+
+  @media (--rpl-bp-l) {
+    margin-top: var(--rpl-sp-7);
+  }
+}
+</style>
diff --git a/...s/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.test.ts b/...s/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.test.ts
@@ -26,7 +26,7 @@ const result: TideDynamicPageComponent<ITideCompactCards> = {
         title: 'Card two',
         summary: 'Card two summary',
         image: null,
-        url: '/tav2-social-sharing-exists-landing-page-fe827f16'
+        url: 'https://google.com/'
       }
     ]
   }

diff --git a/packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.ts b/packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards-mapping.ts
@@ -1,4 +1,4 @@
-import { getImageFromField } from '@dpc-sdp/ripple-tide-api'
+import { getImageFromField, getLinkFromField } from '@dpc-sdp/ripple-tide-api'
 import {
   TideDynamicPageComponent,
   TideImageField
@@ -31,7 +31,7 @@ export const compactCardsMapping = (
             item,
             'field_paragraph_media.field_media_image'
           ),
-          url: item.field_paragraph_link?.url
+          url: getLinkFromField(item, 'field_paragraph_link')?.url
         }
       })
     }

diff --git a/packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards.ts b/packages/ripple-tide-landing-page/mapping/components/compact-cards/compact-cards.ts
@@ -175,18 +175,9 @@ export default {
       default_langcode: true,
       revision_translation_affected: true,
       field_paragraph_link: {
-        uri: 'entity:node/landing_page/0b7d5bf2-bc08-4625-9e77-96cc252c0524',
+        uri: 'https://google.com/',
         title: '',
-        options: [],
-        entity: {
-          uri: 'entity:node/3359',
-          entity_type: 'node',
-          entity_id: '3359',
-          bundle: 'landing_page',
-          uuid: '0b7d5bf2-bc08-4625-9e77-96cc252c0524'
-        },
-        url: '/tav2-social-sharing-exists-landing-page-fe827f16',
-        origin_url: '/tav2-social-sharing-exists-landing-page-fe827f16'
+        options: []
       },
       field_paragraph_summary: 'Card two summary',
       field_paragraph_title: 'Card two',