Skip to content

COMPONENTS

Jump to bottom
JenDiamond edited this page Jul 28, 2021 · 35 revisions

Components

TODO List of needed components for this website.

GLOBAL

Global Components

  • ResponsiveImage

  • ButtonMore

    • text

  • SiteBrandBar

    • (Contains SVG of logo that links)

  • NavSecondary

    • items: [{text, url, target}]

  • NavPrimary

    • items: [{name = "", url = "", items = [{text, url, target}]], {}}

  • SmartLink

    • to
    • target
    • default slot: something

  • MastheadPrimary

    • (Contains SearchHome)

  • MastheadSecondary

    • hasMolecules: boolean
    • title
    • text
    • (slot: used for search form)

  • DividerWayfinder

    • color: "help"
    • bold: boolean

  • DividerVertical

  • FooterPrimary

    • social-items: [{text, url}]
    • press-items: [{text, url}]
    • (Uses form-mailing-list?)

  • FooterSock

    • items: [{text, url, target}]

  • SiteNotificationAlert

    • title
    • text

Home page

Home page Components

  • SectionCards

    • title
    • text
    • items: [{see card props}] (uses CardVertical component)
    • to: ""

  • BlockCardVertical

    • iconName: String
    • title
    • text
    • to
    • section: "" // get-help, visit, about

  • BlockCardMore

    • text
    • to

  • BannerFeatured

    • image
    • title
    • category: {name, to}
    • theme
    • dates: String
    • times: String
    • location: String
    • isOnline: boolean
    • to
    • breadcrumb: {text, to}
    • prompt: String
    • (slot that replaces top breadcrumb)
    • alignment: "left" or "right"

  • SectionDualMasonry

    • items: [{image, category, title, prompt, dates, to}]
    • to

  • HeadingArrow

    • text
    • to

  • SectionPostSmall

    • items: [{see BlockPostSmall}]
    • to

  • BlockPostSmall

    • image
    • category: {name, to}
    • title
    • author
    • to
    • theme

Search

Search Components

example:

    actionUrl:"", //main search block
    filters: [          // dependent on the page ?
        {
            name: "location",
            filterItems: [
                {
                    name: "Arts Library",
                    queryParam: "artsLib"
                },
                {
                    name: "Bio Med",
                    queryParam: "bioMed"
                },
            ]
        },
        {
            name: "department",
            filterItems: [
                {
                    name: "Science Department",
                    queryParam: "scienceDept"
                },
                {
                    name: "Music Department",
                    queryParam: "musicDept"
                },
            ]
        },
    ]

Mobile Versions

Mobile Version of Components

Mobile nav/menus combine the Primary and Secondary navs

hard code menu items using data()

  • MobileNav
data() {
    primary: [{text, url, target}] ,
    secondary: [{text, url, target}] ,
}

Exhibits & Upcoming Events Index Page

Exhibits & Upcoming Events Index page Components

  • BlockTeaserMeta (All of the text for all of the other BlockTeaser components)

    • items: { image, to, category, title, dates, times, text, location }

  • BlockTeaserList

    • items: { image, to, category, title, dates, times, text, location }

  • BlockTeaserHighlight

    • items: { image, to, category, title, dates, times, text, location }

  • BlockTeaserVertical

    • items: { image, to, category, title, dates, times, text, location }

  • SectionTeaserHighlight

    • items: [{see block props}] (uses BlockTeaserHighlight component)

  • SectionTeaserList

    • items: [{see block props}] (uses BlockTeaserList component)

  • SectionTeaserVertical

    • items: [{see block props}] (uses BlockTeaserVertical component)

  • SectionTeaserCalendar (should include the date and today navigation)

    • items: [{see block props}] (uses BlockTeaserMeta component)

  • BlockCallToAction

    • iconName: String
    • title
    • text
    • prompt // button
    • to

  • BlockDate

    • date

  • CalendarLongEvents

    • events: [{startDate, endTime, name, to}]

  • SectionPagination

    • nextTo
    • previousTo

Exhibits Detail Long Form Page

Exhibits Detail Long Form page Components

  • update BannerFeatured (path=/story/banner-featured--default)

    • hasButton (set this to false)
    • add new stories

  • Flexible Page Blocks

    • RickText
    • RichTextWithMedia
    • PullQuote
    • MediaGallery
      • Can be closed gallery with full width or half width, is the width added in craft or should be determined on the page level, or just a open gallery with section heading like sample manuscript pages on the mid length page.
    • VideoContentWidth One Video full width, with play button on the side? On the mid length page there is manuscript with one video after the richtext which has the play button in the middle is this a flexible page block or regular component
    • ImageContentWidth
    • AudioContentWidth
    • CTABlockcontentwidth
    • etc

  • SectionGallery

    it needs all these icons (+/-, play icon for video, solid-molecule-image, solid-molecule-video, )

    • title

    • items: [{type:"audio,video,image", title, text, dates, location])

    • (uses SectionGalleryVertical component)

    • DividerGeneral component

  • BlockGalleryVertical

    • BlockTeaserMeta
    • items: { image, to, category, title, dates, times, text, location, prefix("On view") }
    • hover state will show the eye icon over the image
    • Clicking the eye will open the modal(carousel component) by grandparent component (SectionGallery)

  • SectionGalleryVertical

    • BlockGalleryVertical
    • items (Array of objects)

  • update BlockTeaserMeta

    • view prop (can have highlight, card (this was gallery before), gallery or calendar)
    • write a story for view type gallery.

  • Carousel (lightbox in the figma)

    • items
    • (icons needed are left, right arrows and close )

  • GalleryList

    • featuredItem
    • items [url, objectType[audio,video,image], meta: { to, category, title, dates, times, text, location, identifier (which can be a call number) }])
    • (uses updated BlockTeaserVertical component)
    • Uses icons +/-, play icon for video, solid-molecule-image, solid-molecule-video,

  • BlockGalleryVertical ?path=/story/block-teaser-vertical--default

    • item (date, image, callnumber or any other identifier, tilte)
    • default audio or video or image icon if no images given

  • BlockGalleryList

    • featuredTitle
    • featuredText
    • items
    • uses GalleryList component
    • uses Carousal component

  • SectionGalleryList

    • items (// Array of Array objects )
    • title
    • Uses DividerGeneral component
    • Uses BlockGalleryList component

note: 2 sizes full width & half page

Article Detail Page

Article Detail page Components

According to the data model, Articles will be used in "A blog post or other timely story from the UCLA library"

context: this is the only part of the data model in our CraftCMS that is close to being done (pending) approval

We can look at those designs and focus on making component request issues for the relevant components

  • components here

Staff Directory Listing Page

Staff Directory Listing page Components

  • [x] BlockStaffMeta

  • [x] BlockStaffList

  • [x] SectionStaffList

Staff Directory Detail

Staff Directory Detail page Components
  • BlockStaffProfile

Gallery Variants

Gallery Components
  • GalleryPreview
  • BlockGallery
  • GalleryGrid
  • GalleryItem
  • SectionGallery
  • ModalGallery
  • PlayerVideo
  • PlayerAudio

Sticky Header

Sticky Header Components

Parent component is .

Child-headers are:

  • HeaderChildBreadcrumbs (can have social share links)
  • HeaderChildSearch (can have breadcrumb too)
  • HeaderChildMenu (can have a button too)
  • HeaderChildDates

Event Series Detail Page

Components

This uses the BannerFeatured component

  • Flexible Page Blocks
    • Rich text
    • Rich text with media
    • Media Gallery // Selected Trailers
    • Divider
    • Pull quote
    • Image - Content Width, // Individual event in this series with clipped box on the left which has the event date.
    • etc
Notes 
Questions
1. which of the flexible page blocks will give the data for More upcoming events and events in this series, or are these flexible page blocks?

Event Detail Page

Components

If Hero Image exists, use BannerFeatured component else SimpleBanner

Location and Hours Listing Page

Components

  • Header/Searchbar

  • Cards

    • title
    • hours
    • description

  • Map

Notes

https://dl.airtable.com/.attachmentThumbnails/0f92c171a117104eb6286207019ceabe/62a9df68

  • When: The User hovers over the card
  • Then: The mark on the map changes color
  • When: The User scrolls down the page
  • Then: The cards scroll under the stickyHeader
  • And: The map stays in the same place
  • Lists the Libraries (main and affiliated) in alphabetical order

Location and Hours Listing Page

Components

  • Header/Searchbar

  • Cards

    • title
    • hours
    • description

  • Map

Notes

https://dl.airtable.com/.attachmentThumbnails/0f92c171a117104eb6286207019ceabe/62a9df68

  • When: The User hovers over the card
  • Then: The mark on the map changes color
  • When: The User scrolls down the page
  • Then: The cards scroll under the stickyHeader
  • And: The map stays in the same place
  • Lists the Libraries (main and affiliated) in alphabetical order

Location Interstitial Detail Page

Components
  • StickyNav with Link & Search
  • LongCard
    • image
    • arrowsvg
    • title
    • description
    • links ()
    • hours
    • amenities
    • button (links to real Location Detail page)
  • Map
Notes
  • /locations
  • CMS - Craft
  • Users can go back to the list with a arrow shaped link at top left of the card
  • Optional
    • Library photo
    • Browse spaces link - (associated spaces)
    • Amenities
  • Required
    • Description
    • Get directions/contact us link
    • Hours
    • Button to library detail page
      • For affiliate libraries, this is an external link to the actual site

Clone this wiki locally