Component Request - Nav-breadcrumb component update

Component Description

This is not a new component. We need to make an updated FTVA theme version of NavBreadcrumb.vue

This component is used at the top of FTVA pages to display a breadcrumb. There is an expanded view, a collapsed view, and a mobile view of the breadcrumb. Please see the annotations in the design file for the expand / collapse view details

Design

Desktop & Mobile: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=11711-1528&t=tw5d1psngXwNXALI-0

Slots

No slots needed.

Props

We will add 1 new optional prop.

uri : {
   type: string,
   required: false
}

This prop will need a computed method to support it. Something like this:

const parsedBreadcrumbs = computed(() => { 
    let pagePathArray = props.uri.split('/').  //split apart URI path into distinct sections
    let breadcrumbObjects = [] //empty array for objects with shape { to: url string, title: pagetitle string }
    for (item in pagePathArray) {
        let itemTo = props.uri.substr(0, prop.uri.locate("item")); // get the 'to' url for this breadcrumb item
        let itemTitle = item.replace('-', ' & ') // add any formatting rules for titles, maybe change dashes to &'s? 
        breadcrumbObjects.push({ to: itemTo, title: itemTitle}) // add object to breadcrumb object array
  }
  return breadcrumbObjects // return breadcrumbObjects so component can use the array to render a link for each object in array, and pass the :to and v-text attributes in the object. 
})

This is just an example. It will need to be tested and could be changed depending on our exact formatting needs.

To implement in the template, use a v-for loop to render 'smartLink's for each object in the breadcrumbObject array, but only v-if props.uri is present.

Developer Tips

UX has confirmed we should use this icon for the caret: https://github.com/UCLALibrary/design-tokens/blob/main/assets/svgs/icon-caret-right.svg , and use theme files to change the color to $secondary-grey-03

Be sure to check annotations section in figma file for specific dimensions and colors, and how to collapse the breadcrumb when there are a lot of items https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=2945-35076&t=5ZM756SBvvHhuaaD-0

(figma file may be updated after screenshots taken, double check the source link above before implementation)

To ensure that the library nuxt website is not impacted, remember to leave existing props and stories unedited. The new FTVA stories should pass the URI prop

Theme:

import useTheme and assign it to const theme

import { useTheme } from '@/composables/useTheme'
const theme = useTheme()

create a parsedClasses function to insert the theme into the main component's class

const parsedClasses = computed(() => {
  return ['nav-breadcrumb', 'subtitle', theme?.value || '']
})

import theme.scss in component styles section

<style lang="scss" scoped>
@import "@/styles/themes.scss";
</style>

move current component styles into src/styles/default/_nav-breadcrumb.scss and import it into _base.scss
create new ftva component styles in src/styles/ftva/_nav-breadcrumb.scss and import them into _ftva-theme.scss

Events

No new events

Child components

No new child components

Screenshots

UCLALibrary / ucla-library-website-components