diff --git a/src/lib-components/BlockCardThreeColumn.vue b/src/lib-components/BlockCardThreeColumn.vue
index f3bbd3f09..e46905a6e 100644
--- a/src/lib-components/BlockCardThreeColumn.vue
+++ b/src/lib-components/BlockCardThreeColumn.vue
@@ -6,6 +6,7 @@
import { computed } from 'vue'
import type { PropType } from 'vue'
import MoleculePlaceholder from 'ucla-library-design-tokens/assets/svgs/molecule-placeholder.svg'
+import format from 'date-fns/format'
import { useTheme } from '@/composables/useTheme'
// COMPONENTS
@@ -15,7 +16,6 @@ import CardMeta from '@/lib-components/CardMeta.vue'
// UTILITY FUNCTIONS
import formatFullDay from '@/utils/formatFullDay'
-import formatDay from '@/utils/formatEventDay'
import formatMonth from '@/utils/formatEventMonth'
// TYPESCRIPT
@@ -75,8 +75,7 @@ const parsedDateMonth = computed(() => {
const parsedDateDay = computed(() => {
if (props.startDate)
- return formatDay(props.startDate)
-
+ return format(new Date(props.startDate), 'd')
return ''
})
diff --git a/src/stories/BlockCardThreeColumn.stories.js b/src/stories/BlockCardThreeColumn.stories.js
index 619d3875c..22f15d48d 100644
--- a/src/stories/BlockCardThreeColumn.stories.js
+++ b/src/stories/BlockCardThreeColumn.stories.js
@@ -28,6 +28,22 @@ const mockDefault = {
],
}
+const mockSingleDigitDate = {
+ to: 'series/todd-solondz-series',
+ startDate: '2026-02-03T06:30:00+00:00',
+ image: API.image,
+ title: 'TEST - Todd Solondz Series',
+ endDate: '2026-04-08T05:45:00+00:00',
+ tagLabels: [
+ {
+ title: 'Guest speaker'
+ },
+ {
+ title: '35mm'
+ }
+ ],
+}
+
// Variations of stories below
export function Default(args) {
return {
@@ -53,6 +69,30 @@ export function Default(args) {
}
}
+export function SingleDigitDate(args) {
+ return {
+ data() {
+ return { ...mockSingleDigitDate }
+ },
+ provide() {
+ return {
+ theme: computed(() => 'ftva'),
+ }
+ },
+ components: { BlockCardThreeColumn },
+ template: `
+ `,
+ }
+}
+
export function LongTitle(args) {
return {
data() {
diff --git a/src/stories/BlockClippedDate.stories.js b/src/stories/BlockClippedDate.stories.js
index 567f6077c..f8a555c65 100644
--- a/src/stories/BlockClippedDate.stories.js
+++ b/src/stories/BlockClippedDate.stories.js
@@ -16,8 +16,26 @@ const mock = {
title: 'Seven seas of the ancient world',
alternativeFullName: '陳餘敏卿纪念基金',
language: 'zh',
- startDate: '2022-03-31T07:00:00+00:00',
- endDate: '2021-11-26T11:00:00-08:00',
+ startDate: '2026-12-17T07:00:00+00:00',
+ endDate: '2027-12-26T11:00:00-08:00',
+ text: '
In Greek literature (which is where the phrase entered Western literature), the Seven Seas were the Aegean, Adriatic, Mediterranean, Black, Red, and Caspian seas, with the Persian Gulf
',
+ imageAspectRatio: 60,
+ locations: [
+ { title: 'Powellarium', to: '/location/bar' },
+ { title: 'Research Library (Charles E. Young)', to: '/location/baz' },
+ ],
+ sectionHandle: 'event',
+}
+
+const mockSingleDigitDate = {
+ image: API.image,
+ to: '/visit/foo/bar/',
+ category: 'Ullamco',
+ title: 'Seven seas of the ancient world',
+ alternativeFullName: '陳餘敏卿纪念基金',
+ language: 'zh',
+ startDate: '2026-02-05T07:00:00+00:00',
+ endDate: '2027-02-07T11:00:00-08:00',
text: 'In Greek literature (which is where the phrase entered Western literature), the Seven Seas were the Aegean, Adriatic, Mediterranean, Black, Red, and Caspian seas, with the Persian Gulf
',
imageAspectRatio: 60,
locations: [
@@ -68,6 +86,31 @@ export function Default() {
}
}
+export function SingleDigitDate() {
+ return {
+ data() {
+ return { ...mockSingleDigitDate }
+ },
+ components: { BlockClippedDate },
+ template: `
+
+ `,
+ }
+}
+
export function OngoingEvent() {
return {
data() {
diff --git a/src/stories/SectionTeaserList.stories.js b/src/stories/SectionTeaserList.stories.js
index 209ff32b4..20a8934d9 100644
--- a/src/stories/SectionTeaserList.stories.js
+++ b/src/stories/SectionTeaserList.stories.js
@@ -17,7 +17,7 @@ const mockDefault = [
category: 'Ullamco',
title: 'Fames ac turpis egestas sed tempus lorem ipsum',
startDate: '2021-09-03T08:00:00+00:00',
- endDate: '2021-10-08T07:10:00+00:00',
+ endDate: '2021-10-28T07:10:00+00:00',
text: 'Ultricies leo integer malesuada nunc vel risus commodo viverra.',
sectionHandle: 'event',
},
@@ -26,8 +26,8 @@ const mockDefault = [
to: '/visit/foo/baz/',
category: 'Sagittis',
title: 'Amet nisl suscipit adipiscing bibendum lectus sed',
- startDate: '2021-09-03T08:00:00+00:00',
- endDate: '2021-10-08T07:10:00+00:00',
+ startDate: '2021-09-09T08:00:00+00:00',
+ endDate: '2021-10-18T07:10:00+00:00',
sectionHandle: 'event',
text: 'A diam maecenas sed enim. Tristique senectus et netus et malesuada fames. Nibh nisl condimentum id venenatis. Mi bibendum neque egestas congue. Placerat duis ultricies lacus sed turpis. Massa enim nec dui nunc mattis. Dolor morbi non arcu risus quis varius vestibulum sed.',
},
@@ -37,7 +37,7 @@ const mockDefault = [
category: 'Tincidunt',
title: 'Scelerisque varius morbi enim nunc ornare quam',
startDate: '2021-09-03T08:00:00+00:00',
- endDate: '2021-10-08T07:10:00+00:00',
+ endDate: '2021-10-23T07:10:00+00:00',
sectionHandle: 'event',
text: 'Eu ultrices vitae auctor eu augue. Dolor morbi non arcu risus quis varius quam. Augue lacus viverra vitae congue eu consequat.',
},
@@ -46,8 +46,8 @@ const mockDefault = [
to: '/visit/foo/ban/',
category: 'Gravida',
title: 'At varius vel pharetra vel turpis. Quam vulputate dignissim suspendisse in est ante in. Sed cras ornare arcu. Non diam phasellus vestibulum.',
- startDate: '2021-09-03T08:00:00+00:00',
- endDate: '2021-10-08T07:10:00+00:00',
+ startDate: '2021-09-08T08:00:00+00:00',
+ endDate: '2021-10-18T07:10:00+00:00',
sectionHandle: 'event',
text: 'Accumsan tortor posuere ac ut consequat semper viverra libero.',
},
@@ -70,7 +70,7 @@ const mockMixedOngoingEvents = [
category: 'Ullamco',
title: 'Fames ac turpis egestas sed tempus lorem ipsum',
startDate: '2021-09-03T08:00:00+00:00',
- endDate: '2021-10-08T07:10:00+00:00',
+ endDate: '2021-10-13T07:10:00+00:00',
text: 'Ultricies leo integer malesuada nunc vel risus commodo viverra.',
sectionHandle: 'event',
},
@@ -133,7 +133,7 @@ const mockDynamicComponent = [
id: '2847944',
to: 'events/la-région-centrale-03-08-24',
title: 'TEST - La Région Centrale Screening',
- startDate: '2027-03-31T07:00:00+00:00',
+ startDate: '2027-03-05T07:00:00+00:00',
image: API.image,
tagLabels: [
{ title: 'Guest speaker' },