Component Request - Add FTVA variation to DividerWayFinder and DividerGeneral

[pghorpade]

Component Description

These components have been used on the Website and Meap site pages, now we will be using them on the FTVA site to add full or half-width horizontal dividers on the detail or listing pages. There are no hover states and the variation is adding a new color which is the same for all FTVA pages and the width of these components can be half width too.

Design

Please also see the attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/branch/UGAoSzAetyHJoQ5dvpXKva/UCLA-Library-Design-System?node-id=199-7042&t=In24q9d6cog55wXp-0
• Mobile: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/branch/UGAoSzAetyHJoQ5dvpXKva/UCLA-Library-Design-System?node-id=11790-2242&t=In24q9d6cog55wXp-0

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

Slots

No slots needed

Props for DividerWayFinder

$accent-blue: #115DAF

props: {
   color: {
      type: String,
      default: '', // This will be "visit", "about", "help", "FTVA"
  },
  isHalfWidth:{
     type: Boolean,
      default: false,
  }
}

Props for DividerGeneral -> new prop needed.

  props: {
      isBold: {
        type: Boolean,
        default: false,
      },
     isTertiary:{
      type: Boolean,
        default: false,
     },
    isHalfWidth:{
        type: Boolean,
        default: false,
    }
  },

Developer Tips

List any developer tips for DividerWayFinder

1. Add color css variable and use it in the styles section for this variation &.color-ftva { --color-border: var($accent-blue); }
2. The dashed line color is $subtitle-grey
3. UX will give the token/mixin or (margin and width) for half-width variation for this component.
4. Update computed method:

   const classes = computed(() => [
   'divider-way-finder',
   `color-${sectionName.value}`,
   { 'half-width': props.isHalfWidth }
   ])

List any developer tips for DividerGeneral

1. Create a Tertiary Divider which is not dotted like the existing one
2. See the design in figma or ask UX for color of the divider and any other CSS properties for the styling the FTVA variation
3. Update computed with the following code

   computed: {
   classes() {
     return ['divider-general', { 'is-bold': this.isBold }, { 'is-tertiary': this.isTertiary },{ 'half-width': props.isHalfWidth }]
   },
   },

Events

Describe any events that should be emitted by this component.

No events used

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.

no child components needed

Screenshots

Mobile: Desktop