Skip to content

COMPONENTS

Jump to bottom
Parinita Mulak edited this page Feb 15, 2022 · 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

HeaderSticky

HeaderSticky 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

  • Masthead / Secondary

  • MapCard

    • title
    • hours
    • times
    • text
    • isOnline // ask UX

  • Map

    • activeIndex
    • items [] // if using leafletjs it will take its shape // others like mapbox or GoogleMaps
    • for scrolling, put the cards in container, cal(100vh-headerheght) then add overflow y to auto , this is for card list
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

Location Detail Page

Components
Notes
  • /locations
  • CMS - Craft
  • spaces/hours will be pulled from LibCal using API
  • 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

Get Help with, All Services and Resources Listing page (General Template)

Notes

https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=887%3A38064

Components

  • BlockCardHorizontal // This has the same props as the BlockCardVertical

    • iconName: String
    • title
    • text
    • to

  • LoadMore

    • svg plus icon
    • lazy loading url or will it emit event?

  • CTABlockcontentwidth // This is the FlexiblePageBlock

About us (Landing Page) / Support Us (Landing Page)

Notes https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=887%3A29498
Components

  • BannerLanding

    • Title
    • text
    • full circle molecule
    • HeadingArrow component

  • CarouselImapact // this is a Flexible Page Block https://airtable.com/tblbfuBMzyHtLCYKY/viwqexZxA0x4tVEt9?blocks=show

    • title // optional
    • items [{stat,text,image},{}]
    • svg for prev next icons, 3 dots icons, use transition for filling the dots when on that image

  • SectionResourceList // see help topics landing page

  • BlockResource

  • ButtonMore

  • BlockOffset // ImageWithTextOverlay// This is a Flexible Page Block Use to display an image side by side with text, and an optional button/link to another page

    https://airtable.com/tblbfuBMzyHtLCYKY/viwqexZxA0x4tVEt9?blocks=show

    • title
    • text
    • buttonText
    • buttonUrl
    • Image

  • SectionOffset

    • items []
    • every second child change the flexorder of the image and text

Endowment General Page

Notes https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=887%3A29404 Components - [x] BannerFeatured - FlexiblePageBlocks

Get Help With -- Detail Page

Notes // Is this page used for workshop/resource/services help topics? https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=887%3A31680 Components This will use BannerFeatured component if it has a hero image, if not use TextBanner
  • BannerText
    • breadcrumb
    • title
    • text
    • button text
    • button url //example reserve url for a Resource Use Smart Link component
    • dates
    • times
    • location
    • isOnline
    • theme // default white , will be blue on other pages

https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=887%3A31862

https://airtable.com/tblFpvWgv6MuMbClH/viwDcIDo9xJKefFzR/recdCXeJuctGMw2a3/fldSewQYeFhJd0ejr/attHoiJWFElFmSwUb?blocks=show

Help Topic Landing Page

Component route /help

  • BlockInfo

  • category

  • description

  • to (if contains ucla.edu its internal)

  • title

  • svg for right arrow small , use different arrow pointing slight upright for external urls

  • SectionInfoGrid By default, each card is 33% if we have even items last two will be 50% if odd keep 33%

  • BlockQuestion

    • title
    • richtext component
    • +/- svg icon
    • the title font changes when the answer is visible

  • SectionQuestions

Clone this wiki locally