Skip to content

Commit

Permalink
feat: APPS-3107 create ftva variation of block card with image and ca…
Browse files Browse the repository at this point in the history
…rd meta component for the article listing page (#677)

* test

* cleanup isuues

* fix card meta

* block-card date update

* add flex to story

* linting

* update story
  • Loading branch information
jendiamond authored Jan 24, 2025
1 parent c915626 commit ae73661
Show file tree
Hide file tree
Showing 7 changed files with 379 additions and 41 deletions.
20 changes: 11 additions & 9 deletions src/lib-components/BlockCardWithImage.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
<script
setup
lang="ts"
>
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import type { PropType } from 'vue'
Expand Down Expand Up @@ -165,14 +162,19 @@ const parsedDateFormat = computed(() => {
:language="language"
:section-handle="sectionHandle"
:date-created="dateCreated"
/>
>
<template #title>
<slot name="title" />
</template>

<template #description>
<slot name="description" />
</template>
</CardMeta>
</li>
</template>

<style
lang="scss"
scoped
>
<style lang="scss" scoped>
@import "@/styles/default/_block-card-with-image.scss";
@import "@/styles/ftva/_block-card-with-image.scss";
</style>
33 changes: 24 additions & 9 deletions src/lib-components/CardMeta.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
<script
setup
lang="ts"
>
<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue'
import format from 'date-fns/format'
Expand All @@ -25,6 +22,7 @@ const props = defineProps({
type: String,
default: '',
},
// the data is often an array that needs to be combined on the page into one string
category: {
type: String,
default: '',
Expand Down Expand Up @@ -166,7 +164,10 @@ const classes = computed(() => {

<template>
<div :class="classes">
<div v-if="$slots.linkedcategoryslot" class="linked-category">
<div
v-if="$slots.linkedcategoryslot"
class="linked-category"
>
<slot name="linkedcategoryslot" />
</div>

Expand All @@ -175,6 +176,15 @@ const classes = computed(() => {
class="category"
v-html="category"
/>

<!-- Named slot for custom title -->
<div
v-if="$slots.title"
class="custom-title"
>
<slot name="title" />
</div>

<SmartLink
v-if="to"
:link-target="parsedTarget"
Expand All @@ -196,6 +206,14 @@ const classes = computed(() => {
v-html="title"
/>

<!-- Named slot for custom description -->
<div
v-if="$slots.description"
class="custom-description"
>
<slot name="description" />
</div>

<RichText
v-if="guestSpeaker"
class="guestSpeaker"
Expand Down Expand Up @@ -296,10 +314,7 @@ const classes = computed(() => {
</div>
</template>

<style
lang="scss"
scoped
>
<style lang="scss" scoped>
@import "@/styles/default/_card-meta.scss";
@import "@/styles/ftva/_card-meta.scss";
</style>
238 changes: 238 additions & 0 deletions src/stories/BlockCardWithImage.stories.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { computed } from 'vue'
import BlockCardWithImage from '@/lib-components/BlockCardWithImage'
import RichText from '@/lib-components/RichText.vue'
import SectionWrapper from '@/lib-components/SectionWrapper.vue'

// Import mock api data
import * as API from '@/stories/mock-api.json'
Expand Down Expand Up @@ -137,3 +139,239 @@ FTVAItemsPostedDate.args = {
cardIsLink: true,
dateCreated: '2022-01-31T07:00:00+00:00',
}

const mockCustomTitleAndDesription = {
category: 'Interview, People',
title: '<h3>Preserving <em>In <strong>Transit</strong>:</em> The Chinese in California</h3>',
postDate: '2024-05-07T13:00:00-07:00',
ftvaHomepageDescription: '<p>Three alumni student films, made in the <strong>1970s-1980s</strong>, were preserved over a 10-week period by current MLIS student interns, all under the supervision of UCLA Film & Television Archive staff.</p>',
uri: 'blog/preserving-in-transit-the-chinese-in-california',
image: API.image,
}

function TemplateFTVACustomTitleDescription(args) {
return {
data() {
return {
...mockCustomTitleAndDesription,
...args,
}
},
provide() {
return {
theme: computed(() => 'ftva'),
}
},
components: { BlockCardWithImage, RichText },
template: `
<block-card-with-image
class="block-highlight"
:image="image"
:to="uri"
:category="category"
:dateCreated="postDate"
:image-aspect-ratio="imageAspectRatio"
>
<template v-slot:title>
<rich-text v-html="title" />
</template>
<template v-slot:description>
<rich-text v-html="ftvaHomepageDescription" />
</template>
</block-card-with-image>
`,
}
}

export const FTVACustomTitleDescription = TemplateFTVACustomTitleDescription.bind({})

const mockArticles = [
{
title: '<h3><em>Preserving In Transit:</em> The Chinese in California</h3>',
articleCategories: [
{
title: 'Interview'
},
{
title: 'People'
}
],
postDate: '2024-05-07T13:00:00-07:00',
ftvaHomepageDescription: '<p>Three alumnis student films, made in the <strong>1970s-1980s</strong>, were preserved over a 10-week period by current MLIS student interns, all under the supervision of UCLA Film &amp; Television Archive staff.</p>',
uri: 'blog/preserving-in-transit-the-chinese-in-california',
image: API.image,
ftvaImage: [
{
id: '3619987',
src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/In_Transit_blog2.jpeg',
height: 1813,
width: 2560,
srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/In_Transit_blog2.jpeg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/In_Transit_blog2.jpeg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/In_Transit_blog2.jpeg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/In_Transit_blog2.jpeg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/In_Transit_blog2.jpeg 2560w',
alt: null,
focalPoint: [
0.5,
0.5
]
}
]
},
{
title: '<h3>From McKinley to LBJ: Presidents in the Hearst Newsreels</h3>',
articleCategories: [
{
title: 'Newsreels'
},
{
title: 'Presidents'
}
],
postDate: '2024-02-19T16:00:00-08:00',
ftvaHomepageDescription: '<p>Curated by UCLA Film &amp; Television Archive Senior Newsreel Preservationist Jeffrey Bickel, the newsreels presented here cover the period from 1897 to 1967.</p>',
uri: 'blog/from-mckinley-to-lbj-presidents-in-the-hearst-newsreels',
image: API.image,
ftvaImage: [
{
id: '3619990',
src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/WilsonTaft-crop.png',
height: 1792,
width: 2560,
srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/WilsonTaft-crop.png 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/WilsonTaft-crop.png 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/WilsonTaft-crop.png 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/WilsonTaft-crop.png 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/WilsonTaft-crop.png 2560w',
alt: null,
focalPoint: [
0.5,
0.5
]
}
]
},
{
title: '<h3>The Effervescent Artist, Educator and Activist Betty Chen</h3>',
articleCategories: [
{
title: 'Educators'
},
{
title: 'Artists'
}
],
postDate: '2023-08-24T12:00:00-07:00',
ftvaHomepageDescription: '<p><strong>In the spring of 2022</strong>, UCLA-trained filmmaker Betty Yao-Jung Chen (November 5, 1943 throughApril 26, 2022) died in Florida. The news was confirmed by her niece and nephew.</p>',
uri: 'blog/the-effervescent-artist-educator-and-activist-betty-chen',
image: API.image,
ftvaImage: [
{
id: '3620037',
src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/BettyChen-blog1.png',
height: 1813,
width: 2560,
srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/BettyChen-blog1.png 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/BettyChen-blog1.png 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/BettyChen-blog1.png 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/BettyChen-blog1.png 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/BettyChen-blog1.png 2560w',
alt: null,
focalPoint: [
0.5,
0.5
]
}
]
}
]

function TemplateFTVAArticleBlogListing(args) {
return {
data() {
return {
mockArticles,
...args,
}
},
provide() {
return {
theme: computed(() => 'ftva'),
}
},
components: { SectionWrapper, BlockCardWithImage, RichText },
template: `
<section-wrapper
section-title="Featured Blogs"
theme="paleblue"
>
<block-card-with-image
class="block-highlight"
style="
background-color:white;
"
:image="mockArticles[0].ftvaImage[0]"
:image-aspect-ratio="imageAspectRatio"
:to="mockArticles[0].uri"
category="Interview, People"
:dateCreated="mockArticles[0].postDate"
>
<template v-slot:title>
<rich-text v-html="mockArticles[0].title" />
</template>
<template v-slot:description>
<rich-text v-html="mockArticles[0].ftvaHomepageDescription" />
</template>
</block-card-with-image>
<div
class="block-card-half"
style="
display: flex;
flex-direction: row;
gap: 28px;
margin-top: 40px;
"
>
<block-card-with-image
class="block-highlight"
style="background-color:white; flex:1;"
:image="mockArticles[1].ftvaImage[0]"
:image-aspect-ratio="imageAspectRatio"
:to="mockArticles[1].uri"
category="Interview, People"
:dateCreated="mockArticles[1].postDate"
>
<template v-slot:title>
<rich-text v-html="mockArticles[1].title" />
</template>
<template v-slot:description>
<rich-text v-html="mockArticles[1].ftvaHomepageDescription" />
</template>
</block-card-with-image>
<block-card-with-image
class="block-highlight"
style="background-color:white; flex:1;"
:image="mockArticles[2].ftvaImage[0]"
:image-aspect-ratio="imageAspectRatio"
:to="mockArticles[2].uri"
category="Interview, People"
:dateCreated="mockArticles[2].postDate"
>
<template v-slot:title>
<rich-text v-html="mockArticles[2].title" />
</template>
<template v-slot:description>
<rich-text v-html="mockArticles[2].ftvaHomepageDescription" />
</template>
</block-card-with-image>
</div>
<section-wrapper>
</section-wrapper>
</section-wrapper>
`,
}
}

export const FTVAArticleBlogListing = TemplateFTVAArticleBlogListing.bind({})
Loading

1 comment on commit ae73661

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.