From e8d1c04465f7464f5bfcc46c0e65ec8d454ee868 Mon Sep 17 00:00:00 2001
From: Mickael Zhang <mickael.zhg@gmail.com>
Date: Fri, 7 Feb 2020 16:13:52 +0100
Subject: [PATCH] feat(gatsby-theme-docz): create MainContainer component
 (#1381)

* feat: create a shadow-able  MainContainer component
---
 .../src/components/Layout/index.js                |  7 +++----
 .../src/components/Layout/styles.js               | 14 --------------
 .../src/components/MainContainer/index.js         | 12 ++++++++++++
 .../src/components/MainContainer/styles.js        | 15 +++++++++++++++
 4 files changed, 30 insertions(+), 18 deletions(-)
 create mode 100644 core/gatsby-theme-docz/src/components/MainContainer/index.js
 create mode 100644 core/gatsby-theme-docz/src/components/MainContainer/styles.js

diff --git a/core/gatsby-theme-docz/src/components/Layout/index.js b/core/gatsby-theme-docz/src/components/Layout/index.js
index 2e981ea1b..89af5d4f2 100644
--- a/core/gatsby-theme-docz/src/components/Layout/index.js
+++ b/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>
diff --git a/core/gatsby-theme-docz/src/components/Layout/styles.js b/core/gatsby-theme-docz/src/components/Layout/styles.js
index 0b5351879..90031b9dd 100644
--- a/core/gatsby-theme-docz/src/components/Layout/styles.js
+++ b/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,
-  },
-}
diff --git a/core/gatsby-theme-docz/src/components/MainContainer/index.js b/core/gatsby-theme-docz/src/components/MainContainer/index.js
new file mode 100644
index 000000000..ff153eaca
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/core/gatsby-theme-docz/src/components/MainContainer/styles.js b/core/gatsby-theme-docz/src/components/MainContainer/styles.js
new file mode 100644
index 000000000..e8b4895ab
--- /dev/null
+++ b/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,
+  },
+}