fixup! fixup! fixup! fixup! fixup! Feat(web-react): Introduce spacing…

… style props to all components #DS-475
lmc-eu · Jan 18, 2024 · 1f7f5d8 · 1f7f5d8
1 parent 55005df
commit 1f7f5d8
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/packages/web-react/src/hooks/useStyleUtilities.ts b/packages/web-react/src/hooks/useStyleUtilities.ts
@@ -22,26 +22,26 @@ const processBreakpointProperties = (
   propValue: Partial<Record<BreakpointToken, SpaceToken | StyleSpacingAuto>>,
   prefix: string | null | undefined,
   accumulatedUtilities: string[] = [],
-) => {
-  return Object.keys(propValue).reduce((accumulatedBreakpointUtilities: string[], breakpoint: string) => {
+) =>
+  Object.keys(propValue).reduce((accumulatedBreakpointUtilities: string[], breakpoint: string) => {
     const breakpointValue = propValue[breakpoint as keyof typeof propValue];
     const utilityValue = normalizeSpacingValue(breakpointValue as string);
     const infix = breakpoint === BREAKPOINT_MOBILE ? '' : `-${breakpoint}`;
     accumulatedBreakpointUtilities.push(applyClassNamePrefix(prefix)(`${utilityName}${infix}-${utilityValue}`));
 
     return accumulatedBreakpointUtilities;
   }, accumulatedUtilities);
-};
 
 export function useStyleUtilities(props: StyleProps, prefix: string | null | undefined = ''): StyleUtilitiesResult {
-  const entries = Object.entries(props);
-  const styleUtilities = entries.reduce((accumulatedUtilities: string[], [key, propValue]) => {
+  const propEntries = Object.entries(props);
+  const styleUtilities = propEntries.reduce((accumulatedUtilities: string[], [key, propValue]) => {
     if (Object.keys(SpacingStyleProp).includes(key)) {
       const utilityName = SpacingStyleProp[key as keyof typeof SpacingStyleProp];
 
       if (typeof propValue === 'object' && propValue !== null) {
         return [...accumulatedUtilities, ...processBreakpointProperties(utilityName, propValue, prefix)];
       }
+
       if (propValue) {
         const utilityValue = normalizeSpacingValue(propValue as string);
 
@@ -52,7 +52,7 @@ export function useStyleUtilities(props: StyleProps, prefix: string | null | und
     return accumulatedUtilities;
   }, []);
 
-  const updatedProps = entries.reduce((accumulatedProps: StyleProps, [key, propValue]) => {
+  const updatedProps = propEntries.reduce((accumulatedProps: StyleProps, [key, propValue]) => {
     if (!Object.keys(SpacingStyleProp).includes(key)) {
       return { ...accumulatedProps, [key]: propValue };
     }

diff --git a/packages/web-react/tests/providerTests/stylePropsTest.tsx b/packages/web-react/tests/providerTests/stylePropsTest.tsx
@@ -53,4 +53,44 @@ export const stylePropsTest = (Component: ComponentType<any>, testId?: string) =
 
     consoleWarnMock.mockRestore();
   });
+
+  it.each([
+    [{ margin: 'space-100' }, { className: 'm-100' }],
+    [
+      { margin: { mobile: 'space-100', tablet: 'space-200', desktop: 'space-300' } },
+      { className: 'm-100 m-tablet-200 m-desktop-300' },
+    ],
+    [{ marginX: { mobile: 'auto', desktop: 'space-300' } }, { className: 'mx-auto mx-desktop-300' }],
+    [
+      {
+        margin: 'space-100',
+        marginTop: 'space-200',
+        marginRight: 'space-300',
+        marginBottom: 'space-400',
+        marginLeft: 'space-500',
+        marginX: 'space-600',
+        marginY: 'space-700',
+      },
+      { className: 'm-100 mt-200 mr-300 mb-400 ml-500 mx-600 my-700' },
+    ],
+    [
+      {
+        margin: 'auto',
+        marginTop: 'auto',
+        marginRight: 'auto',
+        marginBottom: 'auto',
+        marginLeft: 'auto',
+        marginX: 'auto',
+        marginY: 'auto',
+      },
+      { className: 'm-auto mt-auto mr-auto mb-auto ml-auto mx-auto my-auto' },
+    ],
+  ])('renders margin props', async (props, expected) => {
+    const dom = render(<Component {...props} />);
+
+    await waitFor(() => {
+      const element = getElement(dom, testId);
+      expect(element).toHaveClass(expected.className);
+    });
+  });
 };