Merge pull request #949 from dpc-sdp/feature/maps-search-bar

Feature/maps search bar
dpc-sdp · Dec 6, 2023 · c190368 · c190368
2 parents 18bd3a3 + 1a933da
commit c190368
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 114 deletions.
diff --git a/packages/ripple-tide-search/components/TideSearchFilters.vue b/packages/ripple-tide-search/components/TideSearchFilters.vue
@@ -19,6 +19,7 @@
             :name="filter.id"
             :modelValue="filterFormValues[filter.id]"
             v-bind="filter.props"
+            :variant="reverseStyling ? 'reverse' : 'default'"
             :options="
               filter.props?.dynamicOptions?.length
                 ? filter.props.dynamicOptions
@@ -51,6 +52,7 @@ interface Props {
   filterFormValues: Record<string, any>
   submitLabel?: string | boolean
   resetLabel?: string | boolean
+  reverseStyling?: boolean
 }
 
 const emit = defineEmits<{
@@ -60,7 +62,8 @@ const emit = defineEmits<{
 
 const props = withDefaults(defineProps<Props>(), {
   submitLabel: 'Apply search filters',
-  resetLabel: 'Clear search filters'
+  resetLabel: 'Clear search filters',
+  reverseStyling: false
 })
 
 const handleFilterReset = () => {

diff --git a/packages/ripple-tide-search/components/global/TideDataDrivenMap.vue b/packages/ripple-tide-search/components/global/TideDataDrivenMap.vue
@@ -360,8 +360,13 @@ const mapAreas = computed(() => {
 </script>
 
 <template>
-  <div>
-    <div class="tide-search-header">
+  <div class="rpl-u-margin-t-8">
+    <div
+      :class="{
+        'tide-search-header': true,
+        'tide-search-header--neutral': searchListingConfig.displayMapTab
+      }"
+    >
       <RplSearchBar
         v-if="!locationQueryConfig?.component"
         id="custom-collection-search-bar"
@@ -398,6 +403,7 @@ const mapAreas = computed(() => {
             :title="title"
             :filter-form-values="filterForm"
             :filterInputs="userFilters"
+            :reverseStyling="true"
             @reset="handleFilterReset"
             @submit="handleFilterSubmit"
           >
@@ -494,11 +500,16 @@ const mapAreas = computed(() => {
 .tide-search-header {
   display: flex;
   flex-direction: column;
-  margin-top: var(--rpl-sp-6);
 }
+
 .tide-search-header--neutral {
-  background-color: var(--rpl-clr-neutral-200);
-  padding: var(--rpl-sp-5);
+  background-color: var(--rpl-clr-neutral-100);
+  padding: var(--rpl-sp-4);
+  margin-bottom: var(--rpl-sp-4);
+
+  @media (--rpl-bp-s) {
+    padding: var(--rpl-sp-5);
+  }
 }
 
 .tide-search-filters.rpl-grid {

diff --git a/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue b/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue
@@ -3,23 +3,27 @@
     <RplSearchBar
       id="tide-address-lookup"
       inputLabel="Search by postcode or suburb"
+      :showLabel="true"
+      variant="reverse"
       :submitLabel="false"
       :inputValue="inputValue"
       :suggestions="results"
       :showNoResults="true"
       :debounce="5000"
       placeholder="Search by postcode or suburb"
-      :getSuggestionVal="(itm:any) => itm?.postcode || ''"
+      :getOptionId="(itm:any) => itm.id"
+      :getSuggestionVal="(itm:any) => itm?.locality || ''"
       @submit="submitAction"
       @update:input-value="onUpdate"
     >
       <template #suggestion="{ option: { option } }">
         <span>{{ option?.locality }}</span>
-        <RplChip
+        <RplTag
           v-if="option?.postcode"
-          class="rpl-u-margin-l-4"
           :label="option?.postcode"
-        ></RplChip>
+          variant="dark"
+          class="rpl-u-margin-l-3"
+        />
       </template>
     </RplSearchBar>
   </div>

diff --git a/packages/ripple-tide-search/components/global/TideSearchFilterDropdown.vue b/packages/ripple-tide-search/components/global/TideSearchFilterDropdown.vue
@@ -6,6 +6,7 @@ interface Props {
   label: string
   options?: any[]
   timestamp?: string | number
+  variant: 'default' | 'reverse'
 }
 defineProps<Props>()
 </script>
@@ -16,6 +17,7 @@ defineProps<Props>()
     :key="`${id}-${timestamp}`"
     :name="id"
     type="RplFormDropdown"
+    :variant="variant"
     :multiple="multiple"
     :label="label"
     :placeholder="placeholder"

diff --git a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.css b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.css
@@ -12,7 +12,9 @@
   @media (--rpl-bp-m) {
     --local-search-bar-suggestion-height: 52px;
   }
+}
 
+.rpl-search-bar__inner {
   position: relative;
 }
 
@@ -31,6 +33,11 @@
   );
 }
 
+.rpl-search-bar__label {
+  display: block;
+  margin-bottom: var(--rpl-sp-4);
+}
+
 .rpl-search-bar__input,
 .rpl-search-bar__input-wrap {
   /* rpl-type-p */