fix: APPS-2976 & APPS-3011 Updates to cardMeta - category & aboutAuthor

src/lib-components/CardMeta.vue

@@ -166,6 +166,10 @@ const classes = computed(() => {
 
 <template>
   <div :class="classes">
+    <div class="linked-category">
+      <slot name="linkedcategoryslot" />
+    </div>
+
     <div
       v-if="category"
       class="category"
@@ -284,9 +288,6 @@ const classes = computed(() => {
       <slot name="floatingslot" />
     </div>
 
-    <div v-if="sectionHandle === 'ftvaArticle'" class="heading-about-author">
-      About the author
-    </div>
     <RichText
       v-if="text"
       class="text"

src/stories/CardMeta.stories.js

@@ -1,6 +1,7 @@
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 import CardMeta from '@/lib-components/CardMeta'
 import ButtonDropdown from '@/lib-components/ButtonDropdown.vue'
+import SmartLink from '@/lib-components/SmartLink.vue'
 import { useGlobalStore } from '@/stores/GlobalStore'
 
 // Storybook default settings
@@ -181,7 +182,6 @@ const mockFTVAArticleData = {
       contributor: 'Axa Liaux (external contributor)'
     }
   ],
-  aboutTheAuthor: '<p>Our guest writer is <strong>Jen Diamond</strong>. She wrote this entry</p>',
   sectionHandle: 'ftvaArticle'
 }
 const parsedArticleCategories = mockFTVAArticleData.articleCategories.map(category => category.title).join(', ')
@@ -212,6 +212,7 @@ const mockSocialList = {
     },
   ],
 }
+
 export function FTVAArticleDetailWShareButton() {
   return {
     data() {
@@ -245,17 +246,48 @@ export function FTVAArticleDetailWShareButton() {
       })
     },
     components: { CardMeta, ButtonDropdown },
-    template: ` 
+    template: `
       <card-meta
           :category="parsedArticleCategories"
           :title="title"
           :bylineOne="contributors[0].contributor"
           :dateCreated="postDate"
-          :text="aboutTheAuthor"
           sectionHandle="ftvaArticle"
       >
       <template v-slot:sharebutton><ButtonDropdown button-title="Share" has-icon=true :dropdown-list="mockSocialList.dropdownList" /></template>
       </card-meta>
   `,
   }
 }
+
+export function FtvaLinkedCategoryAndTitle() {
+  return {
+    data() {
+      return {
+        ftvaEventSeries: {
+          title: 'Step Up 2 - The Streets (2008)',
+          to: '/series/step-up-series'
+        }
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { CardMeta, SmartLink },
+    template: `
+      <card-meta
+        :title="ftvaEventSeries.title"
+      >
+        <template v-slot:linkedcategoryslot>
+          <smart-link
+            :to="ftvaEventSeries.to"
+          >
+            {{ ftvaEventSeries.title }}
+          </smart-link>
+        </template>
+      </card-meta>
+  `,
+  }
+}

src/styles/ftva/_card-meta.scss

@@ -7,6 +7,16 @@
     margin: 0 0 12px;
   }
 
+  .linked-category {
+    @include ftva-subtitle-1;
+    color: $subtitle-grey;
+    margin: 0 0 12px;
+
+    &:hover {
+      color: $accent-blue;
+    }
+  }
+
   .title {
     @include ftva-h2;
     color: $heading-grey;
@@ -32,6 +42,7 @@
     flex-direction: row;
     @include ftva-body-2;
     color: $medium-grey;
+
     .date-created::before {
       content: url('ucla-library-design-tokens/assets/svgs/icon-ftva-diamond.svg');
       margin: 0 8px;
@@ -50,9 +61,11 @@
   .sharebutton-slot {
     margin-top: 20px;
     margin-bottom: 36px;
+
     &:empty {
       display: none;
     }
+
     @media #{$small} {
       margin-top: 12px;
       margin-bottom: 28px;
@@ -65,18 +78,20 @@
   }
 
   &.ftvaArticle {
+
     // on card-meta with sectionHandle prop = 'ftvaArticle'
     // we have a unique 'About the Author' section which uses different styles
     .heading-about-author {
       @include ftva-subtitle-2;
       color: $accent-blue;
       padding-bottom: 4px;
     }
+
     .text {
-      :deep(.parsed-content) > p {
+      :deep(.parsed-content)>p {
         @include ftva-body-2;
         color: $medium-grey;
       }
     }
   }
-}
+}