Skip to content

Add fullscreen button to ComponentPlayground #392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 3, 2017
Merged

Add fullscreen button to ComponentPlayground #392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
745f8c0
Add fullscreen mode to ComponentPlayground
kitten Nov 1, 2017
191ae79
Refactor methods to appease the eslint god
kitten Nov 1, 2017
51f1179
Reuse same FullscreenButton in Fullscreen and extract fullscreen utils
kitten Nov 2, 2017
d1d2af5
Fix escape-key logic for ComponentPlayground
kitten Nov 2, 2017
54aa556
Update snapshots after rebase
kitten Nov 3, 2017
b2bcb75
Upgrade react-live and handle events for contentEditable CodePane
kitten Nov 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"normalize.css": "^7.0.0",
"prismjs": "^1.6.0",
"react-emotion": "^8.0.8",
"react-live": "^1.8.0-1",
"react-live": "^1.8.0-2",
"react-redux": "^5.0.5",
"react-transition-group": "^1.1.3",
"react-typography": "^0.16.5",
Expand Down
7 changes: 6 additions & 1 deletion src/components/__snapshots__/code-pane.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ exports[`<CodePane /> should render correctly. 1`] = `
"
contentEditable={false}
language="jsx"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
styles={undefined}
>
<Editor
Expand All @@ -59,6 +62,9 @@ exports[`<CodePane /> should render correctly. 1`] = `
"
contentEditable={false}
language="jsx"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
styles={undefined}
>
<pre
Expand All @@ -78,7 +84,6 @@ exports[`<CodePane /> should render correctly. 1`] = `
",
}
}
language="jsx"
onClick={undefined}
onKeyDown={undefined}
onKeyUp={undefined}
Expand Down
116 changes: 96 additions & 20 deletions src/components/__snapshots__/component-playground.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,41 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
scope="[object Object]"
>
<div
class="css-60wkrg"
class="css-wx5pb5"
>
<div
class="css-55vg9w"
class="css-1j4k5g3"
>
Live Preview
</div>
<div
class="css-1x4bol9"
class="css-1qi44w1"
>
Source Code
<button
class="css-1a7vuu6"
>
<svg
viewBox="0 0 24 24"
>
<path
d="M0 0h24v24H0z"
fill="none"
>

</path>
<path
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
fill="currentColor"
>

</path>
</svg>
</button>
</div>
</div>
<div
class="css-60wkrg"
class="css-wx5pb5"
>
<div
class="css-1fc71w4"
Expand Down Expand Up @@ -48,7 +68,6 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
<pre
class="prism-code css-egp0ia"
contenteditable="true"
language="jsx"
spellcheck="false"
>
<span
Expand Down Expand Up @@ -528,21 +547,41 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
scope="[object Object]"
>
<div
class="css-60wkrg"
class="css-wx5pb5"
>
<div
class="css-55vg9w"
class="css-1j4k5g3"
>
Live Preview
</div>
<div
class="css-55vg9w"
class="css-1j4k5g3"
>
Source Code
<button
class="css-1a7vuu6"
>
<svg
viewBox="0 0 24 24"
>
<path
d="M0 0h24v24H0z"
fill="none"
>

</path>
<path
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
fill="currentColor"
>

</path>
</svg>
</button>
</div>
</div>
<div
class="css-60wkrg"
class="css-wx5pb5"
>
<div
class="css-1fc71w4"
Expand Down Expand Up @@ -570,7 +609,6 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
<pre
class="prism-code css-egp0ia"
contenteditable="true"
language="jsx"
spellcheck="false"
>
<span
Expand Down Expand Up @@ -1050,21 +1088,41 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
scope="[object Object]"
>
<div
class="css-60wkrg"
class="css-wx5pb5"
>
<div
class="css-55vg9w"
class="css-1j4k5g3"
>
Live Preview
</div>
<div
class="css-55vg9w"
class="css-1j4k5g3"
>
Source Code
<button
class="css-1a7vuu6"
>
<svg
viewBox="0 0 24 24"
>
<path
d="M0 0h24v24H0z"
fill="none"
>

</path>
<path
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
fill="currentColor"
>

</path>
</svg>
</button>
</div>
</div>
<div
class="css-60wkrg"
class="css-wx5pb5"
>
<div
class="css-1fc71w4"
Expand Down Expand Up @@ -1092,7 +1150,6 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
<pre
class="prism-code css-egp0ia"
contenteditable="true"
language="jsx"
spellcheck="false"
>
<span
Expand Down Expand Up @@ -1572,21 +1629,41 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
scope="[object Object]"
>
<div
class="css-60wkrg"
class="css-wx5pb5"
>
<div
class="css-55vg9w"
class="css-1j4k5g3"
>
Live Preview
</div>
<div
class="css-55vg9w"
class="css-1j4k5g3"
>
Source Code
<button
class="css-1a7vuu6"
>
<svg
viewBox="0 0 24 24"
>
<path
d="M0 0h24v24H0z"
fill="none"
>

</path>
<path
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
fill="currentColor"
>

</path>
</svg>
</button>
</div>
</div>
<div
class="css-60wkrg"
class="css-wx5pb5"
>
<div
class="css-1fc71w4"
Expand All @@ -1608,7 +1685,6 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
<pre
class="prism-code css-egp0ia"
contenteditable="true"
language="jsx"
spellcheck="false"
>
<span
Expand Down
45 changes: 33 additions & 12 deletions src/components/__snapshots__/fullscreen.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,43 @@

exports[`<Fullscreen /> should render correctly. 1`] = `
<Fullscreen>
<Styled(div)>
<div
className="css-1j4mcul"
<Styled(FullscreenButton)
onClick={[Function]}
style={undefined}
viewBox="0 0 512 512"
>
<FullscreenButton
className="css-12n5ud"
onClick={[Function]}
style={undefined}
viewBox="0 0 512 512"
>
<svg
height="30px"
<Styled(button)
className="css-12n5ud"
onClick={[Function]}
style={undefined}
viewBox="0 0 512 512"
width="30px"
>
<path
d="M73.143,329.143H0V512h182.857v-73.143H73.143V329.143z M0,182.857h73.143V73.143h109.715V0H0V182.857z M438.857,438.857 H329.143V512H512V329.143h-73.143V438.857z M329.143,0v73.143h109.715v109.715H512V0H329.143z"
/>
</svg>
</div>
</Styled(div)>
<button
className="css-1hv29sw"
onClick={[Function]}
style={undefined}
>
<svg
viewBox="0 0 24 24"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
fill="currentColor"
/>
</svg>
</button>
</Styled(button)>
</FullscreenButton>
</Styled(FullscreenButton)>
</Fullscreen>
`;
Loading