Revert "[SDPAP-7121] - Removed of "Campaign with video" functionality from secondary campaign (#1271)" (#1272)

This reverts commit ae2f417.

Author: jeffdowdle

packages/components/Organisms/CampaignSecondary/CampaignSecondary.stories.mdx

@@ -37,4 +37,25 @@ export const Template = (args, { argTypes }) => ({
   </Story>
 </Canvas>
 
+export const TemplateWVideo = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { RplCampaignSecondary },
+  template: '<rpl-campaign-secondary :title="title" :summary="summary" :link="link" :image="image" :video="video" />'
+});
+
+<Canvas>
+  <Story
+    name="With video"
+    args={{
+      title: 'Secondary campaign with video',
+      summary: 'Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit, sed do eiusmod temporar incident  incididunt ut labore et dolore magna aliqua. Ut enim ad minim niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.',
+      link: { text: 'Call to action', url: '#' },
+      image: null,
+      video: { src: 'https://www.youtube.com/embed/bSlnfyGTiss', mediaLink: { text: 'View transcript', url: '#' } }
+    }}
+  >
+    {TemplateWVideo.bind({})}
+  </Story>
+</Canvas>
+
 <ArgsTable of={RplCampaignSecondary} />

packages/components/Organisms/CampaignSecondary/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="rpl-campaign-secondary">
     <div class="rpl-campaign-secondary__row">
-      <div v-if="image" class="rpl-campaign-secondary__left">
+      <div v-if="image || video" class="rpl-campaign-secondary__left">
         <div class="rpl-campaign-secondary__content">
-          <rpl-responsive-img class="rpl-campaign-secondary__image" v-bind="image" alt="" />
+          <rpl-responsive-img v-if="image" class="rpl-campaign-secondary__image" v-bind="image" alt="" />
+          <rpl-embedded-video v-if="!image && video" :variant="video.mediaLink ? 'link' : false" :src="video.src" :media-link="video.mediaLink" class="rpl-campaign-secondary__video" />
         </div>
       </div>
       <div class="rpl-campaign-secondary__right">
@@ -20,6 +21,7 @@
 <script>
 import breakpoint from '@dpc-sdp/ripple-global/mixins/breakpoint'
 import RplButton from '@dpc-sdp/ripple-button'
+import RplEmbeddedVideo from '@dpc-sdp/ripple-embedded-video'
 import RplResponsiveImg from '@dpc-sdp/ripple-responsive-img'
 
 export default {
@@ -29,10 +31,12 @@ export default {
     title: String,
     summary: String,
     link: Object,
+    video: Object,
     image: Object
   },
   components: {
     RplButton,
+    RplEmbeddedVideo,
     RplResponsiveImg
   }
 }

packages/ripple-nuxt-tide/lib/config/tide.config.js

@@ -114,6 +114,10 @@ const tideConfig = {
           'image': {
             field: ['field_block_image', 'field_media_image'],
             filters: ['cardImage']
+          },
+          video: {
+            field: 'field_block_embedded_video',
+            filters: ['embeddedVideo']
           }
         }
       },

packages/ripple-nuxt-tide/modules/landing-page/tide.config.js

@@ -20,6 +20,7 @@ module.exports = {
       'field_landing_page_hero_banner',
       'field_landing_page_c_primary.field_block_image.field_media_image',
       'field_landing_page_c_secondary.field_block_image.field_media_image',
+      'field_landing_page_c_secondary.field_block_embedded_video',
       'field_landing_page_key_journeys',
       'field_landing_page_contact.field_paragraph_phones',
       'field_landing_page_contact.field_paragraph_social_media',

packages/ripple-nuxt-tide/modules/profile/tide.config.js

@@ -3,6 +3,7 @@ module.exports = {
     profile: [
       'field_profile_category',
       'field_landing_page_c_secondary.field_block_image.field_media_image',
+      'field_landing_page_c_secondary.field_block_embedded_video',
       'field_landing_page_contact.field_paragraph_phones',
       'field_landing_page_contact.field_paragraph_social_media'
     ]