Component Request - Definition List

[tinuola]

Component Description

A component that displays metadata key-value fields as a definition list. It displays n number of metadata fields in either a vertical (stacked) or horizontal (tabular/column) orientation.

Note: Because metadata shape/structure cannot be predicted (single vs nested values, etc), and to keep this component agnostic/generic, data for this component should be parsed/formatted at parent component or page level.

I have mocked out scenarios in this Stackblitz pen/preview.

---

For the FTVA website build, this component will be used on the Collection Item Detail page to display the main article's metadata content in the sidebar.

Collection Detail Walkthrough: YouTube

Design Specs

• Figma: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=11347-2&p=f&t=TiyMzo5OY7F3W0zQ-0

Slots

• For View Catalog Record button or supporting/secondary component
• Inside the dl tag, two slots for the dt and dd tags; so that parent component/consumer can decide how to display the key-value pairs (for example: with icons, as buttons, as linked text, etc.)

Props

Depending on approach for how to format data that this component will use, metadataList can be an array of arrays (of each field's stringified key-value pairs) or an array of objects (each field)

props: {

    metadataList: { 
        type: Array, 
        default: [] 
    },
    orientation: { // triggers CSS styling for vertical or horizontal layout
        type: String,
        default: "vertical" 
    },
}

Developer Tips

1. Use the Description List element (MDN)
2. There should be no data parsing at the component level; see note and Stackblitz demo at the top
3. Demo / parse data in Storybook:

• title metadata field should not be displayed (per walkthrough discussion)
• Empty metadata fields should not be displayed (per walkthrough discussion)
• Metadata fields with multiple items should display items as comma separated values (ref: Slack thread)

4. Add slots to component; see Slots note above

• For FTVA implementation, button link for: View Catalog Record comes from the externalResourceUrl field

5. Make the component full width/size agnostic; actual sizing should be determined by a parent container

• For FTVA's Collection Item Detail page, the parent container will be the sidebar column

6. Responsiveness: default vertical orientation is mobile-friendly; horizontal orientation can be left as is until its use case is needed and/or [future] design specs are provided.

FTVA Data

1. View metadata fields in Craft:

• https://test-craft.library.ucla.edu/admin/entries/ftvaItemInCollection/3102779-as-above-so-below#tab--metadata
• https://test-craft.library.ucla.edu/admin/entries/ftvaItemInCollection/3696632-test-collection-item-for-archive-events-audio-recordings-2#tab--metadata

2. View sample raw metadata

• https://deploy-preview-110--test-ftva.netlify.app/collections/archive-event-audio-recordings/test-collection-item-for-archive-events-audio-recordings-2-2-2-2

3. Query to run for sample/test data:

query FTVACollectionItem($collectionSlug: [String!], $slug: [String!]) {
  entry(section: "ftvaItemInCollection", slug:$slug ) {
    id
    title
    slug
    sectionHandle
    ftvaAssociatedCollections {
      id
      title
    }
    ftvaImage {
      ...Image
    }
    videoEmbed
    richText
    externalResourceUrl
    
    ftvaDate
    releaseDate
    episodeAirDate
    episodeTitle
    episodeSeason
    episodeNumber
    ftvaCollectionGroup {
      ... on ftvaCollectionGroup_Category {
      	id
        title
      }
    }
    ftvaCollectionTags {
      ... on ftvaCollectionTags_Tag {
        id
        title
      }
    }
    director {
      ... on ftvaLARebellionIndividual_ftvaLARebellionIndividual_Entry {
        nameFirst
        nameLast
      }
    }
    year
    country
    runtime
    associatedIndividuals {
      ... on associatedIndividuals_individual_BlockType {
        individual {
          id
          nameFirst
          nameLast
        }
        roles
      }
    }
  }

Events

No event to emit

Child components

• No direct child component; but for the slot (at story/parent level) use theButtonLink component (FTVA Secondary)

Screenshots

https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=1640-4328&t=0YgjZBpa1vF58rpR-4