[CHOPS-1424] Add bottom note prop to dropdown (#2059)

* added bottomNote prop * added test
Ebury · Nov 6, 2024 · e0f3dca · e0f3dca
1 parent fea75d3
commit e0f3dca
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.16",
+  "version": "2.8.17",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

diff --git a/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.ts.snap b/src/components/ec-dropdown/__snapshots__/ec-dropdown.spec.ts.snap
@@ -475,6 +475,83 @@ exports[`EcDropdown > :props > should render given popover style when it is a fu
         
         
         
+      </ul>
+    </div>
+    
+  </ec-stub>
+</div>
+`;
+
+exports[`EcDropdown > :props > should render properly when the bottomNote prop is set 1`] = `
+<div
+  class="ec-dropdown ec-dropdown-search"
+  data-test="ec-dropdown ec-dropdown-search"
+  is-in-light-mode="false"
+>
+  <ec-stub
+    autosize="true"
+    class="ec-dropdown-search__trigger"
+    data-test="ec-popover-dropdown-search ec-stub ec-popover-stub"
+    disabled="false"
+    distance="8"
+    placement="bottom-start"
+    popperclass="ec-dropdown-search__popover"
+    shift="false"
+    shown="false"
+  >
+    
+    
+    <div
+      class="ec-input-field"
+      data-test="ec-input-field"
+    >
+      <!--v-if-->
+      <input
+        class="ec-input-field__input ec-input-field__input--bg-gray-8 ec-input-field__input--has-icon ec-input-field__input--cursor-pointer"
+        data-test="ec-dropdown__input ec-input-field__input ec-mock ec-tooltip-mock"
+        id="ec-input-field-1"
+        placeholder=""
+        readonly=""
+        type="text"
+      />
+      <!--v-if-->
+      <div
+        class="ec-input-field__icon-wrapper ec-input-field__icon-wrapper--right"
+        data-test="ec-input-field__icon-wrapper"
+      >
+        <!--v-if-->
+        <svg
+          class="ec-icon ec-input-field__icon"
+          data-test="ec-input-field__icon"
+          height="24"
+          width="24"
+        >
+          <use
+            xlink:href="#ec-simple-chevron-down"
+          />
+        </svg>
+      </div>
+      <div
+        class="ec-input-field__bottom-note"
+        data-test="ec-input-field__bottom-note"
+      >
+        Testing the bottomNote prop
+      </div>
+    </div>
+    
+    
+    
+    <div>
+      <ul
+        class="ec-dropdown-search__item-list"
+        data-test="ec-dropdown-search__item-list"
+      >
+        <!--v-if-->
+        <!--v-if-->
+        
+        
+        
+        
       </ul>
     </div>
     

diff --git a/src/components/ec-dropdown/ec-dropdown.spec.ts b/src/components/ec-dropdown/ec-dropdown.spec.ts
@@ -122,6 +122,11 @@ describe('EcDropdown', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
+    it('should render properly when the bottomNote prop is set', () => {
+      const wrapper = mountDropdown({ bottomNote: 'Testing the bottomNote prop' });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
     it('should render given popover style', () => {
       const wrapper = mountDropdown({ popoverStyle: { width: '1234px' } });
       expect(wrapper.element).toMatchSnapshot();

diff --git a/src/components/ec-dropdown/ec-dropdown.story.ts b/src/components/ec-dropdown/ec-dropdown.story.ts
@@ -104,6 +104,7 @@ basic.args = {
   disabled: false,
   isSensitive: false,
   errorMessage: '',
+  bottomNote: '',
   modelValue: undefined,
 };
 

diff --git a/src/components/ec-dropdown/ec-dropdown.vue b/src/components/ec-dropdown/ec-dropdown.vue
@@ -41,6 +41,7 @@
       :icon="isDropdownOpen ? IconName.SIMPLE_CHEVRON_UP : IconName.SIMPLE_CHEVRON_DOWN"
       :is-in-group="isInGroup"
       :bg-color-level="(isInLightMode && !isDropdownOpen) ? 7 : 8"
+      :bottom-note="bottomNote"
       :show-pointer-cursor="true"
       :show-input-tooltip="true"
       @focus="onFocus"
@@ -103,6 +104,7 @@ const props = withDefaults(defineProps<DropdownProps<TValue, TDropdownItem>>(),
   searchPlaceholder: 'Search...',
   noResultsText: 'No results found',
   tooltipCta: '',
+  bottomNote: '',
   isInLightMode: false,
 });
 

diff --git a/src/components/ec-dropdown/types.ts b/src/components/ec-dropdown/types.ts
@@ -10,6 +10,7 @@ export interface DropdownProps<TValue = string, TDropdownItem extends DropdownIt
   label?: string,
   labelTooltip?: string,
   errorMessage?: string,
+  bottomNote?: string,
   isInGroup?: 'left' | 'right',
   isInLightMode?: boolean,
 }