Merge pull request #103 from Realityloop/feature/102-promo_card

chore(#102): add subtitle to promo card, make date only display if pr…
Realityloop · Aug 18, 2023 · e4fcce7 · e4fcce7
2 parents fe4ccdd + 743c7a9
commit e4fcce7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/components/PromoCard.stories.js b/src/components/PromoCard.stories.js
@@ -31,6 +31,7 @@ Default.args = {
   date: '29 Nov 2022',
   default: 'Esse reprehenderit non sit occaecat eiusmod nulla cillum adipisicing excepteur anim non quis non dolor exercitation eu',
   imageSrc: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',
+  subtitle: 'Occaecat non enim',
   tags: [
     { id: 1, value: 'Topic 1' },
     { id: 2, value: 'Topic 2' }

diff --git a/src/components/PromoCard.vue b/src/components/PromoCard.vue
@@ -3,21 +3,23 @@
     class="ct-promo-card"
     :class="{
       [themeClass]: true,
+      'ct-promo-card--with-image': hasImage,
       'ct-promo-card--image-over': hasImage && $scopedSlots.image_over
     }"
   >
     <div
       v-if="hasImage"
-      class="ct-promo-card__image-wrapper"
+      class="ct-promo-card__image"
     >
       <!-- Slot: Image -->
       <slot name="image">
         <CTImage
           :alt="imageAlt"
           :src="imageSrc"
+          :theme="theme"
         />
       </slot>
-      <div class="ct-promo-card__image-over">
+      <div class="ct-promo-card__image__over">
         <!-- Slot: Image over -->
         <slot name="image_over" />
       </div>
@@ -31,8 +33,18 @@
         <slot name="content_top" />
       </div>
 
+
+      <!-- Subtitle -->
+      <div
+        v-if="subtitle"
+        class="ct-promo-card__subtitle"
+      >
+        <CTTag :value="subtitle" :theme="theme" type="tertiary" />
+      </div>
+
       <!-- Date -->
       <CTTag
+        v-if="date"
         class="ct-promo-card__date"
         icon="calendar-2"
         :theme="theme"
@@ -120,6 +132,10 @@ export default {
       type: String,
       default: undefined
     },
+    subtitle: {
+      type: String,
+      default: undefined,
+    },
     summary: {
       type: String,
       default: undefined,

diff --git a/src/mixins/link.js b/src/mixins/link.js
@@ -2,7 +2,7 @@ export default {
   props: {
     link: {
       type: String,
-      default: '#'
+      default: undefined
     },
     linkExternal: {
       type: Boolean,