Component Request - InfoBlock Component

jendiamond commented 2 weeks ago

Component Description

This component is used on the Event Detail Page to display Ticket Information.
It is a LIST of the info bullets that are chosen from a predetermined list in Craft.

On the page level it will be in the right column under the banner under the Date, Time and Location Block.

When the page is collapsed it will continue to be under the Date, Time and Location Block.

Design

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

Token: FTVA/m/button + toggle
Color: Colors/Grey/medium-grey

Stroke

border-bottom: 1px solid var(-Colors-Grey-subtitle-grey, #676767)
Color: Colors/Grey/subtitle-grey

Bullet Point Text

Tokens: FTVA/d/body 2
Color: Colors/Grey/body-grey

Secondary Link Component

State: Default
Glyph: False
Device: FTVA_d

Button

Fill: Colors/White/pure white
Stroke: Colors/Blue/accent blue

Spacing

Button Spacing

Slots

Name and description of any slots needed.

Props

props: {
    ftvaTicketInformation: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    ftvaEventRegistration: {
        // Mock: api.pages
        type: Array,
        default: () => []
    }
}

Developer Tips

List any developer tips here

Both ftvaTicketInformation & ftvaEventRegistration are an # Array of Objects

Child components

ButtonLink

Craft Input

Craft field: ftvaTicketInformation

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

query FTVADetail($slug: [String!]) {
  entry(section: "ftvaEvent", slug: $slug) {
    id
    typeHandle
    title
    uri
    slug
    ... on ftvaEvent_ftvaEvent_Entry {
      id
      ftvaTicketInformation {
        title
      }
      ftvaEventRegistration {
        ... on ftvaEventRegistration_eventRegistration_BlockType {
          registrationText
          registrationUrlLink
        }
      }
    }
  }
}

DATA

{
  data: {
    entry: {
      id: "2847944",
      typeHandle: "ftvaEvent",
      title: "La Région Centrale 03-08-24",
      uri: "events/la-région-centrale-03-08-24",
      slug: "la-région-centrale-03-08-24",
      ftvaTicketInformation: [
        {
          title: "Admission is free"
        },
        {
          title: "Seats are assigned on a first come, first served basis"
        },
        {
          title: "The box office opens one hour before the event"
        }
      ],
      ftvaEventRegistration: [
        {
          registrationText: "UCLA Box Office",
          registrationUrlLink: "https://tickets.ucla.edu/"
        }
      ]
    }
  }
}

pghorpade commented 2 weeks ago

@jendiamond will ask @axamei or @tieserena for the tokens from the design system package for this component.

tinuola commented 2 weeks ago

@axamei @tieserena @jendiamond Is 'Plan Your Visit' the default (expected?) text for the button in this component, or should it be whatever is passed into the registrationText field from Craft

jendiamond commented 2 weeks ago

AXA: “Plan your visit” is the expected/default text. It can be hardcoded in the component. That field is for the rare occasion that they require registration. Realizing we need to add a mockup for that

UCLALibrary / ucla-library-website-components