feat(grid): add container component (#128)

* fix(grid): remove container styles from grid column

* feat(grid): draft changes for the grid container

* docs(container): adds container to grid on storybook

* test(grid): add test for container component

* test: update screenshots

* refactor(grid): make Container consistent with other components and remove dataTestId

* refactor(grid): use consistent types and comments for the Component props

* refactor(grid): use const assertion for Grid

* refactor(grid): remove dataTestId and revert Component types

* feat(grid): introduce TS support with generics to grid

Strongly type polymorphic grid components — column, row and container which enables TypeScript help
while creating a new component

BREAKING CHANGE: `Component` prop is renamed as `component` for grid Row, Column and Container

* docs(grid): add default value in docs

* feat: adjust row widths

* revert(grid): remove nested grid styles

* test: update screenshot tests

* chore: run npm install

Co-authored-by: mwagdi <mahmoud.elawadi@hey.car>

.storybook/blocks/Grid/Row.tsx

@@ -1,9 +1,4 @@
-import React, {
-  InputHTMLAttributes,
-  useCallback,
-  ChangeEvent,
-  ReactNode,
-} from 'react';
+import React, { ReactNode } from 'react';
 import cn from 'classnames';
 
 import styles from './Row.module.css';

packages/grid/src/Grid.tsx

@@ -1,19 +1,13 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { FC } from 'react';
-
 import Col from './components/Col';
-import { ColProps } from './components/Col.types';
+import Container from './components/Container';
 import Row from './components/Row';
-import { RowProps } from './components/Row.types';
 
-const Grid: {
-  Row: FC<RowProps>;
-  Col: FC<ColProps>;
-  displayName: string;
-} = {
+const Grid = {
   Row,
   Col,
+  Container,
   displayName: 'Grid',
-};
+} as const;
 
 export default Grid;

packages/grid/src/__tests__/Col.test.tsx

@@ -64,7 +64,7 @@ describe('Grid.Col', () => {
   it('should set tag correcly', () => {
     const dataTestId = 'test-id';
     const { getByTestId } = render(
-      <Col Component="article" dataTestId={dataTestId} />,
+      <Col component="article" dataTestId={dataTestId} />,
     );
 
     expect(getByTestId(dataTestId).tagName).toBe('ARTICLE');

packages/grid/src/__tests__/Container.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Container from '../components/Container';
+
+describe('Grid.Container', () => {
+  describe('Snapshots tests', () => {
+    it('should match snapshot', () => {
+      const { container } = render(<Container>content</Container>);
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it('should set tag correctly', () => {
+    const { getByText } = render(
+      <Container component="section">hey</Container>,
+    );
+
+    expect(getByText('hey').tagName).toBe('SECTION');
+  });
+});

packages/grid/src/__tests__/Row.test.tsx

@@ -64,7 +64,7 @@ describe('Grid.Row', () => {
   it('should set tag correcly', () => {
     const dataTestId = 'test-id';
     const { getByTestId } = render(
-      <Row Component="section" dataTestId={dataTestId} />,
+      <Row component="section" dataTestId={dataTestId} />,
     );
 
     expect(getByTestId(dataTestId).tagName).toBe('SECTION');

packages/grid/src/__tests__/__snapshots__/Container.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grid.Container Snapshots tests should match snapshot 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    content
+  </div>
+</div>
+`;

packages/grid/src/components/Col.module.css

@@ -3,36 +3,6 @@
 :root {
   --grid-col-width: calc(100% / 12);
   margin: 0 auto;
-
-  @media (--mobile) {
-    padding-right: var(--gap-l);
-    padding-left: var(--gap-l);
-  }
-  @media (--tablet) {
-    padding-right: var(--gap-xl);
-    padding-left: var(--gap-xl);
-  }
-
-  @media (--tablet-l) {
-    padding-right: var(--gap-3xl);
-    padding-left: var(--gap-3xl);
-  }
-
-  @media (--desktop) {
-    padding-right: var(--gap-3xl);
-    padding-left: var(--gap-3xl);
-  }
-
-  @media (--desktop-m) {
-    padding-right: var(--gap-3xl);
-    padding-left: var(--gap-3xl);
-  }
-
-  @media (--desktop-l) {
-    max-width: 1440px;
-    padding-right: var(--gap-9xl);
-    padding-left: var(--gap-9xl);
-  }
 }
 
 .component {

packages/grid/src/components/Col.tsx

@@ -8,16 +8,18 @@ import { ColProps } from './Col.types';
 import guttersStyles from '../styles/gutters.module.css';
 import styles from './Col.module.css';
 
-function Col({
-  Component = 'div',
+function Col<E extends React.ElementType = 'div'>({
+  component,
   className,
   align,
   order,
   offset,
   width,
   children,
   dataTestId,
-}: ColProps) {
+}: ColProps<E>) {
+  const Component = component ?? 'div';
+
   const gridClassNames = useMemo(
     () => getGridClassNames({ order, offset, width }, styles),
     [order, offset, width],

packages/grid/src/components/Col.types.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ResponsivePropertyType } from '../Grid.types';
 
-export type ColProps = {
+type ColBaseProps<E extends React.ElementType> = {
   /**
    * Additional class
    */
@@ -44,9 +44,10 @@ export type ColProps = {
   order?: ResponsivePropertyType;
 
   /**
-   * The html tag of the component
+   * The component used for the root node. Either a string to use a HTML element or a component
+   * @default "div"
    */
-  Component?: keyof JSX.IntrinsicElements;
+  component?: E;
 
   /**
    * Content
@@ -58,3 +59,6 @@ export type ColProps = {
    */
   dataTestId?: string;
 };
+
+export type ColProps<E extends React.ElementType> = ColBaseProps<E> &
+  Omit<React.ComponentProps<E>, keyof ColBaseProps<E>>;

packages/grid/src/components/Container.module.css

@@ -0,0 +1,38 @@
+@import '../../../themes/src/default.css';
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-left: var(--gap-l);
+  padding-right: var(--gap-l);
+
+  @media (--tablet) {
+    padding-right: var(--gap-xl);
+    padding-left: var(--gap-xl);
+  }
+
+  @media (--tablet-l) {
+    padding-right: var(--gap-3xl);
+    padding-left: var(--gap-3xl);
+  }
+
+  @media (--desktop) {
+    padding-right: var(--gap-3xl);
+    padding-left: var(--gap-3xl);
+  }
+
+  @media (--desktop-m) {
+    padding-right: var(--gap-3xl);
+    padding-left: var(--gap-3xl);
+  }
+
+  @media (--desktop-l) {
+    max-width: 1440px;
+    padding-right: var(--gap-9xl);
+    padding-left: var(--gap-9xl);
+  }
+}

packages/grid/src/components/Container.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { ContainerProps } from './Container.types';
+
+import styles from './Container.module.css';
+
+function Container<E extends React.ElementType = 'div'>({
+  className,
+  children,
+  component,
+  ...rest
+}: ContainerProps<E>) {
+  const Component = component ?? 'div';
+
+  return React.createElement(
+    Component,
+    {
+      className: cn(styles.container, className),
+      ...rest,
+    },
+    children,
+  );
+}
+
+export default Container;

packages/grid/src/components/Container.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+type ContainerBaseProps<E extends React.ElementType> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component
+   * @default "div"
+   */
+  component?: E;
+};
+
+export type ContainerProps<E extends React.ElementType> =
+  ContainerBaseProps<E> &
+    Omit<React.ComponentProps<E>, keyof ContainerBaseProps<E>>;

packages/grid/src/components/Row.tsx

@@ -8,8 +8,8 @@ import { RowProps } from './Row.types';
 import guttersStyles from '../styles/gutters.module.css';
 import styles from './Row.module.css';
 
-function Row({
-  Component = 'div',
+function Row<E extends React.ElementType = 'div'>({
+  component,
   className,
   gutter = {
     mobile: 8,
@@ -24,11 +24,14 @@ function Row({
   justify = 'between',
   children,
   dataTestId,
-}: RowProps) {
+}: RowProps<E>) {
+  const Component = component ?? 'div';
+
   const gridClassNames = useMemo(
     () => getGridClassNames({ gutter }, guttersStyles),
     [gutter],
   );
+
   const classNames = cn(
     guttersStyles.row,
     styles.component,