fix: APPS-3158 update block card with image (#681)

* add conditional to CBlockCardWithImage for custom title & description * revert changes * src/stories/BlockCardWithImage.stories.js * update the css * remove styles from cardMeta css block * linting * move all custom title & description styles to cardMeta component * move all custom title & description styles to cardMeta component * linting * last move * add comment for a TODO
UCLALibrary · Jan 31, 2025 · cb20111 · cb20111 · github-actions · Jan 31, 2025
1 parent b8d0f63
commit cb20111
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/src/stories/BlockCardWithImage.stories.js b/src/stories/BlockCardWithImage.stories.js
@@ -189,7 +189,7 @@ export const FTVACustomTitleDescription = TemplateFTVACustomTitleDescription.bin
 
 const mockArticles = [
   {
-    title: '<h3><em>Preserving In Transit:</em> The Chinese in California</h3>',
+    ftvaAlternativeTitle: '<h3><em>Preserving In Transit:</em> The Chinese in California</h3>',
     articleCategories: [
       {
         title: 'Interview'
@@ -218,7 +218,7 @@ const mockArticles = [
     ]
   },
   {
-    title: '<h3>From McKinley to LBJ: Presidents in the Hearst Newsreels</h3>',
+    ftvaAlternativeTitle: '<h3>From McKinley to LBJ: Presidents in the Hearst Newsreels</h3>',
     articleCategories: [
       {
         title: 'Newsreels'
@@ -247,7 +247,7 @@ const mockArticles = [
     ]
   },
   {
-    title: '<h3>The Effervescent Artist, Educator and Activist Betty Chen</h3>',
+    ftvaAlternativeTitle: '<h3>The Effervescent Artist, Educator and Activist Betty Chen</h3>',
     articleCategories: [
       {
         title: 'Educators'
@@ -308,13 +308,12 @@ function TemplateFTVAArticleBlogListing(args) {
         category="Interview, People"
         :dateCreated="mockArticles[0].postDate"
         >
-
         <template #customTitle>
-          <rich-text v-html="mockArticles[0].title" />
+          <RichText :rich-text-content="mockArticles[0].ftvaAlternativeTitle" />
         </template>
 
         <template #customDescription>
-          <rich-text v-html="mockArticles[0].ftvaHomepageDescription" />
+          <RichText :rich-text-content="mockArticles[0].ftvaHomepageDescription" />
         </template>
       </block-card-with-image>
 
@@ -336,14 +335,12 @@ function TemplateFTVAArticleBlogListing(args) {
             category="Interview, People"
             :dateCreated="mockArticles[1].postDate"
             >
-
             <template #customTitle>
-
-              <rich-text v-html="mockArticles[1].title" />
+              <RichText :rich-text-content="mockArticles[1].ftvaAlternativeTitle" />
             </template>
 
             <template #customDescription>
-              <rich-text v-html="mockArticles[1].ftvaHomepageDescription" />
+              <RichText :rich-text-content="mockArticles[1].ftvaHomepageDescription" />
             </template>
           </block-card-with-image>
 
@@ -356,19 +353,15 @@ function TemplateFTVAArticleBlogListing(args) {
             category="Interview, People"
             :dateCreated="mockArticles[2].postDate"
             >
-
             <template #customTitle>
-              <rich-text v-html="mockArticles[2].title" />
+              <RichText :rich-text-content="mockArticles[2].ftvaAlternativeTitle" />
             </template>
 
             <template #customDescription>
-              <rich-text v-html="mockArticles[2].ftvaHomepageDescription" />
+              <RichText :rich-text-content="mockArticles[2].ftvaHomepageDescription" />
             </template>
           </block-card-with-image>
       </div>
-      <section-wrapper>
-
-      </section-wrapper>
     </section-wrapper>
     `,
   }

diff --git a/src/styles/ftva/_block-card-with-image.scss b/src/styles/ftva/_block-card-with-image.scss
@@ -1,3 +1,5 @@
+// TODO refactor this component to get rid of position absolute for the date/byline
+
 .ftva.block-highlight {
     position: relative;
 
@@ -88,13 +90,15 @@
         }
     }
 
+    // because right now the byline position is set to absolute
+    // we need to add this margin to push the date down
     :deep(.custom-description) {
         .rich-text {
-            padding-bottom: 24px;
+            margin-bottom: 48px;
         }
     }
 
-    /* This keeps the moleule image from expanding vertically when in tablet size */
+    /* This keeps the molecule image from expanding vertically when in tablet size */
     &.is-vertical {
         flex-direction: column;
 

diff --git a/src/styles/ftva/_card-meta.scss b/src/styles/ftva/_card-meta.scss
@@ -56,8 +56,19 @@
   .custom-title {
     :deep(.rich-text) {
       max-width: none;
+      padding-right: 30px;
       margin: 0;
 
+      .parsed-content {
+        margin-bottom: 18px;
+      }
+
+      h3 {
+        padding-bottom: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
       div {
         @include ftva-h3;
       }
@@ -67,8 +78,9 @@
   .custom-description {
     :deep(.rich-text) {
       max-width: none;
+      padding-bottom: 1px;
+      padding-right: 30px;
       margin: 0;
-      margin-bottom: 48px;
 
       div {
         p {