diff --git a/packages/web-react/src/components/Grid/Grid.tsx b/packages/web-react/src/components/Grid/Grid.tsx index b9e2eaa6d4..3c48637df3 100644 --- a/packages/web-react/src/components/Grid/Grid.tsx +++ b/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 = (props: SpiritGridProps): JSX.Element => { const { elementType: ElementTag = 'div', children, ...restProps } = props; diff --git a/packages/web-react/src/components/Grid/README.md b/packages/web-react/src/components/Grid/README.md index 7a2b2fa4ba..bdc7c45afa 100644 --- a/packages/web-react/src/components/Grid/README.md +++ b/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 - + col 1 col 2 col 3 @@ -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 diff --git a/packages/web-react/src/components/Grid/__tests__/Grid.test.tsx b/packages/web-react/src/components/Grid/__tests__/Grid.test.tsx index 2c86996fd4..a3164d550c 100644 --- a/packages/web-react/src/components/Grid/__tests__/Grid.test.tsx +++ b/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(); + const dom = render(); const element = dom.container.querySelector('div') as HTMLElement; expect(element).toHaveClass('Grid--desktop--cols-3'); }); it('should have tablet cols classname', () => { - const dom = render(); + const dom = render(); const element = dom.container.querySelector('div') as HTMLElement; expect(element).toHaveClass('Grid--tablet--cols-3'); }); it('should have all cols classnames', () => { - const dom = render(); + const dom = render(); const element = dom.container.querySelector('div') as HTMLElement; expect(element).toHaveClass('Grid--cols-2'); diff --git a/packages/web-react/src/components/Grid/demo/GridResponsive.tsx b/packages/web-react/src/components/Grid/demo/GridResponsive.tsx index ebbb5c9d1e..3ee9f1ccd2 100644 --- a/packages/web-react/src/components/Grid/demo/GridResponsive.tsx +++ b/packages/web-react/src/components/Grid/demo/GridResponsive.tsx @@ -3,7 +3,7 @@ import Grid from '../Grid'; import GridItemFactory from './GridItemFactory'; const GridResponsive = () => ( - + ); diff --git a/packages/web-react/src/components/Grid/stories/Grid.stories.tsx b/packages/web-react/src/components/Grid/stories/Grid.stories.tsx index f5c183b05d..105e209c9e 100644 --- a/packages/web-react/src/components/Grid/stories/Grid.stories.tsx +++ b/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 = { title: 'Components/Grid', component: Grid, @@ -21,12 +19,7 @@ const meta: Meta = { control: 'object', }, cols: { - control: 'select', - options: gridColumnsArray, - }, - desktop: { - control: 'select', - options: gridColumnsArray, + control: 'object', }, elementType: { control: 'text', @@ -34,10 +27,6 @@ const meta: Meta = { defaultValue: { summary: 'div' }, }, }, - tablet: { - control: 'select', - options: gridColumnsArray, - }, }, args: { children: ( @@ -49,10 +38,12 @@ const meta: Meta = { })} ), - cols: 12, - desktop: 12, + cols: { + mobile: 2, + tablet: 3, + desktop: 4, + }, elementType: 'div', - tablet: 12, }, }; diff --git a/packages/web-react/src/components/Grid/useGridStyleProps.ts b/packages/web-react/src/components/Grid/useGridStyleProps.ts index eef3e8bc92..21dae72ac8 100644 --- a/packages/web-react/src/components/Grid/useGridStyleProps.ts +++ b/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 { @@ -16,8 +16,41 @@ export function useGridStyleProps(props: SpiritGridProps): 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 { diff --git a/packages/web-react/src/types/grid.ts b/packages/web-react/src/types/grid.ts index 2cbf44ea87..b0ff8368d0 100644 --- a/packages/web-react/src/types/grid.ts +++ b/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 { } 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; }