Make the filter button match the mockups

WordPress · Sep 27, 2022 · 739c630 · 739c630
1 parent 63279e1
commit 739c630
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
@@ -1,30 +1,30 @@
 <template>
   <VButton
     id="filter-button"
-    variant="new-action-menu"
+    :variant="filtersAreApplied ? 'action-menu-muted' : 'action-menu'"
     size="disabled"
-    class="align-center label-regular h-12 w-12 gap-2 self-center focus-visible:border-tx focus-visible:ring focus-visible:ring-pink xl:w-auto xl:ps-3"
+    class="align-center label-regular description-bold h-12 w-12 gap-2 self-center xl:w-auto xl:ps-3"
     :class="[filtersAreApplied ? 'xl:pe-3' : 'xl:pe-4']"
     :pressed="pressed"
     :disabled="disabled"
     aria-controls="filters"
-    :aria-label="mdMinLabel"
+    :aria-label="xlMinLabel"
     @click="$emit('toggle')"
     @keydown.tab.exact="$emit('tab', $event)"
   >
     <VIcon
       :class="filtersAreApplied ? 'hidden' : 'block'"
       :icon-path="filterIcon"
     />
-    <span class="hidden xl:inline-block">{{ mdMinLabel }}</span>
-    <span class="xl:hidden" :class="!filtersAreApplied && 'hidden'">{{
-      smMaxLabel
+    <span class="hidden xl:inline-block">{{ xlMinLabel }}</span>
+    <span class="xl:hidden" :class="{ hidden: !filtersAreApplied }">{{
+      lgMaxLabel
     }}</span>
   </VButton>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, ref } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import { useSearchStore } from '~/stores/search'
 import { defineEvent } from '~/types/emits'
@@ -58,7 +58,6 @@ export default defineComponent({
   setup() {
     const i18n = useI18n()
     const searchStore = useSearchStore()
-    const isHeaderScrolled = inject('isHeaderScrolled', ref(false))
     const filterCount = computed(() => searchStore.appliedFilterCount)
     const filtersAreApplied = computed(() => filterCount.value > 0)
 
@@ -68,19 +67,19 @@ export default defineComponent({
      * label would just be the number of applied filters, and therefore
      * basically useless as far as a label is concerned!
      */
-    const mdMinLabel = computed(() =>
+    const xlMinLabel = computed(() =>
       filtersAreApplied.value
         ? i18n.tc('header.filter-button.with-count', filterCount.value)
         : i18n.t('header.filter-button.simple')
     )
-    const smMaxLabel = computed(() => filterCount.value)
+    const lgMaxLabel = computed(() =>
+      filtersAreApplied ? filterCount.value : ''
+    )
 
     return {
-      filterCount,
       filterIcon,
-      mdMinLabel,
-      smMaxLabel,
-      isHeaderScrolled,
+      xlMinLabel,
+      lgMaxLabel,
       filtersAreApplied,
     }
   },

diff --git a/src/components/VHeader/meta/VFilterButton.stories.mdx b/src/components/VHeader/meta/VFilterButton.stories.mdx
@@ -20,17 +20,24 @@ import { IMAGE } from '~/constants/media'
     appliedFilters: {
       type: 'number',
     },
+    toggle: {
+      action: 'toggle',
+    },
+    tab: {
+      action: 'tab',
+    },
   }}
 />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<VFilterButton v-bind="args" />`,
+  template: `<VFilterButton v-bind="args" v-on="args" />`,
   components: { VFilterButton },
   props: Object.keys(argTypes),
   setup() {
     const searchStore = useSearchStore()
     searchStore.setSearchType(IMAGE)
     function applyNFilters(filterCount) {
+      searchStore.clearFilters()
       const filterTypes = [...mediaFilterKeys[IMAGE]]
       let filterIdx = 0
       // Skip license type filters as they can disable license filters