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

Jump to bottom

fix(website/previews): fix copy and paste for colors and icons & previews height #429

Merged
merged 1 commit into from Nov 20, 2019
Merged

fix(website/previews): fix copy and paste for colors and icons & previews height #429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Expand Up @@ -49,8 +49,8 @@
"node-sass": "^4.9.4",
"prism-themes": "^1.0.1",
"prismjs": "^1.15.0",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.0",
"rehype-react": "^3.0.3",
"request-promise": "^4.2.4",
Expand Down
34 changes: 25 additions & 9 deletions packages/gatsby-theme-styleguide/gatsby-node.js
View file
Open in desktop
Expand Up @@ -119,15 +119,31 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
const buildHtml = data => {
var header = data.codes.css
var body = data.codes.html
return (
'<!DOCTYPE html>' +
'<html><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge">' +
'<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><style>' +
header +
'</style></head><body>' +
body +
'</body></html>'
)
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
* {
box-sizing: padding-box;
}

body, html {
margin :0;
padding :0;
display: block;
overflow: hidden
}
</style>
<style>${header}</style>
</head>
<body>
${body}
</body>
</html>
`
}

// Create an array with all the previews path. Used for testing purposes
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-theme-styleguide/package.json
View file
Open in desktop
Expand Up @@ -28,7 +28,7 @@
},
"peerDependencies": {
"gatsby": "^2.0.19",
"react": "^16.5.1",
"react-dom": "^16.5.1"
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
35 changes: 8 additions & 27 deletions packages/gatsby-theme-styleguide/src/gatsby-components/Color/ColorInfo.js
View file
Open in desktop
@@ -1,5 +1,6 @@
import styled from 'styled-components'
import React, { PureComponent } from 'react'
import copyToClipboard from '../../utils/copy-to-clipboard'

const Info = styled.div`
width: 100%;
Expand Down Expand Up @@ -45,41 +46,21 @@ class Color extends PureComponent {
}
}

componentDidMount() {
this.isClipBoardAPIAvailable()
}

isClipBoardAPIAvailable = () => {
if (navigator.permissions && navigator.permissions.query) {
navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
if (result.state === 'granted' || result.state === 'prompt') {
this.setState({ copyCompatible: true })
}
copyToClipBoard = value => {
copyToClipboard(value)
.then(() => {
this.setState({ copied: true })
setTimeout(() => this.setState({ copied: false }), 3000)
})
}
}

copyToClipBoard = () => {
if (this.state.copyCompatible) {
navigator.clipboard.writeText(this.props.value).then(
() => {
this.setState({ copied: true }, () => {
setTimeout(() => this.setState({ copied: false }), 1000)
})
},
() => {
console.error('error while copying to clipboard')
}
)
}
.catch(() => false)
}

render() {
const { value, label } = this.props
const { copied } = this.state

return (
<Info onClick={this.copyToClipBoard}>
<Info onClick={() => this.copyToClipBoard(value)}>
<Label>
<span>{label} : </span>
</Label>
Expand Down
3 changes: 2 additions & 1 deletion packages/gatsby-theme-styleguide/src/gatsby-components/Copy/Copy.js
View file
Open in desktop
Expand Up @@ -39,7 +39,8 @@ class Copy extends React.Component {
}

copyToClipBoard = () => {
copyToClipboard(this.props.children)
const value = this.props.value ? this.props.value : this.props.children
copyToClipboard(value)
.then(() => {
this.setState({ copied: true })
setTimeout(() => this.setState({ copied: false }), 3000)
Expand Down
15 changes: 15 additions & 0 deletions packages/gatsby-theme-styleguide/src/gatsby-components/IconLibrairy/IconLibrairy.js
View file
Open in desktop
Expand Up @@ -82,6 +82,21 @@ const getPath = (name, fill) => {
d="M0 1v10h16v-10h-16zM15 10h-14v-8h14v8zM10.5 12h-5l-0.5 2-1 1h8l-1-1z"
/>
)
case 'external-link':
return (
<>
<polygon
id="box"
class="st1"
points="0,0 6,0 6,2 2,2 2,14 14,14 14,10 16,10 16,16 0,16"
/>
<polygon
id="arrow_13_"
class="st1"
points="8.4,0 16,0 16,7.6 13.1,4.8 8.9,9 7,7.1 11.2,2.9"
/>
</>
)
default:
return <path />
}
Expand Down
14 changes: 14 additions & 0 deletions packages/gatsby-theme-styleguide/src/gatsby-components/Preview/PreviewComponent.js
View file
Open in desktop
Expand Up @@ -71,11 +71,15 @@ export class PreviewComponent extends PureComponent {
currentCodeSample: 'html',
copyCompatible: false,
copied: false,
location: '',
}
}

componentDidMount() {
this.props.getAvailableWidth(this.contRef.clientWidth)
if (typeof window !== 'undefined') {
this.setState({ location: window.location })
}
}

componentDidUpdate() {
Expand Down Expand Up @@ -130,6 +134,12 @@ export class PreviewComponent extends PureComponent {
if (this.props.data === undefined) {
return <div />
}
const iframeSrc =
this.props.data.node.previewPath && this.state.location
? `${
this.state.location.origin
}/${this.props.data.node.previewPath.split('docs/').pop()}.html`
: ''

const ViewPortsObj = viewPorts
const preview = this.props.data.node.codes
Expand All @@ -147,6 +157,7 @@ export class PreviewComponent extends PureComponent {
changeViewPort={changeViewPort}
showGrid={showGrid}
grid={grid}
iframeSrc={iframeSrc}
/>
<Body ref={body => (this.body = body)}>
<PreviewFrame
Expand All @@ -157,6 +168,7 @@ export class PreviewComponent extends PureComponent {
data={this.props.data}
grid={grid}
showGrid={showGrid}
iframeSrc={iframeSrc}
/>
</Body>
</Left>
Expand Down Expand Up @@ -190,6 +202,7 @@ export class PreviewComponent extends PureComponent {
changeViewPort={changeViewPort}
showGrid={showGrid}
grid={grid}
iframeSrc={iframeSrc}
/>
)}
<PreviewFrame
Expand All @@ -201,6 +214,7 @@ export class PreviewComponent extends PureComponent {
grid={grid}
toggleOptions={toggleOptions}
nude={nude}
iframeSrc={iframeSrc}
/>

{!nude && (
Expand Down