Introduced showShadowFrom Prop for Header Box Shadow Control

A new optional property, showShadowFrom, has been added to enhance the header component's flexibility. This property allows for the dynamic management of the header's box shadow, enabling developers to specify conditions under which the shadow should appear. This addition is aimed at providing more control over the visual styling of the header, catering to diverse design requirements and improving the user interface's adaptability.

Author: Hector Arce De Las Heras

src/components/header/header.tsx

@@ -6,17 +6,23 @@ import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
 import { HeaderStandAlone } from './headerStandAlone';
+import { useHeaderShadow } from './hook/useHeaderShadow';
 import { HeaderPropsStylesType, IHeader, IHeaderStandAlone } from './types';
 
 const HeaderComponent = React.forwardRef(
   <V extends string | unknown>(
-    { variant, ctv, ...props }: IHeader<V>,
+    { variant, ctv, showShadowFrom, ...props }: IHeader<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
     const styles = useStyles<HeaderPropsStylesType, V>(STYLES_NAME.HEADER, variant, ctv);
     const device = useMediaDevice();
+    const { box_shadow } = styles?.container?.scrollShadow || {};
+    const { headerRef } = useHeaderShadow({
+      ref,
+      shadow: { boxShadow: box_shadow, showShadowFrom },
+    });
 
-    return <HeaderStandAlone {...props} ref={ref} device={device} styles={styles} />;
+    return <HeaderStandAlone {...props} ref={headerRef} device={device} styles={styles} />;
   }
 );
 HeaderComponent.displayName = 'HeaderComponent';

src/components/header/hook/__tests__/useHeaderShadow.test.tsx

@@ -0,0 +1,59 @@
+import { fireEvent } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import React, { createRef } from 'react';
+
+import { useHeaderShadow } from '../useHeaderShadow';
+
+const mockRef = {
+  current: {
+    style: {
+      setProperty: jest.fn(),
+      removeProperty: jest.fn(),
+    },
+  },
+};
+
+describe('useHeaderShadow', () => {
+  beforeAll(() => {
+    window.innerHeight = 100;
+  });
+  it('should return a ref', () => {
+    const { result } = renderHook(() => useHeaderShadow({ ref: undefined, shadow: {} }));
+    expect(result.current.headerRef).toBeDefined();
+  });
+
+  it('should no set box-shadow when shadow is not defined', () => {
+    const innerRefMock = jest.spyOn(React, 'useRef').mockReturnValue(mockRef);
+    const ref = createRef<HTMLDivElement>();
+
+    renderHook(() => useHeaderShadow({ ref, shadow: {} }));
+
+    expect(mockRef.current.style.removeProperty).toHaveBeenCalledWith('top');
+    expect(mockRef.current.style.removeProperty).toHaveBeenCalledWith('position');
+
+    innerRefMock.mockRestore();
+  });
+
+  it('should set box-shadow style when scroll percentage is greater than showShadowFrom', () => {
+    const innerRefMock = jest.spyOn(React, 'useRef').mockReturnValue(mockRef);
+    const documentBodyScrollHeight = jest
+      .spyOn(document.body, 'scrollHeight', 'get')
+      .mockReturnValue(100);
+    const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+    const ref = createRef<HTMLDivElement>();
+
+    renderHook(() =>
+      useHeaderShadow({
+        ref,
+        shadow: { showShadowFrom: 10, boxShadow: '10px 5px 5px black' },
+      })
+    );
+
+    fireEvent.scroll(window, { scrollY: 15 });
+
+    expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+    addEventListenerSpy.mockRestore();
+    innerRefMock.mockRestore();
+    documentBodyScrollHeight.mockRestore();
+  });
+});

src/components/header/hook/useHeaderShadow.ts

@@ -0,0 +1,59 @@
+import { ForwardedRef, Ref, useEffect, useImperativeHandle, useRef } from 'react';
+
+type HeaderShadowType = {
+  boxShadow?: string;
+  showShadowFrom?: number;
+};
+
+type HeaderShadowProps = {
+  ref: ForwardedRef<HTMLDivElement> | undefined;
+  shadow?: HeaderShadowType;
+};
+
+type HeaderShadowReturnValues = {
+  headerRef: Ref<HTMLDivElement> | undefined;
+};
+
+export const useHeaderShadow = ({ ref, shadow }: HeaderShadowProps): HeaderShadowReturnValues => {
+  const headerRef = useRef<HTMLElement | null>(null);
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return headerRef?.current as HTMLDivElement;
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!headerRef.current) {
+      return;
+    }
+    if (!shadow?.showShadowFrom || !shadow.boxShadow) {
+      headerRef.current.style.removeProperty('top');
+      headerRef.current.style.removeProperty('position');
+      return;
+    }
+
+    const header = headerRef.current;
+    const { showShadowFrom, boxShadow } = shadow;
+    header.style.setProperty('top', '0');
+    header.style.setProperty('position', 'sticky');
+
+    const handleScroll = () => {
+      const scrollPercentage = (window.scrollY / document.body.scrollHeight) * 100;
+      if (scrollPercentage >= showShadowFrom) {
+        header.style.setProperty('box-shadow', boxShadow);
+      } else {
+        header.style.removeProperty('box-shadow');
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [shadow]);
+
+  return { headerRef: headerRef as Ref<HTMLDivElement> | undefined };
+};

src/components/header/stories/argtypes.ts

@@ -66,6 +66,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.TESTING,
       },
     },
+    showShadowFrom: {
+      description: 'Percentage number to display component shadow',
+      control: { type: 'number' },
+      type: { name: 'number' },
+      table: {
+        type: {
+          summary: 'number',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     ctv: {
       description: 'Object used for update variant styles',
       type: { name: 'object' },

src/components/header/types/header.ts

@@ -12,6 +12,7 @@ export interface IHeaderStandAlone {
   crumbs?: CrumbType[];
   device: DeviceBreakpointsType;
   dataTestId?: string;
+  showShadowFrom?: number;
 }
 
 export interface IHeader<V = undefined extends string ? unknown : string>

src/components/header/types/headerTheme.ts

@@ -5,7 +5,7 @@ export type HeaderPropsStyles = {
 };
 
 export type HeaderPropsStylesType = {
-  container?: CommonStyleType;
+  container?: CommonStyleType & { scrollShadow?: Pick<CommonStyleType, 'box_shadow'> };
   breadcrumbs?: CommonStyleType;
   content?: CommonStyleType;
   leftContent?: CommonStyleType;