feat: Creates FilterDropdown and RefineSearchPanel

NOTES.md

@@ -0,0 +1,11 @@
+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

packages/vue-component-library/src/index.ts

@@ -48,6 +48,8 @@ export { default as DefinitionList } from './lib-components/DefinitionList.vue'
 export { default as DividerGeneral } from './lib-components/DividerGeneral.vue'
 export { default as DividerWayFinder } from './lib-components/DividerWayFinder.vue'
 export { default as DropdownSingleSelect } from './lib-components/DropdownSingleSelect.vue'
+export { default as FilterDropdown } from './lib-components/FilterDropdown.vue'
+export { default as RefineSearchPanel } from './lib-components/RefineSearchPanel.vue'
 export { default as FiltersDropdown } from './lib-components/FiltersDropdown.vue'
 export { default as FlexibleAssociatedTopicCards } from './lib-components/Flexible/AssociatedTopicCards.vue'
 export { default as FlexibleBannerFeatured } from './lib-components/Flexible/BannerFeatured.vue'
@@ -97,6 +99,7 @@ export { default as NavSearch } from './lib-components/NavSearch.vue'
 export { default as NavSecondary } from './lib-components/NavSecondary.vue'
 export { default as PageAnchor } from './lib-components/PageAnchor.vue'
 export { default as PullQuote } from './lib-components/PullQuote.vue'
+export { default as YearRangeFilter } from './lib-components/YearRangeFilter.vue'
 export { default as ResponsiveImage } from './lib-components/ResponsiveImage.vue'
 export { default as ResponsiveVideo } from './lib-components/ResponsiveVideo.vue'
 export { default as RichText } from './lib-components/RichText.vue'

packages/vue-component-library/src/lib-components/EffectSlideToggle.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+export interface Props {
+  duration?: number
+  easing?: string
+  opened?: boolean
+  preventClose?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  duration: 400,
+  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  opened: false,
+  preventClose: false
+})
+
+const emit = defineEmits<{
+  opening: []
+  opened: []
+  closing: []
+  closed: []
+}>()
+
+const isOpened = ref<boolean>(props.opened)
+const isClosing = ref<boolean>(false)
+const isExpanding = ref<boolean>(false)
+const animation = ref<Animation | null>(null)
+const height = ref<string>('auto')
+const detailsRef = ref<HTMLDetailsElement | null>(null)
+const summaryRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+
+const classes = computed(() => [
+  'effect-slide-toggle',
+  { 'is-opened': isOpened.value },
+  { 'is-closed': !isOpened.value },
+  { 'is-closing': isClosing.value },
+  { 'is-opening': isExpanding.value }
+])
+
+watch(() => props.opened, (newVal: boolean) => {
+  if (newVal)
+    open()
+
+  else
+    close()
+})
+
+function onClick(): void {
+  if (isClosing.value || !isOpened.value) {
+    open()
+  }
+  else if (isExpanding.value || isOpened.value) {
+    if (!props.preventClose)
+      close()
+  }
+}
+
+function close(): void {
+  if (!detailsRef.value || !summaryRef.value)
+    return
+
+  isClosing.value = true
+  emit('closing')
+
+  const startHeight = `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${summaryRef.value.offsetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeight, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => onAnimationFinish(false)
+  animation.value.oncancel = () => (isClosing.value = false)
+}
+
+async function open(): Promise<void> {
+  if (!detailsRef.value)
+    return
+
+  height.value = `${detailsRef.value.offsetHeight}px`
+  isOpened.value = true
+  emit('opening')
+
+  await nextTick()
+  expand()
+}
+
+function expand(): void {
+  if (!detailsRef.value || !summaryRef.value || !contentRef.value)
+    return
+
+  isExpanding.value = true
+  const startHeight = `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${summaryRef.value.offsetHeight + contentRef.value.offsetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeight, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => onAnimationFinish(true)
+  animation.value.oncancel = () => (isExpanding.value = false)
+}
+
+function onAnimationFinish(open: boolean): void {
+  isOpened.value = open
+  animation.value = null
+  isClosing.value = false
+  isExpanding.value = false
+  height.value = 'auto'
+  if (open)
+    emit('opened')
+  else
+    emit('closed')
+}
+
+// Animate to a specific height (useful for content changes)
+function animateToHeight(targetHeight: number, startHeight?: number): void {
+  if (!detailsRef.value || !summaryRef.value)
+    return
+
+  const startHeightPx = startHeight ? `${startHeight}px` : `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${targetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeightPx, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => {
+    height.value = endHeight
+    animation.value = null
+  }
+  animation.value.oncancel = () => {
+    animation.value = null
+  }
+}
+
+// Expose methods for parent components
+defineExpose({
+  open,
+  close,
+  animateToHeight,
+  isOpened: computed(() => isOpened.value)
+})
+</script>
+
+<template>
+  <details
+    ref="detailsRef"
+    :class="classes"
+    :open="isOpened"
+  >
+    <summary
+      ref="summaryRef"
+      class="summary"
+      @click.prevent="onClick"
+    >
+      <slot name="summary" />
+    </summary>
+    <div
+      ref="contentRef"
+      class="content"
+    >
+      <slot />
+    </div>
+  </details>
+</template>
+
+<style scoped>
+.effect-slide-toggle {
+  overflow: hidden;
+  height: v-bind('height');
+
+  .summary {
+    display: block;
+    cursor: pointer;
+    user-select: none;
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+}
+</style>