Skip to content
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

fix(235) - Move open isolated #434

Merged
merged 4 commits into from
May 11, 2017
Merged

fix(235) - Move open isolated #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ec6e96
fix(235) - Move open isolated
May 9, 2017
58a8d42
add isolate
May 9, 2017
6f754c0
separate imports
May 9, 2017
538e891
Add react group , update other isolated link
May 9, 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
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
"react-docgen": "^2.15.0",
"react-docgen-displayname-handler": "^1.0.0",
"react-group": "^1.0.4",
"react-icons": "^2.2.5",
"remark": "^7.0.1",
"semver-utils": "^1.1.1",
"style-loader": "^0.17.0",
Expand Down
97 changes: 48 additions & 49 deletions src/rsg-components/Playground/PlaygroundRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import React from 'react';
import Group from 'react-group';
import PropTypes from 'prop-types';
import MdFullscreen from 'react-icons/lib/md/fullscreen';
import MdFullscreenExit from 'react-icons/lib/md/fullscreen-exit';
import MdArrowDropDown from 'react-icons/lib/md/arrow-drop-down';
import MdArrowDropUp from 'react-icons/lib/md/arrow-drop-up';
import Editor from 'rsg-components/Editor';
import Link from 'rsg-components/Link';
import Preview from 'rsg-components/Preview';
Expand All @@ -13,51 +18,43 @@ const styles = ({ space, color, fontFamily, fontSize, borderRadius }) => ({
border: [[1, color.border, 'solid']],
borderRadius: [[borderRadius, borderRadius, 0, borderRadius]],
marginTop: space[0],
'&:hover $isolatedLink': {
isolate: false,
opacity: 1,
},
},
preview: {
marginBottom: space[0],
padding: space[2],
},
codeToggle: {
position: 'absolute',
right: -1,
margin: 0,
padding: [[space[0], space[1]]],
border: 'none',
fontFamily: fontFamily.base,
fontSize: fontSize.base,
lineHeight: 1,
color: color.link,
border: [[1, color.border, 'solid']],
borderTop: 0,
borderBottomLeftRadius: borderRadius,
borderBottomRightRadius: borderRadius,
color: color.light,
transition: 'all 200ms ease',
cursor: 'pointer',
'&:hover, &:active': {
'&:not(:focus)': {
isolate: false,
outline: 'none',
},
'&:hover': {
isolate: false,
color: color.linkHover,
},
},
showCode: {
composes: '$codeToggle',
backgroundColor: color.baseBackground,
toolbar: {
display: 'flex',
padding: [[space[0], space[2]]],
},
hideCode: {
composes: '$codeToggle',
backgroundColor: color.codeBackground,
toolbarItem: {
marginRight: space[1],
},
isolatedLink: {
position: 'absolute',
top: 0,
right: 0,
padding: [[space[0], space[1]]],
fontFamily: fontFamily.base,
fontSize: fontSize.base,
opacity: 0,
transition: 'opacity ease-in-out .15s .2s',
icons: {
width: 20,
height: 20,
color: color.light,
transition: 'all 200ms ease',
'&:hover': {
isolate: false,
color: color.linkHover,
},
},
});

Expand All @@ -75,29 +72,31 @@ export function PlaygroundRenderer({
return (
<div className={classes.root}>
<div className={classes.preview} data-preview={name ? name : ''}>
<div className={classes.isolatedLink}>
{name && (
isolatedExample ? (
<Link href={'#!/' + name}>⇽ Exit Isolation</Link>
) : (
<Link href={'#!/' + name + '/' + index}>Open isolated ⇢</Link>
)
)}
</div>
<Preview code={code} evalInContext={evalInContext} />
</div>
{showCode ? (
<div>
<Editor code={code} onChange={onChange} />
<button type="button" className={classes.hideCode} onClick={onCodeToggle}>
Hide code
<Group separator=" " className={classes.toolbar}>
<div className={classes.toolbarItem}>
{name && (
isolatedExample ? (
<Link href={'/'}><MdFullscreenExit className={classes.icons} /></Link>
) : (
<Link href={'#!/' + name + '/' + index}>
<MdFullscreen className={classes.icons} />
</Link>
)
)}
</div>
<div className={classes.toolbarItem}>
<button type="button" className={classes.codeToggle} onClick={onCodeToggle}>
{ showCode ? 'Hide' : 'Show'} code
{ showCode
? <MdArrowDropUp className={classes.icons} />
: <MdArrowDropDown className={classes.icons} />
}
</button>
</div>
) : (
<button type="button" className={classes.showCode} onClick={onCodeToggle}>
Show code
</button>
)}
</Group>
{showCode && <Editor code={code} onChange={onChange} />}
</div>
);
}
Expand Down
32 changes: 20 additions & 12 deletions src/rsg-components/Playground/__snapshots__/Playground.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,32 @@ exports[`renderer should render preview 1`] = `
<div
data-preview="name"
>
<div>
<_class
href="#!/name/0"
>
Open isolated ⇢
</_class>
</div>
<Preview
code="<button>OK</button>"
evalInContext={[Function]}
/>
</div>
<button
onClick={[Function]}
type="button"
<Group
separator=" "
>
Show code
</button>
<div>
<_class
href="#!/name/0"
>
<MdFullscreen />
</_class>
</div>
<div>
<button
onClick={[Function]}
type="button"
>
Show
code
<MdArrowDropDown />
</button>
</div>
</Group>
</div>
`;

Expand Down
40 changes: 25 additions & 15 deletions src/rsg-components/ReactComponent/ReactComponentRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import Markdown from 'rsg-components/Markdown';
import JsDoc from 'rsg-components/JsDoc';
import Styled from 'rsg-components/Styled';
import cx from 'classnames';
import MdFullscreen from 'react-icons/lib/md/fullscreen';
import MdFullscreenExit from 'react-icons/lib/md/fullscreen-exit';

const styles = ({ color, fontSize, fontFamily, space }) => ({
root: {
Expand All @@ -20,14 +22,15 @@ const styles = ({ color, fontSize, fontFamily, space }) => ({
position: 'relative',
marginBottom: space[3],
},
isolatedLink: {
position: 'absolute',
top: 0,
right: 0,
fontFamily: fontFamily.base,
fontSize: fontSize.base,
opacity: 0,
transition: 'opacity ease-in-out .15s .2s',
icons: {
width: 30,
height: 30,
color: color.light,
transition: 'all 200ms ease',
'&:hover': {
isolate: false,
color: color.linkHover,
},
},
primaryHeading: {
color: color.base,
Expand All @@ -37,6 +40,9 @@ const styles = ({ color, fontSize, fontFamily, space }) => ({
fontFamily: fontFamily.base,
fontSize: fontSize.h2,
fontWeight: 'normal',
display: 'flex',
alignItem: 'center',
justifyContent: 'space-between',
},
heading: {
color: color.base,
Expand Down Expand Up @@ -84,15 +90,19 @@ export function ReactComponentRenderer({
<header className={classes.header}>
<Heading level={2} className={headingClasses} slug={slug}>
{name}
<div className={classes.isolatedLink}>
{isolated ? (
<Link href="/">
<MdFullscreenExit className={classes.icons} />
</Link>
) : (
<Link href={'#!/' + name}>
<MdFullscreen className={classes.icons} />
</Link>
)}
</div>
</Heading>
<div className={classes.pathLine}>{pathLine}</div>
<div className={classes.isolatedLink}>
{isolated ? (
<Link href="/">← Back</Link>
) : (
<Link href={'#!/' + name}>Open isolated ⇢</Link>
)}
</div>
</header>
<div className={classes.description}>
{description && <Markdown text={description} />}
Expand Down
Loading