Component Request - FTVA Horizontal Card

[tinuola]

Component Description

This component is used on the FTVA Event Series Detail and Event Listing pages to display a list of events. The component will be assembled using FTVA variants of the following default/existing components:

• BlockClippedDate
• SectionTeaserList

Note: Per discussion with UX team, grouping events by date can be deferred for future enhancement; for now, each event item is displayed on a separate row.

Design

Specs & Annotations

• Card Horizontal: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=2347-31817&t=cZKRTJjgeXzTe5EI-0

• Card Vertical (Mobile): https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=14895-609&t=lHbNh0bwsHNnpmvV-0

Event Series Details

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=5-3465&t=fNrTBYZpK0kdo4XD-4

• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=4465-8569&t=fNrTBYZpK0kdo4XD-4

Event Listing

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=1406-16584&t=fNrTBYZpK0kdo4XD-4

• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=657-8835&t=ETVMWe81gQh1VTbP-4

Slots

None

Relevant Props

• No new props
• Add tagLabels to BlockClippedDate for the CardMeta component
  • To handle ftvaEventFilters field from the data
  • See EventSeriesDetail Sample Data1

Developer Tips/Notes

1. Create FTVA variant for BlockClippedDate to display the event date in a new div/column

• card metadata for Event Listing page includes the series title/category(?); for Event Detail, this is omitted
• in Mobile display, date column is hidden; but date should then display with event time and with a diamond icon as a separator
• Some parsing and "logicking" of the event time/date prop is very likely required (on desktop, only show the time; on mobile, show date and time)?

2. FTVA variant for SectionTeaserList excludes the See More/See Less toggle and renders all available items by default

• Pagination for the list (for FTVA) has been deferred

3. Create FTVA stories for BlockClippedDate, SectionTeaserList
4. Event tags have isActive class that can be applied when events are filtered on the Event Listing page

Events

None

Child/Related Components

1. BlockTag (FTVA) -> used in CardMeta (FTVA) -> used in BlockClippedDate (FTVA)
2. BlockClippedDate (FTVA) -> used in SectionTeaserList (FTVA)