Merge pull request #85 from primer/preview-frame

Move Frame into LivePreviewWrapper

Author: Emily

docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -0,0 +1,12 @@
+import {BaseStyles, Box} from '@primer/components'
+import React from 'react'
+
+function LivePreviewWrapper({children}) {
+  return (
+    <BaseStyles>
+      <Box p={3}>{children}</Box>
+    </BaseStyles>
+  )
+}
+
+export default LivePreviewWrapper

theme/index.js

@@ -2,6 +2,7 @@ export {default as Caption} from './src/components/caption'
 export {default as Container} from './src/components/container'
 export {default as Contributors} from './src/components/contributors'
 export {Do, DoDont, Dont} from './src/components/do-dont'
+export {default as Frame} from './src/components/frame'
 export {default as Head} from './src/components/head'
 export {default as Header} from './src/components/header'
 export {default as Hero} from './src/components/hero'

theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

theme/src/components/live-code.js

@@ -50,11 +50,9 @@ function LiveCode({code, language}) {
         code={code}
         transformCode={languageTransformers[language]}
       >
-        <Frame>
-          <LivePreviewWrapper>
-            <LivePreview />
-          </LivePreviewWrapper>
-        </Frame>
+        <LivePreviewWrapper>
+          <LivePreview />
+        </LivePreviewWrapper>
         <Relative>
           <LiveEditor
             theme={githubTheme}

theme/src/components/live-preview-wrapper.js

@@ -1,13 +1,16 @@
 import {BaseStyles, Box} from '@primer/components'
+import Frame from './frame'
 import React from 'react'
 
 // Users can shadow this file to wrap live previews.
 // This is useful for applying global styles.
 function LivePreviewWrapper({children}) {
   return (
-    <BaseStyles>
-      <Box p={3}>{children}</Box>
-    </BaseStyles>
+    <Frame>
+      <BaseStyles>
+        <Box p={3}>{children}</Box>
+      </BaseStyles>
+    </Frame>
   )
 }