Component Request - FTVA Footer

Component Description

This component is used to the display a footer at the base of all pages on the FTVA site. It is also used already on the library website nuxt site to display the footer, so it needs to be edited without impacting default stories.

The FTVA footer will require updates to FooterMain.vue, FooterPrimary.vue, FooterSock.vue, and will also require creating a new component FooterLinks.vue which will render 4 columns of links.

Design

Please see attached FIGMA's for quick reference.

Desktop: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=11670-769&t=FRpQj6pv8SrQXg8F-0

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

Slots

No slots needed.

Props

FooterMain.vue FooterMain needs 1 prop added to track when to show the new FooterLinks.vue child component. It should default to false since that is the behavior we need for the library-website-next site

props: {
    showLinks: {
        type: Boolean,
        default: false 
    }
}

FooterPrimary.vue See developer tips for more information, but basically you can add a prop where ever you need to replace hard-coded text content.

props: {
    formSubmitLabel: {
        type: String,
        default: 'Subscribe' 
    }
}

FooterSock.vue should not need new props, gets data from store

FooterLinks.vue Can get data from the store the same way FooterSock does- from GlobalStore.js

Developer Tips

FooterMain.vue

FooterMain will need to be updated to include FooterLinks.vue. Since we do not want FooterLinks to be visible be default, FooterLinks needed to be rendered with a v-if statement that checks if the showLinks prop is true.
Implement the theme pattern and new styles
Hide FooterSponsor when theme is FTVA

FooterPrimary.vue

For text that was previously hardcoded (like 'Subscribe' text on the newsletter button that needs to become 'Submit'), add a prop for the content that defaults to the current content.
Ensure the component works without parsedPressItems section rendering.
Implement the theme pattern and new styles
Render the logo based on the theme, you can find the FTVA logo in the design tokens repo

FooterSock.vue

Implement the theme pattern and new styles

FooterLinks.vue | NEW

Implement an object in stores/GlobalStore.js, it could look like:

footerLinks: {
  nodes: [
    {
      category: 'About',
      children: mockFooterLinks.aboutLinks,
    },
    {
      category: 'Contact',
      children: mockFooterLinks.contactLinks,
    },
    {
      category: 'Contribute',
      children: mockFooterLinks.contributeLinks,
    },
    {
      category: 'Resources',
      children: mockFooterLinks.resourcesLinks,
    },
  ],
},

use a computed method to get the data from the store and populate 4 columns with links
display the links with SmartLink components or vue's router-link component
optional Implement the theme pattern

Events

No events

Child components

Add new component FooterLinks to FooterMain as a child component

FooterLinks will use either SmartLink or router-link child components to show the 4 lists of links

Screenshots

UCLALibrary / ucla-library-website-components