[SD-403] Decoupled map search banner

examples/nuxt-app/layers/fixture-api/README.md

@@ -9,3 +9,5 @@ No backend is needed, the API is stubbed with flat file json fixtures (also used
 2. [_fixture/tide-site](http://localhost:3000/_fixture/tide-site) Fixtures page content, but uses back end for site content
 
 3. [_fixture/page-exposed](http://localhost:3000/_fixture/page-exposed) Fixtures both page and site content, expose all layout slots
+
+4. [_fixture/document](http://localhost:3000/_fixture/document) Edge case example for cheerio rendering

examples/nuxt-app/test/features/maps/map-search-banner.feature

@@ -0,0 +1,54 @@
+Feature: Map search banner
+
+  Background:
+    Given the site endpoint returns fixture "/site/reference" with status 200
+
+  @mockserver
+  Example: Map search banner - Content
+    Given the page endpoint for path "/search-bar-example" returns fixture "/maps/example-map-search-banner" with status 200
+    And I am using a "macbook-16" device
+    Then I visit the page "/search-bar-example"
+    Then the location search banner should have the following content
+      | title               | description            | inputLabel | placeholder      | image                   |
+      | Test search heading | Test introduction text | Test label | Test placeholder | /placeholders/mapbg.png |
+
+  @mockserver
+  Scenario: Map search banner - Custom suggestions
+    Given I load the page fixture with "/maps/example-map-search-banner"
+    Given the page endpoint for path "/search-bar-example" returns the loaded fixture
+    Given the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/maps/simple-map-results" and status 200 as alias "searchReq"
+    Given I visit the page "/search-bar-example"
+    And I wait 2 seconds
+    And I type "bays" into the location search bar
+    And I wait 2 seconds
+    And the search suggestions displayed should include
+      | Test location - testValue - 1 |
+      | Test location - testValue - 2 |
+      | With magic key                |
+    And I click the search suggestion labelled "Test location - testValue - 1"
+    Then the current path should be "/test/target/url"
+    Then the URL should reflect that the location has the following:
+      | key  | value                         |
+      | id   | 1                             |
+      | name | Test location - testValue - 1 |
+
+  @mockserver
+  Scenario: Map search banner - Suggestions with ArcGIS magic keys
+    Given the ArcGIS findAddressCandidates endpoint returns "/maps/arcgis-address-candidates" fixture
+    Given I load the page fixture with "/maps/example-map-search-banner"
+    Given the page endpoint for path "/search-bar-example" returns the loaded fixture
+    Given the "/api/tide/elasticsearch/elasticsearch_index_develop_node/_search" network request is stubbed with fixture "/maps/simple-map-results" and status 200 as alias "searchReq"
+    Given I visit the page "/search-bar-example"
+    And I wait 2 seconds
+    And I type "bays" into the location search bar
+    And I wait 2 seconds
+    And the search suggestions displayed should include
+      | Test location - testValue - 1 |
+      | Test location - testValue - 2 |
+      | With magic key                |
+    And I click the search suggestion labelled "With magic key"
+    Then the current path should be "/test/target/url"
+    Then the URL should reflect that the location has the following:
+      | key  | value                           |
+      | id   | fake1234                        |
+      | name | 1234 Fake St Fakeville Vic 3000 |

examples/nuxt-app/test/fixtures/maps/example-map-search-banner.json

@@ -0,0 +1,134 @@
+{
+  "title": "Test location search banner",
+  "changed": "2024-11-11T14:25:56+11:00",
+  "created": "2024-10-28T17:42:15+11:00",
+  "type": "landing_page",
+  "nid": "1cf34a40-130f-42a5-bd83-612cfa71c889",
+  "_sectionId": "2138",
+  "sidebar": {
+    "contacts": [],
+    "whatsNext": [],
+    "siteSectionNav": null
+  },
+  "status": "published",
+  "topicTags": [
+    {
+      "text": "Education",
+      "url": "/topic/education"
+    }
+  ],
+  "siteSection": null,
+  "meta": {
+    "url": "/early-learning-victoria",
+    "langcode": "en",
+    "description": "We're opening 50 new early learning and childcare centres across Victoria. These will be government owned and operated, providing long day care and integrated kinder programs.",
+    "additional": [
+      {
+        "tag": "meta",
+        "attributes": {
+          "name": "title",
+          "content": "Early Learning Victoria | l"
+        }
+      },
+      {
+        "tag": "link",
+        "attributes": {
+          "rel": "canonical",
+          "href": "https://content.vic.gov.au/early-learning-victoria"
+        }
+      },
+      {
+        "tag": "meta",
+        "attributes": {
+          "property": "og:locale",
+          "content": "en-AU"
+        }
+      }
+    ],
+    "keywords": "",
+    "image": null
+  },
+  "showContentRating": true,
+  "summary": "Test",
+  "showHeroAcknowledgement": false,
+  "showInPageNav": false,
+  "showHeroImageCaption": false,
+  "showTopicTags": true,
+  "inPageNavHeadingLevel": "h2",
+  "background": "alt",
+  "header": {
+    "title": "Test location search banner",
+    "summary": "Test",
+    "links": {
+      "title": "",
+      "items": [],
+      "more": null
+    },
+    "backgroundImageCaption": null,
+    "theme": "default",
+    "logoImage": null,
+    "backgroundImage": {
+      "src": "/placeholders/medium.png",
+      "alt": "",
+      "title": "",
+      "width": 10667,
+      "height": 4500,
+      "focalPoint": {
+        "x": 5334,
+        "y": 2520
+      }
+    },
+    "cornerTop": {
+      "src": "/placeholders/medium.png",
+      "alt": "",
+      "title": "",
+      "width": 804,
+      "height": 491,
+      "focalPoint": {
+        "x": 402,
+        "y": 246
+      }
+    },
+    "cornerBottom": {
+      "src": "/placeholders/medium.png",
+      "alt": "",
+      "title": "",
+      "width": 804,
+      "height": 284,
+      "focalPoint": {
+        "x": 402,
+        "y": 142
+      }
+    },
+    "primaryAction": null,
+    "secondaryAction": null,
+    "secondaryActionLabel": null
+  },
+  "primaryCampaign": null,
+  "secondaryCampaign": null,
+  "headerComponents": [
+    {
+      "uuid": "27b0781b-2533-40ba-a9da-28fefc41d83e",
+      "component": "TideLandingPageMapSearchBanner",
+      "id": "3434418",
+      "props": {
+        "title": "Test search heading",
+        "intro": "Test introduction text",
+        "label": "Test label",
+        "placeholder": "Test placeholder",
+        "image": {
+          "src": "/placeholders/mapbg.png",
+          "alt": "Example map image"
+        },
+        "searchUrl": "/test/target/url",
+        "suggestionsConfig": {
+          "function": "exampleSuggestionsFn",
+          "args": {
+            "testArg": "testValue"
+          }
+        }
+      }
+    }
+  ],
+  "bodyComponents": []
+}

packages/ripple-test-utils/step_definitions/components/index.ts

@@ -21,3 +21,4 @@ import './content-collection'
 import './custom-collection'
 import './social-share'
 import './data-driven-component'
+import './location-search-banner'

packages/ripple-test-utils/step_definitions/components/location-search-banner.ts

@@ -0,0 +1,18 @@
+import { Then, DataTable } from '@badeball/cypress-cucumber-preprocessor'
+
+Then(
+  'the location search banner should have the following content',
+  (dataTable: DataTable) => {
+    const data = dataTable.hashes()[0]
+
+    cy.get(`[data-component-type="TideLandingPageMapSearchBanner"]`).as(
+      'component'
+    )
+    cy.get(`@component`).should('contain', data.description)
+    cy.get('@component').within(() => {
+      cy.get(`h2`).should('have.text', data.title)
+      cy.get(`img`).should('have.attr', 'src', data.image)
+      cy.get(`input`).should('have.attr', 'placeholder', data.placeholder)
+    })
+  }
+)

packages/ripple-tide-landing-page/app.config.ts

@@ -6,6 +6,7 @@ export default defineAppConfig({
     dataDrivenComponents: {
       // add key of field_data_driven_component and value of component name to render
       // eg: find_a_council_map: 'VicCouncilLookup'
+      location_search_banner: 'TideLandingPageMapSearchBanner'
     }
   }
 })

packages/ripple-tide-landing-page/components/global/TideLandingPage/MapSearchBanner.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+interface Props {
+  // props for UI wrapper
+  title: string
+  intro: string
+  image?: IRplImageType
+
+  // props for search bar
+  searchUrl: string
+  openInNewWindow?: boolean
+
+  // props to match custom collection locationQueryConfig
+  label?: string
+  placeholder?: string
+  tagsComponent?: string
+  suggestionsConfig: {
+    function: string
+    args: Record<string, any>
+  }
+  /**
+   * @deprecated use suggestionsConfig instead to customise suggestions
+   */
+  suggestionsIndex?: string
+  /**
+   * @deprecated use suggestionsConfig instead to customise suggestions
+   */
+  suggestionsKey?: string
+  /**
+   * @deprecated use suggestionsConfig instead to customise suggestions
+   */
+  mapResultsFnName?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  image: undefined,
+  openInNewWindow: false,
+  label: 'Search by postcode or suburb',
+  placeholder: 'Enter postcode or suburb',
+  tagsComponent: undefined,
+  suggestionsConfig: undefined,
+  isGettingLocation: false,
+  userGeolocation: null,
+  mapResultsFnName: '',
+  suggestionsIndex: 'vic-postcode-localities',
+  suggestionsKey: 'name'
+})
+</script>
+
+<template>
+  <RplSearchBanner :title="title" :intro="intro" :image="image">
+    <TideSearchStandaloneLocationBar
+      :searchUrl="searchUrl"
+      :openInNewWindow="openInNewWindow"
+      :label="label"
+      :placeholder="placeholder"
+      :tagsComponent="tagsComponent"
+      :suggestionsConfig="suggestionsConfig"
+      :suggestionsIndex="suggestionsIndex"
+      :suggestionsKey="suggestionsKey"
+      :mapResultsFnName="mapResultsFnName"
+    />
+  </RplSearchBanner>
+</template>