Component Request - BlockTag and update BlockSearchRemoveFilter and SectionRemoveSearchFilter for FTVA variation

[pghorpade]

Component Description

This is a new component that will be used as a search filter pill child component on the main library website and Meap (this is a refactor work), next as a dropdown filter pill on the FTVA website event listing page etc, and as a static tag on pages or components without any interactions. There will be interaction when used as a search filter pill and when used as a tag it can have either light or dark background colors.

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=7%3A56
• Mobile: Not required

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

Slots

No Slots needed

Props for BlockTag

props: {

    label: {
        type: String,
        default: "" // Text displayed on the tag or pill. 
    },
iconName: {
        type: String,
        default: "" //  The iconName will come from one of the craft fields or some other source for search filters. 
    },
 site: {
        type: String,
        default: "" // Specifies the site context ("website" use white background, "ftva" use pale white). 
    },
    showRemoveIcon: {
        type: Boolean,
        default: true // this will be false for FTVA
    },
isSecondary: {
        type: Boolean,
        default: false // If set to true the component will have a dark blue background 
    }
}

Props for BlockRemoveSearchFilter.vue

props: {
isSelected: {
 type: Boolean,
default: false // false for website and meap, true for ftva if the filter pill is selected state at the begining
},
label: { // Rename title with label
    type: String,
    default: '', // text displayed on the tag or pill.
  },
parentEventName: {
        type: String,
        default: "removeBlockFilter" 
    },
iconName: {
        type: String,
        default: "" //  The iconName will come from one of the craft fields or some other source for search filters. 
    },
site: {
        type: String,
        default: "" // Specifies the site context ("website" use white background, "ftva" use pale white). 
    },
  isFilter: {
        type: Boolean,
        default: true // Boolean true indicates use as a search filter pill and has interactions and hover states
    },
  isRounded: {
        type: Boolean,
        default: false // this will be true for FTVA If true make the button rounded
    },
}

Developer Tips for BlockTag

List any developer tips here

1. No hover states in this component, will have hover states in the parent component.
2. No breakpoints are needed as the component won't change for different screen sizes.
3. What is token/ sass variable for light and dark background for this component
4. Follow this document for theme strategy https://uclalibrary.atlassian.net/wiki/spaces/DEV/pages/406061259/Dynamic+Theme+management

Developer Tips for BlockRemoveSearchFilter

List any developer tips here

1. This component is used as a child component in SectionRemoveSearchFilter component.
2. Refactor prop name title to label prop, also make this change in SectionRemoveSearchFilter and pass the props.
3. If is Rounded is true make the button rounded
4. If site== ftva, then add ftva hover styling , if site== ftva and selected == true, then make the pill have dark background , so set blockTag :is-secondary="true"
5. Update computed classes method:

   const classes = computed(() => {
   return ['block-remove-search-filter', { `color-${sectionName.value}`: props.site !== "ftva"},
   { 'rounded': props.isRounded}, 
   ]
   })

Events for BlockTag

no event emitted

Events for BlockRemoveSearchFilter

1. removeBlockFilter event emitted to SectionRemoveSearchFilter for website and meap
2. or props.parentEventName event emitted to FTVA parent component

Child components for BlockTag

None

Child components for BlockRemoveSearchFilter

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. BlockTag
2. Tag component is used as a child component in BlockSearchRemoveFilter on search page as filters or selected filters pill.

Screenshots

[farosFreed]

Looks awesome so far! 👏 Excited to implement this!

Here are my questions / thoughts:

A ) I am wondering if we can implement the icon as a slot in BlockTag so that we don't have to pass the prop down 2 levels? The parent component could just put the icon in the slot.

B ) I am worried about having multiple props that refer to theme traits ( isRounded and site ). In my opinion we should have 1 prop that all components implement and all css customization comes in through that prop.

I am used to having a 'class' prop, so for example we could pass an 'FTVA' class and additional / overrriding styles for FTVA could be added to the styles portion of the component.

OR, if we don't want the styles in the component files, we could write the styles in FTVA.scss theme file, name them, and then pass them in via a 'styles' prop. Something like a basic version of the way nuxt-ui passes theme info. https://ui.nuxt.com/getting-started/theming

I think creating a bunch of props that define styles is something we should avoid. If we want to change them later it will be a bunch of tinkering throughout many files instead of editing a few theme specifics.

__

Either way looks complete enough to start implementation to me! 🤩

[pghorpade]

@farosFreed

1. Yes we can use the SVG component as a slot for this component, but by doing this we are putting the extra logic of figuring out what icon to pass to this component in the parent component.
2. Please update this component request with an example solution as a developer tip of how to use the class prop and related styles for FTVA and how will this impact the parent component.

[farosFreed]

Dev team discussed themeing strategy, will follow this document for theme implementation: https://uclalibrary.atlassian.net/wiki/spaces/DEV/pages/406061259/Dynamic+Theme+management