fixup! fixup! fixup! fixup! fixup! Feat(web-react): Add spacing pro…

…perty to `Grid` #DS-1388
lmc-eu · Aug 1, 2024 · c78d7a9 · c78d7a9
1 parent 4b21403
commit c78d7a9
Showing 1 changed file with 70 additions and 0 deletions.
diff --git a/packages/web-react/src/components/Grid/__tests__/useGridStyleProps.test.tsx b/packages/web-react/src/components/Grid/__tests__/useGridStyleProps.test.tsx
@@ -16,4 +16,74 @@ describe('useGridStyleProps', () => {
 
     expect(result.current.classProps).toBe('Grid Grid--cols-2 Grid--tablet--cols-4 Grid--desktop--cols-12');
   });
+
+  it.each([
+    // spacing, spacingX, spacingY, expectedStyle
+    [undefined, undefined, undefined, {}],
+    [
+      'space-100',
+      undefined,
+      undefined,
+      { '--grid-spacing-x': 'var(--spirit-space-100)', '--grid-spacing-y': 'var(--spirit-space-100)' },
+    ],
+    [undefined, 'space-100', undefined, { '--grid-spacing-x': 'var(--spirit-space-100)' }],
+    [undefined, undefined, 'space-100', { '--grid-spacing-y': 'var(--spirit-space-100)' }],
+  ])('should return spacing CSS properties', (spacing, spacingX, spacingY, expectedStyle) => {
+    const props: SpiritGridProps = { spacing, spacingX, spacingY } as SpiritGridProps;
+    const { result } = renderHook(() => useGridStyleProps(props));
+
+    expect(result.current.styleProps).toEqual(expectedStyle);
+  });
+
+  it.each([
+    // spacing, spacingX, spacingY, expectedStyle
+    [
+      { tablet: 'space-100' },
+      undefined,
+      undefined,
+      { '--grid-spacing-x-tablet': 'var(--spirit-space-100)', '--grid-spacing-y-tablet': 'var(--spirit-space-100)' },
+    ],
+    [undefined, { tablet: 'space-100' }, undefined, { '--grid-spacing-x-tablet': 'var(--spirit-space-100)' }],
+    [
+      { mobile: 'space-100', tablet: 'space-200', desktop: 'space-300' },
+      undefined,
+      undefined,
+      {
+        '--grid-spacing-x': 'var(--spirit-space-100)',
+        '--grid-spacing-y': 'var(--spirit-space-100)',
+        '--grid-spacing-x-tablet': 'var(--spirit-space-200)',
+        '--grid-spacing-y-tablet': 'var(--spirit-space-200)',
+        '--grid-spacing-x-desktop': 'var(--spirit-space-300)',
+        '--grid-spacing-y-desktop': 'var(--spirit-space-300)',
+      },
+    ],
+    [
+      undefined,
+      undefined,
+      { mobile: 'space-100', tablet: 'space-200', desktop: 'space-300' },
+      {
+        '--grid-spacing-y': 'var(--spirit-space-100)',
+        '--grid-spacing-y-tablet': 'var(--spirit-space-200)',
+        '--grid-spacing-y-desktop': 'var(--spirit-space-300)',
+      },
+    ],
+    [
+      { mobile: 'space-100', tablet: 'space-200', desktop: 'space-300' },
+      { mobile: 'space-400', tablet: 'space-500', desktop: 'space-600' },
+      { mobile: 'space-700', tablet: 'space-800', desktop: 'space-900' },
+      {
+        '--grid-spacing-x': 'var(--spirit-space-400)',
+        '--grid-spacing-y': 'var(--spirit-space-700)',
+        '--grid-spacing-x-tablet': 'var(--spirit-space-500)',
+        '--grid-spacing-y-tablet': 'var(--spirit-space-800)',
+        '--grid-spacing-x-desktop': 'var(--spirit-space-600)',
+        '--grid-spacing-y-desktop': 'var(--spirit-space-900)',
+      },
+    ],
+  ])('should return responsive spacing CSS properties', (spacing, spacingX, spacingY, expectedStyle) => {
+    const props: SpiritGridProps = { spacing, spacingX, spacingY } as SpiritGridProps;
+    const { result } = renderHook(() => useGridStyleProps(props));
+
+    expect(result.current.styleProps).toEqual(expectedStyle);
+  });
 });