@workday/canvas-kit-docs 12.0.0-alpha.898-next.0 → 12.0.0-alpha.902-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqD1B,eAAO,MAAM,gBAAgB,aAAY,GAAG,sBAgF3C,CAAC"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import SyntaxHighlighter from 'react-syntax-highlighter';
|
|
3
|
-
import { purebasic } from 'react-syntax-highlighter/dist/esm/styles/hljs';
|
|
2
|
+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
4
3
|
import { TertiaryButton } from '@workday/canvas-kit-react/button';
|
|
5
4
|
import { Card } from '@workday/canvas-kit-react/card';
|
|
6
5
|
import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
|
|
7
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
|
+
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
|
8
|
+
import { checkCircleIcon, copyIcon } from '@workday/canvas-system-icons-web';
|
|
9
|
+
import { Tooltip } from '@workday/canvas-kit-react';
|
|
8
10
|
const cardStencil = createStencil({
|
|
9
11
|
base: {
|
|
10
12
|
'[data-part="example-block"]': {
|
|
@@ -14,7 +16,6 @@ const cardStencil = createStencil({
|
|
|
14
16
|
},
|
|
15
17
|
'[data-part="code-block"]': {
|
|
16
18
|
display: 'none',
|
|
17
|
-
marginTop: calc.divide(system.space.x1, 2),
|
|
18
19
|
boxShadow: system.depth[1],
|
|
19
20
|
borderRadius: system.shape.x1,
|
|
20
21
|
},
|
|
@@ -23,6 +24,13 @@ const cardStencil = createStencil({
|
|
|
23
24
|
right: calc.negate(px2rem(1)),
|
|
24
25
|
bottom: calc.negate(px2rem(1)),
|
|
25
26
|
},
|
|
27
|
+
'[data-part="copy-btn"]': {
|
|
28
|
+
position: 'absolute',
|
|
29
|
+
bottom: system.space.zero,
|
|
30
|
+
right: system.space.zero,
|
|
31
|
+
borderRadius: system.shape.zero,
|
|
32
|
+
borderTopLeftRadius: system.shape.x1,
|
|
33
|
+
},
|
|
26
34
|
},
|
|
27
35
|
modifiers: {
|
|
28
36
|
opened: {
|
|
@@ -42,15 +50,44 @@ const cardStencil = createStencil({
|
|
|
42
50
|
});
|
|
43
51
|
export const ExampleCodeBlock = ({ code }) => {
|
|
44
52
|
const [isCodeDisplayed, setCodeDisplayed] = React.useState(false);
|
|
53
|
+
const textInput = React.useRef(null);
|
|
54
|
+
const [copied, setCopied] = React.useState(false);
|
|
55
|
+
const timer = React.useRef();
|
|
56
|
+
const onCopy = () => {
|
|
57
|
+
if (timer.current) {
|
|
58
|
+
clearTimeout(timer.current);
|
|
59
|
+
}
|
|
60
|
+
timer.current = setTimeout(() => {
|
|
61
|
+
setCopied(false);
|
|
62
|
+
}, 2000);
|
|
63
|
+
setCopied(true);
|
|
64
|
+
// @ts-ignore
|
|
65
|
+
navigator.clipboard.writeText(textInput.current.textContent);
|
|
66
|
+
};
|
|
67
|
+
// React.useEffect(() => {
|
|
68
|
+
// if (copied) {
|
|
69
|
+
// const copyCodeTimeout = setTimeout(() => {
|
|
70
|
+
// setCopied(false);
|
|
71
|
+
// }, 2000);
|
|
72
|
+
// return () => {
|
|
73
|
+
// clearTimeout(copyCodeTimeout);
|
|
74
|
+
// };
|
|
75
|
+
// }
|
|
76
|
+
// }, [copied]);
|
|
45
77
|
return (React.createElement("div", { ...cardStencil({ opened: isCodeDisplayed }) },
|
|
46
78
|
React.createElement(Card, { "data-part": "example-block", className: "sb-unstyled" },
|
|
47
79
|
React.createElement(Card.Body, null,
|
|
48
80
|
React.createElement(code),
|
|
49
81
|
code && (React.createElement(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), "data-part": "code-toggle-btn" }, !isCodeDisplayed ? 'Show Code' : 'Hide Code')))),
|
|
50
|
-
React.createElement(Card, { "data-part": "code-block" },
|
|
51
|
-
React.createElement(Card.Body,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
82
|
+
React.createElement(Card, { "data-part": "code-block", padding: 0 },
|
|
83
|
+
React.createElement(Card.Body, { cs: { position: 'relative' } },
|
|
84
|
+
code && (React.createElement("div", { ref: textInput },
|
|
85
|
+
React.createElement(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
|
|
86
|
+
fontSize: cssVar(system.fontSize.subtext.large),
|
|
87
|
+
lineHeight: cssVar(system.lineHeight.subtext.large),
|
|
88
|
+
margin: '0',
|
|
89
|
+
padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
|
|
90
|
+
}, children: code.__RAW__ }))),
|
|
91
|
+
React.createElement(Tooltip, { title: copied ? 'Copied!' : 'Copy Source Code' },
|
|
92
|
+
React.createElement(TertiaryButton, { "aria-label": "Copy Code", size: "large", "data-part": "copy-btn", variant: "inverse", iconPosition: "end", icon: copied ? checkCircleIcon : copyIcon, onClick: onCopy }))))));
|
|
56
93
|
};
|
package/lib/ExampleCodeBlock.tsx
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import SyntaxHighlighter from 'react-syntax-highlighter';
|
|
3
|
-
import {purebasic} from 'react-syntax-highlighter/dist/esm/styles/hljs';
|
|
2
|
+
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
|
|
4
3
|
|
|
5
4
|
import {TertiaryButton} from '@workday/canvas-kit-react/button';
|
|
6
5
|
import {Card} from '@workday/canvas-kit-react/card';
|
|
7
6
|
import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
|
|
8
7
|
import {system} from '@workday/canvas-tokens-web';
|
|
8
|
+
import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
|
9
|
+
import {checkCircleIcon, copyIcon} from '@workday/canvas-system-icons-web';
|
|
10
|
+
import {Tooltip} from '@workday/canvas-kit-react';
|
|
9
11
|
|
|
10
12
|
const cardStencil = createStencil({
|
|
11
13
|
base: {
|
|
@@ -16,7 +18,6 @@ const cardStencil = createStencil({
|
|
|
16
18
|
},
|
|
17
19
|
'[data-part="code-block"]': {
|
|
18
20
|
display: 'none',
|
|
19
|
-
marginTop: calc.divide(system.space.x1, 2),
|
|
20
21
|
boxShadow: system.depth[1],
|
|
21
22
|
borderRadius: system.shape.x1,
|
|
22
23
|
},
|
|
@@ -25,6 +26,13 @@ const cardStencil = createStencil({
|
|
|
25
26
|
right: calc.negate(px2rem(1)),
|
|
26
27
|
bottom: calc.negate(px2rem(1)),
|
|
27
28
|
},
|
|
29
|
+
'[data-part="copy-btn"]': {
|
|
30
|
+
position: 'absolute',
|
|
31
|
+
bottom: system.space.zero,
|
|
32
|
+
right: system.space.zero,
|
|
33
|
+
borderRadius: system.shape.zero,
|
|
34
|
+
borderTopLeftRadius: system.shape.x1,
|
|
35
|
+
},
|
|
28
36
|
},
|
|
29
37
|
modifiers: {
|
|
30
38
|
opened: {
|
|
@@ -45,6 +53,34 @@ const cardStencil = createStencil({
|
|
|
45
53
|
|
|
46
54
|
export const ExampleCodeBlock = ({code}: any) => {
|
|
47
55
|
const [isCodeDisplayed, setCodeDisplayed] = React.useState(false);
|
|
56
|
+
const textInput = React.useRef(null);
|
|
57
|
+
const [copied, setCopied] = React.useState(false);
|
|
58
|
+
const timer = React.useRef<ReturnType<typeof setTimeout>>();
|
|
59
|
+
|
|
60
|
+
const onCopy = () => {
|
|
61
|
+
if (timer.current) {
|
|
62
|
+
clearTimeout(timer.current);
|
|
63
|
+
}
|
|
64
|
+
timer.current = setTimeout(() => {
|
|
65
|
+
setCopied(false);
|
|
66
|
+
}, 2000);
|
|
67
|
+
|
|
68
|
+
setCopied(true);
|
|
69
|
+
// @ts-ignore
|
|
70
|
+
navigator.clipboard.writeText(textInput.current.textContent);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
// React.useEffect(() => {
|
|
74
|
+
// if (copied) {
|
|
75
|
+
// const copyCodeTimeout = setTimeout(() => {
|
|
76
|
+
// setCopied(false);
|
|
77
|
+
// }, 2000);
|
|
78
|
+
|
|
79
|
+
// return () => {
|
|
80
|
+
// clearTimeout(copyCodeTimeout);
|
|
81
|
+
// };
|
|
82
|
+
// }
|
|
83
|
+
// }, [copied]);
|
|
48
84
|
|
|
49
85
|
return (
|
|
50
86
|
<div {...cardStencil({opened: isCodeDisplayed})}>
|
|
@@ -62,20 +98,35 @@ export const ExampleCodeBlock = ({code}: any) => {
|
|
|
62
98
|
)}
|
|
63
99
|
</Card.Body>
|
|
64
100
|
</Card>
|
|
65
|
-
<Card data-part="code-block">
|
|
66
|
-
<Card.Body>
|
|
101
|
+
<Card data-part="code-block" padding={0}>
|
|
102
|
+
<Card.Body cs={{position: 'relative'}}>
|
|
67
103
|
{code && (
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
104
|
+
<div ref={textInput}>
|
|
105
|
+
<SyntaxHighlighter
|
|
106
|
+
className="sb-unstyled"
|
|
107
|
+
language="jsx"
|
|
108
|
+
style={vscDarkPlus}
|
|
109
|
+
customStyle={{
|
|
110
|
+
fontSize: cssVar(system.fontSize.subtext.large),
|
|
111
|
+
lineHeight: cssVar(system.lineHeight.subtext.large),
|
|
112
|
+
margin: '0',
|
|
113
|
+
padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
|
|
114
|
+
}}
|
|
115
|
+
children={code.__RAW__}
|
|
116
|
+
/>
|
|
117
|
+
</div>
|
|
78
118
|
)}
|
|
119
|
+
<Tooltip title={copied ? 'Copied!' : 'Copy Source Code'}>
|
|
120
|
+
<TertiaryButton
|
|
121
|
+
aria-label="Copy Code"
|
|
122
|
+
size="large"
|
|
123
|
+
data-part="copy-btn"
|
|
124
|
+
variant="inverse"
|
|
125
|
+
iconPosition="end"
|
|
126
|
+
icon={copied ? checkCircleIcon : copyIcon}
|
|
127
|
+
onClick={onCopy}
|
|
128
|
+
/>
|
|
129
|
+
</Tooltip>
|
|
79
130
|
</Card.Body>
|
|
80
131
|
</Card>
|
|
81
132
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.0.0-alpha.
|
|
3
|
+
"version": "12.0.0-alpha.902-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^12.0.0-alpha.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^12.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^12.0.0-alpha.902-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^12.0.0-alpha.902-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^12.0.0-alpha.902-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^12.0.0-alpha.902-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^2.0.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "4.9"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "6e0e672fce177b34bc292b7b7a61980657634665"
|
|
64
64
|
}
|