Skip to content

Commit

Permalink
fix(gatsby-theme-docz): replace iframe in playground with div #984 #1035
Browse files Browse the repository at this point in the history
  • Loading branch information
rakannimer committed Aug 29, 2019
1 parent a10cedf commit cf9ea90
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 88 deletions.
85 changes: 0 additions & 85 deletions core/gatsby-theme-docz/src/components/Playground/IframeWrapper.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/** @jsx jsx */
import { jsx } from 'theme-ui'

const styles = {
iframe: (showingCode, height = 'auto') => ({
height,
display: 'block',
minHeight: '100%',
width: 'calc(100% - 2px)',
border: t => `1px solid ${t.colors.playground.border}`,
borderRadius: showingCode ? '4px 4px 0 0' : '4px',
}),
}

export const LivePreviewWrapper = ({ children, showingCode }) => {
return <div sx={styles.iframe(showingCode)}>{children}</div>
}
6 changes: 3 additions & 3 deletions core/gatsby-theme-docz/src/components/Playground/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Resizable } from 're-resizable'
import copy from 'copy-text-to-clipboard'

import { usePrismTheme } from '~utils/theme'
import { IframeWrapper } from './IframeWrapper'
import { LivePreviewWrapper } from './LivePreviewWrapper'
import * as styles from './styles'
import * as Icons from '../Icons'

Expand Down Expand Up @@ -69,9 +69,9 @@ export const Playground = ({ code, scope }) => {
})}
>
<div sx={styles.previewWrapper}>
<IframeWrapper showingCode={showingCode}>
<LivePreviewWrapper showingCode={showingCode}>
<LivePreview sx={styles.preview} />
</IframeWrapper>
</LivePreviewWrapper>
<div sx={styles.buttons}>
<button sx={styles.button} onClick={() => copy(code)}>
<Icons.Clipboard size={12} />
Expand Down

0 comments on commit cf9ea90

Please sign in to comment.