Component Request - FTVA Event Detail Block

[tinuola]

Component Description

This component is used on the Event Page to display event details: event date, time, location and an optional Add to Calendar button. (Note: Calendar button/dropdown still in progress.)

• The Add to Calendar button is a separate component.

Current design without the 'Add to Calendar' button:

Design

See design implementation on Event Page comps:

• Desktop view: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/Final-Design-with-Annotations?node-id=1422-31286&t=KbBPQbZnjWFFwlLr-0

• Mobile view: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/Final-Design-with-Annotations?node-id=615-13265&t=IZq9mIUDb7gHInqv-4

Mobile/responsive component is not needed.

FTVA Tokens: https://github.com/UCLALibrary/design-tokens/blob/1221215c002c3e5992c16817047dea61a0432224/scss/_tokens-ftva.scss

Specs: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=11275-3797&t=FcCl8uy276sAkOOh-0

Slots

No slots needed.

Props

props: {
 startDate: {
   type: String,
   default: '',
 },
 time: {
  type: String,
  default: '',
 },
 location: {
  type: Array,
  default: () => [],
 },
}

Developer Tips

List any developer tips here

1. Breakpoints likely not needed; in the designs, the component doesn't change sizes across screens
2. Format/parse event date and time
   • See utility functions in library component repo: formatEventTimes, formatEventDates
     3. See BannerHeader and BannerFeatured components for code/implementation reference
     4. See craft query/data below

Craft Info

{
  data: {
    entry: {
      id: "2847944",
      typeHandle: "ftvaEvent",
      title: "La Région Centrale 03-08-24",
      startDateWithTime: "2024-03-09T03:30:00+00:00",
      location: [
        {
          id: "195746",
          title: "Billy Wilder Theater",
          url: "https://test-craft.library.ucla.edu/locations/billy-wilder-theater",
          uri: "locations/billy-wilder-theater"
        },
        {
          id: "770077",
          title: "Music Library",
          url: "https://test-craft.library.ucla.edu/locations/music-library",
          uri: "locations/music-library"
        }
      ]
    }
  }
}

Events

None.

Child components

List out any components that are used by this new component.

1. icon-with-link component
2. add-to-calendar button used to save an event to a user's account. (Note: Not the finalized name of the component.)

Screenshots