[SDPA-6095] - card rainbow feature flag (#1185)

* SDPA-6095 - Add feature flag for card rainbow

* SDPA-6095 - Add optional chain operator to card config

* SDPA-6095 - Update card tests

* SDPA-6095 - Add feature toggle logic to 'CardContent.vue'

packages/components/Molecules/Card/CardContent.vue

@@ -5,6 +5,7 @@
     :class="{
       'rpl-card-content--no-image': !image,
       'rpl-card-content--has-border': (border && !image),
+      'rpl-card-content--hide-rainbow': this.hidePromoCardRainbow,
       'rpl-card-content--center': (center && !image),
       'rpl-card-content--default': (type === 'default'),
       'rpl-card-content--simple': (type === 'simple'),
@@ -58,6 +59,9 @@ export default {
     },
     computedImg () {
       return typeof this.image === 'string' ? { src: this.image } : this.image
+    },
+    hidePromoCardRainbow () {
+      return this.rplOptions?.hidePromoCardRainbow
     }
   },
   created () {
@@ -81,6 +85,7 @@ export default {
   $rpl-card-content-border-height: rem(8px) !default;
   $rpl-card-content-background: rpl_color('white') !default;
   $rpl-card-content-no-image-padding: (rem(56px) - $rpl-card-vertical-padding) 0 0 0 !default;
+  $rpl-card-content-hide-rainbow-padding-top: 0 !default;
   $rpl-card-content-no-image-background-image: rpl_gradient('decorative_gradient') !default;
   $rpl-card-content-default-link-ruleset: ('xs', 1em, 'semibold') !default;
   $rpl-card-content-simple-link-ruleset: (
@@ -160,6 +165,10 @@ export default {
         padding: $rpl-card-content-no-image-padding;
       }
 
+      &#{$root}--no-image#{$root}--hide-rainbow {
+        padding-top: $rpl-card-content-hide-rainbow-padding-top;
+      }
+
       &#{$root}--center {
         @include rpl_breakpoint('m') {
           padding-top: 0;
@@ -182,6 +191,10 @@ export default {
       background-repeat: no-repeat;
     }
 
+    &--has-border#{$root}--hide-rainbow {
+      background-image: none;
+    }
+
     &__image-wrapper {
       width: 100%;
       #{$root}--default &,

packages/components/Molecules/Card/CardPromo.vue

@@ -1,5 +1,5 @@
 <template>
-  <rpl-link v-if="link" :class="['rpl-card-promo', classModifiers]" :href="link.url">
+  <rpl-link v-if="link" :class="classes" :href="link.url">
     <rpl-responsive-img v-if="computedImg && displayStyle !== 'noImage'" class="rpl-card-promo__image" v-bind="computedImg" alt="" :srcSet="srcSet" />
     <div class="rpl-card-promo__content" v-cloak>
       <div v-if="showMeta && isMetaInfoNotEmpty" class="rpl-card-promo__meta">
@@ -95,13 +95,23 @@ export default {
     }
   },
   computed: {
-    classModifiers () {
-      // if thumbnail or profile don't have image, fallback to noimage styling
+    classes () {
+      let classes = ['rpl-card-promo']
+
+      // if the option to hide the rainbow stripe is true, add the appropriate class
+      if (this.rplOptions?.hidePromoCardRainbow) {
+        classes.push('rpl-card-promo--hide-rainbow')
+      }
+
+      // if the display type is thumbnail or profile but no image is set, fallback to the noimage styling
       const classPrefix = 'rpl-card-promo'
       if (!this.image) {
-        return `${classPrefix}--noimage`
+        classes.push(`${classPrefix}--noimage`)
+      } else {
+        classes.push(this.modifiers(classPrefix))
       }
-      return this.modifiers(classPrefix)
+
+      return classes
     },
     trimmedSummary () {
       let summaryLength = 300
@@ -145,6 +155,7 @@ export default {
   $rpl-card-promo-no-image-border: rpl_gradient('decorative_gradient') !default;
   $rpl-card-promo-no-image-border-height: rem(8px) !default;
   $rpl-card-promo-no-image-padding-top: ($rpl-space * 6) !default;
+  $rpl-card-promo-hide-rainbow-padding-top: ($rpl-space * 5) !default;
   $rpl-card-promo-thumbnail-padding-top: $rpl-space-4 !default;
   $rpl-card-promo-profile-image-margin-top: rem(56px) !default;
   $rpl-card-promo-profile-image-padding-top: ($rpl-space * 5) !default;
@@ -253,6 +264,10 @@ export default {
         padding-top: $rpl-card-promo-no-image-padding-top;
       }
 
+      #{$root}--noimage#{$root}--hide-rainbow & {
+        padding-top: $rpl-card-promo-hide-rainbow-padding-top;
+      }
+
       #{$root}--thumbnail & {
         padding-top: $rpl-card-promo-thumbnail-padding-top;
       }
@@ -275,6 +290,10 @@ export default {
       background-repeat: no-repeat;
     }
 
+    &--noimage#{$root}--hide-rainbow {
+      background-image: none;
+    }
+
     &--profile {
       #{$root}__content {
         display: flex;

packages/components/Molecules/Card/__test__/CardPromo.test.js

@@ -74,13 +74,48 @@ describe('CardPromo', () => {
       }
     })
 
-    expect(wrapper.vm.classModifiers).toEqual('rpl-card-promo--profile')
+    expect(wrapper.vm.classes).toEqual(['rpl-card-promo', 'rpl-card-promo--profile'])
 
     wrapper.setProps({ image: null })
-    expect(wrapper.vm.classModifiers).toEqual('rpl-card-promo--noimage')
+    expect(wrapper.vm.classes).toEqual(['rpl-card-promo', 'rpl-card-promo--noimage'])
 
     wrapper.setProps({ displayStyle: 'noImage' })
-    expect(wrapper.vm.classModifiers).toEqual('rpl-card-promo--noimage')
+    expect(wrapper.vm.classes).toEqual(['rpl-card-promo', 'rpl-card-promo--noimage'])
+  })
+
+  it('generates class to hide rainbow stripe if rplOptions has it configured', () => {
+    const wrapper = shallowMount(CardPromo, {
+      propsData: {
+        title: 'Promo card',
+        summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+        link: { text: 'Read more', url: '#' },
+        topic: 'Event',
+        author: 'John Doe',
+        displayStyle: 'profile',
+        image: {
+          src: 'https://via.placeholder.com/304x199',
+          focalPoint: {
+            x: '152',
+            y: '100'
+          },
+          width: 304,
+          height: 199
+        }
+      },
+      mocks: {
+        rplOptions: {
+          hidePromoCardRainbow: true
+        }
+      }
+    })
+
+    expect(wrapper.vm.classes).toEqual(['rpl-card-promo', 'rpl-card-promo--hide-rainbow', 'rpl-card-promo--profile'])
+
+    wrapper.setProps({ image: null })
+    expect(wrapper.vm.classes).toEqual(['rpl-card-promo', 'rpl-card-promo--hide-rainbow', 'rpl-card-promo--noimage'])
+
+    wrapper.setProps({ displayStyle: 'noImage' })
+    expect(wrapper.vm.classes).toEqual(['rpl-card-promo', 'rpl-card-promo--hide-rainbow', 'rpl-card-promo--noimage'])
   })
 
   it('returns content type label when it is valid and showMeta is true', () => {

packages/ripple-nuxt-ui/lib/templates/plugin.js

@@ -80,4 +80,8 @@ requireCustomFile.keys().forEach(fileName => {
 })
 <% } %>
 
+<% if (typeof options.hidePromoCardRainbow !== 'undefined') { %>
+rplOptions.hidePromoCardRainbow = options.hidePromoCardRainbow
+<% } %>
+
 Vue.use(RplGlobal, rplOptions)