Component Request - PageSection

[sourcefilter]

Component Description

Refactor the FPB components (& their children) to extract common functionality into a new

component, which handles:

• spacing and margins
• title and description text styling
• alternating white and grey background
  -> should stretch across entire screen

Design

see https://www.figma.com/file/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=5866%3A46501 for spacing

examples with alternating backgrounds:
https://www.figma.com/file/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=5429%3A39794
https://www.figma.com/file/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=4893%3A37219
https://www.figma.com/file/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=717%3A15265

Slots

: Content to go inside section (likely a component like ` or )

Props

props: {
    title: {
        type: string,
        required: false,
    },
    description: {
        type: string,
        required: false,
    },
    background-color: {
        type: string,
        default: white,
    }
}

Developer Tips

maybe make background-color take a text string like 'white' or 'grey', then map it to a CSS class?

Events

none

Child components

None handled by the component (lots will go into slot though)

Screenshots