Merge pull request #998 from dpc-sdp/feature/R20-1703-checkbox-suppor…

…t-in-search [R20-1703] add checkbox support
dpc-sdp · Jan 22, 2024 · c79669e · c79669e
2 parents d1e0761 + 1873484
commit c79669e
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 19 deletions.
diff --git a/examples/nuxt-app/test/features/search-listing/filters.feature b/examples/nuxt-app/test/features/search-listing/filters.feature
@@ -28,15 +28,16 @@ Feature: Search listing - Filter
     And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
     And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"
 
-    When I visit the page "/filters?termFilter=Green&singleTermFilter=Aqua"
+    When I visit the page "/filters?termFilter=Green&singleTermFilter=Aqua&checkboxFilter=Archived"
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-term-single" fixture
 
-    Then the filters toggle should show 2 applied filters
+    Then the filters toggle should show 3 applied filters
 
     When I toggle the search listing filters section
     Then the search listing dropdown field labelled "Term filter example" should have the value "Green"
-    Then the search listing dropdown field labelled "Single term filter example" should have the value "Aqua"
+    And the search listing dropdown field labelled "Single term filter example" should have the value "Aqua"
+    And the search listing checkbox field labelled "Show archived content" should be checked
 
   @mockserver
   Example: Term filter - Should reflect an array from the URL
@@ -113,27 +114,29 @@ Feature: Search listing - Filter
     And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
     And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"
 
-    When I visit the page "/filters?q=test123&page=2&functionFilter=open&termsFilter=Purple&termFilter=Green&rawFilter=Birds"
+    When I visit the page "/filters?q=test123&page=2&functionFilter=open&termsFilter=Purple&termFilter=Green&rawFilter=Birds&checkboxFilter=Archived"
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-clear-filled" fixture
 
-    Then the filters toggle should show 4 applied filters
+    Then the filters toggle should show 5 applied filters
     Then the URL should reflect that the current page number is 2
     Then the URL should reflect that the current search term is "test123"
 
     When I toggle the search listing filters section
     Then the search input should have the value "test123"
     Then the URL should reflect that the current active filters are as follows:
-      | id             | value  |
-      | rawFilter      | Birds  |
-      | termFilter     | Green  |
-      | termsFilter    | Purple |
-      | functionFilter | open   |
+      | id             | value    |
+      | rawFilter      | Birds    |
+      | termFilter     | Green    |
+      | termsFilter    | Purple   |
+      | functionFilter | open     |
+      | checkboxFilter | Archived |
 
     Then the search listing dropdown field labelled "Raw filter example" should have the value "Birds"
     Then the search listing dropdown field labelled "Term filter example" should have the value "Green"
     Then the search listing dropdown field labelled "Terms filter example" should have the value "Purple"
     Then the search listing dropdown field labelled "Custom function filter example" should have the value "Open"
+    And the search listing checkbox field labelled "Show archived content" should be checked
 
     When I clear the search filters
 
@@ -146,36 +149,48 @@ Feature: Search listing - Filter
       | termFilter     |
       | termsFilter    |
       | functionFilter |
+      | checkboxFilter |
 
     Then the search input should have the value ""
     Then the search listing dropdown field labelled "Raw filter example" should have the value "Select a pet"
     Then the search listing dropdown field labelled "Term filter example" should have the value "Select a colour"
     Then the search listing dropdown field labelled "Terms filter example" should have the value "Select a colour"
     Then the search listing dropdown field labelled "Custom function filter example" should have the value "Select a status"
+    And the search listing checkbox field labelled "Show archived content" should not be checked
 
   @mockserver
   Example: Should update the URL when the filters are applied
     Given the page endpoint for path "/filters" returns fixture "/search-listing/filters/page" with status 200
     And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
-    And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"
 
     When I visit the page "/filters?termsFilter=Purple&termsFilter=Orange"
     Then the search listing page should have 2 results
     And the search network request should be called with the "/search-listing/filters/request-terms-array" fixture
+    And the search listing results should have following items:
+      | title   |
+      | Apples  |
+      | Oranges |
+
+    When I type "the" into the search input
+    Then I toggle the search listing filters section
+    And I click the search listing dropdown field labelled "Term filter example"
+    Then I click the option labelled "Blue" in the selected dropdown
+    And I click the search listing dropdown field labelled "Term filter example"
 
-    When I toggle the search listing filters section
-    Then the search listing dropdown field labelled "Terms filter example" should have the value "Orange, Purple"
     When I click the search listing dropdown field labelled "Terms filter example"
     Then the selected dropdown field should have the items:
       | Orange |
       | Purple |
       | Yellow |
-    # Close the dropdown
-    When I click the search listing dropdown field labelled "Terms filter example"
-    And the search listing results should have following items:
-      | title   |
-      | Apples  |
-      | Oranges |
+    Then I click the option labelled "Purple" in the selected dropdown
+    And I click the search listing checkbox field labelled "Show archived content"
+    And I submit the search filters
+    Then the URL should reflect that the current active filters are as follows:
+      | id             | value    |
+      | q              | the      |
+      | termFilter     | Blue     |
+      | termsFilter    | Orange   |
+      | checkboxFilter | Archived |
 
   @mockserver
   Example: Dependent filter - Should reflect the value from the URL

diff --git a/examples/nuxt-app/test/fixtures/search-listing/filters/page.json b/examples/nuxt-app/test/fixtures/search-listing/filters/page.json
@@ -203,6 +203,21 @@
             }
           ]
         }
+      },
+      {
+        "id": "checkboxFilter",
+        "component": "TideSearchFilterCheckbox",
+        "filter": {
+          "type": "terms",
+          "value": "checkboxFilter.keyword",
+          "multiple": false
+        },
+        "props": {
+          "id": "checkboxFilter",
+          "label": "Checkbox example",
+          "checkboxLabel": "Show archived content",
+          "onValue": "Archived"
+        }
       }
     ]
   }

diff --git a/examples/nuxt-app/test/fixtures/search-listing/filters/request-clear-filled.json b/examples/nuxt-app/test/fixtures/search-listing/filters/request-clear-filled.json
@@ -67,6 +67,11 @@
           "ids": {
             "values": ["Birds"]
           }
+        },
+        {
+          "terms": {
+            "checkboxFilter.keyword": ["Archived"]
+          }
         }
       ]
     }

diff --git a/examples/nuxt-app/test/fixtures/search-listing/filters/request-term-single.json b/examples/nuxt-app/test/fixtures/search-listing/filters/request-term-single.json
@@ -26,6 +26,11 @@
           "terms": {
             "singleTermFilter.keyword": ["Aqua"]
           }
+        },
+        {
+          "terms": {
+            "checkboxFilter.keyword": ["Archived"]
+          }
         }
       ]
     }

diff --git a/packages/ripple-test-utils/step_definitions/content-types/listing.ts b/packages/ripple-test-utils/step_definitions/content-types/listing.ts
@@ -166,6 +166,39 @@ Then(
   }
 )
 
+Then(
+  `the search listing checkbox field labelled {string} should be checked`,
+  (label: string) => {
+    cy.get(`label`)
+      .contains(label)
+      .parent('label')
+      .invoke('attr', 'for')
+      .then((checkboxId) => {
+        cy.get(`#${checkboxId}`).should('be.checked')
+      })
+  }
+)
+
+Then(
+  `the search listing checkbox field labelled {string} should not be checked`,
+  (label: string) => {
+    cy.get(`label`)
+      .contains(label)
+      .parent('label')
+      .invoke('attr', 'for')
+      .then((checkboxId) => {
+        cy.get(`#${checkboxId}`).should('not.be.checked')
+      })
+  }
+)
+
+When(
+  `I click the search listing checkbox field labelled {string}`,
+  (label: string) => {
+    cy.get(`label`).contains(label).click()
+  }
+)
+
 When(
   `I click the search listing dropdown field labelled {string}`,
   (label: string) => {
@@ -188,6 +221,10 @@ When(`I clear the search filters`, () => {
   cy.get(`button`).contains('Clear search filters').click()
 })
 
+When(`I submit the search filters`, () => {
+  cy.get(`button`).contains('Apply search filters').click()
+})
+
 Then(
   'the filters toggle should show {int} applied filters',
   (filterCount: number) => {

diff --git a/packages/ripple-tide-search/components/global/TideSearchFilterCheckbox.vue b/packages/ripple-tide-search/components/global/TideSearchFilterCheckbox.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  id: string
+  label: string
+  checkboxLabel: string
+  onValue: string | number | boolean
+  timestamp?: string | number
+  variant: 'default' | 'reverse'
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <FormKit
+    :id="id"
+    :key="`${id}-${timestamp}`"
+    :name="id"
+    type="RplFormCheckbox"
+    :variant="variant"
+    :label="label"
+    :checkboxLabel="checkboxLabel"
+    :onValue="onValue"
+  />
+</template>
diff --git a/packages/ripple-ui-forms/src/components/RplFormLabel/RplFormLabel.css b/packages/ripple-ui-forms/src/components/RplFormLabel/RplFormLabel.css
@@ -5,6 +5,7 @@
   line-height: var(--rpl-type-lh-4);
   letter-spacing: var(--rpl-type-ls-1);
   margin-bottom: var(--rpl-sp-4);
+  vertical-align: middle;
 }
 
 .rpl-form-label__required {