Fix(web-react): Filter out props falling into DOM in *Logo components

refs #DS-1440
lmc-eu · Aug 26, 2024 · a3ca88d · a3ca88d
1 parent ef34f64
commit a3ca88d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/.../web-react/src/components/UNSTABLE_PartnerLogo/__tests__/usePartnerLogoStyleProps.test.ts b/.../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
@@ -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/.../web-react/src/components/UNSTABLE_ProductLogo/__tests__/useProductLogoStyleProps.test.ts b/.../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
@@ -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,
   };
 }