[CHUX-661] Add prop to ec-letter-icon to control hover styles (#1980)

* [CHUX-661] add missing exports

* [CHUX-661] add prop and styles

* [CHUX-661] add unit test

* 2.8.10

* [CHUX-661] rename prop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.9",
+  "version": "2.8.10",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-letter-icon/ec-letter-icon.spec.ts

@@ -70,4 +70,14 @@ describe('EcLetterIcon', () => {
     expect(container.element.tagName).toContain('BUTTON');
     expect(container.classes()).toContain('ec-letter-icon--clickable');
   });
+
+  it('should add hover styles if "isParentHovered" prop is set', () => {
+    const wrapper = mountLetterIcon({
+      text: 'Test',
+      isParentHovered: true,
+    });
+
+    const container = wrapper.findByDataTest('ec-letter-icon');
+    expect(container.classes()).toContain('ec-letter-icon--hover-styles');
+  });
 });

src/components/ec-letter-icon/ec-letter-icon.vue

@@ -6,6 +6,7 @@
     class="ec-letter-icon"
     :class="{
       'ec-letter-icon--clickable': isClickable,
+      'ec-letter-icon--hover-styles': isParentHovered,
       [`ec-letter-icon--${size}`]: true,
     }"
   >
@@ -26,6 +27,7 @@ import { type LetterIconProps, LetterIconSize } from './types';
 const props = withDefaults(defineProps<LetterIconProps>(), {
   size: LetterIconSize.SMALL,
   isClickable: false,
+  isParentHovered: false,
 });
 
 const firstLetter = computed(() => (props.text[0]?.toUpperCase()));
@@ -55,11 +57,15 @@ const firstLetter = computed(() => (props.text[0]?.toUpperCase()));
     @apply tw-cursor-pointer tw-border-0 tw-p-0;
 
     &:hover {
-      @apply tw-bg-gray-2;
+      @apply ec-letter-icon--hover-styles;
+    }
+  }
+
+  &--hover-styles {
+    @apply tw-bg-gray-2;
 
-      .ec-letter-icon__text {
-        @apply tw-text-gray-7;
-      }
+    .ec-letter-icon__text {
+      @apply tw-text-gray-7;
     }
   }
 }

src/components/ec-letter-icon/types.ts

@@ -2,6 +2,7 @@ export interface LetterIconProps {
   text: string,
   size?: LetterIconSize,
   isClickable?: boolean,
+  isParentHovered?: boolean,
 }
 
 export enum LetterIconSize {