feat(@dpc-sdp/ripple-tide-search): collapse all filters by default on…

… mobile

examples/nuxt-app/test/features/landingpage/custom-collection.feature

@@ -120,6 +120,33 @@ Feature: Custom Collection
     Then the custom collection component results count should read "Displaying 1-20 of 282 results"
     And only the search filters should be visible
 
+  @mockserver
+  Example: Should show filters on load when showFiltersOnLoad is set
+    Given I load the page fixture with "/landingpage/custom-collection/form-theme-default"
+    And the custom collection config has "showFiltersOnLoad" set to "true"
+    And the search network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200
+    Then the page endpoint for path "/filters-on-load" returns the loaded fixture
+
+    When I visit the page "/filters-on-load"
+    Then the custom collection filters should be open
+
+    When I toggle the content collection filters
+    Then the custom collection filters should not be open
+
+  @mockserver
+  Example: Should collapse filters on mobile load when showFiltersOnLoad is set
+    Given I am using a "iphone-x" device
+    Then I load the page fixture with "/landingpage/custom-collection/form-theme-default"
+    And the custom collection config has "showFiltersOnLoad" set to "true"
+    And the search network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200
+    Then the page endpoint for path "/filters-on-load" returns the loaded fixture
+
+    When I visit the page "/filters-on-load"
+    Then the custom collection filters should not be open
+
+    When I toggle the content collection filters
+    Then the custom collection filters should be open
+
   @mockserver
   Example: Should hide results count when hideResultsCount is set
     Given I load the page fixture with "/landingpage/custom-collection/page"

examples/nuxt-app/test/features/search-listing/filters.feature

@@ -15,6 +15,21 @@ Feature: Search listing - Filter
     When I visit the page "/filters"
     Then the search listing filters section should be open
 
+    When I toggle the search listing filters section
+    Then the search listing filters section should not be open
+
+  @mockserver
+  Example: Filter collapsed open on mobile page load
+    Given I am using a "iphone-x" device
+    Then the page endpoint for path "/filters" returns fixture "/search-listing/filters/filters-open" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+
+    When I visit the page "/filters"
+    Then the search listing filters section should not be open
+
+    When I toggle the search listing filters section
+    Then the search listing filters section should be open
+
   @mockserver
   Example: Raw filter - Should reflect the value from the URL
     Given the page endpoint for path "/filters" returns fixture "/search-listing/filters/page" with status 200

packages/ripple-test-utils/step_definitions/components/custom-collection.ts

@@ -126,6 +126,18 @@ When(`I toggle the content collection filters`, () => {
     .click()
 })
 
+Then(`the custom collection filters should be open`, () => {
+  cy.get(`[data-component-type="TideCustomCollection"]`)
+    .find(`.tide-search-filters`)
+    .should(`be.visible`)
+})
+
+Then(`the custom collection filters should not be open`, () => {
+  cy.get(`[data-component-type="TideCustomCollection"]`)
+    .find(`.tide-search-filters`)
+    .should(`not.be.visible`)
+})
+
 Then(
   'the custom collection config has {string} set to {string}',
   (key: string, value: string | boolean | number) => {

packages/ripple-tide-search/components/TideSearchListingPage.vue

@@ -121,13 +121,14 @@ const { emitRplEvent } = useRippleEvent('tide-search', emit)
 const breakpoints = useBreakpoints(bpMin)
 const isMobile = breakpoints.smaller('m')
 
-const initialFiltersState =
+const initialFiltersExpanded = Boolean(
   props.searchListingConfig?.filtersInSidebar ||
-  props.searchListingConfig?.showFiltersOnLoad ||
-  props.searchListingConfig?.showFiltersOnly
+    props.searchListingConfig?.showFiltersOnLoad ||
+    props.searchListingConfig?.showFiltersOnly
+)
 
-const filtersExpanded = ref(Boolean(initialFiltersState))
-const sidebarFiltersMobileClass = ref('hidden')
+const filtersExpanded = ref(initialFiltersExpanded)
+const filtersMobileClass = ref('hidden')
 
 const {
   isBusy,
@@ -364,10 +365,12 @@ watch(
 )
 
 onMounted(() => {
-  if (props.searchListingConfig?.filtersInSidebar) {
-    filtersExpanded.value = isMobile.value ? false : true
-    nextTick(() => (sidebarFiltersMobileClass.value = 'visible'))
+  // If filters are shown on load for desktop, we still need to hide them on mobile
+  if (initialFiltersExpanded && isMobile.value) {
+    filtersExpanded.value = false
   }
+
+  nextTick(() => (filtersMobileClass.value = 'visible'))
 })
 </script>
 
@@ -449,6 +452,7 @@ onMounted(() => {
             />
             <RplExpandable
               id="tide-search-listing-filters"
+              :class="`tide-search-listing-filters--${filtersMobileClass}`"
               :expanded="filtersExpanded"
             >
               <TideSearchFilters
@@ -482,7 +486,7 @@ onMounted(() => {
       <TideSearchFilterHeader v-else :numAppliedFilters="numAppliedFilters" />
       <RplExpandable
         id="tide-search-listing-filters"
-        :class="`tide-search-listing-filters--${sidebarFiltersMobileClass}`"
+        :class="`tide-search-listing-filters--${filtersMobileClass}`"
         :expanded="filtersExpanded || !isMobile"
       >
         <TideSearchFilters

packages/ripple-tide-search/components/global/TideCustomCollection.vue

@@ -6,14 +6,14 @@ import {
   ref
 } from '#imports'
 import { submitForm } from '@formkit/vue'
-import { useDebounceFn } from '@vueuse/core'
+import { useBreakpoints, useDebounceFn } from '@vueuse/core'
 import useTideSearch from './../../composables/useTideSearch'
 import type {
   TideSearchListingResultItem,
   TideSearchListingTab,
   TideSearchListingConfig
 } from './../../types'
-import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
+import { bpMin, useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
 import { get } from 'lodash-es'
 
@@ -178,11 +178,17 @@ const mapResultsMappingFn = (result) => {
   }
 }
 
-const filtersExpanded = ref(
+const breakpoints = useBreakpoints(bpMin)
+const isMobile = breakpoints.smaller('m')
+
+const initialFiltersExpanded = Boolean(
   props.searchListingConfig?.showFiltersOnLoad ||
     props.searchListingConfig?.showFiltersOnly
 )
 
+const filtersExpanded = ref(initialFiltersExpanded)
+const filtersMobileClass = ref('hidden')
+
 const isGettingLocation = ref<boolean>(false)
 const geolocationError = ref<string | null>(null)
 
@@ -548,6 +554,15 @@ const locationOrGeolocation = computed(() => {
     ? userGeolocation.value
     : locationQuery.value
 })
+
+onMounted(() => {
+  // If filters are shown on load for desktop, we still need to hide them on mobile
+  if (initialFiltersExpanded && isMobile.value) {
+    filtersExpanded.value = false
+  }
+
+  nextTick(() => (filtersMobileClass.value = 'visible'))
+})
 </script>
 
 <template>
@@ -606,6 +621,10 @@ const locationOrGeolocation = computed(() => {
       </template>
 
       <div
+        v-if="
+          locationQueryConfig?.showGeolocationButton ||
+          (userFilters && userFilters.length > 0)
+        "
         :class="{
           'tide-search-util-bar': true,
           'tide-search-util-bar--geolocate':
@@ -645,6 +664,7 @@ const locationOrGeolocation = computed(() => {
 
       <RplExpandable
         v-if="userFilters && userFilters.length > 0"
+        :class="`tide-search-filters--${filtersMobileClass}`"
         :expanded="filtersExpanded"
       >
         <ClientOnly>
@@ -824,6 +844,14 @@ const locationOrGeolocation = computed(() => {
   margin: 0;
 }
 
+.tide-search-filters--hidden {
+  display: none;
+
+  @media (--rpl-bp-m) {
+    display: block;
+  }
+}
+
 .tide-search-results--loading {
   opacity: 0.5;
   pointer-events: none;