feat(@dpc-sdp/ripple-tide-search): use tag in search bar and fix keyb…

…oard controls
dpc-sdp · Dec 6, 2023 · 2120448 · 2120448
1 parent 38acf22
commit 2120448
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue b/packages/ripple-tide-search/components/global/TideSearchAddressLookup.vue
@@ -11,17 +11,19 @@
       :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-ui-core/src/components/search-bar/RplSearchBar.vue b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue
@@ -26,7 +26,8 @@ interface Props {
   globalEvents?: boolean
   showNoResults?: boolean
   getSuggestionVal?: (item: any) => string
-  getOptionLabel?: Function
+  getOptionLabel?: (item: any) => string
+  getOptionId?: (item: any) => string
   isOptionSelectable?: Function
   showLabel?: boolean
 }
@@ -43,7 +44,8 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: '',
   globalEvents: true,
   getSuggestionVal: (item) => item,
-  getOptionLabel: (opt) => opt.toString(),
+  getOptionLabel: (opt) => opt,
+  getOptionId: (opt) => opt,
   isOptionSelectable: (opt) => true,
   showLabel: false
 })
@@ -126,7 +128,7 @@ const handleSelectOption = (optionValue: any, focusBackOnInput) => {
 }
 
 const getDefaultActiveId = (): string => {
-  return props.suggestions[0]
+  return props.getOptionId(props.suggestions[0])
 }
 
 const handleOpen = (fromKeyboard = false): void => {
@@ -146,27 +148,31 @@ const handleClose = (focusBackOnInput = false): void => {
   }
 }
 
-const handleArrowUp = () => {
+const handleArrowDown = () => {
   const currentActiveIndex = props.suggestions.findIndex(
-    (opt) => opt === activeOptionId.value
+    (opt) => props.getOptionId(opt) === activeOptionId.value
   )
 
   if (currentActiveIndex < 0) {
     activeOptionId.value = getDefaultActiveId()
   } else if (currentActiveIndex < props.suggestions.length - 1) {
-    activeOptionId.value = props.suggestions[currentActiveIndex + 1]
+    activeOptionId.value = props.getOptionId(
+      props.suggestions[currentActiveIndex + 1]
+    )
   }
 }
 
-const handleArrowDown = () => {
+const handleArrowUp = () => {
   const currentActiveIndex = props.suggestions.findIndex(
-    (opt) => opt === activeOptionId.value
+    (opt) => props.getOptionId(opt) === activeOptionId.value
   )
 
   if (currentActiveIndex < 0) {
     activeOptionId.value = getDefaultActiveId()
   } else if (currentActiveIndex > 0) {
-    activeOptionId.value = props.suggestions[currentActiveIndex - 1]
+    activeOptionId.value = props.getOptionId(
+      props.suggestions[currentActiveIndex - 1]
+    )
   }
 }
 
@@ -230,7 +236,9 @@ watch(activeOptionId, async (newId) => {
   }
 })
 
-const slug = (label: string) => label.toLowerCase().replace(/[^\w-]+/g, '-')
+const slug = (label: string) => {
+  label.toLowerCase().replace(/[^\w-]+/g, '-')
+}
 </script>
 
 <template>
@@ -254,8 +262,8 @@ const slug = (label: string) => label.toLowerCase().replace(/[^\w-]+/g, '-')
       <div
         ref="containerRef"
         class="rpl-search-bar__input-wrap"
-        @keydown.down.prevent="handleArrowUp"
-        @keydown.up.prevent="handleArrowDown"
+        @keydown.up.prevent="handleArrowUp"
+        @keydown.down.prevent="handleArrowDown"
         @keydown.esc.prevent="handleClose(true)"
         @keydown.exact.tab="handleClose(false)"
         @keydown.shift.tab="handleClose(false)"
@@ -308,16 +316,16 @@ const slug = (label: string) => label.toLowerCase().replace(/[^\w-]+/g, '-')
         >
           <div
             v-for="option in suggestions"
-            :id="slug(getOptionLabel(option))"
-            :key="`opt-${slug(getOptionLabel(option))}`"
+            :id="slug(getOptionId(option))"
+            :key="`opt-${slug(getOptionId(option))}`"
             ref="optionRefs"
-            :data-option-id="getOptionLabel(option)"
+            :data-option-id="getOptionId(option)"
             :role="isOptionSelectable(option) ? 'option' : null"
             :class="{
               'rpl-search-bar__menu-option': true,
               'rpl-u-focusable-block': true,
               'rpl-u-focusable--force-on': isMenuItemKeyboardFocused(
-                slug(getOptionLabel(option))
+                getOptionId(option)
               )
             }"
             tabindex="-1"

diff --git a/packages/ripple-ui-core/src/components/tag/RplTag.css b/packages/ripple-ui-core/src/components/tag/RplTag.css
@@ -12,6 +12,10 @@
     --rpl-tag-bg-clr: var(--rpl-clr-neutral-100);
   }
 
+  &--dark {
+    --rpl-tag-bg-clr: var(--rpl-clr-neutral-200);
+  }
+
   & + & {
     margin-left: var(--rpl-sp-3);
   }

diff --git a/packages/ripple-ui-core/src/components/tag/RplTag.vue b/packages/ripple-ui-core/src/components/tag/RplTag.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type RplTagVariants = ['default', 'neutral']
+type RplTagVariants = ['default', 'neutral', 'dark']
 
 interface Props {
   variant?: RplTagVariants[number]
@@ -13,7 +13,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <span :className="`rpl-tag rpl-tag--${variant} rpl-type-label-small`">{{
+  <span :class="`rpl-tag rpl-tag--${variant} rpl-type-label-small`">{{
     label
   }}</span>
 </template>