Skip to content

Latest commit

 

History

History
590 lines (413 loc) · 15.5 KB

COMPONENTS.md

File metadata and controls

590 lines (413 loc) · 15.5 KB
Raw

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

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

  • 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

Drew's versions of Exhibits & Upcoming Events list page

  • SectionHighlights

    • items: [{...BlockHighlight},{...BlockHighlight}]

  • BlockHighlight

    • title
    • image
    • date
    • isOnline
    • hasTriangle (used to turn on clippy path detail)
    • text
    • to
    • isVertical: (false will show the side-by-side style )

  • HeaderChildCalendar

    • date (should be a datestamp)

  • BlockDay (already done, but update as per my TODO)

    • date

  • BlockEvent

    • category (string)
    • title
    • dates: [] (should be array of datestamps)
    • time

  • SectionDay

    • items: [{...BlockEvent}, {...}]

  • HeaderChildDateRanges

    • items: [{startDate, endDate, name}, {...}]

  • Flexible Page Blocks

    • Feature Promo
      • Will this just call BannerFeatured Component?
    • Card with Image (2-up)
      • will this call the SectionTeaserHighlight?
    • CTA Block, content width
      • This flexible page block calls CallToAction Component to display calltoaction as full width.

Exhibits Detail Long Form Page

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

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

  • BlockDetail // This is not required

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

  • 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 // This may not be requierd as we will build the media gallery flexible page block component. Check with UX

    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

Staff Directory Listing Page

  • BlockStaffMeta
  • BlockStaffList
  • SectionStaffList

Staff Directory Detail

  • BlockStaffProfile

Gallery variants these are used on Exhibit or Events Detail Pages

  • GalleryPreview

  • BlockGallery

  • GalleryGrid

  • GalleryItem

  • SectionGallery

  • ModalGallery

  • PlayerVideo

  • PlayerAudio

Sticky Header

Parent component is .

Child-headers are:

  • HeaderChildBreadcrumbs (can have social share links)
    • Where does the breadcrumb data come from?
  • HeaderChildSearch (can have breadcrumb too)
  • HeaderChildMenu (can have a button too)
  • HeaderChildDates

Event Series Detail Page

This uses the BannerFeatured component

Event Detail Page

If Hero Image exists, use BannerFeatured component else SimpleBanner

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

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

  • BlockCard // Rename BlockCardVertical to this and add additional props

    • iconName: String
    • title
    • text
    • to // Compute if the url is external, thenshow link out icon
    • Add isExternal utility

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

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

Endowment General Page

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

  • BannerFeatured
  • FlexiblePageBlocks

Get Help With -- Detail Page

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

This will use BannerFeatured component if it has hero image, if not use TextBanner