Feat(web-react): Allow object in Grid prop cols, deprecate desktop an…

…d tablet #DS-995

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

@@ -1,8 +1,8 @@
 import React, { ElementType } from 'react';
 import classNames from 'classnames';
-import { useStyleProps } from '../../hooks/styleProps';
-import { useGridStyleProps } from './useGridStyleProps';
+import { useStyleProps } from '../../hooks';
 import { SpiritGridProps } from '../../types';
+import { useGridStyleProps } from './useGridStyleProps';
 
 export const Grid = <T extends ElementType = 'div'>(props: SpiritGridProps<T>): JSX.Element => {
   const { elementType: ElementTag = 'div', children, ...restProps } = props;

packages/web-react/src/components/Grid/README.md

@@ -5,7 +5,7 @@ Use Grid to build multiple column layouts. This Grid works on twelve column syst
 **Custom layout**
 
 ```jsx
-<Grid cols={2} tablet={3} desktop={4}>
+<Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }}>
   <span>col 1</span>
   <span>col 2</span>
   <span>col 3</span>
@@ -17,14 +17,14 @@ Use Grid to build multiple column layouts. This Grid works on twelve column syst
 
 ## API
 
-| Name               | Type                                      | Default | Required | Description                         |
-| ------------------ | ----------------------------------------- | ------- | -------- | ----------------------------------- |
-| `cols`             | [`1` \| `2` \| `3` \| `4` \| `6` \| `12`] | —       | ✕        | Number of columns to use            |
-| `desktop`          | [`1` \| `2` \| `3` \| `4` \| `6` \| `12`] | —       | ✕        | Number of columns to use on desktop |
-| `elementType`      | HTML element                              | `div`   | ✕        | Element type to use for the Grid    |
-| `tablet`           | [`1` \| `2` \| `3` \| `4` \| `6` \| `12`] | —       | ✕        | Number of columns to use on tablet  |
-| `UNSAFE_className` | `string`                                  | —       | ✕        | Wrapper custom class name           |
-| `UNSAFE_style`     | `CSSProperties`                           | —       | ✕        | Wrapper custom style                |
+| Name               | Type                                                         | Default | Required | Description                                                                                                |
+| ------------------ | ------------------------------------------------------------ | ------- | -------- | ---------------------------------------------------------------------------------------------------------- |
+| `cols`             | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | —       | ✕        | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` |
+| `desktop`          | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`]             | —       | ✕        | [**DEPRECATED**][deprecated] in favor of `cols`; Number of columns to use on desktop                       |
+| `elementType`      | HTML element                                                 | `div`   | ✕        | Element type to use for the Grid                                                                           |
+| `tablet`           | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`]             | —       | ✕        | [**DEPRECATED**][deprecated] in favor of `cols`; Number of columns to use on tablet                        |
+| `UNSAFE_className` | `string`                                                     | —       | ✕        | Wrapper custom class name                                                                                  |
+| `UNSAFE_style`     | `CSSProperties`                                              | —       | ✕        | Wrapper custom style                                                                                       |
 
 For detailed information see [Grid] component
 
@@ -129,4 +129,5 @@ previous breakpoint will be used.
 | `rowStart`    | [`number` \| `span \d+` \| `object`] | `null`  | ✕        | Row where the item should start    |
 
 [Grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md
+[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
 [digitalocean-span]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword

packages/web-react/src/components/Grid/__tests__/Grid.test.tsx

@@ -21,21 +21,21 @@ describe('Grid', () => {
   });
 
   it('should have desktop cols classname', () => {
-    const dom = render(<Grid desktop={3} />);
+    const dom = render(<Grid cols={{ desktop: 3 }} />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Grid--desktop--cols-3');
   });
 
   it('should have tablet cols classname', () => {
-    const dom = render(<Grid tablet={3} />);
+    const dom = render(<Grid cols={{ tablet: 3 }} />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Grid--tablet--cols-3');
   });
 
   it('should have all cols classnames', () => {
-    const dom = render(<Grid cols={2} tablet={3} desktop={4} />);
+    const dom = render(<Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }} />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Grid--cols-2');

packages/web-react/src/components/Grid/demo/GridResponsive.tsx

@@ -3,7 +3,7 @@ import Grid from '../Grid';
 import GridItemFactory from './GridItemFactory';
 
 const GridResponsive = () => (
-  <Grid cols={2} tablet={3} desktop={4}>
+  <Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }}>
     <GridItemFactory items={4} label="1/2, 1/3, 1/4" />
   </Grid>
 );

packages/web-react/src/components/Grid/stories/Grid.stories.tsx

@@ -6,8 +6,6 @@ import DocsBox from '../../../../docs/DocsBox';
 import ReadMe from '../README.md';
 import { Grid } from '..';
 
-const gridColumnsArray = [1, 2, 3, 4, 5, 6, 12, undefined];
-
 const meta: Meta<typeof Grid> = {
   title: 'Components/Grid',
   component: Grid,
@@ -21,23 +19,14 @@ const meta: Meta<typeof Grid> = {
       control: 'object',
     },
     cols: {
-      control: 'select',
-      options: gridColumnsArray,
-    },
-    desktop: {
-      control: 'select',
-      options: gridColumnsArray,
+      control: 'object',
     },
     elementType: {
       control: 'text',
       table: {
         defaultValue: { summary: 'div' },
       },
     },
-    tablet: {
-      control: 'select',
-      options: gridColumnsArray,
-    },
   },
   args: {
     children: (
@@ -49,10 +38,12 @@ const meta: Meta<typeof Grid> = {
         })}
       </>
     ),
-    cols: 12,
-    desktop: 12,
+    cols: {
+      mobile: 2,
+      tablet: 3,
+      desktop: 4,
+    },
     elementType: 'div',
-    tablet: 12,
   },
 };
 

packages/web-react/src/components/Grid/useGridStyleProps.ts

@@ -1,8 +1,8 @@
 /* eslint no-console: ["error", { allow: ["warn"] }] */
 import { ElementType } from 'react';
 import classNames from 'classnames';
+import { useClassNamePrefix, useDeprecationMessage } from '../../hooks';
 import { SpiritGridProps } from '../../types';
-import { useClassNamePrefix } from '../../hooks/useClassNamePrefix';
 import { useGridClasses } from './useGridClasses';
 
 export interface GridStyles<T> {
@@ -16,8 +16,41 @@ export function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyl
   const { cols, ...restProps } = props;
 
   const gridClass = useClassNamePrefix('Grid');
-  const gridColsClass = `${gridClass}--cols-${cols}`;
   const { props: modifiedProps, classes: gridClasses } = useGridClasses(gridClass, restProps, 'cols');
+
+  useDeprecationMessage({
+    method: 'property',
+    trigger: !!restProps.tablet,
+    componentName: 'Grid',
+    propertyProps: {
+      deprecatedName: 'tablet',
+      newName: 'cols',
+    },
+  });
+
+  useDeprecationMessage({
+    method: 'property',
+    trigger: !!restProps.desktop,
+    componentName: 'Grid',
+    propertyProps: {
+      deprecatedName: 'desktop',
+      newName: 'cols',
+    },
+  });
+
+  if (typeof cols === 'object' && cols !== null) {
+    const classes: string[] = [];
+    Object.keys(cols).forEach((key) => {
+      const infix = key === 'mobile' ? '' : `--${key}`;
+      classes.push(`${gridClass}${infix}--cols-${cols[key as keyof typeof cols]}`);
+    });
+
+    return {
+      classProps: classNames(gridClass, classes),
+      props: restProps,
+    };
+  }
+  const gridColsClass = `${gridClass}--cols-${cols}`;
   const classes = classNames(gridClass, { [gridColsClass]: cols }, gridClasses);
 
   return {

packages/web-react/src/types/grid.ts

@@ -2,6 +2,11 @@ import { ElementType, JSXElementConstructor } from 'react';
 import { ChildrenProps, StyleProps, TransferProps } from './shared';
 
 export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+export type GridColsBreakpoints = {
+  mobile?: GridColumns;
+  tablet?: GridColumns;
+  desktop?: GridColumns;
+};
 export type GridSpanOverColumns = 2 | 4 | 6 | 8 | 10 | 12;
 export type GridItemSpan = `span ${number}`;
 export type GridItemPositionBreakpoints = {
@@ -39,8 +44,10 @@ export interface GridItemElementTypeProps<T extends ElementType = 'div'> {
 }
 
 export interface GridCustomLayoutProps {
-  cols?: GridColumns;
+  cols?: GridColumns | GridColsBreakpoints;
+  // @deprecated Use `cols` with object instead. This prop will be removed in the next major version.
   tablet?: GridColumns;
+  // @deprecated Use `cols` with object instead. This prop will be removed in the next major version.
   desktop?: GridColumns;
 }