Skip to content

Commit 9164b59

Browse files
SaraVieirasapegin
SaraVieira
authored and
sapegin
committed
fix(235) - Move open isolated (#434)
* fix(235) - Move open isolated * add isolate * separate imports * Add react group , update other isolated link
1 parent feaa6b8 commit 9164b59

File tree

5 files changed

+143
-125
lines changed

5 files changed

+143
-125
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
"react-docgen": "^2.15.0",
6969
"react-docgen-displayname-handler": "^1.0.0",
7070
"react-group": "^1.0.4",
71+
"react-icons": "^2.2.5",
7172
"remark": "^7.0.1",
7273
"semver-utils": "^1.1.1",
7374
"style-loader": "^0.17.0",

‎src/rsg-components/Playground/PlaygroundRenderer.js‎

Lines changed: 48 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import React from 'react';
2+
import Group from 'react-group';
23
import PropTypes from 'prop-types';
4+
import MdFullscreen from 'react-icons/lib/md/fullscreen';
5+
import MdFullscreenExit from 'react-icons/lib/md/fullscreen-exit';
6+
import MdArrowDropDown from 'react-icons/lib/md/arrow-drop-down';
7+
import MdArrowDropUp from 'react-icons/lib/md/arrow-drop-up';
38
import Editor from 'rsg-components/Editor';
49
import Link from 'rsg-components/Link';
510
import Preview from 'rsg-components/Preview';
@@ -13,51 +18,43 @@ const styles = ({ space, color, fontFamily, fontSize, borderRadius }) => ({
1318
border: [[1, color.border, 'solid']],
1419
borderRadius: [[borderRadius, borderRadius, 0, borderRadius]],
1520
marginTop: space[0],
16-
'&:hover $isolatedLink': {
17-
isolate: false,
18-
opacity: 1,
19-
},
2021
},
2122
preview: {
2223
marginBottom: space[0],
2324
padding: space[2],
2425
},
2526
codeToggle: {
26-
position: 'absolute',
27-
right: -1,
28-
margin: 0,
29-
padding: [[space[0], space[1]]],
27+
border: 'none',
3028
fontFamily: fontFamily.base,
3129
fontSize: fontSize.base,
32-
lineHeight: 1,
33-
color: color.link,
34-
border: [[1, color.border, 'solid']],
35-
borderTop: 0,
36-
borderBottomLeftRadius: borderRadius,
37-
borderBottomRightRadius: borderRadius,
30+
color: color.light,
31+
transition: 'all 200ms ease',
3832
cursor: 'pointer',
39-
'&:hover, &:active': {
33+
'&:not(:focus)': {
34+
isolate: false,
35+
outline: 'none',
36+
},
37+
'&:hover': {
4038
isolate: false,
4139
color: color.linkHover,
4240
},
4341
},
44-
showCode: {
45-
composes: '$codeToggle',
46-
backgroundColor: color.baseBackground,
42+
toolbar: {
43+
display: 'flex',
44+
padding: [[space[0], space[2]]],
4745
},
48-
hideCode: {
49-
composes: '$codeToggle',
50-
backgroundColor: color.codeBackground,
46+
toolbarItem: {
47+
marginRight: space[1],
5148
},
52-
isolatedLink: {
53-
position: 'absolute',
54-
top: 0,
55-
right: 0,
56-
padding: [[space[0], space[1]]],
57-
fontFamily: fontFamily.base,
58-
fontSize: fontSize.base,
59-
opacity: 0,
60-
transition: 'opacity ease-in-out .15s .2s',
49+
icons: {
50+
width: 20,
51+
height: 20,
52+
color: color.light,
53+
transition: 'all 200ms ease',
54+
'&:hover': {
55+
isolate: false,
56+
color: color.linkHover,
57+
},
6158
},
6259
});
6360

@@ -75,29 +72,31 @@ export function PlaygroundRenderer({
7572
return (
7673
<div className={classes.root}>
7774
<div className={classes.preview} data-preview={name ? name : ''}>
78-
<div className={classes.isolatedLink}>
79-
{name && (
80-
isolatedExample ? (
81-
<Link href={'#!/' + name}>⇽ Exit Isolation</Link>
82-
) : (
83-
<Link href={'#!/' + name + '/' + index}>Open isolated ⇢</Link>
84-
)
85-
)}
86-
</div>
8775
<Preview code={code} evalInContext={evalInContext} />
8876
</div>
89-
{showCode ? (
90-
<div>
91-
<Editor code={code} onChange={onChange} />
92-
<button type="button" className={classes.hideCode} onClick={onCodeToggle}>
93-
Hide code
77+
<Group separator=" " className={classes.toolbar}>
78+
<div className={classes.toolbarItem}>
79+
{name && (
80+
isolatedExample ? (
81+
<Link href={'/'}><MdFullscreenExit className={classes.icons} /></Link>
82+
) : (
83+
<Link href={'#!/' + name + '/' + index}>
84+
<MdFullscreen className={classes.icons} />
85+
</Link>
86+
)
87+
)}
88+
</div>
89+
<div className={classes.toolbarItem}>
90+
<button type="button" className={classes.codeToggle} onClick={onCodeToggle}>
91+
{ showCode ? 'Hide' : 'Show'} code
92+
{ showCode
93+
? <MdArrowDropUp className={classes.icons} />
94+
: <MdArrowDropDown className={classes.icons} />
95+
}
9496
</button>
9597
</div>
96-
) : (
97-
<button type="button" className={classes.showCode} onClick={onCodeToggle}>
98-
Show code
99-
</button>
100-
)}
98+
</Group>
99+
{showCode && <Editor code={code} onChange={onChange} />}
101100
</div>
102101
);
103102
}

‎src/rsg-components/Playground/__snapshots__/Playground.spec.js.snap‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,32 @@ exports[`renderer should render preview 1`] = `
55
<div
66
data-preview="name"
77
>
8-
<div>
9-
<_class
10-
href="#!/name/0"
11-
>
12-
Open isolated ⇢
13-
</_class>
14-
</div>
158
<Preview
169
code="<button>OK</button>"
1710
evalInContext={[Function]}
1811
/>
1912
</div>
20-
<button
21-
onClick={[Function]}
22-
type="button"
13+
<Group
14+
separator=" "
2315
>
24-
Show code
25-
</button>
16+
<div>
17+
<_class
18+
href="#!/name/0"
19+
>
20+
<MdFullscreen />
21+
</_class>
22+
</div>
23+
<div>
24+
<button
25+
onClick={[Function]}
26+
type="button"
27+
>
28+
Show
29+
code
30+
<MdArrowDropDown />
31+
</button>
32+
</div>
33+
</Group>
2634
</div>
2735
`;
2836

‎src/rsg-components/ReactComponent/ReactComponentRenderer.js‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Markdown from 'rsg-components/Markdown';
66
import JsDoc from 'rsg-components/JsDoc';
77
import Styled from 'rsg-components/Styled';
88
import cx from 'classnames';
9+
import MdFullscreen from 'react-icons/lib/md/fullscreen';
10+
import MdFullscreenExit from 'react-icons/lib/md/fullscreen-exit';
911

1012
const styles = ({ color, fontSize, fontFamily, space }) => ({
1113
root: {
@@ -20,14 +22,15 @@ const styles = ({ color, fontSize, fontFamily, space }) => ({
2022
position: 'relative',
2123
marginBottom: space[3],
2224
},
23-
isolatedLink: {
24-
position: 'absolute',
25-
top: 0,
26-
right: 0,
27-
fontFamily: fontFamily.base,
28-
fontSize: fontSize.base,
29-
opacity: 0,
30-
transition: 'opacity ease-in-out .15s .2s',
25+
icons: {
26+
width: 30,
27+
height: 30,
28+
color: color.light,
29+
transition: 'all 200ms ease',
30+
'&:hover': {
31+
isolate: false,
32+
color: color.linkHover,
33+
},
3134
},
3235
primaryHeading: {
3336
color: color.base,
@@ -37,6 +40,9 @@ const styles = ({ color, fontSize, fontFamily, space }) => ({
3740
fontFamily: fontFamily.base,
3841
fontSize: fontSize.h2,
3942
fontWeight: 'normal',
43+
display: 'flex',
44+
alignItem: 'center',
45+
justifyContent: 'space-between',
4046
},
4147
heading: {
4248
color: color.base,
@@ -84,15 +90,19 @@ export function ReactComponentRenderer({
8490
<header className={classes.header}>
8591
<Heading level={2} className={headingClasses} slug={slug}>
8692
{name}
93+
<div className={classes.isolatedLink}>
94+
{isolated ? (
95+
<Link href="/">
96+
<MdFullscreenExit className={classes.icons} />
97+
</Link>
98+
) : (
99+
<Link href={'#!/' + name}>
100+
<MdFullscreen className={classes.icons} />
101+
</Link>
102+
)}
103+
</div>
87104
</Heading>
88105
<div className={classes.pathLine}>{pathLine}</div>
89-
<div className={classes.isolatedLink}>
90-
{isolated ? (
91-
<Link href="/">← Back</Link>
92-
) : (
93-
<Link href={'#!/' + name}>Open isolated ⇢</Link>
94-
)}
95-
</div>
96106
</header>
97107
<div className={classes.description}>
98108
{description && <Markdown text={description} />}

0 commit comments

Comments
 (0)