Merge pull request #191 from mverissimo/perf/responsive

Perf/responsive

Author: mverissimo

src/components/Col/Col.test.tsx

@@ -4,7 +4,7 @@ import { Col } from '.';
 import { Breakpoints } from '../../types/emotion';
 
 describe('Col', () => {
-  it('should render with default styles on media %s', () => {
+  it('should render with default styles', () => {
     const {
       container: { firstChild },
     } = render(<Col>Col</Col>);
@@ -21,7 +21,7 @@ describe('Col', () => {
       xl: 5,
     },
   ] as Record<Breakpoints, number>[])(
-    'should render with width styles on media %s',
+    'should render with size styles on breakpoint %s',
     (size) => {
       const {
         container: { firstChild },
@@ -40,34 +40,11 @@ describe('Col', () => {
       xl: 5,
     },
   ] as Record<Breakpoints, number>[])(
-    'should render with offset styles on media %s',
-    (size) => {
-      const {
-        container: { firstChild },
-      } = render(<Col offset={size}>Col</Col>);
-
-      expect(firstChild).toMatchSnapshot();
-    }
-  );
-
-  it.each([
-    {
-      xs: 1,
-      sm: 2,
-      md: 3,
-      lg: 4,
-      xl: 5,
-    },
-  ] as Record<Breakpoints, number>[])(
-    'should handle with offset styles on media %s',
+    'should render with offset styles on breakpoint %s',
     (offset) => {
       const {
         container: { firstChild },
-      } = render(
-        <Col md={8} offset={offset}>
-          Col
-        </Col>
-      );
+      } = render(<Col {...offset}>Col</Col>);
 
       expect(firstChild).toMatchSnapshot();
     }

src/components/Col/Col.tsx

@@ -1,23 +1,37 @@
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import isPropValid from '@emotion/is-prop-valid';
 
-import { config, BREAKPOINTS } from '../../config';
-import { media } from '../../utils';
+import { config } from '../../config';
+import { responsive } from '../../utils';
 
-import { Breakpoints, StyleProps } from '../../types/emotion';
+import { DefaultTheme, StyleProps } from '../../types/emotion';
 
 export interface ColProps {
+  /**
+   * Trigger column styles
+   * based on breakpoint
+   */
   xs?: number;
+
   sm?: number;
+
   md?: number;
+
   lg?: number;
+
   xl?: number;
-  offset?: Record<Breakpoints, number>;
-  style?: CSSProperties;
-  className?: string;
+
+  /**
+   * The column `span`
+   */
+  offset?: DefaultTheme['grid']['breakpoints'];
+
+  /**
+   * The children nodes
+   */
   children: ReactNode;
 }
 
@@ -32,52 +46,48 @@ const baseStyle = ({ theme }: StyleProps) => css`
 
   box-sizing: border-box;
 
-  ${BREAKPOINTS.map(
-    (breakpoint) =>
-      css`
-        ${media(breakpoint)} {
-          padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
-          padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
-        }
-      `
-  )}
+  ${responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
+      padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
+      padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
+    `
+  )};
 `;
 
-const sizeStyle = (props: ColProps & StyleProps) => {
-  const { theme } = props;
-
-  return css`
-    ${BREAKPOINTS.map(
-      (breakpoint) =>
-        props[breakpoint] &&
-        css`
-          ${media(breakpoint)} {
-            flex: 0 0
-              ${(props[breakpoint] / config(theme).grid.columns[breakpoint]) *
-              100}%;
-            max-width: ${(props[breakpoint] /
-              config(theme).grid.columns[breakpoint]) *
-            100}%;
-          }
-        `
-    )}
-  `;
-};
+const sizeStyle = (props: ColProps & StyleProps) =>
+  responsive(
+    config(props.theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+      props[breakpoint] &&
+      `
+        label: col--size;
+        flex: 0 0 ${
+          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
+          100
+        }%;
+        max-width: ${
+          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
+          100
+        }%;
+    `
+  );
 
 const offsetStyle = ({ theme, offset }: ColProps & StyleProps) =>
   offset &&
-  typeof offset === 'object' &&
-  BREAKPOINTS.filter((breakpoint) => offset[breakpoint]).map(
-    (breakpoint) =>
+  responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
       offset[breakpoint] &&
-      css`
-        ${media(breakpoint)} {
-          margin-left: ${offset[breakpoint] >= 0
+      `
+        label: col--offset;
+        margin-left: ${
+          offset[breakpoint] >= 0
             ? (offset[breakpoint] / config(theme).grid.columns[breakpoint]) *
               100
-            : 0}%;
-        }
-      `
+            : 0
+        }%;
+    `
   );
 
 const Col = styled('div', {