From e0f3dcaba63a689345e83a75746994268f9eb930 Mon Sep 17 00:00:00 2001
From: corinaper <corina.perjan@ebury.com>
Date: Wed, 6 Nov 2024 13:23:46 +0100
Subject: [PATCH] [CHOPS-1424]  Add bottom note prop to dropdown (#2059)

* added bottomNote prop

* added test
---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 .../__snapshots__/ec-dropdown.spec.ts.snap    | 77 +++++++++++++++++++
 .../ec-dropdown/ec-dropdown.spec.ts           |  5 ++
 .../ec-dropdown/ec-dropdown.story.ts          |  1 +
 src/components/ec-dropdown/ec-dropdown.vue    |  2 +
 src/components/ec-dropdown/types.ts           |  1 +
 7 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bdb98baef..bc300066c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.16",
+  "version": "2.8.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ebury/chameleon-components",
-      "version": "2.8.16",
+      "version": "2.8.17",
       "license": "MIT",
       "dependencies": {
         "@vueuse/core": "10.9.0",
diff --git a/package.json b/package.json
index 846ba8b78..b67018740 100644
--- 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
index 20c9fc107..f8c381437 100644
--- 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
index ed2ac1879..269680b05 100644
--- 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
index bba11254f..a5a22509a 100644
--- 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
index ff9e7f303..c3d4b96bf 100644
--- 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
index 4bd6a9a63..6dcfb7595 100644
--- 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,
 }