feat: Creates FilterDropdown and RefineSearchPanel

[Sveb]

Component Created: FilterDropdown.vue
Component Created: RefineSearchPanel.vue
Component Created: EffectSlideToggle.vue

Stories: ~/stories/FilterDropdown.stories.js
Stories: ~/stories/RefineSearchPanel.stories.js
Stories: ~/stories/EffectSlideToggle.stories.js

Spec: ~/stories/FilterDropdownspec.js
Spec: ~/stories/RefineSearchPanel.js
Spec: ~/stories/EffectSlideToggle.js

Designs:
https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-25&m=dev

https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-26&p=f&m=dev

Read in Recording:
https://drive.google.com/file/d/17tiGmE4aax-faoo5Rjue2Idbx3OGCFGa/view?usp=sharing

Relevant Links
https://www.library.ucla.edu/
https://digital.library.ucla.edu/catalog/ark:/21198/z1x98m6j

Notes:

Checklist:

• I checked that it is working locally in the dev server
• I checked that it is working locally in the storybook
• I checked that it is working locally in the
  library-website-nuxt dev server
• I added a screenshot of it working
• UX has reviewed and approved this
• I assigned this PR to someone on the dev team to review
• I used a conventional commit message
• I assigned myself to this PR

[pghorpade]

accessibility

wrap each filter options set in a

with a equal to the filter name. labels & checkboxes are already good.

[pghorpade]

You can move that logic into a function:

function summaryClasses(filterKey) {
return {

'is-filtered': filteredStates.value[filterKey],

}
}

Then in your template:

<div :class="summaryClasses(getFilterKey(filter))">
  ...
</div>

[pghorpade]

You can move that logic into a function:

function optionClasses(filterKey: string, optionValue: string) {
return {

'is-selected': isOptionSelected(filterKey, optionValue),
}
}

Then in your template:

<label :class="optionClasses(getFilterKey(filter), option.value)">

[pghorpade]

function shouldShowSeeAll(filter: any){
const key = getFilterKey(filter)
  return (
    filter.showAll &&
    (!hasSelectedOptions(key) || !filteredStates.value[key])
  )
}

<div v-if="shouldShowSeeAll(filter)">
  See All →
</div>

[pghorpade]

I want to make sure this component is usable not only for this phase of the project, but also 6–12 months from now by any developer on our team or yours. Right now the logic is powerful, but it’s hard for beginners to contribute or modify without risks. Simplifying naming and structure would make the component easier to maintain long-term.

[pghorpade]

Clear naming reduces misunderstanding and prevents regression bugs.
Simple 1–2 line comments above each reactive state or function will help future developers understand the intent quickly.