From a3ca88dbce6e87090418a70b34a0395d8ddf4b8b Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Mon, 26 Aug 2024 11:18:09 +0200
Subject: [PATCH] Fix(web-react): Filter out props falling into DOM in *Logo
 components

refs #DS-1440
---
 .../usePartnerLogoStyleProps.test.ts          | 26 ++++++++++++++-----
 .../usePartnerLogoStyleProps.ts               |  4 +--
 .../useProductLogoStyleProps.test.ts          | 10 +++++--
 .../useProductLogoStyleProps.ts               |  4 +--
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts
index 45dcafb89e..558c4f1958 100644
--- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts
+++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts
@@ -10,17 +10,31 @@ describe('usePartnerLogoStyleProps', () => {
     expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo');
   });
 
-  it.each(Object.values(Sizes))('should return %s size PartnerLogo', (size) => {
-    const props = { size };
+  describe('hasSafeAreaDisabled prop', () => {
+    const props = {
+      hasSafeAreaDisabled: true,
+    };
     const { result } = renderHook(() => usePartnerLogoStyleProps(props));
 
-    expect(result.current.classProps).toBe(`UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--${size}`);
+    it('should return hasSafeAreaDisabled class names', () => {
+      expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--hasSafeAreaDisabled');
+    });
+
+    it('should not return hasSafeAreaDisabled prop', () => {
+      expect(result.current.props).toStrictEqual({});
+    });
   });
 
-  it('should return without safe area', () => {
-    const props = { hasSafeAreaDisabled: true };
+  describe.each(Object.values(Sizes))('size prop', (size) => {
+    const props = { size };
     const { result } = renderHook(() => usePartnerLogoStyleProps(props));
 
-    expect(result.current.classProps).toBe('UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--hasSafeAreaDisabled');
+    it('should return %s size PartnerLogo', () => {
+      expect(result.current.classProps).toBe(`UNSTABLE_PartnerLogo UNSTABLE_PartnerLogo--${size}`);
+    });
+
+    it('should not return size prop', () => {
+      expect(result.current.props).toStrictEqual({});
+    });
   });
 });
diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts b/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts
index f8cea99fb6..68d2451066 100644
--- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts
+++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/usePartnerLogoStyleProps.ts
@@ -8,7 +8,7 @@ export interface PartnerLogoStyles<T> {
 }
 
 export function usePartnerLogoStyleProps(props: SpiritPartnerLogoProps): PartnerLogoStyles<SpiritPartnerLogoProps> {
-  const { size, hasSafeAreaDisabled } = props;
+  const { size, hasSafeAreaDisabled, ...restProps } = props;
 
   const partnerLogoClass = useClassNamePrefix('UNSTABLE_PartnerLogo');
   const partnerLogoSizeClass = `${partnerLogoClass}--${size}`;
@@ -20,6 +20,6 @@ export function usePartnerLogoStyleProps(props: SpiritPartnerLogoProps): Partner
 
   return {
     classProps,
-    props,
+    props: restProps,
   };
 }
diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts b/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts
index a0b698357b..3b1608fcfd 100644
--- a/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts
+++ b/packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts
@@ -9,12 +9,18 @@ describe('useProductLogoStyleProps', () => {
     expect(result.current.classProps).toBe('UNSTABLE_ProductLogo');
   });
 
-  it('should return inverted', () => {
+  describe('isInverted prop', () => {
     const props = {
       isInverted: true,
     };
     const { result } = renderHook(() => useProductLogoStyleProps(props));
 
-    expect(result.current.classProps).toBe('UNSTABLE_ProductLogo UNSTABLE_ProductLogo--inverted');
+    it('should return inverted class names', () => {
+      expect(result.current.classProps).toBe('UNSTABLE_ProductLogo UNSTABLE_ProductLogo--inverted');
+    });
+
+    it('should not return isInverted prop', () => {
+      expect(result.current.props).toStrictEqual({});
+    });
   });
 });
diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/useProductLogoStyleProps.ts b/packages/web-react/src/components/UNSTABLE_ProductLogo/useProductLogoStyleProps.ts
index 850ec340c7..025356ea7f 100644
--- a/packages/web-react/src/components/UNSTABLE_ProductLogo/useProductLogoStyleProps.ts
+++ b/packages/web-react/src/components/UNSTABLE_ProductLogo/useProductLogoStyleProps.ts
@@ -8,7 +8,7 @@ export interface ProductLogoStyles<T> {
 }
 
 export function useProductLogoStyleProps(props: SpiritProductLogoProps): ProductLogoStyles<SpiritProductLogoProps> {
-  const { isInverted } = props;
+  const { isInverted, ...restProps } = props;
 
   const productLogoClass = useClassNamePrefix('UNSTABLE_ProductLogo');
   const productLogoInvertedColorClass = `${productLogoClass}--inverted`;
@@ -18,6 +18,6 @@ export function useProductLogoStyleProps(props: SpiritProductLogoProps): Product
 
   return {
     classProps,
-    props,
+    props: restProps,
   };
 }