Component Update Request - Update CardMeta for FTVA

farosFreed commented 2 weeks ago

Component Description

This component is used on FTVA pages to display information near the top of the page. (See example event detail page with the component outlined in dotted red)

CARD META

Design

Please also see attached screenshots for quick reference.

FTVA / 'Banner Header Specs' / shows all the iterations of the header for FTVA that cardmeta needs to handle: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=12146-65107&t=bufj8rLPrNFyFrG5-0
Mobile Designs / FTVA Event Detail Page showing the header in context of the event detail page: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/Final-Design-with-Annotations?node-id=11-1439&t=ZKx3PVE85OLS5eQV-0

Slots

This component could benefit from a generic slot beneath the title so that any 1 off content could still be included in the header easily from the page. This might be the best way to add the share button to the component, rather than adding a bunch of props for it.

Props

Add these props to existing props in the component. Existing props should not be renamed or changed.

props: {
 // if tag exists, show new <BlockTag> component inline in front of the <RichText> component on line 186
 // <BlockTag> will implement like this <BlockTag :label="tagLabel" />
  tagLabel: {
       type: String
       required: false
  },
}

v2 props for sharebutton (if we use a slot instead, we won't need this)

props: {
  // we only need to implement this prop if we are not going to use a slot for shareButton
  //  might require additional props for social media share links and dropdown menu that shareButton launches 
  showShareButton: {
       type: Boolean,
       default: false
  }
}

Developer Tips

Here's how the existing CardMeta component props will map to the FTVA mockups

prop_name (FTVA Mockup Label)

title (header text), category (subtitle text), text (body text)

When implementing css for ftva, please use this pattern to allow themeing the component without passing additional props: https://uclalibrary.atlassian.net/wiki/spaces/DEV/pages/406061259/Dynamic+Theme+management

Events

No events needed

Child components

Needs to implement the new <BlockTag> component (see 'tag' prop in props section above for details) https://uclalibrary.atlassian.net/browse/APPS-2704
Needs to implement a new <ShareButton> ** component with dropdown menu of several share links (or provide a slot for one)
- because the ShareButton is not used in the event detail page, it can be left for version 2 of this component if needed

** or whatever we end of naming the new component that is a button with a dropdown menu, may also be used in the 'add to calendar' button

Screenshots

Banner header variations for FTVA

with tag / blocktag
with share button
with centered title text
there is technically a 4th variation with only the category/subtitle and title showing (not pictured)

pghorpade commented 2 weeks ago

@farosFreed Please also add implementation detail of how the class prop will be used in the component as an example.

farosFreed commented 1 week ago

This component will need to implement a child component or slot to handle the ShareButton. However, because the sharebutton requirements are not finalized yet and the props we may need to pass to it are unknown, I suggest for now we just use a slot and revisit this component when we need to implement the share button for the next page if the slot isn't enough.

pghorpade commented 1 week ago

@farosFreed Yes we will use slot for the sharebutton. I met with @axamei and there can be more than one Tags , The description under "Introduced by text" , can also be part of this component as we have text prop can be used for the description text. The "Introduce by text" will be a new prop named introduction, Following is the screenshot for the field in craft this text will appear after the tags(event filters in craft)

pghorpade commented 1 week ago

@farosFreed Tags are event filters in craft , there can be more than 1 Tag

pghorpade commented 1 week ago

Description text just above the divider in the screenshot will be part of this component and will use an existing prop named text for this and it will be shown in the richtext component.

jendiamond commented 22 hours ago


eventTitle: 'Origin of a Meal',
ftvaEventFilters: [
  {
    title: "Guest speaker",
    uri: "ftva-event-filters/guest-speaker"
  },
  {
    title: "35mm",
    uri: "ftva-event-filters/35mm"
  }
],
ftvaEventIntroduction: "presented by '""'
"ftvaEventIntroduction": "<p>UCLA Film &amp; Television Archive and the Hammer Museum</p>",

if typeHandle: "eventSeries", category is title

    entry: {
      typeHandle: "eventSeries",
      title: "Test series",
    }

jendiamond commented 22 hours ago

{
  "slug": "la-région-centrale-03-08-24"
}

query FTVADetail($slug: [String!]) {
  entry(section: "ftvaEvent", slug: $slug) {
    id
    typeHandle
    title
    uri
    slug
    ... on ftvaEvent_ftvaEvent_Entry {
      id
      imageCarousel {
        ... on imageCarousel_imageCarousel_BlockType {
          id
          image {
            ...Image
          }
          creditText
        }
      }
      eventTitle
      eventDescription
      ftvaEventIntroduction
      richText
      startDateWithTime
      location {
        title
        uri
      }
      guestSpeaker
      ftvaEventFilters {
        title
        uri
      }
      ftvaEventScreeningDetails {
        ... on ftvaEventScreeningDetails_screeningDetails_BlockType {
          id
          title
          alternateTitle
          year
          country
          languageTranslated
          language
          languageInfo
          runtime
          screeningTitle
          screeningTags {
            title
          }
          descriptionOfScreening
          trailer
          typeHandle
        }
      }
    }
    ... on ftvaEvent_ftvaEvent_Entry {
      id
      ftvaTicketInformation {
        title
      }
      ftvaEventRegistration {
        ... on ftvaEventRegistration_eventRegistration_BlockType {
          registrationText
          registrationUrlLink
        }
      }
    }
  }
}

fragment Image on AssetInterface {
  id
  src: url(transform: "fullscreen")
  height(transform: "fullscreen")
  width(transform: "fullscreen")
  srcset(sizes: ["375", "960", "1280", "1920", "2560"])
  alt: altText
  focalPoint
}

jendiamond commented 22 hours ago

query FTVASeries($slug: [String!]) {
  entry(section: "ftvaEventSeries", slug: $slug) {
    id
    typeHandle
    title
    slug
    }
}

{"slug": "test-series"}

UCLALibrary / ucla-library-website-components