From 1df3158cbc5cb01c7acca4c3df554ea980f095ed Mon Sep 17 00:00:00 2001
From: David Featherston <david.featherstone@dpc.vic.gov.au>
Date: Thu, 1 Feb 2024 16:49:39 +1100
Subject: [PATCH 1/2] feat(@dpc-sdp/ripple-tide-search): update results key for
 interop, collection 'theme' improvements

---
 .../data-table/custom-collection.feature      |  32 ++-
 .../custom-collection/form-theme-default.json | 214 ++++++++++++++++++
 .../custom-collection/form-theme-reverse.json | 214 ++++++++++++++++++
 .../table/page-extra-component.json           |   2 +-
 .../table/page-extra-structured.json          |   2 +-
 .../fixtures/search-listing/table/page.json   |   2 +-
 .../components/TideDynamicComponents.vue      |   5 +-
 .../components/custom-collection.ts           |  49 +++-
 .../components/global/TideLandingPage.vue     |   1 +
 .../components/TideSearchListingPage.vue      |  13 +-
 .../components/TideSearchResultsCount.vue     |   5 +-
 .../global/TideCustomCollection.vue           |  52 +++--
 .../global/TideSearchFilterDependent.vue      |   6 +-
 .../global/TideTideSearchListing.vue          |  12 +-
 packages/ripple-tide-search/types.ts          |  48 ++--
 .../ripple-ui-forms/src/inputs/checkbox.ts    |   3 +-
 16 files changed, 601 insertions(+), 59 deletions(-)
 create mode 100644 examples/nuxt-app/test/fixtures/landingpage/custom-collection/form-theme-default.json
 create mode 100644 examples/nuxt-app/test/fixtures/landingpage/custom-collection/form-theme-reverse.json

diff --git a/examples/nuxt-app/test/features/data-table/custom-collection.feature b/examples/nuxt-app/test/features/data-table/custom-collection.feature
index b99273b706..05c684bab4 100644
--- a/examples/nuxt-app/test/features/data-table/custom-collection.feature
+++ b/examples/nuxt-app/test/features/data-table/custom-collection.feature
@@ -3,13 +3,13 @@ Feature: Custom Collection
   As an editor I want to be able to add a view of results in a search index to a landing page.
 
   Background:
-    Given the page endpoint for path "/custom-collection" returns fixture "/landingpage/custom-collection" with status 200
     Given the site endpoint returns fixture "/site/reference" with status 200
     And the search autocomplete request is stubbed with "/search-listing/suggestions/none" fixture
     Given I am using a "macbook-16" device
 
   @mockserver
   Scenario: Custom collection
+    Given the page endpoint for path "/custom-collection" returns fixture "/landingpage/custom-collection" with status 200
     Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200 as alias "cslReq"
     Given I visit the page "/custom-collection"
     Then the landing page component "TideCustomCollection" should exist
@@ -18,8 +18,37 @@ Feature: Custom Collection
     And the "cslReq" network request should be made to the elasticsearch endpoint
     And the search listing layout should be "table"
 
+  @mockserver
+  Scenario: Default form theme
+    Given the page endpoint for path "/custom-collection-theme-default" returns fixture "/landingpage/custom-collection/form-theme-default" with status 200
+    Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200 as alias "cslReq"
+    Given I visit the page "/custom-collection-theme-default"
+    Then the landing page component "TideCustomCollection" should exist
+    And I toggle the content collection filters
+    Then the custom collection component should have the "default" form theme applied
+    Then the custom collection search bar field should have the "default" variant applied
+    Then the custom collection checkbox field labelled "Show archived content" should have the "default" variant applied
+    Then the custom collection dropdown field labelled "Term filter example" should have the "default" variant applied
+    Then the custom collection dropdown field labelled "Terms dependent example" should have the "default" variant applied
+    Then the custom collection dropdown field labelled "Terms dependent child example" should have the "default" variant applied
+
+  @mockserver
+  Scenario: Reverse form theme
+    Given the page endpoint for path "/custom-collection-theme-reverse" returns fixture "/landingpage/custom-collection/form-theme-reverse" with status 200
+    Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200 as alias "cslReq"
+    Given I visit the page "/custom-collection-theme-reverse"
+    Then the landing page component "TideCustomCollection" should exist
+    And I toggle the content collection filters
+    Then the custom collection component should have the "neutral" form theme applied
+    Then the custom collection search bar field should have the "reverse" variant applied
+    Then the custom collection checkbox field labelled "Show archived content" should have the "reverse" variant applied
+    Then the custom collection dropdown field labelled "Term filter example" should have the "reverse" variant applied
+    Then the custom collection dropdown field labelled "Terms dependent example" should have the "reverse" variant applied
+    Then the custom collection dropdown field labelled "Terms dependent child example" should have the "reverse" variant applied
+
   @mockserver
   Scenario: Error
+    Given the page endpoint for path "/custom-collection" returns fixture "/landingpage/custom-collection" with status 200
     Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 400 as alias "cslReq"
     Given I visit the page "/custom-collection"
     Then the landing page component "TideCustomCollection" should exist
@@ -27,6 +56,7 @@ Feature: Custom Collection
 
   @mockserver
   Scenario: No results
+    Given the page endpoint for path "/custom-collection" returns fixture "/landingpage/custom-collection" with status 200
     Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response-no-items" and status 200 as alias "cslReq"
     Given I visit the page "/custom-collection"
     Then the landing page component "TideCustomCollection" should exist
diff --git a/examples/nuxt-app/test/fixtures/landingpage/custom-collection/form-theme-default.json b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/form-theme-default.json
new file mode 100644
index 0000000000..d552648ea7
--- /dev/null
+++ b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/form-theme-default.json
@@ -0,0 +1,214 @@
+{
+  "title": "Custom collection - Form theme",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "landing_page",
+  "nid": "11dede11-10c0-111e1-1100-000000000330",
+  "summary": "Page summary",
+  "showInPageNav": true,
+  "inPageNavHeadingLevel": "h3",
+  "background": "default",
+  "header": {
+    "title": "Custom collection form theme test",
+    "summary": "Test landing page title introduction text",
+    "theme": "default",
+    "backgroundImage": null
+  },
+  "sidebar": {},
+  "headerComponents": [],
+  "bodyComponents": [
+    {
+      "uuid": "55555555-5555-5555-5555-555555555555",
+      "component": "TideCustomCollection",
+      "id": "123",
+      "title": "Cameras save lives",
+      "props": {
+        "searchListingConfig": {
+          "searchProvider": "elasticsearch",
+          "index": "sdp_data_pipelines_scl",
+          "resultsPerPage": 10,
+          "labels": {
+            "submit": "Search",
+            "placeholder": "Enter suburb, postcode, streetname or offence location"
+          },
+          "customSort": [
+            {
+              "suburb": "asc"
+            }
+          ],
+          "formTheme": "default"
+        },
+        "queryConfig": {
+          "multi_match": {
+            "query": "{{query}}",
+            "fields": ["suburb^3", "street^2", "offence_location"]
+          }
+        },
+        "globalFilters": [],
+        "userFilters": [
+          {
+            "id": "termFilter",
+            "component": "TideSearchFilterDropdown",
+            "filter": {
+              "type": "term",
+              "value": "termFilter.keyword"
+            },
+            "aggregations": {
+              "field": "termFilter",
+              "source": "taxonomy"
+            },
+            "props": {
+              "id": "termFilter",
+              "label": "Term filter example",
+              "placeholder": "Select a colour",
+              "multiple": true,
+              "options": [
+                {
+                  "id": "1",
+                  "label": "Red",
+                  "value": "Red"
+                },
+                {
+                  "id": "2",
+                  "label": "Green",
+                  "value": "Green"
+                }
+              ]
+            }
+          },
+          {
+            "id": "checkboxFilter",
+            "component": "TideSearchFilterCheckbox",
+            "filter": {
+              "type": "terms",
+              "value": "checkboxFilter.keyword",
+              "multiple": false
+            },
+            "props": {
+              "id": "checkboxFilter",
+              "label": "Checkbox example",
+              "checkboxLabel": "Show archived content",
+              "onValue": "Archived"
+            }
+          },
+          {
+            "id": "dependentFilter",
+            "component": "TideSearchFilterDependent",
+            "columns": "rpl-grid",
+            "filter": {
+              "type": "dependent",
+              "multiple": false,
+              "value": "field_species_name"
+            },
+            "aggregations": {
+              "field": "topic",
+              "source": "taxonomy"
+            },
+            "props": {
+              "id": "dependentFilter",
+              "label": "Terms dependent example",
+              "placeholder": "Select a species",
+              "dependantLabel": "Terms dependent child example",
+              "dependantPlaceholder": "All sub species",
+              "multiple": true,
+              "options": [
+                {
+                  "id": "1",
+                  "label": "Mammals",
+                  "value": "Mammals"
+                },
+                {
+                  "id": "2",
+                  "label": "Dogs",
+                  "value": "Dogs",
+                  "parent": "1"
+                },
+                {
+                  "id": "3",
+                  "label": "Birds",
+                  "value": "Birds"
+                },
+                {
+                  "id": "4",
+                  "label": "Cats",
+                  "value": "Cats",
+                  "parent": "1"
+                },
+                {
+                  "id": "5",
+                  "label": "Parrot",
+                  "value": "Parrot",
+                  "parent": "3"
+                },
+                {
+                  "id": "6",
+                  "label": "Cockatoo",
+                  "value": "Cockatoo",
+                  "parent": "3"
+                }
+              ]
+            }
+          }
+        ],
+        "resultsConfig": {
+          "layout": {
+            "component": "TideSearchResultsTable",
+            "props": {
+              "columns": [
+                {
+                  "label": "Suburb",
+                  "objectKey": "suburb"
+                },
+                {
+                  "label": "Location",
+                  "objectKey": "street"
+                },
+                {
+                  "label": "Last annual test",
+                  "objectKey": "last_annual_test"
+                }
+              ]
+            }
+          }
+        }
+      }
+    }
+  ],
+  "meta": {
+    "url": "/demo-landing-page",
+    "langcode": "en",
+    "description": "Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae",
+    "additional": [
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "https://develop.content.reference.sdp.vic.gov.au/demo-landing-page"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "Demo Landing Page | Single Digital Presence Content Management System"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "property": "og:image",
+          "content": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg"
+        }
+      }
+    ],
+    "keywords": "",
+    "image": {
+      "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg",
+      "alt": "Demo: Melbourne tram",
+      "title": "Demo: Melbourne tram",
+      "width": 1413,
+      "height": 785,
+      "drupal_internal__target_id": 46
+    }
+  }
+}
diff --git a/examples/nuxt-app/test/fixtures/landingpage/custom-collection/form-theme-reverse.json b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/form-theme-reverse.json
new file mode 100644
index 0000000000..0de7fdefe7
--- /dev/null
+++ b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/form-theme-reverse.json
@@ -0,0 +1,214 @@
+{
+  "title": "Custom collection - Form theme",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "landing_page",
+  "nid": "11dede11-10c0-111e1-1100-000000000330",
+  "summary": "Page summary",
+  "showInPageNav": true,
+  "inPageNavHeadingLevel": "h3",
+  "background": "default",
+  "header": {
+    "title": "Custom collection form theme test",
+    "summary": "Test landing page title introduction text",
+    "theme": "default",
+    "backgroundImage": null
+  },
+  "sidebar": {},
+  "headerComponents": [],
+  "bodyComponents": [
+    {
+      "uuid": "55555555-5555-5555-5555-555555555555",
+      "component": "TideCustomCollection",
+      "id": "123",
+      "title": "Cameras save lives",
+      "props": {
+        "searchListingConfig": {
+          "searchProvider": "elasticsearch",
+          "index": "sdp_data_pipelines_scl",
+          "resultsPerPage": 10,
+          "labels": {
+            "submit": "Search",
+            "placeholder": "Enter suburb, postcode, streetname or offence location"
+          },
+          "customSort": [
+            {
+              "suburb": "asc"
+            }
+          ],
+          "formTheme": "reverse"
+        },
+        "queryConfig": {
+          "multi_match": {
+            "query": "{{query}}",
+            "fields": ["suburb^3", "street^2", "offence_location"]
+          }
+        },
+        "globalFilters": [],
+        "userFilters": [
+          {
+            "id": "termFilter",
+            "component": "TideSearchFilterDropdown",
+            "filter": {
+              "type": "term",
+              "value": "termFilter.keyword"
+            },
+            "aggregations": {
+              "field": "termFilter",
+              "source": "taxonomy"
+            },
+            "props": {
+              "id": "termFilter",
+              "label": "Term filter example",
+              "placeholder": "Select a colour",
+              "multiple": true,
+              "options": [
+                {
+                  "id": "1",
+                  "label": "Red",
+                  "value": "Red"
+                },
+                {
+                  "id": "2",
+                  "label": "Green",
+                  "value": "Green"
+                }
+              ]
+            }
+          },
+          {
+            "id": "checkboxFilter",
+            "component": "TideSearchFilterCheckbox",
+            "filter": {
+              "type": "terms",
+              "value": "checkboxFilter.keyword",
+              "multiple": false
+            },
+            "props": {
+              "id": "checkboxFilter",
+              "label": "Checkbox example",
+              "checkboxLabel": "Show archived content",
+              "onValue": "Archived"
+            }
+          },
+          {
+            "id": "dependentFilter",
+            "component": "TideSearchFilterDependent",
+            "columns": "rpl-grid",
+            "filter": {
+              "type": "dependent",
+              "multiple": false,
+              "value": "field_species_name"
+            },
+            "aggregations": {
+              "field": "topic",
+              "source": "taxonomy"
+            },
+            "props": {
+              "id": "dependentFilter",
+              "label": "Terms dependent example",
+              "placeholder": "Select a species",
+              "dependantLabel": "Terms dependent child example",
+              "dependantPlaceholder": "All sub species",
+              "multiple": true,
+              "options": [
+                {
+                  "id": "1",
+                  "label": "Mammals",
+                  "value": "Mammals"
+                },
+                {
+                  "id": "2",
+                  "label": "Dogs",
+                  "value": "Dogs",
+                  "parent": "1"
+                },
+                {
+                  "id": "3",
+                  "label": "Birds",
+                  "value": "Birds"
+                },
+                {
+                  "id": "4",
+                  "label": "Cats",
+                  "value": "Cats",
+                  "parent": "1"
+                },
+                {
+                  "id": "5",
+                  "label": "Parrot",
+                  "value": "Parrot",
+                  "parent": "3"
+                },
+                {
+                  "id": "6",
+                  "label": "Cockatoo",
+                  "value": "Cockatoo",
+                  "parent": "3"
+                }
+              ]
+            }
+          }
+        ],
+        "resultsConfig": {
+          "layout": {
+            "component": "TideSearchResultsTable",
+            "props": {
+              "columns": [
+                {
+                  "label": "Suburb",
+                  "objectKey": "suburb"
+                },
+                {
+                  "label": "Location",
+                  "objectKey": "street"
+                },
+                {
+                  "label": "Last annual test",
+                  "objectKey": "last_annual_test"
+                }
+              ]
+            }
+          }
+        }
+      }
+    }
+  ],
+  "meta": {
+    "url": "/demo-landing-page",
+    "langcode": "en",
+    "description": "Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae",
+    "additional": [
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "https://develop.content.reference.sdp.vic.gov.au/demo-landing-page"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "Demo Landing Page | Single Digital Presence Content Management System"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "property": "og:image",
+          "content": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg"
+        }
+      }
+    ],
+    "keywords": "",
+    "image": {
+      "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg",
+      "alt": "Demo: Melbourne tram",
+      "title": "Demo: Melbourne tram",
+      "width": 1413,
+      "height": 785,
+      "drupal_internal__target_id": 46
+    }
+  }
+}
diff --git a/examples/nuxt-app/test/fixtures/search-listing/table/page-extra-component.json b/examples/nuxt-app/test/fixtures/search-listing/table/page-extra-component.json
index 08c7893029..fe990a5968 100644
--- a/examples/nuxt-app/test/fixtures/search-listing/table/page-extra-component.json
+++ b/examples/nuxt-app/test/fixtures/search-listing/table/page-extra-component.json
@@ -27,7 +27,7 @@
         ]
       }
     },
-    "results": {
+    "resultsConfig": {
       "layout": {
         "component": "TideSearchResultsTable",
         "props": {
diff --git a/examples/nuxt-app/test/fixtures/search-listing/table/page-extra-structured.json b/examples/nuxt-app/test/fixtures/search-listing/table/page-extra-structured.json
index a7b115bfc6..fa2e207c39 100644
--- a/examples/nuxt-app/test/fixtures/search-listing/table/page-extra-structured.json
+++ b/examples/nuxt-app/test/fixtures/search-listing/table/page-extra-structured.json
@@ -27,7 +27,7 @@
         ]
       }
     },
-    "results": {
+    "resultsConfig": {
       "layout": {
         "component": "TideSearchResultsTable",
         "props": {
diff --git a/examples/nuxt-app/test/fixtures/search-listing/table/page.json b/examples/nuxt-app/test/fixtures/search-listing/table/page.json
index 68b4b71cc9..25687a44ce 100644
--- a/examples/nuxt-app/test/fixtures/search-listing/table/page.json
+++ b/examples/nuxt-app/test/fixtures/search-listing/table/page.json
@@ -27,7 +27,7 @@
         ]
       }
     },
-    "results": {
+    "resultsConfig": {
       "layout": {
         "component": "TideSearchResultsTable",
         "props": {
diff --git a/packages/nuxt-ripple/components/TideDynamicComponents.vue b/packages/nuxt-ripple/components/TideDynamicComponents.vue
index 57eb37eaae..7cfc9165cb 100644
--- a/packages/nuxt-ripple/components/TideDynamicComponents.vue
+++ b/packages/nuxt-ripple/components/TideDynamicComponents.vue
@@ -9,10 +9,12 @@ interface Props {
   components: TideDynamicPageComponent<any>[]
   fullWidth?: boolean
   hasSidebar?: boolean
+  pageBackground?: string
 }
 const props = withDefaults(defineProps<Props>(), {
   fullWidth: false,
-  hasSidebar: false
+  hasSidebar: false,
+  pageBackground: 'default'
 })
 
 const grouped: TideDynamicPageComponent<any> | TideDynamicComponentGroup =
@@ -49,6 +51,7 @@ const grouped: TideDynamicPageComponent<any> | TideDynamicComponentGroup =
         :is="item.component"
         :hasSidebar="hasSidebar"
         :hasTitle="!!item.title"
+        :pageBackground="pageBackground"
         v-bind="item.props"
       ></component>
     </RplPageComponent>
diff --git a/packages/ripple-test-utils/step_definitions/components/custom-collection.ts b/packages/ripple-test-utils/step_definitions/components/custom-collection.ts
index 1da2215c71..75ba85161c 100644
--- a/packages/ripple-test-utils/step_definitions/components/custom-collection.ts
+++ b/packages/ripple-test-utils/step_definitions/components/custom-collection.ts
@@ -1,4 +1,4 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor'
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
 
 Then(`the custom collection component should have a search input bar`, () => {
   cy.get(`[data-component-type="TideCustomCollection"]`).find('.rpl-search-bar')
@@ -14,6 +14,46 @@ Then(
   }
 )
 
+Then(
+  `the custom collection component should have the {string} form theme applied`,
+  (theme: string) => {
+    cy.get(`[data-component-type="TideCustomCollection"]`)
+      .find(`.tide-search-header--${theme}`)
+      .should('exist')
+  }
+)
+
+Then(
+  `the custom collection search bar field should have the {string} variant applied`,
+  (theme: string) => {
+    cy.get(`[data-component-type="TideCustomCollection"]`)
+      .find(`.rpl-search-bar--${theme}`)
+      .should('exist')
+  }
+)
+
+Then(
+  `the custom collection checkbox field labelled {string} should have the {string} variant applied`,
+  (label: string, theme: string) => {
+    cy.get(`[data-component-type="TideCustomCollection"] label`)
+      .contains(label)
+      .parents('.rpl-form__outer')
+      .find(`.rpl-form-option--${theme}`)
+      .should('exist')
+  }
+)
+
+Then(
+  `the custom collection dropdown field labelled {string} should have the {string} variant applied`,
+  (label: string, theme: string) => {
+    cy.get(`[data-component-type="TideCustomCollection"] label`)
+      .contains(label)
+      .parents('.rpl-form__outer')
+      .find(`.rpl-form-dropdown--${theme}`)
+      .should('exist')
+  }
+)
+
 Then(
   'the {string} network request should be made to the elasticsearch endpoint',
   (responseAlias: string) => {
@@ -32,3 +72,10 @@ Then(
     )
   }
 )
+
+When(`I toggle the content collection filters`, () => {
+  cy.get(`[data-component-type="TideCustomCollection"]`)
+    .find(`button`)
+    .contains('Refine search')
+    .click()
+})
diff --git a/packages/ripple-tide-landing-page/components/global/TideLandingPage.vue b/packages/ripple-tide-landing-page/components/global/TideLandingPage.vue
index 121ef8685e..e5838a9953 100644
--- a/packages/ripple-tide-landing-page/components/global/TideLandingPage.vue
+++ b/packages/ripple-tide-landing-page/components/global/TideLandingPage.vue
@@ -55,6 +55,7 @@
         v-if="page.bodyComponents?.length > 0"
         :components="page.bodyComponents"
         :hasSidebar="hasSidebar"
+        :pageBackground="page.background"
       />
     </template>
     <template #belowBody>
diff --git a/packages/ripple-tide-search/components/TideSearchListingPage.vue b/packages/ripple-tide-search/components/TideSearchListingPage.vue
index dab622ece3..c8db02049e 100644
--- a/packages/ripple-tide-search/components/TideSearchListingPage.vue
+++ b/packages/ripple-tide-search/components/TideSearchListingPage.vue
@@ -10,10 +10,9 @@ import { submitForm } from '@formkit/vue'
 import useTideSearch from './../composables/useTideSearch'
 import type { TidePageBase, TideSiteData } from '@dpc-sdp/ripple-tide-api/types'
 import type {
-  TideSearchListingPage,
   MappedSearchResult,
   TideSearchListingResultLayout,
-  TideSearchListingSortOption
+  TideSearchListingConfig
 } from './../types'
 import type { ITideSecondaryCampaign } from '@dpc-sdp/ripple-tide-landing-page/mapping/secondary-campaign/secondary-campaign-mapping'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
@@ -29,13 +28,13 @@ interface Props {
   id: string
   title: string
   introText?: string
-  searchListingConfig?: TideSearchListingPage['searchListingConfig']
-  sortOptions?: TideSearchListingSortOption[]
   autocompleteQuery?: boolean
   autocompleteMinimumCharacters?: number
-  queryConfig: Record<string, any>
-  globalFilters?: any[]
-  userFilters?: any[]
+  searchListingConfig?: TideSearchListingConfig['searchListingConfig']
+  sortOptions?: TideSearchListingConfig['sortOptions']
+  queryConfig: TideSearchListingConfig['queryConfig']
+  globalFilters?: TideSearchListingConfig['globalFilters']
+  userFilters?: TideSearchListingConfig['userFilters']
   resultsLayout: TideSearchListingResultLayout
   searchResultsMappingFn?: (item: any) => MappedSearchResult<any>
   contentPage: TideContentPage
diff --git a/packages/ripple-tide-search/components/TideSearchResultsCount.vue b/packages/ripple-tide-search/components/TideSearchResultsCount.vue
index d8e4c71b37..3db65d45ab 100644
--- a/packages/ripple-tide-search/components/TideSearchResultsCount.vue
+++ b/packages/ripple-tide-search/components/TideSearchResultsCount.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    data-component-type="search-listing-result-count"
-    class="rpl-u-margin-t-8"
-  >
+  <div data-component-type="search-listing-result-count">
     <slot
       :pagingStart="pagingStart"
       :pagingEnd="pagingEnd"
diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
index a0ebae30e0..052a925c33 100644
--- a/packages/ripple-tide-search/components/global/TideCustomCollection.vue
+++ b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -3,11 +3,9 @@ import { getActiveFilterURL, ref } from '#imports'
 import { submitForm } from '@formkit/vue'
 import useTideSearch from './../../composables/useTideSearch'
 import type {
-  TideSearchListingPage,
-  TideSearchListingResultLayout,
   TideSearchListingResultItem,
-  TideSearchListingSortOption,
-  TideSearchListingTabKey
+  TideSearchListingTabKey,
+  TideSearchListingConfig
 } from './../../types'
 import { useRippleEvent } from '@dpc-sdp/ripple-ui-core'
 import type { rplEventPayload } from '@dpc-sdp/ripple-ui-core'
@@ -17,19 +15,17 @@ interface Props {
   id: string
   title?: string
   introText?: string
-  searchListingConfig?: TideSearchListingPage['searchListingConfig']
   autocompleteQuery?: boolean
-  queryConfig: Record<string, any>
-  globalFilters?: any[]
-  userFilters?: any[]
-  resultsConfig?: {
-    layout?: TideSearchListingResultLayout
-    item?: Record<string, { component: string }>
-  }
-  locationQueryConfig?: TideSearchListingPage['locationQueryConfig']
-  mapConfig?: TideSearchListingPage['mapConfig']
+  searchListingConfig?: TideSearchListingConfig['searchListingConfig']
+  sortOptions?: TideSearchListingConfig['sortOptions']
+  queryConfig: TideSearchListingConfig['queryConfig']
+  globalFilters?: TideSearchListingConfig['globalFilters']
+  userFilters?: TideSearchListingConfig['userFilters']
+  resultsConfig?: TideSearchListingConfig['resultsConfig']
+  locationQueryConfig?: TideSearchListingConfig['locationQueryConfig']
+  mapConfig?: TideSearchListingConfig['mapConfig']
+  pageBackground?: string
   index?: string
-  sortOptions?: TideSearchListingSortOption[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -64,7 +60,8 @@ const props = withDefaults(defineProps<Props>(), {
     suggestions: {
       key: 'title',
       enabled: false
-    }
+    },
+    formTheme: 'default'
   }),
   resultsConfig: () => ({
     layout: {
@@ -72,8 +69,9 @@ const props = withDefaults(defineProps<Props>(), {
     }
   }),
   sortOptions: () => [],
-  locationQueryConfig: () => {},
-  mapConfig: () => {}
+  locationQueryConfig: () => ({}),
+  mapConfig: () => ({}),
+  pageBackground: 'default'
 })
 
 const emit = defineEmits<{
@@ -377,6 +375,10 @@ const mapAreas = computed(() => {
   }
   return []
 })
+
+const reverseTheme = computed(() => {
+  return props.searchListingConfig?.formTheme === 'reverse'
+})
 </script>
 
 <template>
@@ -384,13 +386,15 @@ const mapAreas = computed(() => {
     <div
       :class="{
         'tide-search-header': true,
-        'tide-search-header--neutral': searchListingConfig.displayMapTab
+        'tide-search-header--neutral': reverseTheme,
+        'tide-search-header--default': !reverseTheme,
+        'tide-search-header--inset': reverseTheme && pageBackground !== 'alt'
       }"
     >
       <RplSearchBar
         v-if="!locationQueryConfig?.component"
         id="custom-collection-search-bar"
-        variant="default"
+        :variant="searchListingConfig?.formTheme"
         :input-label="searchListingConfig.labels?.submit"
         :inputValue="searchTerm"
         :placeholder="searchListingConfig.labels?.placeholder"
@@ -424,7 +428,7 @@ const mapAreas = computed(() => {
             :title="title"
             :filter-form-values="filterForm"
             :filterInputs="userFilters"
-            :reverseStyling="true"
+            :reverseStyling="reverseTheme"
             @reset="handleFilterReset"
             @submit="handleFilterSubmit"
           >
@@ -456,6 +460,7 @@ const mapAreas = computed(() => {
       <TideSearchAboveResults
         v-if="results?.length || (sortOptions && sortOptions.length)"
         :hasSidebar="true"
+        class="rpl-u-margin-t-8"
       >
         <template #left>
           <TideSearchResultsCount
@@ -529,8 +534,11 @@ const mapAreas = computed(() => {
 
 .tide-search-header--neutral {
   background-color: var(--rpl-clr-neutral-100);
-  padding: var(--rpl-sp-4);
   margin-bottom: var(--rpl-sp-4);
+}
+
+.tide-search-header--inset {
+  padding: var(--rpl-sp-4);
 
   @media (--rpl-bp-s) {
     padding: var(--rpl-sp-5);
diff --git a/packages/ripple-tide-search/components/global/TideSearchFilterDependent.vue b/packages/ripple-tide-search/components/global/TideSearchFilterDependent.vue
index 907f851cfa..3b1f2ce73c 100644
--- a/packages/ripple-tide-search/components/global/TideSearchFilterDependent.vue
+++ b/packages/ripple-tide-search/components/global/TideSearchFilterDependent.vue
@@ -9,10 +9,12 @@ interface Props {
   dependantPlaceholder: string
   multiple: boolean
   options?: any[]
+  variant?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  options: () => []
+  options: () => [],
+  variant: 'default'
 })
 
 const groupValues = ref({})
@@ -75,6 +77,7 @@ onMounted(() => {
         :label="label"
         :placeholder="placeholder"
         :options="parentOptions"
+        :variant="variant"
         @input="handleSelect"
       />
     </div>
@@ -89,6 +92,7 @@ onMounted(() => {
         :label="dependantLabel"
         :placeholder="dependantPlaceholder"
         :options="childOptions"
+        :variant="variant"
       />
     </div>
   </FormKit>
diff --git a/packages/ripple-tide-search/components/global/TideTideSearchListing.vue b/packages/ripple-tide-search/components/global/TideTideSearchListing.vue
index 556699ac5a..4521d64782 100644
--- a/packages/ripple-tide-search/components/global/TideTideSearchListing.vue
+++ b/packages/ripple-tide-search/components/global/TideTideSearchListing.vue
@@ -12,10 +12,14 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const resultsConfig = computed(() => {
+  return props.page.config?.resultsConfig || props.page.config?.results
+})
+
 const searchResultsMappingFn = (item): TideSearchListingResultItem => {
-  if (props.page.config.results.item) {
-    for (const key in props.page.config.results.item) {
-      const mapping = props.page.config.results.item[key]
+  if (resultsConfig.value?.item) {
+    for (const key in resultsConfig.value.item) {
+      const mapping = resultsConfig.value.item[key]
       if (!item._source?.type || item._source?.type[0] === key || key === '*') {
         /* If there is no type, a component will be required */
         return {
@@ -51,7 +55,7 @@ const searchResultsMappingFn = (item): TideSearchListingResultItem => {
     :queryConfig="page.config.queryConfig"
     :globalFilters="page.config.globalFilters"
     :userFilters="page.config.userFilters"
-    :resultsLayout="page.config.results?.layout"
+    :resultsLayout="resultsConfig?.layout"
     :searchResultsMappingFn="searchResultsMappingFn"
     :sortOptions="page.config.sortOptions"
   />
diff --git a/packages/ripple-tide-search/types.ts b/packages/ripple-tide-search/types.ts
index 4620003a7f..af63410db3 100644
--- a/packages/ripple-tide-search/types.ts
+++ b/packages/ripple-tide-search/types.ts
@@ -44,6 +44,19 @@ export interface FilterConfigItem {
   }
 }
 
+export type TideSearchListingResultsConfig = {
+  /**
+   * @description Component to render the results layout
+   */
+  layout?: TideSearchListingResultLayout
+  /**
+   * @description Component to render result items, can be either '*' for all types, or the content type name if you need to render different types of results differently
+   */
+  item?: {
+    [key: string]: TideSearchListingResultItem
+  }
+}
+
 export type TideSearchListingResultItem = {
   /**
    * @description search result key
@@ -125,8 +138,8 @@ export type TideSearchListingConfig = {
       submit: string
       reset: string
       placeholder: string
-      mapTab: string
-      listingTab: string
+      mapTab?: string
+      listingTab?: string
     }
     /**
      * @description custom sort clause
@@ -147,6 +160,10 @@ export type TideSearchListingConfig = {
       key: string
       enabled: boolean
     }
+    /**
+     * @description The theme to use for the display of form section and fields
+     */
+    formTheme: 'default' | 'reverse'
   }
   /**
    * @description Elastic Query DSL for query clause
@@ -162,21 +179,24 @@ export type TideSearchListingConfig = {
   userFilters: FilterConfigItem[]
   /**
    * @description Config for how to display results
+   * @deprecated please use resultsConfig instead
+   */
+  results: TideSearchListingResultsConfig
+  /**
+   * @description Config for how to display results
+   */
+  resultsConfig: TideSearchListingResultsConfig
+  /**
+   * @description Config for custom sort options
    */
-  results: {
-    /**
-     * @description Component to render results layout
-     */
-    layout?: TideSearchListingResultLayout
-    /**
-     * @description Component to render result items, can be either '*' for all types, or the content type name if you need to render different types of results differently
-     */
-    item?: {
-      [key: string]: TideSearchListingResultItem
-    }
-  }
   sortOptions?: TideSearchListingSortOption[]
+  /**
+   * @description Config for the location query
+   */
   locationQueryConfig?: TideSearchLocationQueryConfig
+  /**
+   * @description Config for results map
+   */
   mapConfig?: TideSearchListingMapConfig
 }
 
diff --git a/packages/ripple-ui-forms/src/inputs/checkbox.ts b/packages/ripple-ui-forms/src/inputs/checkbox.ts
index c7baf7d0ed..750fce2879 100644
--- a/packages/ripple-ui-forms/src/inputs/checkbox.ts
+++ b/packages/ripple-ui-forms/src/inputs/checkbox.ts
@@ -27,6 +27,7 @@ export const checkbox: FormKitTypeDefinition = {
       'data-rpl-focus-input': '$id',
       required: '$fns.isFieldRequired()',
       showRequiredInLabel: '$fns.hasNoLabel()',
+      variant: '$node.props.variant',
       pii: '$node.props.pii'
     }
   }),
@@ -43,7 +44,7 @@ export const checkbox: FormKitTypeDefinition = {
   /**
    * An array of extra props to accept for this input.
    */
-  props: ['checkboxLabel', 'onValue', 'offValue', 'pii'],
+  props: ['checkboxLabel', 'variant', 'onValue', 'offValue', 'pii'],
   /**
    * Forces node.props.type to be this explicit value.
    */

From ea4c0f4b722cda0f04566af7c3a88115853379af Mon Sep 17 00:00:00 2001
From: David Featherston <david.featherstone@dpc.vic.gov.au>
Date: Fri, 2 Feb 2024 08:43:49 +1100
Subject: [PATCH 2/2] feat(@dpc-sdp/ripple-tide-search): update reverse form
 theme for alt pages

---
 .../data-table/custom-collection.feature      |  37 ++-
 .../alt-form-theme-default.json               | 214 ++++++++++++++++++
 .../alt-form-theme-reverse.json               | 214 ++++++++++++++++++
 .../components/custom-collection.ts           |   9 +
 .../global/TideCustomCollection.vue           |  29 ++-
 5 files changed, 488 insertions(+), 15 deletions(-)
 create mode 100644 examples/nuxt-app/test/fixtures/landingpage/custom-collection/alt-form-theme-default.json
 create mode 100644 examples/nuxt-app/test/fixtures/landingpage/custom-collection/alt-form-theme-reverse.json

diff --git a/examples/nuxt-app/test/features/data-table/custom-collection.feature b/examples/nuxt-app/test/features/data-table/custom-collection.feature
index 05c684bab4..e300e184c5 100644
--- a/examples/nuxt-app/test/features/data-table/custom-collection.feature
+++ b/examples/nuxt-app/test/features/data-table/custom-collection.feature
@@ -19,13 +19,13 @@ Feature: Custom Collection
     And the search listing layout should be "table"
 
   @mockserver
-  Scenario: Default form theme
+  Scenario: Default page - default form theme
     Given the page endpoint for path "/custom-collection-theme-default" returns fixture "/landingpage/custom-collection/form-theme-default" with status 200
     Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200 as alias "cslReq"
     Given I visit the page "/custom-collection-theme-default"
     Then the landing page component "TideCustomCollection" should exist
     And I toggle the content collection filters
-    Then the custom collection component should have the "default" form theme applied
+    Then the custom collection component should not have the "neutral" form theme applied
     Then the custom collection search bar field should have the "default" variant applied
     Then the custom collection checkbox field labelled "Show archived content" should have the "default" variant applied
     Then the custom collection dropdown field labelled "Term filter example" should have the "default" variant applied
@@ -33,7 +33,7 @@ Feature: Custom Collection
     Then the custom collection dropdown field labelled "Terms dependent child example" should have the "default" variant applied
 
   @mockserver
-  Scenario: Reverse form theme
+  Scenario: Default page - reverse form theme
     Given the page endpoint for path "/custom-collection-theme-reverse" returns fixture "/landingpage/custom-collection/form-theme-reverse" with status 200
     Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200 as alias "cslReq"
     Given I visit the page "/custom-collection-theme-reverse"
@@ -46,6 +46,34 @@ Feature: Custom Collection
     Then the custom collection dropdown field labelled "Terms dependent example" should have the "reverse" variant applied
     Then the custom collection dropdown field labelled "Terms dependent child example" should have the "reverse" variant applied
 
+  @mockserver
+  Scenario: Alt page - default form theme
+    Given the page endpoint for path "/custom-collection-alt-theme-default" returns fixture "/landingpage/custom-collection/alt-form-theme-default" with status 200
+    Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200 as alias "cslReq"
+    Given I visit the page "/custom-collection-alt-theme-default"
+    Then the landing page component "TideCustomCollection" should exist
+    And I toggle the content collection filters
+    Then the custom collection component should not have the "light" form theme applied
+    Then the custom collection search bar field should have the "reverse" variant applied
+    Then the custom collection checkbox field labelled "Show archived content" should have the "reverse" variant applied
+    Then the custom collection dropdown field labelled "Term filter example" should have the "reverse" variant applied
+    Then the custom collection dropdown field labelled "Terms dependent example" should have the "reverse" variant applied
+    Then the custom collection dropdown field labelled "Terms dependent child example" should have the "reverse" variant applied
+
+  @mockserver
+  Scenario: Alt page - reverse form theme
+    Given the page endpoint for path "/custom-collection-alt-theme-reverse" returns fixture "/landingpage/custom-collection/alt-form-theme-reverse" with status 200
+    Given the "/api/tide/elasticsearch/sdp_data_pipelines_scl/_search" network request is stubbed with fixture "/landingpage/custom-collection/response" and status 200 as alias "cslReq"
+    Given I visit the page "/custom-collection-alt-theme-reverse"
+    Then the landing page component "TideCustomCollection" should exist
+    And I toggle the content collection filters
+    Then the custom collection component should have the "light" form theme applied
+    Then the custom collection search bar field should have the "default" variant applied
+    Then the custom collection checkbox field labelled "Show archived content" should have the "default" variant applied
+    Then the custom collection dropdown field labelled "Term filter example" should have the "default" variant applied
+    Then the custom collection dropdown field labelled "Terms dependent example" should have the "default" variant applied
+    Then the custom collection dropdown field labelled "Terms dependent child example" should have the "default" variant applied
+
   @mockserver
   Scenario: Error
     Given the page endpoint for path "/custom-collection" returns fixture "/landingpage/custom-collection" with status 200
@@ -61,6 +89,3 @@ Feature: Custom Collection
     Given I visit the page "/custom-collection"
     Then the landing page component "TideCustomCollection" should exist
     And the custom collection component should display the error "Sorry, no results match your search. Try again with different search options or check back later."
-
-
-
diff --git a/examples/nuxt-app/test/fixtures/landingpage/custom-collection/alt-form-theme-default.json b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/alt-form-theme-default.json
new file mode 100644
index 0000000000..07ed8f6888
--- /dev/null
+++ b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/alt-form-theme-default.json
@@ -0,0 +1,214 @@
+{
+  "title": "Custom collection - Form theme",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "landing_page",
+  "nid": "11dede11-10c0-111e1-1100-000000000330",
+  "summary": "Page summary",
+  "showInPageNav": true,
+  "inPageNavHeadingLevel": "h3",
+  "background": "alt",
+  "header": {
+    "title": "Custom collection form theme test",
+    "summary": "Test landing page title introduction text",
+    "theme": "default",
+    "backgroundImage": null
+  },
+  "sidebar": {},
+  "headerComponents": [],
+  "bodyComponents": [
+    {
+      "uuid": "55555555-5555-5555-5555-555555555555",
+      "component": "TideCustomCollection",
+      "id": "123",
+      "title": "Cameras save lives",
+      "props": {
+        "searchListingConfig": {
+          "searchProvider": "elasticsearch",
+          "index": "sdp_data_pipelines_scl",
+          "resultsPerPage": 10,
+          "labels": {
+            "submit": "Search",
+            "placeholder": "Enter suburb, postcode, streetname or offence location"
+          },
+          "customSort": [
+            {
+              "suburb": "asc"
+            }
+          ],
+          "formTheme": "default"
+        },
+        "queryConfig": {
+          "multi_match": {
+            "query": "{{query}}",
+            "fields": ["suburb^3", "street^2", "offence_location"]
+          }
+        },
+        "globalFilters": [],
+        "userFilters": [
+          {
+            "id": "termFilter",
+            "component": "TideSearchFilterDropdown",
+            "filter": {
+              "type": "term",
+              "value": "termFilter.keyword"
+            },
+            "aggregations": {
+              "field": "termFilter",
+              "source": "taxonomy"
+            },
+            "props": {
+              "id": "termFilter",
+              "label": "Term filter example",
+              "placeholder": "Select a colour",
+              "multiple": true,
+              "options": [
+                {
+                  "id": "1",
+                  "label": "Red",
+                  "value": "Red"
+                },
+                {
+                  "id": "2",
+                  "label": "Green",
+                  "value": "Green"
+                }
+              ]
+            }
+          },
+          {
+            "id": "checkboxFilter",
+            "component": "TideSearchFilterCheckbox",
+            "filter": {
+              "type": "terms",
+              "value": "checkboxFilter.keyword",
+              "multiple": false
+            },
+            "props": {
+              "id": "checkboxFilter",
+              "label": "Checkbox example",
+              "checkboxLabel": "Show archived content",
+              "onValue": "Archived"
+            }
+          },
+          {
+            "id": "dependentFilter",
+            "component": "TideSearchFilterDependent",
+            "columns": "rpl-grid",
+            "filter": {
+              "type": "dependent",
+              "multiple": false,
+              "value": "field_species_name"
+            },
+            "aggregations": {
+              "field": "topic",
+              "source": "taxonomy"
+            },
+            "props": {
+              "id": "dependentFilter",
+              "label": "Terms dependent example",
+              "placeholder": "Select a species",
+              "dependantLabel": "Terms dependent child example",
+              "dependantPlaceholder": "All sub species",
+              "multiple": true,
+              "options": [
+                {
+                  "id": "1",
+                  "label": "Mammals",
+                  "value": "Mammals"
+                },
+                {
+                  "id": "2",
+                  "label": "Dogs",
+                  "value": "Dogs",
+                  "parent": "1"
+                },
+                {
+                  "id": "3",
+                  "label": "Birds",
+                  "value": "Birds"
+                },
+                {
+                  "id": "4",
+                  "label": "Cats",
+                  "value": "Cats",
+                  "parent": "1"
+                },
+                {
+                  "id": "5",
+                  "label": "Parrot",
+                  "value": "Parrot",
+                  "parent": "3"
+                },
+                {
+                  "id": "6",
+                  "label": "Cockatoo",
+                  "value": "Cockatoo",
+                  "parent": "3"
+                }
+              ]
+            }
+          }
+        ],
+        "resultsConfig": {
+          "layout": {
+            "component": "TideSearchResultsTable",
+            "props": {
+              "columns": [
+                {
+                  "label": "Suburb",
+                  "objectKey": "suburb"
+                },
+                {
+                  "label": "Location",
+                  "objectKey": "street"
+                },
+                {
+                  "label": "Last annual test",
+                  "objectKey": "last_annual_test"
+                }
+              ]
+            }
+          }
+        }
+      }
+    }
+  ],
+  "meta": {
+    "url": "/demo-landing-page",
+    "langcode": "en",
+    "description": "Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae",
+    "additional": [
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "https://develop.content.reference.sdp.vic.gov.au/demo-landing-page"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "Demo Landing Page | Single Digital Presence Content Management System"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "property": "og:image",
+          "content": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg"
+        }
+      }
+    ],
+    "keywords": "",
+    "image": {
+      "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg",
+      "alt": "Demo: Melbourne tram",
+      "title": "Demo: Melbourne tram",
+      "width": 1413,
+      "height": 785,
+      "drupal_internal__target_id": 46
+    }
+  }
+}
diff --git a/examples/nuxt-app/test/fixtures/landingpage/custom-collection/alt-form-theme-reverse.json b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/alt-form-theme-reverse.json
new file mode 100644
index 0000000000..fba6dc18bb
--- /dev/null
+++ b/examples/nuxt-app/test/fixtures/landingpage/custom-collection/alt-form-theme-reverse.json
@@ -0,0 +1,214 @@
+{
+  "title": "Custom collection - Form theme",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "landing_page",
+  "nid": "11dede11-10c0-111e1-1100-000000000330",
+  "summary": "Page summary",
+  "showInPageNav": true,
+  "inPageNavHeadingLevel": "h3",
+  "background": "alt",
+  "header": {
+    "title": "Custom collection form theme test",
+    "summary": "Test landing page title introduction text",
+    "theme": "default",
+    "backgroundImage": null
+  },
+  "sidebar": {},
+  "headerComponents": [],
+  "bodyComponents": [
+    {
+      "uuid": "55555555-5555-5555-5555-555555555555",
+      "component": "TideCustomCollection",
+      "id": "123",
+      "title": "Cameras save lives",
+      "props": {
+        "searchListingConfig": {
+          "searchProvider": "elasticsearch",
+          "index": "sdp_data_pipelines_scl",
+          "resultsPerPage": 10,
+          "labels": {
+            "submit": "Search",
+            "placeholder": "Enter suburb, postcode, streetname or offence location"
+          },
+          "customSort": [
+            {
+              "suburb": "asc"
+            }
+          ],
+          "formTheme": "reverse"
+        },
+        "queryConfig": {
+          "multi_match": {
+            "query": "{{query}}",
+            "fields": ["suburb^3", "street^2", "offence_location"]
+          }
+        },
+        "globalFilters": [],
+        "userFilters": [
+          {
+            "id": "termFilter",
+            "component": "TideSearchFilterDropdown",
+            "filter": {
+              "type": "term",
+              "value": "termFilter.keyword"
+            },
+            "aggregations": {
+              "field": "termFilter",
+              "source": "taxonomy"
+            },
+            "props": {
+              "id": "termFilter",
+              "label": "Term filter example",
+              "placeholder": "Select a colour",
+              "multiple": true,
+              "options": [
+                {
+                  "id": "1",
+                  "label": "Red",
+                  "value": "Red"
+                },
+                {
+                  "id": "2",
+                  "label": "Green",
+                  "value": "Green"
+                }
+              ]
+            }
+          },
+          {
+            "id": "checkboxFilter",
+            "component": "TideSearchFilterCheckbox",
+            "filter": {
+              "type": "terms",
+              "value": "checkboxFilter.keyword",
+              "multiple": false
+            },
+            "props": {
+              "id": "checkboxFilter",
+              "label": "Checkbox example",
+              "checkboxLabel": "Show archived content",
+              "onValue": "Archived"
+            }
+          },
+          {
+            "id": "dependentFilter",
+            "component": "TideSearchFilterDependent",
+            "columns": "rpl-grid",
+            "filter": {
+              "type": "dependent",
+              "multiple": false,
+              "value": "field_species_name"
+            },
+            "aggregations": {
+              "field": "topic",
+              "source": "taxonomy"
+            },
+            "props": {
+              "id": "dependentFilter",
+              "label": "Terms dependent example",
+              "placeholder": "Select a species",
+              "dependantLabel": "Terms dependent child example",
+              "dependantPlaceholder": "All sub species",
+              "multiple": true,
+              "options": [
+                {
+                  "id": "1",
+                  "label": "Mammals",
+                  "value": "Mammals"
+                },
+                {
+                  "id": "2",
+                  "label": "Dogs",
+                  "value": "Dogs",
+                  "parent": "1"
+                },
+                {
+                  "id": "3",
+                  "label": "Birds",
+                  "value": "Birds"
+                },
+                {
+                  "id": "4",
+                  "label": "Cats",
+                  "value": "Cats",
+                  "parent": "1"
+                },
+                {
+                  "id": "5",
+                  "label": "Parrot",
+                  "value": "Parrot",
+                  "parent": "3"
+                },
+                {
+                  "id": "6",
+                  "label": "Cockatoo",
+                  "value": "Cockatoo",
+                  "parent": "3"
+                }
+              ]
+            }
+          }
+        ],
+        "resultsConfig": {
+          "layout": {
+            "component": "TideSearchResultsTable",
+            "props": {
+              "columns": [
+                {
+                  "label": "Suburb",
+                  "objectKey": "suburb"
+                },
+                {
+                  "label": "Location",
+                  "objectKey": "street"
+                },
+                {
+                  "label": "Last annual test",
+                  "objectKey": "last_annual_test"
+                }
+              ]
+            }
+          }
+        }
+      }
+    }
+  ],
+  "meta": {
+    "url": "/demo-landing-page",
+    "langcode": "en",
+    "description": "Nulla ultricies dignissim leo, posuere vestibulum erat cursus vitae",
+    "additional": [
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "https://develop.content.reference.sdp.vic.gov.au/demo-landing-page"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "Demo Landing Page | Single Digital Presence Content Management System"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "property": "og:image",
+          "content": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg"
+        }
+      }
+    ],
+    "keywords": "",
+    "image": {
+      "src": "https://develop.content.reference.sdp.vic.gov.au/sites/default/files/tide_demo_content/Melbourne-tram.jpg",
+      "alt": "Demo: Melbourne tram",
+      "title": "Demo: Melbourne tram",
+      "width": 1413,
+      "height": 785,
+      "drupal_internal__target_id": 46
+    }
+  }
+}
diff --git a/packages/ripple-test-utils/step_definitions/components/custom-collection.ts b/packages/ripple-test-utils/step_definitions/components/custom-collection.ts
index 75ba85161c..eb4f331735 100644
--- a/packages/ripple-test-utils/step_definitions/components/custom-collection.ts
+++ b/packages/ripple-test-utils/step_definitions/components/custom-collection.ts
@@ -23,6 +23,15 @@ Then(
   }
 )
 
+Then(
+  `the custom collection component should not have the {string} form theme applied`,
+  (theme: string) => {
+    cy.get(`[data-component-type="TideCustomCollection"]`)
+      .find(`.tide-search-header--${theme}`)
+      .should('not.exist')
+  }
+)
+
 Then(
   `the custom collection search bar field should have the {string} variant applied`,
   (theme: string) => {
diff --git a/packages/ripple-tide-search/components/global/TideCustomCollection.vue b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
index 052a925c33..3ca234840e 100644
--- a/packages/ripple-tide-search/components/global/TideCustomCollection.vue
+++ b/packages/ripple-tide-search/components/global/TideCustomCollection.vue
@@ -376,9 +376,16 @@ const mapAreas = computed(() => {
   return []
 })
 
-const reverseTheme = computed(() => {
-  return props.searchListingConfig?.formTheme === 'reverse'
-})
+const altBackground = computed(() => props.pageBackground === 'alt')
+
+const reverseTheme = computed(
+  () => props.searchListingConfig?.formTheme === 'reverse'
+)
+const reverseFields = computed(
+  () =>
+    (reverseTheme.value && !altBackground.value) ||
+    (altBackground.value && !reverseTheme.value)
+)
 </script>
 
 <template>
@@ -386,15 +393,15 @@ const reverseTheme = computed(() => {
     <div
       :class="{
         'tide-search-header': true,
-        'tide-search-header--neutral': reverseTheme,
-        'tide-search-header--default': !reverseTheme,
-        'tide-search-header--inset': reverseTheme && pageBackground !== 'alt'
+        'tide-search-header--inset': reverseTheme,
+        'tide-search-header--neutral': reverseTheme && !altBackground,
+        'tide-search-header--light': reverseTheme && altBackground
       }"
     >
       <RplSearchBar
         v-if="!locationQueryConfig?.component"
         id="custom-collection-search-bar"
-        :variant="searchListingConfig?.formTheme"
+        :variant="reverseFields ? 'reverse' : 'default'"
         :input-label="searchListingConfig.labels?.submit"
         :inputValue="searchTerm"
         :placeholder="searchListingConfig.labels?.placeholder"
@@ -428,7 +435,7 @@ const reverseTheme = computed(() => {
             :title="title"
             :filter-form-values="filterForm"
             :filterInputs="userFilters"
-            :reverseStyling="reverseTheme"
+            :reverseStyling="reverseFields"
             @reset="handleFilterReset"
             @submit="handleFilterSubmit"
           >
@@ -534,11 +541,15 @@ const reverseTheme = computed(() => {
 
 .tide-search-header--neutral {
   background-color: var(--rpl-clr-neutral-100);
-  margin-bottom: var(--rpl-sp-4);
+}
+
+.tide-search-header--light {
+  background-color: var(--rpl-clr-light);
 }
 
 .tide-search-header--inset {
   padding: var(--rpl-sp-4);
+  margin-bottom: var(--rpl-sp-4);
 
   @media (--rpl-bp-s) {
     padding: var(--rpl-sp-5);