feat: APPS-2954 MultiComponent update with DateCreated prop (#625)

* wip * Update dateCreated logic in CardMeta * Update BlockCard with dateCreated prop * Update SectionTeaserCard with story for blog series * Update css for dateCreated use in BlockCardWithImage * remove grid style * add hardcoded style to byline date * fix: revert logic for parsedDateFormat * fix: swap hardcoded text color for token value --------- Co-authored-by: tinuola <[email protected]>
UCLALibrary · Oct 2, 2024 · 316a316 · 316a316
1 parent c219b0a
commit 316a316
Show file tree

Hide file tree

Showing 7 changed files with 225 additions and 3 deletions.
diff --git a/src/lib-components/BlockCardWithImage.vue b/src/lib-components/BlockCardWithImage.vue
@@ -93,6 +93,10 @@ const props = defineProps({
     type: Boolean,
     default: false, // If this is true, make entire card clickable instead of just title
   },
+  dateCreated: {
+    type: String,
+    default: ''
+  }
 })
 
 // TOGGLE CLICKABLE BEHAVIOR
@@ -160,6 +164,7 @@ const parsedDateFormat = computed(() => {
       :alternative-full-name="alternativeFullName"
       :language="language"
       :section-handle="sectionHandle"
+      :date-created="dateCreated"
     />
   </li>
 </template>

diff --git a/src/lib-components/CardMeta.vue b/src/lib-components/CardMeta.vue
@@ -199,7 +199,7 @@ const classes = computed(() => {
     />
 
     <div
-      v-if="bylineOne || bylineTwo"
+      v-if="(bylineOne || bylineTwo) || dateCreated"
       class="byline-group"
     >
       <div

diff --git a/src/lib-components/SectionTeaserCard.vue b/src/lib-components/SectionTeaserCard.vue
@@ -50,6 +50,7 @@ const classes = computed(() => {
       :byline-two="item.bylineTwo"
       :section-handle="item.sectionHandle"
       :ongoing="item.ongoing"
+      :date-created="item.postDate"
       class="card"
     />
   </ul>

diff --git a/src/stories/BlockCardWithImage.stories.js b/src/stories/BlockCardWithImage.stories.js
@@ -25,6 +25,8 @@ const mock = {
     { title: 'Powellarium', to: '/location/bar' },
     { title: 'Research Library (Charles E. Young)', to: '/location/baz' },
   ],
+  bylineOne: null,
+  bylineTwo: null,
   sectionHandle: 'event',
 }
 
@@ -56,6 +58,9 @@ function Template(args) {
         :alternativeFullName="alternativeFullName"
         :language="language"
         :section-handle="sectionHandle"
+        :date-created="dateCreated"
+        :byline-one="bylineOne"
+        :byline-two="bylineTwo"
     />
 `,
   }
@@ -114,3 +119,21 @@ FTVAItemsNoImage.args = {
   locations: [],
   cardIsLink: true
 }
+
+export const FTVAItemsPostedDate = Template.bind({})
+FTVAItemsPostedDate.args = {
+  image: null,
+  title: 'Black Perspectives on Local L.A. TV',
+  category: null,
+  theme: 'ftva',
+  to: '/some/url/here/',
+  alternativeFullName: null,
+  startDate: null,
+  endDate: null,
+  text: '',
+  imageAspectRatio: 60,
+  sectionHandle: '',
+  locations: [],
+  cardIsLink: true,
+  dateCreated: '2022-01-31T07:00:00+00:00',
+}
diff --git a/src/stories/SectionTeaserCard.stories.js b/src/stories/SectionTeaserCard.stories.js
@@ -209,6 +209,7 @@ const parsedFTVAEventSeries = mockFtvaSeries.map((item) => {
     image: item.ftvaImage[0],
   }
 })
+
 // Variations of stories below
 export function Default() {
   return {
@@ -244,7 +245,7 @@ export function FTVAEventDetail() {
   }
 }
 
-export function ftvaEventSeries() {
+export function FTVAEventSeries() {
   return {
     data() {
       return { items: parsedFTVAEventSeries }
@@ -262,3 +263,179 @@ export function ftvaEventSeries() {
   `,
   }
 }
+
+const mockFTVABlogSeries = [
+  {
+    id: '3310088',
+    title: 'TEST - Tom Reed’s “For Members Only”: Black Perspectives on Local L.A. TV',
+    to: 'test-tom-reeds-for-members-only-black-perspectives-on-local-l-a-tv',
+    articleCategories: [
+      {
+        title: 'Featured'
+      },
+      {
+        title: 'Announcement'
+      }
+    ],
+    imageCarousel: [
+      {
+        image: [
+          {
+            id: '3156835',
+            src: 'https://static.library.ucla.edu/craftassetstest/images/_fullscreen/TomReed_MalcolmX.webp',
+            height: 1813,
+            width: 2560,
+            srcset: 'https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 2560w',
+            alt: 'Tom Reed hosting an episode exploring the teachings of Malcolm X',
+            focalPoint: [
+              0.5,
+              0.5
+            ]
+          }
+        ]
+      }
+    ],
+    postDate: '2024-07-02T05:08:00-07:00',
+  },
+  {
+    id: '3264674',
+    title: 'TEST -  Coronae Borealis Nova',
+    to: 'test-coronae-borealis-nova',
+    articleCategories: [
+      {
+        title: 'Collections'
+      },
+      {
+        title: 'Interview'
+      },
+      {
+        title: 'People'
+      }
+    ],
+    imageCarousel: [
+      {
+        image: [
+          {
+            id: '3264676',
+            src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/T-Coronae-Borealis-nova.jpg',
+            height: 1426,
+            width: 2560,
+            srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/T-Coronae-Borealis-nova.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/T-Coronae-Borealis-nova.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/T-Coronae-Borealis-nova.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/T-Coronae-Borealis-nova.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/T-Coronae-Borealis-nova.jpg 2560w',
+            alt: null,
+            focalPoint: [
+              0.5,
+              0.5
+            ]
+          }
+        ]
+      }
+    ],
+    postDate: '2024-07-02T05:08:00-07:00',
+  },
+  {
+    id: '3266907',
+    title: 'TEST - Hot Air Balloons',
+    to: 'test-hot-air-balloons',
+    articleCategories: [
+      {
+        title: 'Collections'
+      }
+    ],
+    imageCarousel: [
+      {
+        image: [
+          {
+            id: '3267149',
+            src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/balloons-1.jpg',
+            height: 1347,
+            width: 2560,
+            srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/balloons-1.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/balloons-1.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/balloons-1.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/balloons-1.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/balloons-1.jpg 2560w',
+            alt: null,
+            focalPoint: [
+              0.5,
+              0.5
+            ]
+          }
+        ]
+      },
+      {
+        image: [
+          {
+            id: '3267372',
+            src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/ballon-heating.jpg',
+            height: 1921,
+            width: 2560,
+            srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/ballon-heating.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/ballon-heating.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/ballon-heating.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/ballon-heating.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/ballon-heating.jpg 2560w',
+            alt: null,
+            focalPoint: [
+              0.5,
+              0.5
+            ]
+          }
+        ]
+      },
+      {
+        image: [
+          {
+            id: '3280534',
+            src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/kpil7j-21cut1large.webp',
+            height: 1664,
+            width: 2560,
+            srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 2560w',
+            alt: 'many hot air balloons in the air',
+            focalPoint: [
+              0.5,
+              0.5
+            ]
+          }
+        ]
+      },
+      {
+        image: [
+          {
+            id: '3280543',
+            src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/temecula_balloons.jpg',
+            height: 1595,
+            width: 2560,
+            srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/temecula_balloons.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/temecula_balloons.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/temecula_balloons.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/temecula_balloons.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/temecula_balloons.jpg 2560w',
+            alt: 'Temecula balloons',
+            focalPoint: [
+              0.5,
+              0.5
+            ]
+          }
+        ]
+      }
+    ],
+    postDate: '2024-07-02T05:08:00-07:00',
+  }
+]
+
+const parsedFTVABlogSeries = mockFTVABlogSeries.map((item) => {
+  return {
+    to: item.to,
+    title: item.title,
+    category: item.articleCategories[0].title,
+    image: item.imageCarousel[0].image[0],
+    postDate: item.postDate,
+  }
+})
+
+export function FTVABlogSeries() {
+  return {
+    data() {
+      return { items: parsedFTVABlogSeries }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { SectionTeaserCard },
+    template: `
+      <section-teaser-card
+        :items="items"
+      />
+  `,
+  }
+}
diff --git a/src/styles/ftva/_block-card-with-image.scss b/src/styles/ftva/_block-card-with-image.scss
@@ -35,6 +35,20 @@
         &:hover>a.title {
             text-decoration: none;
         }
+
+        .byline-group {
+            position: absolute;
+            bottom: var(--space-s);
+
+            .date-created::before {
+                content: unset;
+            }
+
+            .schedule-item.date-created {
+                color: $subtitle-grey;
+                font-weight: 500;
+            }
+        }
     }
 
     .top-text {
@@ -80,7 +94,8 @@
                 color: none;
                 text-decoration: none;
                 text-decoration-thickness: none;
-                text-decoration-color: none;
+                -webkit-text-decoration-color: none;
+                        text-decoration-color: none;
                 text-underline-offset: none;
             }
         }

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -49,6 +49,7 @@ export interface BlockCardMetaType {
   bylineOne: string
   bylineTwo: string
   ongoing: boolean
+  postDate?: string
 }
 
 export interface BlockImpactNumbersCarouselType {
-Original file line number
+Diff line change
@@ Expand Up / @@ -199,7 +199,7 @@ const classes = computed(() => { @@
         />
         <div
-          v-if="bylineOne || bylineTwo"
+          v-if="(bylineOne || bylineTwo) || dateCreated"
           class="byline-group"
         >
           <div
@@ Expand Down @@