Feat(web-react): Refactor Footer to set padding via style props #DS-1580

Author: curdaj

packages/web-react/src/components/Footer/Footer.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'classnames';
 import React from 'react';
-import { BackgroundColors } from '../../constants';
+import { BackgroundColors, PaddingStyleProps } from '../../constants';
 import { useStyleProps } from '../../hooks';
 import { SpiritFooterProps } from '../../types';
 import { PADDING_BOTTOM, PADDING_TOP } from './constants';
@@ -16,12 +16,15 @@ const defaultStyleProps: Partial<SpiritFooterProps> = {
 
 const Footer = (props: SpiritFooterProps) => {
   const propsWithDefaults = { ...defaultStyleProps, ...props };
-  const { children, backgroundColor, paddingBottom, paddingTop, ...restProps } = propsWithDefaults;
-  const { classProps } = useFooterStyleProps({ backgroundColor, paddingBottom, paddingTop });
-  const { styleProps, props: otherProps } = useStyleProps(restProps);
+  const { children, backgroundColor, ...restProps } = propsWithDefaults;
+  const { classProps } = useFooterStyleProps({ backgroundColor });
+  const { styleProps, props: otherProps } = useStyleProps(restProps, {
+    paddingBottom: PaddingStyleProps.paddingBottom,
+    paddingTop: PaddingStyleProps.paddingTop,
+  });
 
   return (
-    <footer {...styleProps} {...otherProps} className={classNames(classProps, styleProps.className)}>
+    <footer {...otherProps} {...styleProps} className={classNames(classProps, styleProps.className)}>
       {children}
     </footer>
   );

packages/web-react/src/components/Footer/__tests__/useFooterStyleProps.test.ts

@@ -0,0 +1,21 @@
+import { renderHook } from '@testing-library/react';
+import { SpiritFooterProps } from '../../../types';
+import { useFooterStyleProps } from '../useFooterStyleProps';
+
+describe('useFooterStyleProps', () => {
+  it('should return defaults', () => {
+    const props: SpiritFooterProps = {};
+    const { result } = renderHook(() => useFooterStyleProps(props));
+
+    expect(result.current.classProps).toBe('');
+  });
+
+  it('should return background classProps', () => {
+    const props: SpiritFooterProps = {
+      backgroundColor: 'secondary',
+    };
+    const { result } = renderHook(() => useFooterStyleProps(props));
+
+    expect(result.current.classProps).toBe('bg-secondary');
+  });
+});

packages/web-react/src/components/Footer/useFooterStyleProps.ts

@@ -6,16 +6,11 @@ export interface UseFooterStyleProps {
 }
 
 export function useFooterStyleProps(props: Partial<SpiritFooterProps>): UseFooterStyleProps {
-  const { backgroundColor, paddingBottom, paddingTop } = props;
-
+  const { backgroundColor } = props;
   const footerBackgroundColor = backgroundColor ? `bg-${backgroundColor}` : '';
-  const footerPaddingBottom = paddingBottom ? paddingBottom.replace('space-', 'pb-') : '';
-  const footerPaddingTop = paddingTop ? paddingTop.replace('space-', 'pt-') : '';
 
   const classProps = classNames({
     [footerBackgroundColor]: backgroundColor,
-    [footerPaddingBottom]: paddingBottom,
-    [footerPaddingTop]: paddingTop,
   });
 
   return {