feat(@dpc-sdp/ripple-ui-core): add a "stacked" version of the cta card

dpc-sdp · Mar 18, 2024 · dbb48c5 · dbb48c5
1 parent 1131019
commit dbb48c5
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 3 deletions.
diff --git a/packages/ripple-tide-landing-page/mapping/components/call-to-action/call-to-action.ts b/packages/ripple-tide-landing-page/mapping/components/call-to-action/call-to-action.ts
@@ -1,5 +1,6 @@
 import {
   getBody,
+  getField,
   getImageFromField,
   getLinkFromField
 } from '@dpc-sdp/ripple-tide-api'
@@ -25,16 +26,19 @@ export const callToActionMapping = (
   )
 
   const link = getLinkFromField(field, 'field_paragraph_cta')
+  const style = getField(field, 'field_paragraph_cta_style')
 
   return {
     component: 'TideLandingPageCallToAction',
     id: field.drupal_internal__id,
+    layout: style === 'card' ? 'card' : undefined,
     props: {
       title: field.field_paragraph_title,
       image: image,
       url: link?.url,
       ctaText: link?.text,
-      summary: getBody(field.field_paragraph_body?.processed)
+      summary: getBody(field.field_paragraph_body?.processed),
+      stacked: style === 'card'
     }
   }
 }

diff --git a/packages/ripple-ui-core/src/components/card/RplCallToActionCard.stories.mdx b/packages/ripple-ui-core/src/components/card/RplCallToActionCard.stories.mdx
@@ -6,6 +6,7 @@ import {
 } from '@storybook/addon-docs'
 import RplCallToAction from './RplCallToActionCard.vue'
 import { a11yStoryCheck } from './../../../stories/interactions.js'
+import { bpMin } from '../../lib/breakpoints'
 
 export const SingleTemplate = (args) => ({
   components: { RplCallToAction },
@@ -35,6 +36,12 @@ export const SingleTemplate = (args) => ({
 <Meta
   title='Core/Navigation/Card'
   component={RplCallToAction}
+  parameters={{
+    layout: 'fullscreen',
+    chromatic: {
+      viewports: [bpMin.s, bpMin.l]
+    }
+  }}
   argTypes={{
     number: {
       control: { type: 'select' },
@@ -84,3 +91,15 @@ export const SingleTemplate = (args) => ({
     {SingleTemplate.bind()}
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story
+    name='Call to action - Stacked'
+    play={a11yStoryCheck}
+    args={{
+      stacked: true
+    }}
+  >
+    {SingleTemplate.bind()}
+  </Story>
+</Canvas>
diff --git a/packages/ripple-ui-core/src/components/card/RplCallToActionCard.vue b/packages/ripple-ui-core/src/components/card/RplCallToActionCard.vue
@@ -10,6 +10,7 @@ import {
   useRippleEvent,
   rplEventPayload
 } from '../../composables/useRippleEvent'
+import { computed } from 'vue'
 
 interface Props {
   el?: (typeof RplCardElements)[number]
@@ -18,14 +19,16 @@ interface Props {
   url?: string
   ctaText?: string
   variant?: (typeof RplButtonVariants)[number]
+  stacked?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   el: 'div',
   image: undefined,
   url: undefined,
   variant: 'filled',
-  ctaText: 'Call to action'
+  ctaText: 'Call to action',
+  stacked: false
 })
 
 const emit = defineEmits<{
@@ -49,13 +52,18 @@ const handleClick = () => {
     { global: true }
   )
 }
+
+const classes = computed(() => ({
+  'rpl-card--inset': true,
+  'rpl-card--call-to-action-stacked': props.stacked
+}))
 </script>
 
 <template>
   <RplCard
     ref="container"
     type="call-to-action"
-    class="rpl-card--inset"
+    :class="classes"
     :link="url"
     :el="el"
   >

diff --git a/packages/ripple-ui-core/src/components/card/RplCard.css b/packages/ripple-ui-core/src/components/card/RplCard.css
@@ -259,6 +259,26 @@
     }
   }
 
+  &--call-to-action-stacked {
+    @media (--rpl-bp-l) {
+      align-items: initial;
+      flex-direction: column;
+
+      .rpl-card__upper {
+        flex-basis: auto;
+      }
+
+      .rpl-card__media--inset {
+        margin-bottom: 0;
+        height: calc(100% - var(--rpl-sp-8));
+      }
+
+      .rpl-card__upper + .rpl-card__body {
+        margin-left: var(--rpl-sp-8);
+      }
+    }
+  }
+
   &--category-grid {
     background-color: transparent;
     border-radius: 0;