feat(gatsby-theme-docz): create MainContainer component (#1381)

* feat: create a shadow-able  MainContainer component

Author: mickaelzhang

core/gatsby-theme-docz/src/components/Layout/index.js

@@ -1,11 +1,12 @@
 /** @jsx jsx */
 import { useRef, useState } from 'react'
-import { jsx, Layout as BaseLayout, Main, Container } from 'theme-ui'
+import { jsx, Layout as BaseLayout, Main } from 'theme-ui'
 import { Global } from '@emotion/core'
 
 import global from '~theme/global'
 import { Header } from '../Header'
 import { Sidebar } from '../Sidebar'
+import { MainContainer } from '../MainContainer'
 import * as styles from './styles'
 
 export const Layout = ({ children }) => {
@@ -25,9 +26,7 @@ export const Layout = ({ children }) => {
             onBlur={() => setOpen(false)}
             onClick={() => setOpen(false)}
           />
-          <Container sx={styles.content} data-testid="main-container">
-            {children}
-          </Container>
+          <MainContainer data-testid="main-container">{children}</MainContainer>
         </div>
       </Main>
     </BaseLayout>

core/gatsby-theme-docz/src/components/Layout/styles.js

@@ -16,17 +16,3 @@ export const wrapper = {
     display: 'block',
   },
 }
-
-export const content = {
-  backgroundColor: 'background',
-  position: 'relative',
-  maxWidth: 960,
-  py: 5,
-  px: 4,
-  variant: 'styles.Container',
-  [media.tablet]: {
-    py: 4,
-    px: 4,
-    pt: 5,
-  },
-}

core/gatsby-theme-docz/src/components/MainContainer/index.js

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx, Container } from 'theme-ui'
+
+import * as styles from './styles'
+
+export const MainContainer = ({ children, ...rest }) => {
+  return (
+    <Container sx={styles.container} {...rest}>
+      {children}
+    </Container>
+  )
+}

core/gatsby-theme-docz/src/components/MainContainer/styles.js

@@ -0,0 +1,15 @@
+import { media } from '~theme/breakpoints'
+
+export const container = {
+  backgroundColor: 'background',
+  position: 'relative',
+  maxWidth: 960,
+  py: 5,
+  px: 4,
+  variant: 'styles.Container',
+  [media.tablet]: {
+    py: 4,
+    px: 4,
+    pt: 5,
+  },
+}