chore(#102): add subtitle to promo card, make date only display if pr…

…ovided
Realityloop · Aug 16, 2023 · 0dac032 · 0dac032
1 parent fe4ccdd
commit 0dac032
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 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
@@ -31,8 +31,20 @@
         <slot name="content_top" />
       </div>
 
+
+      <!-- Subtitle -->
+      <div
+        v-if="subtitle"
+        class="ct-promo-card__subtitle"
+      >
+        <span :class="'ct-tag ct-theme-'+ theme + ' ct-tag--tertiary'">
+          {{ subtitle }}
+        </span>
+      </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,