Merge pull request #1213 from dpc-sdp/feature/campaign-feedback

[R20-329] campaign feedback

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

@@ -14,7 +14,7 @@ defineProps<{
     data-cy="primary-campaign"
   >
     <RplContent :html="campaign.summaryHtml" data-cy="summary" />
-    <template #meta>
+    <template v-if="campaign.imageCaption" #meta>
       {{ campaign.imageCaption }}
     </template>
   </RplPrimaryCampaign>

packages/ripple-ui-core/src/components/campaign-banner/RplCampaignBanner.css

@@ -1,27 +1,15 @@
 @import '@dpc-sdp/ripple-ui-core/style/breakpoints';
 
 .rpl-campaign-banner {
-  --local-flex-spacer: var(--rpl-sp-6);
-  --local-flex-wide: calc(100% / 12 * 7 - var(--local-flex-spacer));
-  --local-flex-narrow: calc(100% / 12 * 4 - var(--local-flex-spacer));
   --local-clr-border: var(--rpl-clr-neutral-300);
 
   position: relative;
   color: var(--rpl-clr-type-default);
   background-color: var(--rpl-clr-light);
-
-  @media (--rpl-bp-xl) {
-    --local-flex-spacer: var(--rpl-sp-7);
-  }
 }
 
 .rpl-campaign-banner__inner {
-  display: flex;
-  flex-direction: column;
-
-  @media (--rpl-bp-l) {
-    flex-direction: row;
-  }
+  row-gap: 0;
 }
 
 .rpl-campaign-banner__media {
@@ -62,12 +50,6 @@
 .rpl-campaign-banner--primary {
   border-bottom: var(--rpl-border-1) solid var(--local-clr-border);
 
-  .rpl-campaign-banner__inner {
-    @media (--rpl-bp-m) {
-      flex-direction: row;
-    }
-  }
-
   .rpl-campaign-banner__media {
     /* 100% width + left and right padding */
     width: calc(100% + (var(--rpl-sp-4) * 2));
@@ -80,7 +62,7 @@
       right: 0;
       bottom: 0;
       width: auto;
-      max-width: calc(50% + var(--local-flex-spacer));
+      max-width: calc(50% + var(--rpl-sp-6) / 2);
     }
 
     .rpl-image {
@@ -121,8 +103,6 @@
     margin-top: var(--rpl-sp-5);
 
     @media (--rpl-bp-m) {
-      flex-shrink: 0;
-      flex-basis: var(--local-flex-wide);
       margin-top: var(--rpl-sp-8);
     }
 
@@ -138,10 +118,6 @@
       margin-bottom: var(--rpl-sp-11);
     }
   }
-
-  .rpl-campaign-banner__media + .rpl-campaign-banner__body {
-    flex-basis: calc(50% - var(--local-flex-spacer));
-  }
 }
 
 .rpl-campaign-banner--secondary {
@@ -165,24 +141,6 @@
     }
   }
 
-  .rpl-campaign-banner__media {
-    @media (--rpl-bp-l) {
-      margin-right: var(--rpl-sp-6);
-      flex-basis: var(--local-flex-narrow);
-    }
-
-    @media (--rpl-bp-xl) {
-      margin-right: var(--rpl-sp-7);
-    }
-  }
-
-  /* stylelint-disable no-descending-specificity */
-  .rpl-campaign-banner__body {
-    @media (--rpl-bp-l) {
-      flex-basis: var(--local-flex-wide);
-    }
-  }
-
   .rpl-campaign-banner__media + .rpl-campaign-banner__body {
     margin-top: var(--rpl-sp-5);
 

packages/ripple-ui-core/src/components/campaign-banner/RplCampaignBanner.vue

@@ -1,23 +1,47 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 
+interface Props {
+  type: 'primary' | 'secondary'
+}
+
+const props = defineProps<Props>()
+
 const slots = useSlots()
 
+const isPrimary = computed(() => props.type === 'primary')
+
 const classes = computed(() => ({
   'rpl-campaign-banner': true,
-  [`rpl-campaign-banner--media`]: slots.media,
-  [`rpl-campaign-banner--meta`]: slots.meta
+  [`rpl-campaign-banner--${props.type}`]: true,
+  'rpl-campaign-banner--media': slots.media,
+  'rpl-campaign-banner--meta': slots.meta
+}))
+
+const mediaClasses = computed(() => ({
+  'rpl-campaign-banner__media': true,
+  'rpl-col-12': true,
+  'rpl-col-6-m': isPrimary.value,
+  'rpl-col-4-l': !isPrimary.value
+}))
+
+const bodyClasses = computed(() => ({
+  'rpl-campaign-banner__body': true,
+  'rpl-col-12': true,
+  'rpl-col-6-m': isPrimary.value && slots.media,
+  'rpl-col-7-m': isPrimary.value && !slots.media,
+  'rpl-col-7-l': !isPrimary.value
 }))
 </script>
 
 <template>
   <div :class="classes">
     <div class="rpl-container">
-      <div class="rpl-campaign-banner__inner">
-        <div v-if="$slots.media" class="rpl-campaign-banner__media">
+      <div class="rpl-campaign-banner__inner rpl-grid">
+        <div v-if="$slots.media" :class="mediaClasses">
           <slot name="media"></slot>
         </div>
-        <div class="rpl-campaign-banner__body">
+        <div :class="bodyClasses">
           <slot name="title"></slot>
           <div class="rpl-campaign-banner__content">
             <slot></slot>

packages/ripple-ui-core/src/components/campaign-banner/RplPrimaryCampaign.stories.mdx

@@ -67,7 +67,7 @@ export const MetaTemplate = (args) => ({
 
 ## Example / With Image
 
-This is an example the primary campaign banner with optional image
+This is an example of the primary campaign banner with optional image
 
 <Canvas>
   <Story

packages/ripple-ui-core/src/components/campaign-banner/RplPrimaryCampaign.vue

@@ -46,7 +46,7 @@ const handleClick = () => {
 </script>
 
 <template>
-  <RplCampaignBanner class="rpl-campaign-banner--primary">
+  <RplCampaignBanner type="primary">
     <template v-if="image" #media>
       <RplImage
         v-bind="image"

packages/ripple-ui-core/src/components/campaign-banner/RplSecondaryCampaign.stories.mdx

@@ -61,8 +61,7 @@ This is an example the secondary campaign banner with optional image
     args={{
       image: {
         src: 'img/image-landscape-m.jpg',
-      },
-      meta: '<span>Image meta data, i.e. caption</span>'
+      }
     }}
   >
     {SingleTemplate.bind()}

packages/ripple-ui-core/src/components/campaign-banner/RplSecondaryCampaign.vue

@@ -46,7 +46,7 @@ const handleClick = () => {
 </script>
 
 <template>
-  <RplCampaignBanner class="rpl-campaign-banner--secondary">
+  <RplCampaignBanner type="secondary">
     <template v-if="image" #media>
       <RplImage
         v-bind="image"