From 07ff1ff02ba114663849139279ffa1b32c672955 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Thu, 5 Dec 2024 16:42:03 -0700
Subject: [PATCH 1/9] feat: filtersdropdown scaffolding

---
 src/lib-components/FiltersDropdown.vue    | 100 ++++++++++++++++++++++
 src/stories/FiltersDropdown.spec.js       |  10 +++
 src/stories/FiltersDropdown.stories.js    |  15 ++++
 src/styles/default/_filters-dropdown.scss |   3 +
 src/styles/ftva/_filters-dropdown.scss    |   3 +
 5 files changed, 131 insertions(+)
 create mode 100644 src/lib-components/FiltersDropdown.vue
 create mode 100644 src/stories/FiltersDropdown.spec.js
 create mode 100644 src/stories/FiltersDropdown.stories.js
 create mode 100644 src/styles/default/_filters-dropdown.scss
 create mode 100644 src/styles/ftva/_filters-dropdown.scss

diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
new file mode 100644
index 000000000..1757d7cf8
--- /dev/null
+++ b/src/lib-components/FiltersDropdown.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import BlockTag from './BlockTag.vue'
+import MobileDrawer from './MobileDrawer.vue'
+import { useTheme } from '@/composables/useTheme'
+
+const { filterGroups, initialSelectedFilters } = defineProps({
+  filterGroups: {
+    type: Array, //  as PropType<FilterGroupsTypes[]>,
+    default: () => [],
+  },
+  initialSelectedFilters: { // This is like initialDates prop of DateFilter
+    type: Object, //  as PropType<SelectedFiltersTypes>,
+    default: () => { },
+  }
+})
+
+const selectedFilters = ref({}) // object or array?
+// TODO ON MOUNT
+// initialSelectedFilters[searchField];
+
+function isSelected(searchField, option) {
+  return initialSelectedFilters[searchField].includes(option)
+}
+function toggleSelection(searchField, option) {
+  const index = selectedFilters.value.indexOf(option)
+  if (index > -1)
+    selectedFilters.value.splice(index, 1)
+  else
+    selectedFilters.value.push(option)
+}
+// THEME
+const theme = useTheme()
+const parsedClasses = computed(() => {
+  return ['filters-dropdown', theme?.value || '']
+})
+
+onMounted(() => {
+  selectedFilters.value = initialSelectedFilters
+})
+</script>
+
+<template>
+  <div :class="parsedClasses">
+    <!-- Generic Button -->
+    <!-- <MobileDrawer>
+        <template #buttonLabel>
+            <span class="button-text"> Filters (0 selected)</span>
+        </template>
+        <template #dropdownItems>
+            <div v-for="item in filterGroups" :key="item.dropdownItemTitle" class="dropdown-filter-item">
+                {{ item }}
+            </div>
+        </template>
+    </MobileDrawer> -->
+    <MobileDrawer>
+      <template #buttonLabel>
+        <!-- Optional Button Icon -->
+        <div class="filter-summary">
+          Filters
+        </div>
+
+        <!--
+            <span v-if="hasIcon" class="icon-svg">
+                <component :is="SvgIconFtvaFiltersSample" class="button-svg" aria-hidden="true" />
+            </span> -->
+      </template>
+      <template #dropdownItems>
+        <div class="dropdown-filter">
+          <div v-for="group in filterGroups" :key="group.name" class="filter-group">
+            <h3>{{ group.name }}</h3>
+            <div class="pills">
+              <label v-for="option in group.options" :key="option" class="pill-label">
+                <!-- Hidden checkbox for managing selection -->
+
+                <input
+                  :id="option" type="checkbox" class="pill-checkbox" :value="option"
+                  :checked="isSelected(group.searchField, option)"
+                  @change="toggleSelection(group.searchField, option)"
+                >
+                <!-- BlockTag component for display, positioned over the checkbox -->
+                <BlockTag :label="option" :is-secondary="false">
+                  <!-- 'x' SVG only shows when selected -->
+                  <template v-if="isSelected(group.searchField, option)">
+                    <SvgGlyphX class="x-icon" />
+                  </template>
+                </BlockTag>
+              </label>
+            </div>
+          </div>
+          <!-- <button @click="applyFilters">Done</button>
+                <button @click="clearFilters">Clear</button> -->
+        </div>
+      </template>
+    </MobileDrawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/stories/FiltersDropdown.spec.js b/src/stories/FiltersDropdown.spec.js
new file mode 100644
index 000000000..5c6d59811
--- /dev/null
+++ b/src/stories/FiltersDropdown.spec.js
@@ -0,0 +1,10 @@
+describe('FiltersDropdown', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=filters-dropdown--default&args=&viewMode=story'
+    )
+    cy.get('.filters-dropdown').should('exist')
+
+    cy.percySnapshot('FiltersDropdown: Default')
+  })
+})
\ No newline at end of file
diff --git a/src/stories/FiltersDropdown.stories.js b/src/stories/FiltersDropdown.stories.js
new file mode 100644
index 000000000..b5b435fcc
--- /dev/null
+++ b/src/stories/FiltersDropdown.stories.js
@@ -0,0 +1,15 @@
+import FiltersDropdown from '@/lib-components/FiltersDropdown.vue'
+
+export default {
+  title: 'Filters Dropdown',
+  component: FiltersDropdown,
+}
+
+// MOCK DATA
+
+export function Default() {
+  return {
+    components: { FiltersDropdown },
+    template: '<filters-dropdown />',
+  }
+}
diff --git a/src/styles/default/_filters-dropdown.scss b/src/styles/default/_filters-dropdown.scss
new file mode 100644
index 000000000..5da2087a1
--- /dev/null
+++ b/src/styles/default/_filters-dropdown.scss
@@ -0,0 +1,3 @@
+.filters-dropdown {
+    // styles
+}
\ No newline at end of file
diff --git a/src/styles/ftva/_filters-dropdown.scss b/src/styles/ftva/_filters-dropdown.scss
new file mode 100644
index 000000000..0d7cf8eab
--- /dev/null
+++ b/src/styles/ftva/_filters-dropdown.scss
@@ -0,0 +1,3 @@
+.ftva.filters-dropdown {
+    // styles
+}
\ No newline at end of file

From f9287b6b617189de45a433a0b48cf2389376bceb Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Fri, 6 Dec 2024 16:17:50 -0700
Subject: [PATCH 2/9] feat: filters component and stories

---
 src/lib-components/FiltersDropdown.vue    | 123 ++++++++++++++--------
 src/stories/FiltersDropdown.spec.js       |   2 +-
 src/stories/FiltersDropdown.stories.js    |  50 ++++++++-
 src/styles/default/_filters-dropdown.scss |  41 +++++++-
 src/styles/ftva/_filters-dropdown.scss    |   9 +-
 5 files changed, 175 insertions(+), 50 deletions(-)

diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
index 1757d7cf8..9f790bae8 100644
--- a/src/lib-components/FiltersDropdown.vue
+++ b/src/lib-components/FiltersDropdown.vue
@@ -1,95 +1,124 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed } from 'vue'
+import SvgGlyphClose from 'ucla-library-design-tokens/assets/svgs/icon-close.svg'
 import BlockTag from './BlockTag.vue'
+import ButtonLink from './ButtonLink.vue'
 import MobileDrawer from './MobileDrawer.vue'
 import { useTheme } from '@/composables/useTheme'
 
-const { filterGroups, initialSelectedFilters } = defineProps({
+// TODO TYPES
+const { filterGroups } = defineProps({
   filterGroups: {
     type: Array, //  as PropType<FilterGroupsTypes[]>,
     default: () => [],
-  },
-  initialSelectedFilters: { // This is like initialDates prop of DateFilter
-    type: Object, //  as PropType<SelectedFiltersTypes>,
-    default: () => { },
   }
 })
 
-const selectedFilters = ref({}) // object or array?
-// TODO ON MOUNT
-// initialSelectedFilters[searchField];
+const selectedFilters = defineModel('selectedFilters')
+const numOfSelectedFilters = computed(() => {
+  let count = 0
+  // for each key in selectedFilters
+  for (const key in selectedFilters.value) {
+    // add the length of the array of selectedFilters[key]
+    count += selectedFilters.value[key].length
+  }
+  return count
+})
+// TODO remove? dont need emits with vmodel?
+// const emit = defineEmits(['update:selectedFilters'])
+
+// was implemented on buttons like so
+// :checked="isSelected(group.searchField, option)" @change="toggleSelection(group.searchField, option)"
+function isSelected(searchField: string, option: string) {
+  // check if selectedFilter object has any keys, fail gracefully if it doesn't
+  if (!Object.keys(selectedFilters.value).length)
+    return null
 
-function isSelected(searchField, option) {
-  return initialSelectedFilters[searchField].includes(option)
+  return selectedFilters.value[searchField].includes(option)
 }
-function toggleSelection(searchField, option) {
-  const index = selectedFilters.value.indexOf(option)
-  if (index > -1)
-    selectedFilters.value.splice(index, 1)
-  else
-    selectedFilters.value.push(option)
+
+// TODO remove? vmodel makes all this unneeded
+function toggleSelection(searchField: string, option: string) {
+  // ORIGINAL
+  // const index = selectedFilters.value.indexOf(option)
+  // if (index > -1)
+  //   selectedFilters.value.splice(index, 1)
+  // else
+  //   selectedFilters.value.push(option)
+
+  // REVISED TO
+  // const index = selectedFilters[searchField].indexOf(option)
+  // if (index > -1)
+  //   selectedFilters[searchField].splice(index, 1)
+  // else
+  //   selectedFilters[searchField].push(option)
 }
+
+// TODO not needed
+function onDoneClick() {
+  // console.log('applyFilters', selectedFilters)
+  // close the drawer handled by MobileDrawer.removeOverlay
+  // emit('applyFilters', selectedFilters.value)
+}
+function clearFilters() {
+  console.log('clearFilters')
+
+  // recreate empty selectedFilters object from filterGroups
+  // selectedFilters.value = {}
+  for (const group of filterGroups)
+    selectedFilters.value[group.searchField] = []
+
+  // emit('update:selectedFilters', {})
+}
+
 // THEME
 const theme = useTheme()
 const parsedClasses = computed(() => {
   return ['filters-dropdown', theme?.value || '']
 })
-
-onMounted(() => {
-  selectedFilters.value = initialSelectedFilters
-})
 </script>
 
 <template>
   <div :class="parsedClasses">
-    <!-- Generic Button -->
-    <!-- <MobileDrawer>
-        <template #buttonLabel>
-            <span class="button-text"> Filters (0 selected)</span>
-        </template>
-        <template #dropdownItems>
-            <div v-for="item in filterGroups" :key="item.dropdownItemTitle" class="dropdown-filter-item">
-                {{ item }}
-            </div>
-        </template>
-    </MobileDrawer> -->
     <MobileDrawer>
       <template #buttonLabel>
-        <!-- Optional Button Icon -->
         <div class="filter-summary">
-          Filters
+          Filters ({{ numOfSelectedFilters }} selected )
         </div>
-
         <!--
             <span v-if="hasIcon" class="icon-svg">
                 <component :is="SvgIconFtvaFiltersSample" class="button-svg" aria-hidden="true" />
             </span> -->
       </template>
-      <template #dropdownItems>
+      <template #dropdownItems="{ removeOverlay }">
         <div class="dropdown-filter">
           <div v-for="group in filterGroups" :key="group.name" class="filter-group">
             <h3>{{ group.name }}</h3>
             <div class="pills">
+              <!-- <label> must wrap <input> for accessbility fuctionality -->
               <label v-for="option in group.options" :key="option" class="pill-label">
-                <!-- Hidden checkbox for managing selection -->
-
+                <!-- Hidden checkbox for managing selection & screen-reader user interaction -->
                 <input
-                  :id="option" type="checkbox" class="pill-checkbox" :value="option"
-                  :checked="isSelected(group.searchField, option)"
-                  @change="toggleSelection(group.searchField, option)"
+                  :id="option" v-model="selectedFilters[group.searchField]" type="checkbox" class="pill-checkbox" :name="option"
+                  :value="option"
                 >
-                <!-- BlockTag component for display, positioned over the checkbox -->
-                <BlockTag :label="option" :is-secondary="false">
+                <!-- BlockTag component for display -->
+                <BlockTag :label="option" :is-secondary="true">
                   <!-- 'x' SVG only shows when selected -->
                   <template v-if="isSelected(group.searchField, option)">
-                    <SvgGlyphX class="x-icon" />
+                    <SvgGlyphClose />
                   </template>
                 </BlockTag>
               </label>
             </div>
           </div>
-          <!-- <button @click="applyFilters">Done</button>
-                <button @click="clearFilters">Clear</button> -->
+          <div class="action-row">
+            <ButtonLink class="action-row-button select-button" label="Done" icon-name="none" @click="removeOverlay" />
+            <ButtonLink
+              class="action-row-button clear-button" label="Clear" icon-name="icon-close"
+              @click="clearFilters"
+            />
+          </div>
         </div>
       </template>
     </MobileDrawer>
@@ -97,4 +126,6 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+@import "@/styles/default/_filters-dropdown.scss";
+@import "@/styles/ftva/_filters-dropdown.scss";
 </style>
diff --git a/src/stories/FiltersDropdown.spec.js b/src/stories/FiltersDropdown.spec.js
index 5c6d59811..f42a768f9 100644
--- a/src/stories/FiltersDropdown.spec.js
+++ b/src/stories/FiltersDropdown.spec.js
@@ -7,4 +7,4 @@ describe('FiltersDropdown', () => {
 
     cy.percySnapshot('FiltersDropdown: Default')
   })
-})
\ No newline at end of file
+})
diff --git a/src/stories/FiltersDropdown.stories.js b/src/stories/FiltersDropdown.stories.js
index b5b435fcc..29929be78 100644
--- a/src/stories/FiltersDropdown.stories.js
+++ b/src/stories/FiltersDropdown.stories.js
@@ -1,3 +1,4 @@
+import { computed, ref } from 'vue'
 import FiltersDropdown from '@/lib-components/FiltersDropdown.vue'
 
 export default {
@@ -6,10 +7,57 @@ export default {
 }
 
 // MOCK DATA
+const mockFilterGroups = [
+  {
+    name: 'Event Type',
+    searchField: 'ftvaEventTypeFilters.title.keyword',
+    options: ['Film', 'Theater', 'Lecture'],
+  },
+  {
+    name: 'Screen Format',
+    searchField: 'ftvaScreeningFormatFilters.title.keyword',
+    options: ['Online', 'In-Person'],
+  },
+]
+// note that because this component uses v-model,
+// parent component needs to use a ref for selectedFilters
+const mockEmptySelectedFilters = ref({ 'ftvaEventTypeFilters.title.keyword': [], 'ftvaScreeningFormatFilters.title.keyword': [] })
+const mockSelectedFilters = ref({
+  'ftvaEventTypeFilters.title.keyword': ['Film', 'Theater'],
+  'ftvaScreeningFormatFilters.title.keyword': ['Online'],
+})
 
 export function Default() {
   return {
     components: { FiltersDropdown },
-    template: '<filters-dropdown />',
+    data() {
+      return { mockFilterGroups, mockSelectedFilters: mockEmptySelectedFilters }
+    },
+    template: '<span>Selected filters display:{{ mockSelectedFilters }}</span><filters-dropdown v-model:selectedFilters="mockSelectedFilters" :filterGroups="mockFilterGroups" />',
+  }
+}
+
+export function InitialSelectedFilters() {
+  return {
+    components: { FiltersDropdown },
+    data() {
+      return { mockFilterGroups, mockSelectedFilters }
+    },
+    template: '<span>Selected filters display:{{ mockSelectedFilters }}</span><filters-dropdown v-model:selectedFilters="mockSelectedFilters" :filterGroups="mockFilterGroups" />',
+  }
+}
+
+export function FTVA() {
+  return {
+    components: { FiltersDropdown },
+    data() {
+      return { mockFilterGroups, mockSelectedFilters }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    template: '<span>Selected filters display:{{ mockSelectedFilters }}</span><filters-dropdown v-model:selectedFilters="mockSelectedFilters" :filterGroups="mockFilterGroups" />',
   }
 }
diff --git a/src/styles/default/_filters-dropdown.scss b/src/styles/default/_filters-dropdown.scss
index 5da2087a1..0a2e6ca30 100644
--- a/src/styles/default/_filters-dropdown.scss
+++ b/src/styles/default/_filters-dropdown.scss
@@ -1,3 +1,42 @@
 .filters-dropdown {
-    // styles
+    // Dropdown  Window Size
+    :deep(.mobile-button) {
+        min-width: 380px;
+    }
+
+    :deep(.button-dropdown-modal-wrapper.is-expanded) {
+        min-width: 380px;
+        margin: auto;
+    }
+
+    // Filter Pills
+    .pills {
+        display: flex;
+        flex-wrap: wrap;
+
+        .pill-label {
+            display: inline-flex;
+            // align-items: center;
+            position: relative;
+
+            .pill-checkbox {
+                opacity: 0;
+                position: absolute;
+            }
+        }
+    }
+
+    :deep(.block-tag) {
+        cursor: pointer;
+    }
+
+    // Selected Filter Pills
+    :deep(.block-tag:hover),
+    .pill-checkbox:checked+ :deep(.block-tag) {
+        background-color: var(--color-primary-blue-03);
+
+        .label {
+            color: white;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/styles/ftva/_filters-dropdown.scss b/src/styles/ftva/_filters-dropdown.scss
index 0d7cf8eab..7224a0b1e 100644
--- a/src/styles/ftva/_filters-dropdown.scss
+++ b/src/styles/ftva/_filters-dropdown.scss
@@ -1,3 +1,10 @@
 .ftva.filters-dropdown {
-    // styles
+    :deep(.svg__icon-close) {
+        path {
+            stroke: white;
+        }
+        circle {
+            fill: transparent;
+        }
+    }
 }
\ No newline at end of file

From 8966f65076d4014b584c3aabe70fa48a1730bbeb Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Mon, 9 Dec 2024 11:24:58 -0700
Subject: [PATCH 3/9] chore: comment in progress work

---
 src/lib-components/FiltersDropdown.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
index 9f790bae8..434dc7d34 100644
--- a/src/lib-components/FiltersDropdown.vue
+++ b/src/lib-components/FiltersDropdown.vue
@@ -15,6 +15,19 @@ const { filterGroups } = defineProps({
 })
 
 const selectedFilters = defineModel('selectedFilters')
+// TODO GET THIS ONE WORKING?
+// const selectedFilters = defineModel({
+//   type: Object,
+//   required: true,
+//   // TODO does this need to be a ref object?
+//   // BROKEN!!!!
+//   default: {
+//     'ftvaEventTypeFilters.title.keyword': [] as string[],
+//     'ftvaScreeningFormatFilters.title.keyword': [] as string[],
+//   },
+// });
+
+
 const numOfSelectedFilters = computed(() => {
   let count = 0
   // for each key in selectedFilters
@@ -62,9 +75,6 @@ function onDoneClick() {
 }
 function clearFilters() {
   console.log('clearFilters')
-
-  // recreate empty selectedFilters object from filterGroups
-  // selectedFilters.value = {}
   for (const group of filterGroups)
     selectedFilters.value[group.searchField] = []
 

From 405dc498ce5199338c67f247dc100b530a4e08d8 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 10 Dec 2024 08:48:18 -0700
Subject: [PATCH 4/9] chore: add types

---
 src/lib-components/FiltersDropdown.vue | 69 ++++++++------------------
 1 file changed, 21 insertions(+), 48 deletions(-)

diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
index 434dc7d34..3dee2109e 100644
--- a/src/lib-components/FiltersDropdown.vue
+++ b/src/lib-components/FiltersDropdown.vue
@@ -1,47 +1,46 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { PropType } from 'vue'
 import SvgGlyphClose from 'ucla-library-design-tokens/assets/svgs/icon-close.svg'
 import BlockTag from './BlockTag.vue'
 import ButtonLink from './ButtonLink.vue'
 import MobileDrawer from './MobileDrawer.vue'
 import { useTheme } from '@/composables/useTheme'
 
-// TODO TYPES
+// PROPS
+interface FilterGroupsTypes {
+  name: string
+  searchField: string
+  options: string[]
+}
 const { filterGroups } = defineProps({
   filterGroups: {
-    type: Array, //  as PropType<FilterGroupsTypes[]>,
+    type: Array as PropType<FilterGroupsTypes[]>,
     default: () => [],
   }
 })
+// V-MODEL DATA
+interface SelectedFiltersTypes {
+  [key: string]: string[]
+}
+const selectedFilters = defineModel('selectedFilters', { type: Object as PropType<SelectedFiltersTypes>, required: true, default: {} })
 
-const selectedFilters = defineModel('selectedFilters')
-// TODO GET THIS ONE WORKING?
-// const selectedFilters = defineModel({
-//   type: Object,
-//   required: true,
-//   // TODO does this need to be a ref object?
-//   // BROKEN!!!!
-//   default: {
-//     'ftvaEventTypeFilters.title.keyword': [] as string[],
-//     'ftvaScreeningFormatFilters.title.keyword': [] as string[],
-//   },
-// });
-
+// EMITS - remove?
+// TODO remove? dont need emits with vmodel?
+// const emit = defineEmits(['update:selectedFilters'])
 
+// FUNCTIONS
+// calc # for UI '# selected' display
 const numOfSelectedFilters = computed(() => {
   let count = 0
   // for each key in selectedFilters
-  for (const key in selectedFilters.value) {
+  for (const key in selectedFilters.value as any) {
     // add the length of the array of selectedFilters[key]
     count += selectedFilters.value[key].length
   }
   return count
 })
-// TODO remove? dont need emits with vmodel?
-// const emit = defineEmits(['update:selectedFilters'])
-
-// was implemented on buttons like so
-// :checked="isSelected(group.searchField, option)" @change="toggleSelection(group.searchField, option)"
+// check if option is selected so we can display 'x' SVG
 function isSelected(searchField: string, option: string) {
   // check if selectedFilter object has any keys, fail gracefully if it doesn't
   if (!Object.keys(selectedFilters.value).length)
@@ -49,36 +48,10 @@ function isSelected(searchField: string, option: string) {
 
   return selectedFilters.value[searchField].includes(option)
 }
-
-// TODO remove? vmodel makes all this unneeded
-function toggleSelection(searchField: string, option: string) {
-  // ORIGINAL
-  // const index = selectedFilters.value.indexOf(option)
-  // if (index > -1)
-  //   selectedFilters.value.splice(index, 1)
-  // else
-  //   selectedFilters.value.push(option)
-
-  // REVISED TO
-  // const index = selectedFilters[searchField].indexOf(option)
-  // if (index > -1)
-  //   selectedFilters[searchField].splice(index, 1)
-  // else
-  //   selectedFilters[searchField].push(option)
-}
-
-// TODO not needed
-function onDoneClick() {
-  // console.log('applyFilters', selectedFilters)
-  // close the drawer handled by MobileDrawer.removeOverlay
-  // emit('applyFilters', selectedFilters.value)
-}
+// clear all selected filters
 function clearFilters() {
-  console.log('clearFilters')
   for (const group of filterGroups)
     selectedFilters.value[group.searchField] = []
-
-  // emit('update:selectedFilters', {})
 }
 
 // THEME

From fb642bdd62ebb7abdad42a79aa0b7a66cb2d8c3c Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 10 Dec 2024 13:18:15 -0700
Subject: [PATCH 5/9] feat: styles

---
 package.json                              |  2 +-
 pnpm-lock.yaml                            | 10 +--
 src/lib-components/FiltersDropdown.vue    | 12 +--
 src/lib-components/MobileDrawer.vue       |  2 +-
 src/stories/FiltersDropdown.stories.js    |  2 +-
 src/styles/default/_filters-dropdown.scss | 92 ++++++++++++++++++++++-
 src/styles/ftva/_filters-dropdown.scss    | 32 ++++++++
 7 files changed, 134 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index a1949553e..c26f7f845 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "sass": "^1.79.5",
     "storybook": "^7.4.1",
     "typescript": "^5.6.3",
-    "ucla-library-design-tokens": "^5.27.1",
+    "ucla-library-design-tokens": "^5.28.0",
     "video.js": "^8.5.2",
     "vite": "^5.4.8",
     "vite-svg-loader": "^5.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cee8fcc41..18ded3350 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -121,8 +121,8 @@ importers:
         specifier: ^5.6.3
         version: 5.6.3
       ucla-library-design-tokens:
-        specifier: ^5.27.1
-        version: 5.27.2
+        specifier: ^5.28.0
+        version: 5.28.0
       video.js:
         specifier: ^8.5.2
         version: 8.19.1
@@ -5958,8 +5958,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  ucla-library-design-tokens@5.27.2:
-    resolution: {integrity: sha512-+GgHevX1Fflu1uSAgT7otxzqLUuOAXaVKK9vKqTckSiSMxMs1dqBBXqA6+++HuPym2MazR0lSBHA8B53cfVk1Q==}
+  ucla-library-design-tokens@5.28.0:
+    resolution: {integrity: sha512-qgxGlK3/m0VwYGumzLZTTB/ae03DY41+80vFhm4+gukzh8XiqUsN71cg3ijk23Dl9awyicoELbRgnUV4nj3e0g==}
 
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
@@ -13128,7 +13128,7 @@ snapshots:
 
   typescript@5.6.3: {}
 
-  ucla-library-design-tokens@5.27.2: {}
+  ucla-library-design-tokens@5.28.0: {}
 
   ufo@1.5.4: {}
 
diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
index 3dee2109e..b6d0b4898 100644
--- a/src/lib-components/FiltersDropdown.vue
+++ b/src/lib-components/FiltersDropdown.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { PropType } from 'vue'
-import SvgGlyphClose from 'ucla-library-design-tokens/assets/svgs/icon-close.svg'
+import SvgGlyphX from 'ucla-library-design-tokens/assets/svgs/icon-ftva-xtag.svg'
+import SvgFilterIcon from 'ucla-library-design-tokens/assets/svgs/icon-ftva-filter.svg'
 import BlockTag from './BlockTag.vue'
 import ButtonLink from './ButtonLink.vue'
 import MobileDrawer from './MobileDrawer.vue'
@@ -68,10 +69,9 @@ const parsedClasses = computed(() => {
         <div class="filter-summary">
           Filters ({{ numOfSelectedFilters }} selected )
         </div>
-        <!--
-            <span v-if="hasIcon" class="icon-svg">
-                <component :is="SvgIconFtvaFiltersSample" class="button-svg" aria-hidden="true" />
-            </span> -->
+        <span class="icon-svg">
+          <SvgFilterIcon aria-hidden="true" />
+        </span>
       </template>
       <template #dropdownItems="{ removeOverlay }">
         <div class="dropdown-filter">
@@ -89,7 +89,7 @@ const parsedClasses = computed(() => {
                 <BlockTag :label="option" :is-secondary="true">
                   <!-- 'x' SVG only shows when selected -->
                   <template v-if="isSelected(group.searchField, option)">
-                    <SvgGlyphClose />
+                    <SvgGlyphX class="close-icon" />
                   </template>
                 </BlockTag>
               </label>
diff --git a/src/lib-components/MobileDrawer.vue b/src/lib-components/MobileDrawer.vue
index 2bfb29c22..d90548cba 100644
--- a/src/lib-components/MobileDrawer.vue
+++ b/src/lib-components/MobileDrawer.vue
@@ -44,7 +44,7 @@ onMounted(() => {
 
 <template>
   <div :class="parsedClasses">
-    <div v-on-click-outside="closeDropdownOnClickOutside">
+    <div v-on-click-outside="closeDropdownOnClickOutside" class="dropdown-wrapper">
       <div class="dropdown-overlay" :class="isDropdownExpandedClass" />
       <button
         class="mobile-button"
diff --git a/src/stories/FiltersDropdown.stories.js b/src/stories/FiltersDropdown.stories.js
index 29929be78..73f72e034 100644
--- a/src/stories/FiltersDropdown.stories.js
+++ b/src/stories/FiltersDropdown.stories.js
@@ -33,7 +33,7 @@ export function Default() {
     data() {
       return { mockFilterGroups, mockSelectedFilters: mockEmptySelectedFilters }
     },
-    template: '<span>Selected filters display:{{ mockSelectedFilters }}</span><filters-dropdown v-model:selectedFilters="mockSelectedFilters" :filterGroups="mockFilterGroups" />',
+    template: '<div style="width:400px"><span>Selected filters display:{{ mockSelectedFilters }}</span><filters-dropdown v-model:selectedFilters="mockSelectedFilters" :filterGroups="mockFilterGroups" /></div>',
   }
 }
 
diff --git a/src/styles/default/_filters-dropdown.scss b/src/styles/default/_filters-dropdown.scss
index 0a2e6ca30..d8c69fa78 100644
--- a/src/styles/default/_filters-dropdown.scss
+++ b/src/styles/default/_filters-dropdown.scss
@@ -1,22 +1,51 @@
 .filters-dropdown {
-    // Dropdown  Window Size
+    // Dropdown  Window Size & Input
     :deep(.mobile-button) {
         min-width: 380px;
+        .toggle-triangle-icon { 
+            path.svg__fill--accent-blue {
+                fill: $accent-blue;
+            }
+        }
+        .button-inner-wrapper {
+            width: 100%;
+            justify-content: space-between;
+            .icon-svg {
+                align-self: flex-end;
+                padding-right: 10px;
+                margin-bottom: -5px;
+            }
+        }
+    }
+                                                                        
+    :deep(.dropdown-wrapper) {
+        width: 100%; // filters input grows to container width
     }
-
     :deep(.button-dropdown-modal-wrapper.is-expanded) {
         min-width: 380px;
         margin: auto;
+        padding: 24px 30px 30px 30px;
+        width: 100%; // filters dropdown grows to container width
+    }
+
+    // Filter Heading
+    .filter-group {
+        h3 {
+            text-transform: uppercase;
+            @include ftva-subtitle-1;
+            color: $heading-grey;
+        }
     }
 
     // Filter Pills
     .pills {
         display: flex;
         flex-wrap: wrap;
+        gap: 10px;
+        margin: 8px auto 20px;
 
         .pill-label {
             display: inline-flex;
-            // align-items: center;
             position: relative;
 
             .pill-checkbox {
@@ -24,6 +53,9 @@
                 position: absolute;
             }
         }
+        .close-icon {
+            margin: 5px 0 5px 5px;
+        }
     }
 
     :deep(.block-tag) {
@@ -39,4 +71,56 @@
             color: white;
         }
     }
-}
\ No newline at end of file
+
+    // Done / Clear Buttons
+    .action-row {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+        align-items: center;
+        padding-top: 18px;
+        gap: 5px;
+
+        .action-row-button {
+            border-radius: 2px;
+            font-family: var(--font-primary);
+            font-weight: 500;
+            line-height: 27px;
+            color: var(--color-white);
+            background-color: var(--color-primary-blue-03); 
+            border: 1px solid var(--color-primary-blue-03); 
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+
+            &.select-button> :deep(.label) {
+                padding-left: 0px;
+            }
+
+            :deep(.hover) {
+                display: none;
+            }
+
+            &:hover {
+                background-color: $navy-blue;
+            }
+        }
+
+        .clear-button {
+            background-color: var(--color-white);
+            color: var(--color-primary-blue-03);
+
+            :deep(.svg__stroke--primary-blue-03) {
+                stroke: var(--color-primary-blue-03);
+            }
+
+            &:hover {
+                background-color: $navy-blue;
+                color: var(--color-white);
+
+                :deep(.svg__stroke--primary-blue-03) {
+                    stroke: var(--color-white);
+                }
+            }
+        }
+    }
+}
diff --git a/src/styles/ftva/_filters-dropdown.scss b/src/styles/ftva/_filters-dropdown.scss
index 7224a0b1e..966571a0f 100644
--- a/src/styles/ftva/_filters-dropdown.scss
+++ b/src/styles/ftva/_filters-dropdown.scss
@@ -1,4 +1,36 @@
 .ftva.filters-dropdown {
+    .action-row {
+        .action-row-button {
+            color: $accent-blue;
+            border-color: $accent-blue;
+            &.select-button {
+                background-color: $accent-blue;
+                color: white;
+            }
+            &.clear-button {
+                color: $accent-blue;
+                :deep(.svg__stroke--primary-blue-03) {
+                    stroke: $accent-blue;
+                }
+                &:hover {
+                    background-color: $navy-blue;
+                    color: var(--color-white);
+                    :deep(.svg__stroke--primary-blue-03) {
+                        stroke: var(--color-white);
+                    }
+                }
+            }
+        }
+    }
+    // Selected Filter Pills
+    :deep(.block-tag:hover),
+    .pill-checkbox:checked+ :deep(.block-tag) {
+        background-color: $accent-blue;
+        border-color: $accent-blue;
+        .label {
+            color: white;
+        }
+    }
     :deep(.svg__icon-close) {
         path {
             stroke: white;

From 103ad5198115487cfa5fcd217c9a4e0fa72a944c Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 10 Dec 2024 13:32:41 -0700
Subject: [PATCH 6/9] chore: cleanup, add async data test

---
 src/lib-components/FiltersDropdown.vue |  4 ----
 src/stories/FiltersDropdown.stories.js | 22 ++++++++++++++++++++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
index b6d0b4898..ae20069d7 100644
--- a/src/lib-components/FiltersDropdown.vue
+++ b/src/lib-components/FiltersDropdown.vue
@@ -26,10 +26,6 @@ interface SelectedFiltersTypes {
 }
 const selectedFilters = defineModel('selectedFilters', { type: Object as PropType<SelectedFiltersTypes>, required: true, default: {} })
 
-// EMITS - remove?
-// TODO remove? dont need emits with vmodel?
-// const emit = defineEmits(['update:selectedFilters'])
-
 // FUNCTIONS
 // calc # for UI '# selected' display
 const numOfSelectedFilters = computed(() => {
diff --git a/src/stories/FiltersDropdown.stories.js b/src/stories/FiltersDropdown.stories.js
index 73f72e034..4e512fc86 100644
--- a/src/stories/FiltersDropdown.stories.js
+++ b/src/stories/FiltersDropdown.stories.js
@@ -37,13 +37,31 @@ export function Default() {
   }
 }
 
+// uses async data
 export function InitialSelectedFilters() {
   return {
     components: { FiltersDropdown },
+      setup() {
+      const selectedFilters = ref({})
+      // mock getting selected filters from a route or other async source
+      const fetchFilters = async () => {
+        // Mocking an async fetch call
+        const response = await new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(mockSelectedFilters.value)
+          }, 1000)
+        })
+        selectedFilters.value = response
+      }
+
+      fetchFilters()
+
+      return { selectedFilters }
+    },
     data() {
-      return { mockFilterGroups, mockSelectedFilters }
+      return { mockFilterGroups }
     },
-    template: '<span>Selected filters display:{{ mockSelectedFilters }}</span><filters-dropdown v-model:selectedFilters="mockSelectedFilters" :filterGroups="mockFilterGroups" />',
+    template: '<span>Selected filters display:{{ selectedFilters }}</span><filters-dropdown v-model:selectedFilters="selectedFilters" :filterGroups="mockFilterGroups" />',
   }
 }
 

From 4b8ba17745f307c42c08c6d3acc2634ee17bc8f9 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Tue, 10 Dec 2024 13:33:02 -0700
Subject: [PATCH 7/9] chore: lint

---
 src/stories/FiltersDropdown.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stories/FiltersDropdown.stories.js b/src/stories/FiltersDropdown.stories.js
index 4e512fc86..76cdf88c3 100644
--- a/src/stories/FiltersDropdown.stories.js
+++ b/src/stories/FiltersDropdown.stories.js
@@ -41,7 +41,7 @@ export function Default() {
 export function InitialSelectedFilters() {
   return {
     components: { FiltersDropdown },
-      setup() {
+    setup() {
       const selectedFilters = ref({})
       // mock getting selected filters from a route or other async source
       const fetchFilters = async () => {

From 9e46dd57ac9d8c1ca1a4e661de1c00509cd65e06 Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Thu, 12 Dec 2024 12:10:38 -0700
Subject: [PATCH 8/9] feat: add emits and story

---
 src/lib-components/FiltersDropdown.vue |  9 ++++--
 src/stories/FiltersDropdown.stories.js | 39 ++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
index ae20069d7..21ab43c6a 100644
--- a/src/lib-components/FiltersDropdown.vue
+++ b/src/lib-components/FiltersDropdown.vue
@@ -25,6 +25,7 @@ interface SelectedFiltersTypes {
   [key: string]: string[]
 }
 const selectedFilters = defineModel('selectedFilters', { type: Object as PropType<SelectedFiltersTypes>, required: true, default: {} })
+const emit = defineEmits(['update-display'])
 
 // FUNCTIONS
 // calc # for UI '# selected' display
@@ -45,11 +46,15 @@ function isSelected(searchField: string, option: string) {
 
   return selectedFilters.value[searchField].includes(option)
 }
-// clear all selected filters
+// Clear Button Click / clear all selected filters
 function clearFilters() {
   for (const group of filterGroups)
     selectedFilters.value[group.searchField] = []
 }
+// Done Button Click / emit selected filters to parent
+function onDoneClick() {
+  emit('update-display', selectedFilters.value)
+}
 
 // THEME
 const theme = useTheme()
@@ -92,7 +97,7 @@ const parsedClasses = computed(() => {
             </div>
           </div>
           <div class="action-row">
-            <ButtonLink class="action-row-button select-button" label="Done" icon-name="none" @click="removeOverlay" />
+            <ButtonLink class="action-row-button select-button" label="Done" icon-name="none" @click="onDoneClick(); removeOverlay();" />
             <ButtonLink
               class="action-row-button clear-button" label="Clear" icon-name="icon-close"
               @click="clearFilters"
diff --git a/src/stories/FiltersDropdown.stories.js b/src/stories/FiltersDropdown.stories.js
index 76cdf88c3..fdc7cbd34 100644
--- a/src/stories/FiltersDropdown.stories.js
+++ b/src/stories/FiltersDropdown.stories.js
@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import FiltersDropdown from '@/lib-components/FiltersDropdown.vue'
 
 export default {
@@ -19,7 +19,7 @@ const mockFilterGroups = [
     options: ['Online', 'In-Person'],
   },
 ]
-// note that because this component uses v-model,
+// note that because this component uses v-model by default,
 // parent component needs to use a ref for selectedFilters
 const mockEmptySelectedFilters = ref({ 'ftvaEventTypeFilters.title.keyword': [], 'ftvaScreeningFormatFilters.title.keyword': [] })
 const mockSelectedFilters = ref({
@@ -65,6 +65,7 @@ export function InitialSelectedFilters() {
   }
 }
 
+// FTVA Theme
 export function FTVA() {
   return {
     components: { FiltersDropdown },
@@ -79,3 +80,37 @@ export function FTVA() {
     template: '<span>Selected filters display:{{ mockSelectedFilters }}</span><filters-dropdown v-model:selectedFilters="mockSelectedFilters" :filterGroups="mockFilterGroups" />',
   }
 }
+
+
+// FTVA Theme W Selected Filters updating on 'done' click only
+const mockSelectedFiltersEmitted = ref({
+  'ftvaEventTypeFilters.title.keyword': ['Film'],
+  'ftvaScreeningFormatFilters.title.keyword': ['Online'],
+})
+export function FTVADateUpdateEmit() {
+  return {
+    components: { FiltersDropdown },
+    setup() {
+      const selectedFiltersDisplay = ref({})
+
+      const updateFiltersDisplay = () => {
+        // assignment is done with spread operator so that a copy is made
+        selectedFiltersDisplay.value = { ...mockSelectedFiltersEmitted.value}
+      }
+      onMounted(() => {
+        // trigger function once onMount to update display with initial selected filters
+        updateFiltersDisplay()
+      })
+      return { selectedFiltersDisplay, updateFiltersDisplay }
+    },
+    data() {
+      return { mockFilterGroups, mockSelectedFiltersEmitted }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    template: '<span>Selected filters display:{{ selectedFiltersDisplay }}</span><filters-dropdown v-model:selectedFilters="mockSelectedFiltersEmitted" @update-display="updateFiltersDisplay" :filterGroups="mockFilterGroups" />',
+  }
+}

From fc31f9cf2ee848f4901f4e3d8372deb2293afb9e Mon Sep 17 00:00:00 2001
From: Jess Divers <jessica.divers@library.ucla.edu>
Date: Thu, 12 Dec 2024 12:18:39 -0700
Subject: [PATCH 9/9] feat: add emits and focus styles

---
 src/lib-components/FiltersDropdown.vue    | 3 +--
 src/stories/FiltersDropdown.stories.js    | 8 ++++----
 src/styles/default/_filters-dropdown.scss | 6 +++---
 src/styles/ftva/_filters-dropdown.scss    | 4 ++--
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/lib-components/FiltersDropdown.vue b/src/lib-components/FiltersDropdown.vue
index 21ab43c6a..350bcef12 100644
--- a/src/lib-components/FiltersDropdown.vue
+++ b/src/lib-components/FiltersDropdown.vue
@@ -20,13 +20,12 @@ const { filterGroups } = defineProps({
     default: () => [],
   }
 })
+const emit = defineEmits(['update-display'])
 // V-MODEL DATA
 interface SelectedFiltersTypes {
   [key: string]: string[]
 }
 const selectedFilters = defineModel('selectedFilters', { type: Object as PropType<SelectedFiltersTypes>, required: true, default: {} })
-const emit = defineEmits(['update-display'])
-
 // FUNCTIONS
 // calc # for UI '# selected' display
 const numOfSelectedFilters = computed(() => {
diff --git a/src/stories/FiltersDropdown.stories.js b/src/stories/FiltersDropdown.stories.js
index fdc7cbd34..310cd9f3f 100644
--- a/src/stories/FiltersDropdown.stories.js
+++ b/src/stories/FiltersDropdown.stories.js
@@ -1,4 +1,4 @@
-import { computed, ref, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import FiltersDropdown from '@/lib-components/FiltersDropdown.vue'
 
 export default {
@@ -81,13 +81,13 @@ export function FTVA() {
   }
 }
 
-
 // FTVA Theme W Selected Filters updating on 'done' click only
+// This is the current planned implmentation on the FTVA site
 const mockSelectedFiltersEmitted = ref({
   'ftvaEventTypeFilters.title.keyword': ['Film'],
   'ftvaScreeningFormatFilters.title.keyword': ['Online'],
 })
-export function FTVADateUpdateEmit() {
+export function FTVAFiltersUpdateDoneClick() {
   return {
     components: { FiltersDropdown },
     setup() {
@@ -95,7 +95,7 @@ export function FTVADateUpdateEmit() {
 
       const updateFiltersDisplay = () => {
         // assignment is done with spread operator so that a copy is made
-        selectedFiltersDisplay.value = { ...mockSelectedFiltersEmitted.value}
+        selectedFiltersDisplay.value = { ...mockSelectedFiltersEmitted.value }
       }
       onMounted(() => {
         // trigger function once onMount to update display with initial selected filters
diff --git a/src/styles/default/_filters-dropdown.scss b/src/styles/default/_filters-dropdown.scss
index d8c69fa78..f1acef41e 100644
--- a/src/styles/default/_filters-dropdown.scss
+++ b/src/styles/default/_filters-dropdown.scss
@@ -63,7 +63,7 @@
     }
 
     // Selected Filter Pills
-    :deep(.block-tag:hover),
+    :deep(.block-tag:hover), :deep(.block-tag:focus)
     .pill-checkbox:checked+ :deep(.block-tag) {
         background-color: var(--color-primary-blue-03);
 
@@ -100,7 +100,7 @@
                 display: none;
             }
 
-            &:hover {
+            &:hover, &:focus {
                 background-color: $navy-blue;
             }
         }
@@ -113,7 +113,7 @@
                 stroke: var(--color-primary-blue-03);
             }
 
-            &:hover {
+            &:hover, &:focus {
                 background-color: $navy-blue;
                 color: var(--color-white);
 
diff --git a/src/styles/ftva/_filters-dropdown.scss b/src/styles/ftva/_filters-dropdown.scss
index 966571a0f..de056ce03 100644
--- a/src/styles/ftva/_filters-dropdown.scss
+++ b/src/styles/ftva/_filters-dropdown.scss
@@ -12,7 +12,7 @@
                 :deep(.svg__stroke--primary-blue-03) {
                     stroke: $accent-blue;
                 }
-                &:hover {
+                &:hover, &:focus {
                     background-color: $navy-blue;
                     color: var(--color-white);
                     :deep(.svg__stroke--primary-blue-03) {
@@ -23,7 +23,7 @@
         }
     }
     // Selected Filter Pills
-    :deep(.block-tag:hover),
+    :deep(.block-tag:hover), :deep(.block-tag:focus),
     .pill-checkbox:checked+ :deep(.block-tag) {
         background-color: $accent-blue;
         border-color: $accent-blue;