fix: APPS-3107 rich text update (#678)

* test

* cleanup isuues

* fix card meta

* block-card date update

* add flex to story

* linting

* update story

* update css

src/lib-components/CardMeta.vue

@@ -178,12 +178,12 @@ const classes = computed(() => {
     />
 
     <!-- Named slot for custom title -->
-    <div
+    <h3
       v-if="$slots.title"
       class="custom-title"
     >
       <slot name="title" />
-    </div>
+    </h3>
 
     <SmartLink
       v-if="to"
@@ -207,12 +207,12 @@ const classes = computed(() => {
     />
 
     <!-- Named slot for custom description -->
-    <div
+    <p
       v-if="$slots.description"
       class="custom-description"
     >
       <slot name="description" />
-    </div>
+    </p>
 
     <RichText
       v-if="guestSpeaker"

src/stories/CardMeta.stories.js

@@ -301,8 +301,8 @@ export function FtvaCustomTitleAndDesription() {
       return {
         ftvaFeaturedArticles: [
           {
-            title: '<h3>Preserving <em>In Transit</em>: <a href=#>The Chinese</a> in California</h3>',
-            ftvaHomepageDescription: '<p><strong>In the summer</strong> of 2023, <a href=#>I had the chance</a> to select and restore a student film as part of the UCLA Student Film Initiative Internship: The Present Preserving the Past.</p>',
+            title: 'Preserving <em>In Transit</em>: <a href=#>The Chinese</a> in California',
+            ftvaHomepageDescription: '<strong>In the summer</strong> of 2023, <a href=#>I had the chance</a> to select and restore a student film as part of the UCLA Student Film Initiative Internship: The Present Preserving the Past.',
             articleCategories: 'People, Places',
             postDate: '2024-10-09T09:00:00-07:00'
           }
@@ -321,11 +321,13 @@ export function FtvaCustomTitleAndDesription() {
        :dateCreated="ftvaFeaturedArticles[0].postDate"
       >
         <template v-slot:title>
-          <rich-text v-html="ftvaFeaturedArticles[0].title" />
+          <rich-text
+            :rich-text-content="ftvaFeaturedArticles[0].title" />
         </template>
 
         <template v-slot:description>
-          <rich-text v-html="ftvaFeaturedArticles[0].ftvaHomepageDescription" />
+          <rich-text
+          :rich-text-content="ftvaFeaturedArticles[0].ftvaHomepageDescription" />
         </template>
       </card-meta>
     `,

src/styles/ftva/_card-meta.scss

@@ -53,30 +53,27 @@
     }
   }
 
-  :deep(.custom-title) {
-    .rich-text {
+  .custom-title {
+    :deep(.rich-text) {
       max-width: none;
       margin: 0;
-      padding-right: 0;
 
-      h3 {
-        margin-top: 0;
-        margin-bottom: 12px;
+      div {
+        @include ftva-h3;
       }
     }
   }
 
-  :deep(.custom-description) {
-    .rich-text {
+  .custom-description {
+    :deep(.rich-text) {
       max-width: none;
-      margin-left: 0px;
-      margin-bottom: 24px;
-      padding-right: 0;
-
-      p {
-        margin-top: 0;
-        margin-bottom: 12px;
-        @include truncate(3);
+      margin: 0;
+      margin-bottom: 48px;
+
+      div {
+        p {
+          @include truncate(3);
+        }
       }
     }
   }