WIP: Component Request - Definition List

[tinuola]

Component Description

This component is a generic component that displays metadata key-value fields. Using a combination of props and slots, it displays n number of metadata fields in either a vertical (stacked) or horizontal (tabular/column) orientation.

---

For the FTVA website built, 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

Add slot for View Catalog Record button rather than make it a part of the component

Props

props: {
    numFields: { // determines the number of definition elements
        type: Number,
        default: 8 
    },
    orientation: { // triggers CSS styling for vertical or horizontal layout
        type: String,
        default: "vertical" 
    },
}

Developer Tips

1. Use the Description List element (MDN)
2. title metadata field should not be displayed (per walkthrough discussion)
3. Empty metadata fields should not be displayed (per walkthrough discussion)
4. Metadata fields with multiple items should display items as comma separated values (ref: Slack thread)
5. View Catalog Button should come through a slot rather than be a part of the component
6. Button takes link from externalResourceUrl field
7. Recommended to make component full width; actual sizing should be determined by a parent container. In the case of the Collection Item Detail page, that would be the sidebar column.

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