feat(@dpc-sdp/ripple-ui-core): ✨ add debounce option to search bar

dpc-sdp · Aug 2, 2023 · 2badcc4 · 2badcc4
1 parent e26c8ba
commit 2badcc4
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 16 deletions.
diff --git a/packages/ripple-ui-core/package.json b/packages/ripple-ui-core/package.json
@@ -41,6 +41,7 @@
     "storybook:build": "build-storybook",
     "stylelint": "stylelint \"**/*.css\"",
     "test:components": "cypress run --component",
+    "cy:components": "cypress open --component",
     "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
   },
   "dependencies": {

diff --git a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.cy.ts b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.cy.ts
@@ -0,0 +1,20 @@
+import RplSearchBar from './RplSearchBar.vue'
+import { mockSuggestions } from './fixtures'
+
+const baseProps = {
+  suggestions: mockSuggestions,
+  id: '1234'
+}
+
+describe('RplSearchBar', () => {
+  it('opens', () => {
+    cy.mount(RplSearchBar, {
+      props: {
+        ...baseProps
+      }
+    })
+    cy.get('#1234__menu').should('not.exist')
+    cy.get('input#1234').click()
+    cy.get('#1234__menu').should('exist')
+  })
+})
diff --git a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.stories.mdx b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.stories.mdx
@@ -7,24 +7,19 @@ import {
 import RplSearchBar from './RplSearchBar.vue'
 import { a11yStoryCheck } from './../../../stories/interactions.js'
 import { action } from '@storybook/addon-actions';
+import { mockSuggestions } from './fixtures'
 
 export const SingleTemplate = (args) => ({
   components: { RplSearchBar },
   setup() {
-    return { args }
+    return {
+      args,
+      callAction: action
+    }
   },
   data: () => ({ inputValue: null }),
   computed: {
     suggestions() {
-      const mockSuggestions = [
-        'rip',
-        'ripe',
-        'ripen',
-        'riptide',
-        'ripple',
-        'ripple component',
-        'ripple components',
-      ]
       if (!this.inputValue) {
         return []
       }
@@ -36,6 +31,7 @@ export const SingleTemplate = (args) => ({
     submitAction: action('onSubmit'),
     onUpdate: function(val) {
       this.inputValue = val
+      action('onUpdate')(val)
     }
   }
 })
@@ -95,4 +91,13 @@ export const SingleTemplate = (args) => ({
   >
     {SingleTemplate.bind()}
   </Story>
+  <Story
+    name='Debounced update'
+    play={a11yStoryCheck}
+    args={{
+      id: 'default'
+    }}
+  >
+    {SingleTemplate.bind()}
+  </Story>
 </Canvas>
diff --git a/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue b/packages/ripple-ui-core/src/components/search-bar/RplSearchBar.vue
@@ -4,7 +4,7 @@ export default { inheritAttrs: false }
 
 <script setup lang="ts">
 import { ref, watch, nextTick, computed, onMounted, onUnmounted } from 'vue'
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useDebounceFn } from '@vueuse/core'
 import RplIcon from '../icon/RplIcon.vue'
 import {
   useRippleEvent,
@@ -22,6 +22,7 @@ interface Props {
   suggestions?: string[]
   maxSuggestionsDisplayed?: number
   placeholder?: string
+  debounce?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +33,8 @@ const props = withDefaults(defineProps<Props>(), {
   inputValue: '',
   suggestions: () => [],
   maxSuggestionsDisplayed: 10,
-  placeholder: undefined
+  placeholder: undefined,
+  debounce: 300
 })
 
 const emit = defineEmits<{
@@ -84,12 +86,11 @@ const handleSubmit = () => {
   )
 }
 
-const handleInputChange = (e) => {
+const handleInputChange = useDebounceFn((e) => {
   internalValue.value = e.target.value
   emit('update:inputValue', e.target.value)
-
   isOpen.value = true
-}
+}, props.debounce)
 
 const handleSelectOption = (optionValue, focusBackOnInput) => {
   if (focusBackOnInput) {
@@ -274,7 +275,9 @@ watch(activeOptionId, async (newId) => {
           @click="handleSelectOption(option, false)"
           @keydown="handleKeydown"
         >
-          {{ option }}
+          <slot name="suggestion" :option="{ option }">
+            {{ option }}
+          </slot>
         </div>
       </div>
     </div>

diff --git a/packages/ripple-ui-core/src/components/search-bar/fixtures/index.ts b/packages/ripple-ui-core/src/components/search-bar/fixtures/index.ts
@@ -0,0 +1,9 @@
+export const mockSuggestions = [
+  'rip',
+  'ripe',
+  'ripen',
+  'riptide',
+  'ripple',
+  'ripple components',
+  'ripple component'
+]