feat(component): convert Grid to FC and export GridItem (#314)

BREAKING CHANGE: `Grid.Item` renamed to `GridItem` and will now have to import { GridItem } from '@bigcommerce/big-design';
bigcommerce · Jan 7, 2020 · 6e60254 · 6e60254
1 parent b2d0f21
commit 6e60254
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 44 deletions.
diff --git a/packages/big-design/src/components/Grid/Grid.tsx b/packages/big-design/src/components/Grid/Grid.tsx
@@ -4,16 +4,7 @@ import { BoxProps } from '../Box';
 
 import { StyledGrid } from './styled';
 import { GridedProps } from './types';
-import { GridItem } from './Item';
 
 export type GridProps = BoxProps & GridedProps;
 
-export class Grid extends React.PureComponent<GridProps> {
-  static Item = GridItem;
-
-  render() {
-    const { as, ...rest } = this.props;
-
-    return <StyledGrid forwardedAs={as} {...rest} />;
-  }
-}
+export const Grid: React.FC<GridProps> = ({ as, ...rest }) => <StyledGrid forwardedAs={as} {...rest} />;
diff --git a/packages/big-design/src/components/Grid/index.ts b/packages/big-design/src/components/Grid/index.ts
@@ -1,4 +1,5 @@
 import { GridProps as _GridProps } from './Grid';
 
 export { Grid } from './Grid';
+export * from './Item';
 export type GridProps = _GridProps;
diff --git a/packages/big-design/src/components/Grid/spec.tsx b/packages/big-design/src/components/Grid/spec.tsx
@@ -3,6 +3,7 @@ import 'jest-styled-components';
 import React from 'react';
 
 import { Grid } from './index';
+import { GridItem } from './Item';
 
 test('render Grid', () => {
   const template = `
@@ -14,10 +15,10 @@ test('render Grid', () => {
 
   const { container } = render(
     <Grid gridTemplate={template}>
-      <Grid.Item gridArea="head">Header</Grid.Item>
-      <Grid.Item gridArea="nav">Sidebar</Grid.Item>
-      <Grid.Item gridArea="main">Content</Grid.Item>
-      <Grid.Item gridArea="foot">Footer</Grid.Item>
+      <GridItem gridArea="head">Header</GridItem>
+      <GridItem gridArea="nav">Sidebar</GridItem>
+      <GridItem gridArea="main">Content</GridItem>
+      <GridItem gridArea="foot">Footer</GridItem>
     </Grid>,
   );
 
@@ -38,7 +39,7 @@ test('Grid forwards styles', () => {
 });
 
 test('Grid item forwards styles', () => {
-  const { container } = render(<Grid.Item className="test" style={{ background: 'red' }} />);
+  const { container } = render(<GridItem className="test" style={{ background: 'red' }} />);
 
   expect(container.getElementsByClassName('test').length).toBe(1);
   expect(container.firstChild).toHaveStyle('background: red');

diff --git a/packages/docs/PropTables/GridPropTable.tsx b/packages/docs/PropTables/GridPropTable.tsx
@@ -164,5 +164,5 @@ const gridItemProps: Prop[] = [
 ];
 
 export const GridItemPropTable: React.FC<PropTableWrapper> = props => (
-  <PropTable title="Grid.Item" propList={gridItemProps} {...props} />
+  <PropTable title="GridItem" propList={gridItemProps} {...props} />
 );
diff --git a/packages/docs/pages/Grid/GridPage.tsx b/packages/docs/pages/Grid/GridPage.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, H0, H1, H2, Link, Text } from '@bigcommerce/big-design';
+import { Box, Grid, GridItem, H0, H1, H2, Link, Text } from '@bigcommerce/big-design';
 import React from 'react';
 
 import { Code, CodePreview } from '../../components';
@@ -32,18 +32,18 @@ export default () => (
     <CodePreview scope={{ ExampleBox }}>
       {/* jsx-to-string:start */}
       <Grid>
-        <Grid.Item>
+        <GridItem>
           <ExampleBox>Item 1</ExampleBox>
-        </Grid.Item>
-        <Grid.Item>
+        </GridItem>
+        <GridItem>
           <ExampleBox>Item 2</ExampleBox>
-        </Grid.Item>
-        <Grid.Item>
+        </GridItem>
+        <GridItem>
           <ExampleBox>Item 3</ExampleBox>
-        </Grid.Item>
-        <Grid.Item>
+        </GridItem>
+        <GridItem>
           <ExampleBox>Item 4</ExampleBox>
-        </Grid.Item>
+        </GridItem>
       </Grid>
       {/* jsx-to-string:end */}
     </CodePreview>
@@ -78,18 +78,18 @@ export default () => (
 
         return (
           <Grid gridTemplate={template}>
-            <Grid.Item gridArea="head">
+            <GridItem gridArea="head">
               <ExampleBox>Header</ExampleBox>
-            </Grid.Item>
-            <Grid.Item gridArea="nav">
+            </GridItem>
+            <GridItem gridArea="nav">
               <ExampleBox>Sidebar</ExampleBox>
-            </Grid.Item>
-            <Grid.Item gridArea="main">
+            </GridItem>
+            <GridItem gridArea="main">
               <ExampleBox>Content</ExampleBox>
-            </Grid.Item>
-            <Grid.Item gridArea="foot">
+            </GridItem>
+            <GridItem gridArea="foot">
               <ExampleBox>Footer</ExampleBox>
-            </Grid.Item>
+            </GridItem>
           </Grid>
         );
       }}
@@ -103,30 +103,30 @@ export default () => (
     <CodePreview scope={{ ExampleBox }}>
       {/* jsx-to-string:start */}
       <Grid gridColumns="repeat(3, 1fr)">
-        <Grid.Item>
+        <GridItem>
           <ExampleBox>
             Reprehenderit ullamco et elit eu duis non reprehenderit eiusmod pariatur ea deserunt irure. Reprehenderit et
             incididunt sit aute sint proident eu eiusmod pariatur Lorem nulla labore irure nisi. Adipisicing do duis
             occaecat ipsum dolor ea. Qui consectetur sint eu nulla duis et commodo anim commodo. Ullamco consectetur
             elit ullamco aliquip do id consectetur anim laborum.
           </ExampleBox>
-        </Grid.Item>
+        </GridItem>
 
-        <Grid.Item>
+        <GridItem>
           <ExampleBox>
             In sit dolore culpa reprehenderit tempor laborum. Sit anim voluptate pariatur irure amet mollit. Est mollit
             ad pariatur esse eu reprehenderit ut veniam. Aliquip anim mollit aliquip quis officia minim esse laboris
             proident fugiat cillum. Eiusmod culpa eu ea eiusmod nostrud.
           </ExampleBox>
-        </Grid.Item>
+        </GridItem>
 
-        <Grid.Item>
+        <GridItem>
           <ExampleBox>
             Ipsum adipisicing pariatur magna quis incididunt amet pariatur. Aliqua voluptate consequat ut elit ea dolore
             officia reprehenderit exercitation dolore eiusmod cupidatat quis. Ullamco ipsum do deserunt sunt ad deserunt
             ut. Elit non velit dolore ad est eu.
           </ExampleBox>
-        </Grid.Item>
+        </GridItem>
       </Grid>
       {/* jsx-to-string:end */}
     </CodePreview>

diff --git a/packages/docs/pages/_app.tsx b/packages/docs/pages/_app.tsx
@@ -1,4 +1,4 @@
-import { GlobalStyles, Grid } from '@bigcommerce/big-design';
+import { GlobalStyles, Grid, GridItem } from '@bigcommerce/big-design';
 import { createTheme } from '@bigcommerce/big-design-theme';
 import App from 'next/app';
 import Head from 'next/head';
@@ -62,10 +62,10 @@ export default class MyApp extends App {
                       gridGap="0"
                       style={{ minHeight: '100%' }}
                     >
-                      <Grid.Item gridArea="nav">
+                      <GridItem gridArea="nav">
                         <SideNav />
-                      </Grid.Item>
-                      <Grid.Item
+                      </GridItem>
+                      <GridItem
                         gridArea="main"
                         marginVertical="medium"
                         marginHorizontal={{ mobile: 'none', tablet: 'xxLarge' }}
@@ -74,7 +74,7 @@ export default class MyApp extends App {
                         <StoryWrapper>
                           <Component {...pageProps} />
                         </StoryWrapper>
-                      </Grid.Item>
+                      </GridItem>
                     </Grid>
                     <BetaRibbon />
                   </>