fixup! Feat(web-react): Add spacing property to Tabs component #DS-1315

lmc-eu · Aug 6, 2024 · 92ef7a2 · 92ef7a2
1 parent 361b7c5
commit 92ef7a2
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 24 deletions.
diff --git a/packages/web-react/src/components/Stack/useStackStyleProps.ts b/packages/web-react/src/components/Stack/useStackStyleProps.ts
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { CSSProperties, ElementType } from 'react';
 import { useClassNamePrefix } from '../../hooks';
+import { useSpacingStyle } from '../../hooks/useSpacingStyle';
 import { SpiritStackProps } from '../../types';
 
 interface StackCSSProperties extends CSSProperties {
@@ -31,18 +32,7 @@ export function useStackStyleProps<T extends ElementType = 'div'>(props: SpiritS
     [StackTopDividerClass]: hasStartDivider,
   });
 
-  const stackStyle: StackCSSProperties = {};
-
-  if (typeof spacing === 'object' && spacing !== null) {
-    Object.keys(spacing).forEach((key) => {
-      const suffix = key === 'mobile' ? '' : `-${key}`;
-      (stackStyle as Record<string, string | undefined>)[`--stack-spacing${suffix}`] = `var(--spirit-${spacing[
-        key as keyof typeof spacing
-      ]?.toString()})`;
-    });
-  } else if (spacing) {
-    (stackStyle as Record<string, string | undefined>)['--stack-spacing'] = `var(--spirit-${spacing})`;
-  }
+  const stackStyle = useSpacingStyle(spacing, 'stack');
 
   return {
     classProps,

diff --git a/packages/web-react/src/components/Tabs/useTabsStyleProps.ts b/packages/web-react/src/components/Tabs/useTabsStyleProps.ts
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { CSSProperties } from 'react';
 import { useClassNamePrefix } from '../../hooks';
+import { useSpacingStyle } from '../../hooks/useSpacingStyle';
 import { SpiritTabsProps } from '../../types';
 import { useTabContext } from './TabContext';
 
@@ -31,18 +32,7 @@ export function useTabsStyleProps(props: SpiritTabsProps = { selectedId: '', for
   const tabsPaneClass = `${tabsClass}Pane`;
   const tabsSelectedClass = 'is-selected';
 
-  const tabsStyle: TabsCSSProperties = {};
-
-  if (typeof spacing === 'object' && spacing !== null) {
-    Object.keys(spacing).forEach((key) => {
-      const suffix = key === 'mobile' ? '' : `-${key}`;
-      (tabsStyle as Record<string, string | undefined>)[`--tabs-spacing${suffix}`] = `var(--spirit-${spacing[
-        key as keyof typeof spacing
-      ]?.toString()})`;
-    });
-  } else if (spacing) {
-    (tabsStyle as Record<string, string | undefined>)['--tabs-spacing'] = `var(--spirit-${spacing})`;
-  }
+  const tabsStyle = useSpacingStyle(spacing, 'tabs');
 
   return {
     classProps: {

diff --git a/packages/web-react/src/hooks/__tests__/useSpacingStyles.test.ts b/packages/web-react/src/hooks/__tests__/useSpacingStyles.test.ts
@@ -0,0 +1,39 @@
+import { renderHook } from '@testing-library/react';
+import { ComponentSpacingProps } from '../../types/shared';
+import { useSpacingStyle } from '../useSpacingStyle';
+
+describe('useSpacingStyles', () => {
+  it('should process spacing if spacing is an object', () => {
+    const mockProps = {
+      mobile: 'space-100',
+      tablet: 'space-200',
+      desktop: 'space-300',
+    };
+
+    const { result } = renderHook(() => useSpacingStyle(mockProps as ComponentSpacingProps, 'test-prefix'));
+
+    expect(result.current).toEqual({
+      '--test-prefix-spacing': 'var(--spirit-space-100)',
+      '--test-prefix-spacing-tablet': 'var(--spirit-space-200)',
+      '--test-prefix-spacing-desktop': 'var(--spirit-space-300)',
+    });
+  });
+
+  it('should process if spacing is a string', () => {
+    const mockProps = 'space-100';
+
+    const { result } = renderHook(() => useSpacingStyle(mockProps as ComponentSpacingProps, 'test-prefix'));
+
+    expect(result.current).toEqual({
+      '--test-prefix-spacing': 'var(--spirit-space-100)',
+    });
+  });
+
+  it('should process if spacing is undefined', () => {
+    const mockProps = undefined;
+
+    const { result } = renderHook(() => useSpacingStyle(mockProps as ComponentSpacingProps | undefined, 'test-prefix'));
+
+    expect(result.current).toEqual({});
+  });
+});
diff --git a/packages/web-react/src/hooks/useSpacingStyle.ts b/packages/web-react/src/hooks/useSpacingStyle.ts
@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+import { ComponentSpacingProps } from '../types';
+
+interface SpacingCSSProperties extends CSSProperties {
+  [index: `--${string}`]: string | undefined | number;
+}
+
+export function useSpacingStyle(spacing: ComponentSpacingProps | undefined, prefix: string): SpacingCSSProperties {
+  const style: SpacingCSSProperties = {};
+
+  if (typeof spacing === 'object' && spacing !== null) {
+    Object.keys(spacing).forEach((key) => {
+      const suffix = key === 'mobile' ? '' : `-${key}`;
+      (style as Record<string, string | undefined>)[`--${prefix}-spacing${suffix}`] = `var(--spirit-${spacing[
+        key as keyof typeof spacing
+      ]?.toString()})`;
+    });
+  } else if (spacing) {
+    (style as Record<string, string | undefined>)[`--${prefix}-spacing`] = `var(--spirit-${spacing})`;
+  }
+
+  return style;
+}