Page Request - /collection/[slug].vue for FTVA Collection detail craft entry.

[pghorpade]

Page Description

This Page is used for all collection entry routes to display craft ftvacollection entry content model/type and the components from the component library.
The first iteration of requirements is captured here

CollectionDetail walk through: https://youtu.be/bDKXmu6vdEs?si=8ZfcuB1beOreFzf9
Link to the beginning of the Query:

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=996-11649&node-type=frame&t=AucgWDlQSYHuE0vz-0
• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/%5BFTVA%5D-Final-Design-with-Annotations?node-id=1577-13616&node-type=frame&t=O0BWt3zcGt1woPVF-0

If no mobile designs provided, please use your best judgment for responsiveness.

First Iteration of Requirements:

The route link to set up in the Nuxt pages folder is pages/collections/index.vue
The route link to set up in the Nuxt pages folder is pages/collections/[slug].vue
Craft entry https://craft.library.ucla.edu/admin/entries/ftvaCollection

@axamei will be adding the craft gql query to epic
Header:

1. We already have the Header-sticky component added to the layout.
2. @pghorpade create a ticket to fix the header menu pushing down the page when opened, the behavior should be same as website , Acceptance Criteria: When the Header is not sticky, the NavPrimary menu will overlay just like when the header is sticky.

Bread Crumb:

1. Bread Crumb is Collections > Colelction title, clicking the Colelctions link takes the user to the All collections landing page/ listing page /collections
2. No nested routes for this content

ResponsiveImage:

1. We don't need Imagecrousel as the data for craft ftvacollection entry does not support it.
2. CreditText data not in Craft entry

TwoLayout Component

CardMeta:

1. Category label is always Collection, it is a string type that is hard coded on the page.
2. JenRhee does not want to show craft collection type field.
3. The collection title is shown after the category
4. share button
5. @pghorpade create a new ticket to fix share and dropdown calendar button component to not push the content down when dropdown is visible, Instead the interaction is when user clicks the button , the dropdown overlays.

Call To Action Slim for side bar

1. This will be a globals in craft https://test-craft.library.ucla.edu/admin/globals/ftvaViewingInformation
2. New component variation of CallToAction
3. This existing component is also used by FlexibleBlocks, so we don't want to change its default behaviour which is everything is centered and all the props appear as rows, For FTVA flexible call to action we want to keep this layout and only change the background color, color and text styles when the theme is ftva.
4. Add a prop named centered which has default value to true
5. When used as call to action slim block info for FTVA on this template as sidebar, the icon is default info icon and title appear next to each other, text will be richtext and will appear below the title.
6. @pghorpade will create a ticket to update https://github.com/UCLALibrary/ftva-website-nuxt/blob/main/server/api/fetchNitroStorageCraftGlobalData.js to fetch the right global alert data for FTVA
7. @pghorpade will add a criteria on the ticket which creates this variation, to add sample data to globalstore file https://github.com/UCLALibrary/ucla-library-website-components/blob/main/src/stores/GlobalStore.js#L9
8. We have prop isGlobal for library website and isMeapGlobal for meap. I would like to create a prop named globalType which can take string we could use typescript to define the enums like default, meap and ftva. We will keep the legacy props until we refactor those sites.

RichText

1. description craft field

VideoEmbed

1. videoembed field from craft
2. @axamei or Serena will add example of videoembed to figma.

DividerWayFinder
show Dividerwayfinder only if there is call to action component data exists

Slim Call To Action, will be full width in this location

1. This Call to action component variation is used as info block with full width.
2. Here we are showing only the icon and text. The text is richtext. The title is empty
3. The new centered prop is false
4. The icon and text are columns in the one row.

[JenRhee will add the section title]SectionTeaserCard

1. Query will fetch the related collection curated by the stakeholder , no limit on number of related collections
2. section title and view all URL will come from craft entry.
3. the URI title will be hard coded and will always be View All
4. Use SectionTeaserCard like on EventDetailPage and EventSeriesPage
5. Background color will be ucla blue for BlockCardWithImage, use ftva theme to add this.
6. How are these cards sorted or ordered? @axamei can you provide more details?
7. BlockCardWithImage will need, category always Collection, title, URI like /collections/slug, description
8. description mentioned above will be truncated , specs are in the design for truncation, CardMeta needs to be updated to support the truncation

Footer

1. We already have the footer component added to the layout.

Events

Describe any events that this page should handle.

1. No event handling on this page

Child components

1. NavBreadCrumb is used for BreadCrumb.
2. ResponsiveImage with credit slot if credit exists.
3. CardMeta with sharebutton slot and RichTextfor description is used for displaying Metadata of the Collection.
4. VideoEmbed
5. CallToAction
6. DividerWayFinder
7. CallToAction
8. SectionTeaserCard

Screenshots

Desktop:

Mobile: