COMPONENTS.md

Components

TODO List of needed components for this website.

Global

• 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

• 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

• 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"
                },
            ]
        },
    ]

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

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

• BlockTeaser

  • items: {image: {}, to, category, title, dates, times, text}
  • displayImage: Boolean // default: true - only false on calendar page

  note: displayImage --may be able to just filter this out

• SectionTeaserHighlight

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

• SectionTeaserList

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

• SectionTeaserGallery

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

• BlockCallToAction

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

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

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