Component_Requests.md

HOME

---

Section Cards | BlockCardVertical | BlockCardMore | BannerFeatured | SectionDualMasonry | HeadingArrow | SectionPostSmall | BlockPostSmall | SearchHome

---

Component Request - SectionCards - GetHelpWith

@drewbaker ¿ Should we hard code the Title and paragraph because this component is only used on the Home page ?

¿ We believe that we need to include the DividerWayfinder component in this parent component. In which case we would also need to provide the color: "help" and bold: boolean props right ?

---

Component Description

This component is only used on the home page.
This component is the entire Get Help section that displays the Get Help With title, paragraph and the cards that display a curated list of services, resources, and workshops that are offered at UCLA. Each card will link the User to that particular service. The SEE MORE card will have a link that sends the User to the full list of services, resources, and workshops that are offered at UCLA.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
  • https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=895%3A34381
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

Props

props: {
    title: {
        type: String,
        default: "Get Help With"
    },
    text: {
        type: String,
        default: "Need guidance on how to make the most of UCLA Libraries? Below are common areas for which we offer services, resources, workshops and more."
    },
    items: {
        type: Array,
        default: () => [
       {
          iconName: "",
          title: "", 
          text: "", 
          to: "", 
          section: ""
       }
     ]
    },
    to:  "" (see more link)
}
   

Developer Tips

• In the items prop; the section key refers to the theme the BlockCardVertical will use to determine which color story to use for the card ie: get-help, visit, about. The data will be passed from this component to the BlockCardVertical component making it display as needed.
• The BlockCardVertical will use the items prop.
• The BlockCardMore is only using the to prop which in this case will take the User to the Get Help List page

--color-primary-blue for the title font color --color-black for the text font color

Child components

1. DividerWayfinder

Used at the top of the section block to visually identify that this is the Get Help With Section.

2. BlockCardVertical

Will link the User to a particular service offered at UCLA.

3. BlockCardMore

Used to show the See More link which will take the User to the full Get Help With list page.

Screenshot

---

Component Request - BlockCardVertical

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

Slots

Name and description of any slots needed.

Props

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

    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---

Component Request - BlockCardMore

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {
text
to
    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---

Component Request - BannerFeatured

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {
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"
    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---

Component Request - SectionDualMasonry

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {
items: [{image, category, title, prompt, dates, to}]
to
    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---

Component Request - HeadingArrow

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {
text
to
    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---

Component Request - SectionPostSmall

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {
items: [{see BlockPostSmall}]
to
    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---

Component Request - BlockPostSmall

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop:
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {
image
category: {name, to}
title
author
to
theme
    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---

SEARCH

---

Component Request - SearchHome

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {
title
text
items: [{see card props}] (uses CardVertical component)
to: ""
    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---

Component Request - SectionCards

Component Description

This component is used {where} to display {what}. Be sure to explain any variants or hover states.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=887%3A39546
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-Client-Facing-Final?node-id=1126%3A431

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {
title
text
items: [{see card props}] (uses CardVertical component)
to: ""
    exampleObject: {
        // Mock: api.page
        type: Object,
        default: () => {}
    },
    exampleArray: {
        // Mock: api.pages
        type: Array,
        default: () => []
    },
    exampleNumber: {
        type: Number,
        default: 0
    },
    exampleString: {
        type: String,
        default: ""
    },
    exampleBoolean: {
        type: Boolean,
        default: true
    }
}

Developer Tips

List any developer tips here

1. --color-example for the font color

Events

Describe any events that should be emitted by this component.

1. menuOpened when {something} is clicked on

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

1. required-component is used for {what}

Screenshots

{attach screenshots}

---