Merge pull request #860 from dpc-sdp/feature/grant-description-list

[R20-1538] use description list for grant meta
dpc-sdp · Sep 19, 2023 · 0429649 · 0429649
2 parents 675556d + 2861b16
commit 0429649
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 17 deletions.
diff --git a/packages/ripple-test-utils/step_definitions/content-types/grant.ts b/packages/ripple-test-utils/step_definitions/content-types/grant.ts
@@ -3,7 +3,9 @@ import { Then, DataTable } from '@badeball/cypress-cucumber-preprocessor'
 Then(
   'the overview should display a status of {string} with a {string} {string} icon',
   (status: string, colour: string, icon: string) => {
-    cy.get('.tide-grant-meta--block .rpl-list__label')
+    cy.get(
+      '.tide-grant-meta--block .rpl-list__label, .tide-grant-meta--block .rpl-description-list__description'
+    )
       .contains(status)
       .closest('.tide-grant-meta--block')
       .as('item')
@@ -28,7 +30,9 @@ Then(
 )
 
 Then('the overview should display funding of {string}', (funding: string) => {
-  cy.get('.tide-grant-meta--block .rpl-list__label').contains(funding)
+  cy.get(
+    '.tide-grant-meta--block .rpl-list__label, .tide-grant-meta--block .rpl-description-list__description'
+  ).contains(funding)
 })
 
 Then(

diff --git a/packages/ripple-tide-grant/components/TideGrantMeta.vue b/packages/ripple-tide-grant/components/TideGrantMeta.vue
@@ -1,10 +1,9 @@
 <template>
-  <RplList
+  <RplDescriptionList
+    :inline="true"
     :items="overviewList"
-    :item-class="{
-      'tide-grant-meta--block': variant === 'block',
-      'rpl-type-h4-fixed': variant === 'block'
-    }"
+    :variant="variant === 'inline' ? 'icon' : 'default'"
+    :class="`tide-grant-meta tide-grant-meta--${variant}`"
   />
 </template>
 
@@ -34,8 +33,9 @@ const overviewList = computed(() => {
 
   if (props.audience) {
     list.push({
-      text: props.audience,
-      icon: 'icon-user-circle-filled'
+      term: 'Who can apply:',
+      description: props.audience,
+      iconName: 'icon-user-circle-filled'
     })
   }
 
@@ -44,15 +44,17 @@ const overviewList = computed(() => {
     grantStatus.value.status === 'opening_soon'
 
   list.push({
-    text: grantStatus.value.displayLabel,
-    icon: open ? 'icon-check-circle-filled' : 'icon-cancel-circle-filled',
+    term: 'Status:',
+    description: grantStatus.value.displayLabel,
+    iconName: open ? 'icon-check-circle-filled' : 'icon-cancel-circle-filled',
     iconColour: open ? 'success' : 'error'
   })
 
   if (props.funding) {
     list.push({
-      text: props.funding,
-      icon: 'icon-dollar-circle-filled'
+      term: 'Funding:',
+      description: props.funding,
+      iconName: 'icon-dollar-circle-filled'
     })
   }
 
@@ -61,10 +63,20 @@ const overviewList = computed(() => {
 </script>
 
 <style>
-.tide-grant-meta--block {
-  display: flex;
-  gap: var(--rpl-sp-3);
-  align-items: center;
+@import '@dpc-sdp/ripple-ui-core/style/breakpoints';
+
+.tide-grant-meta--inline {
+  flex-wrap: wrap;
+  flex-direction: column;
+  column-gap: var(--rpl-sp-4);
   margin-bottom: var(--rpl-sp-4);
+
+  @media (--rpl-bp-m) {
+    flex-direction: row;
+  }
+}
+
+.tide-grant-meta--block {
+  --local-list-spacing: var(--rpl-sp-4);
 }
 </style>