COMPONENTS

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

• note: each page will have its own list of filters available - from craft - content-types

Search Components

• SearchHome

  • tabs: [{title, isActive}]
  • links: [{name, url, target}](Course Reserves etc)
  • actionUrl: String // search by keyword
    • exampleString: "https://ucla.on.worldcat.org/external-search"
    • exampleString: "https://ucla.summon.serialssolutions.com/#!/search?ho=t&l=en&"
    • exampleString: "fromPrimo"
    • (build component out knowing where to submit the query string)

• SearchGeneric

  • actionUrl:"",
  • filters: [{name, queryParam},{},...]

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 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

• BlockDetail

  • title
  • text (It might have p tag, figure with img and caption, blockquote with span for author)
  • footNotes (is optional and Array of Strings)
  • DividerGeneral component if the footNotes exists.

• 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

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

Article Detail page Components

components here

---

Staff Directory Listing Page

Staff Directory Listing page Components

• BlockStaffMeta
• BlockStaffList
• 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