Skip to content

Commit 4de1b2d

Browse files
kittenkitten
authored
Merge pull request #392 from FormidableLabs/feature/fullscreen-playground
Add fullscreen button to ComponentPlayground
2 parents 9af5b54 + b2bcb75 commit 4de1b2d

File tree

12 files changed

+401
-127
lines changed

12 files changed

+401
-127
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"normalize.css": "^7.0.0",
3131
"prismjs": "^1.6.0",
3232
"react-emotion": "^8.0.8",
33-
"react-live": "^1.8.0-1",
33+
"react-live": "^1.8.0-2",
3434
"react-redux": "^5.0.5",
3535
"react-transition-group": "^1.1.3",
3636
"react-typography": "^0.16.5",

‎src/components/__snapshots__/code-pane.test.js.snap‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ exports[`<CodePane /> should render correctly. 1`] = `
4343
"
4444
contentEditable={false}
4545
language="jsx"
46+
onClick={[Function]}
47+
onKeyDown={[Function]}
48+
onKeyUp={[Function]}
4649
styles={undefined}
4750
>
4851
<Editor
@@ -59,6 +62,9 @@ exports[`<CodePane /> should render correctly. 1`] = `
5962
"
6063
contentEditable={false}
6164
language="jsx"
65+
onClick={[Function]}
66+
onKeyDown={[Function]}
67+
onKeyUp={[Function]}
6268
styles={undefined}
6369
>
6470
<pre
@@ -78,7 +84,6 @@ exports[`<CodePane /> should render correctly. 1`] = `
7884
",
7985
}
8086
}
81-
language="jsx"
8287
onClick={undefined}
8388
onKeyDown={undefined}
8489
onKeyUp={undefined}

‎src/components/__snapshots__/component-playground.test.js.snap‎

Lines changed: 96 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,41 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
66
scope="[object Object]"
77
>
88
<div
9-
class="css-60wkrg"
9+
class="css-wx5pb5"
1010
>
1111
<div
12-
class="css-55vg9w"
12+
class="css-1j4k5g3"
1313
>
1414
Live Preview
1515
</div>
1616
<div
17-
class="css-1x4bol9"
17+
class="css-1qi44w1"
1818
>
1919
Source Code
20+
<button
21+
class="css-1a7vuu6"
22+
>
23+
<svg
24+
viewBox="0 0 24 24"
25+
>
26+
<path
27+
d="M0 0h24v24H0z"
28+
fill="none"
29+
>
30+
31+
</path>
32+
<path
33+
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
34+
fill="currentColor"
35+
>
36+
37+
</path>
38+
</svg>
39+
</button>
2040
</div>
2141
</div>
2242
<div
23-
class="css-60wkrg"
43+
class="css-wx5pb5"
2444
>
2545
<div
2646
class="css-1fc71w4"
@@ -48,7 +68,6 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
4868
<pre
4969
class="prism-code css-egp0ia"
5070
contenteditable="true"
51-
language="jsx"
5271
spellcheck="false"
5372
>
5473
<span
@@ -528,21 +547,41 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
528547
scope="[object Object]"
529548
>
530549
<div
531-
class="css-60wkrg"
550+
class="css-wx5pb5"
532551
>
533552
<div
534-
class="css-55vg9w"
553+
class="css-1j4k5g3"
535554
>
536555
Live Preview
537556
</div>
538557
<div
539-
class="css-55vg9w"
558+
class="css-1j4k5g3"
540559
>
541560
Source Code
561+
<button
562+
class="css-1a7vuu6"
563+
>
564+
<svg
565+
viewBox="0 0 24 24"
566+
>
567+
<path
568+
d="M0 0h24v24H0z"
569+
fill="none"
570+
>
571+
572+
</path>
573+
<path
574+
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
575+
fill="currentColor"
576+
>
577+
578+
</path>
579+
</svg>
580+
</button>
542581
</div>
543582
</div>
544583
<div
545-
class="css-60wkrg"
584+
class="css-wx5pb5"
546585
>
547586
<div
548587
class="css-1fc71w4"
@@ -570,7 +609,6 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
570609
<pre
571610
class="prism-code css-egp0ia"
572611
contenteditable="true"
573-
language="jsx"
574612
spellcheck="false"
575613
>
576614
<span
@@ -1050,21 +1088,41 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
10501088
scope="[object Object]"
10511089
>
10521090
<div
1053-
class="css-60wkrg"
1091+
class="css-wx5pb5"
10541092
>
10551093
<div
1056-
class="css-55vg9w"
1094+
class="css-1j4k5g3"
10571095
>
10581096
Live Preview
10591097
</div>
10601098
<div
1061-
class="css-55vg9w"
1099+
class="css-1j4k5g3"
10621100
>
10631101
Source Code
1102+
<button
1103+
class="css-1a7vuu6"
1104+
>
1105+
<svg
1106+
viewBox="0 0 24 24"
1107+
>
1108+
<path
1109+
d="M0 0h24v24H0z"
1110+
fill="none"
1111+
>
1112+
1113+
</path>
1114+
<path
1115+
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
1116+
fill="currentColor"
1117+
>
1118+
1119+
</path>
1120+
</svg>
1121+
</button>
10641122
</div>
10651123
</div>
10661124
<div
1067-
class="css-60wkrg"
1125+
class="css-wx5pb5"
10681126
>
10691127
<div
10701128
class="css-1fc71w4"
@@ -1092,7 +1150,6 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
10921150
<pre
10931151
class="prism-code css-egp0ia"
10941152
contenteditable="true"
1095-
language="jsx"
10961153
spellcheck="false"
10971154
>
10981155
<span
@@ -1572,21 +1629,41 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
15721629
scope="[object Object]"
15731630
>
15741631
<div
1575-
class="css-60wkrg"
1632+
class="css-wx5pb5"
15761633
>
15771634
<div
1578-
class="css-55vg9w"
1635+
class="css-1j4k5g3"
15791636
>
15801637
Live Preview
15811638
</div>
15821639
<div
1583-
class="css-55vg9w"
1640+
class="css-1j4k5g3"
15841641
>
15851642
Source Code
1643+
<button
1644+
class="css-1a7vuu6"
1645+
>
1646+
<svg
1647+
viewBox="0 0 24 24"
1648+
>
1649+
<path
1650+
d="M0 0h24v24H0z"
1651+
fill="none"
1652+
>
1653+
1654+
</path>
1655+
<path
1656+
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
1657+
fill="currentColor"
1658+
>
1659+
1660+
</path>
1661+
</svg>
1662+
</button>
15861663
</div>
15871664
</div>
15881665
<div
1589-
class="css-60wkrg"
1666+
class="css-wx5pb5"
15901667
>
15911668
<div
15921669
class="css-1fc71w4"
@@ -1608,7 +1685,6 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
16081685
<pre
16091686
class="prism-code css-egp0ia"
16101687
contenteditable="true"
1611-
language="jsx"
16121688
spellcheck="false"
16131689
>
16141690
<span

‎src/components/__snapshots__/fullscreen.test.js.snap‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,43 @@
22

33
exports[`<Fullscreen /> should render correctly. 1`] = `
44
<Fullscreen>
5-
<Styled(div)>
6-
<div
7-
className="css-1j4mcul"
5+
<Styled(FullscreenButton)
6+
onClick={[Function]}
7+
style={undefined}
8+
viewBox="0 0 512 512"
9+
>
10+
<FullscreenButton
11+
className="css-12n5ud"
12+
onClick={[Function]}
13+
style={undefined}
14+
viewBox="0 0 512 512"
815
>
9-
<svg
10-
height="30px"
16+
<Styled(button)
17+
className="css-12n5ud"
1118
onClick={[Function]}
1219
style={undefined}
1320
viewBox="0 0 512 512"
14-
width="30px"
1521
>
16-
<path
17-
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"
18-
/>
19-
</svg>
20-
</div>
21-
</Styled(div)>
22+
<button
23+
className="css-1hv29sw"
24+
onClick={[Function]}
25+
style={undefined}
26+
>
27+
<svg
28+
viewBox="0 0 24 24"
29+
>
30+
<path
31+
d="M0 0h24v24H0z"
32+
fill="none"
33+
/>
34+
<path
35+
d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
36+
fill="currentColor"
37+
/>
38+
</svg>
39+
</button>
40+
</Styled(button)>
41+
</FullscreenButton>
42+
</Styled(FullscreenButton)>
2243
</Fullscreen>
2344
`;

0 commit comments

Comments
 (0)