@workday/canvas-kit-docs 14.0.0-alpha.1224-next.0 → 14.0.0-alpha.1225-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":"
|
|
1
|
+
{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAkEA,eAAO,MAAM,gBAAgB,aAAY,GAAG,4CAiH3C,CAAC"}
|
|
@@ -18,6 +18,7 @@ import eslintrc from '!!raw-loader!./stackblitzFiles/.eslintrc.cjs.txt';
|
|
|
18
18
|
import tsconfigNodeFile from '!!raw-loader!./stackblitzFiles/tsconfig.node.json';
|
|
19
19
|
import appFile from '!!raw-loader!./stackblitzFiles/App.tsx';
|
|
20
20
|
import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
|
|
21
|
+
import { CanvasProvider, defaultCanvasTheme } from '@workday/canvas-kit-react/common';
|
|
21
22
|
const cardStencil = createStencil({
|
|
22
23
|
base: {
|
|
23
24
|
'[data-part="example-block"]': {
|
|
@@ -109,10 +110,10 @@ export const ExampleCodeBlock = ({ code }) => {
|
|
|
109
110
|
openFile: 'src/Demo.tsx',
|
|
110
111
|
});
|
|
111
112
|
};
|
|
112
|
-
return (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children:
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
113
|
+
return (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children: _jsx(Card.Body, { children: _jsxs(CanvasProvider, { theme: { canvas: defaultCanvasTheme }, children: [React.createElement(code), code && (_jsxs("div", { "data-part": "code-toggle-stackblitz-btn-container", children: [_jsx(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz(), children: "\u26A1\uFE0F Edit in Stackblitz" }), _jsx(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), children: !isCodeDisplayed ? 'Show Code' : 'Hide Code' })] }))] }) }) }), _jsx(Card, { "data-part": "code-block", padding: 0, children: _jsx(Card.Body, { cs: { position: 'relative' }, children: _jsxs(CanvasProvider, { theme: { canvas: defaultCanvasTheme }, children: [code && (_jsx("div", { ref: textInput, children: _jsx(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
|
|
114
|
+
fontSize: cssVar(system.fontSize.subtext.large),
|
|
115
|
+
lineHeight: cssVar(system.lineHeight.subtext.large),
|
|
116
|
+
margin: '0',
|
|
117
|
+
padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
|
|
118
|
+
}, children: code.__RAW__ }) })), _jsx(Tooltip, { title: copied ? 'Copied!' : 'Copy Source Code', children: _jsx(TertiaryButton, { "aria-label": "Copy Code", size: "large", "data-part": "copy-btn", variant: "inverse", iconPosition: "end", icon: copied ? checkCircleIcon : copyIcon, onClick: onCopy }) })] }) }) })] }));
|
|
118
119
|
};
|
package/lib/ExampleCodeBlock.tsx
CHANGED
|
@@ -18,6 +18,7 @@ import eslintrc from '!!raw-loader!./stackblitzFiles/.eslintrc.cjs.txt';
|
|
|
18
18
|
import tsconfigNodeFile from '!!raw-loader!./stackblitzFiles/tsconfig.node.json';
|
|
19
19
|
import appFile from '!!raw-loader!./stackblitzFiles/App.tsx';
|
|
20
20
|
import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
|
|
21
|
+
import {CanvasProvider, defaultCanvasTheme} from '@workday/canvas-kit-react/common';
|
|
21
22
|
|
|
22
23
|
const cardStencil = createStencil({
|
|
23
24
|
base: {
|
|
@@ -123,48 +124,55 @@ export const ExampleCodeBlock = ({code}: any) => {
|
|
|
123
124
|
<div {...cardStencil({opened: isCodeDisplayed})}>
|
|
124
125
|
<Card data-part="example-block" className="sb-unstyled">
|
|
125
126
|
<Card.Body>
|
|
126
|
-
{
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
127
|
+
<CanvasProvider theme={{canvas: defaultCanvasTheme}}>
|
|
128
|
+
{React.createElement(code)}
|
|
129
|
+
{code && (
|
|
130
|
+
<div data-part="code-toggle-stackblitz-btn-container">
|
|
131
|
+
<TertiaryButton size="extraSmall" onClick={() => openProjectInStackblitz()}>
|
|
132
|
+
⚡️ Edit in Stackblitz
|
|
133
|
+
</TertiaryButton>
|
|
134
|
+
<TertiaryButton
|
|
135
|
+
size="extraSmall"
|
|
136
|
+
onClick={() => setCodeDisplayed(!isCodeDisplayed)}
|
|
137
|
+
>
|
|
138
|
+
{!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
|
|
139
|
+
</TertiaryButton>
|
|
140
|
+
</div>
|
|
141
|
+
)}
|
|
142
|
+
</CanvasProvider>
|
|
137
143
|
</Card.Body>
|
|
138
144
|
</Card>
|
|
139
145
|
<Card data-part="code-block" padding={0}>
|
|
140
146
|
<Card.Body cs={{position: 'relative'}}>
|
|
141
|
-
{
|
|
142
|
-
|
|
143
|
-
<
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
147
|
+
<CanvasProvider theme={{canvas: defaultCanvasTheme}}>
|
|
148
|
+
{code && (
|
|
149
|
+
<div ref={textInput}>
|
|
150
|
+
<SyntaxHighlighter
|
|
151
|
+
className="sb-unstyled"
|
|
152
|
+
language="jsx"
|
|
153
|
+
style={vscDarkPlus}
|
|
154
|
+
customStyle={{
|
|
155
|
+
fontSize: cssVar(system.fontSize.subtext.large),
|
|
156
|
+
lineHeight: cssVar(system.lineHeight.subtext.large),
|
|
157
|
+
margin: '0',
|
|
158
|
+
padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
|
|
159
|
+
}}
|
|
160
|
+
children={code.__RAW__}
|
|
161
|
+
/>
|
|
162
|
+
</div>
|
|
163
|
+
)}
|
|
164
|
+
<Tooltip title={copied ? 'Copied!' : 'Copy Source Code'}>
|
|
165
|
+
<TertiaryButton
|
|
166
|
+
aria-label="Copy Code"
|
|
167
|
+
size="large"
|
|
168
|
+
data-part="copy-btn"
|
|
169
|
+
variant="inverse"
|
|
170
|
+
iconPosition="end"
|
|
171
|
+
icon={copied ? checkCircleIcon : copyIcon}
|
|
172
|
+
onClick={onCopy}
|
|
154
173
|
/>
|
|
155
|
-
</
|
|
156
|
-
|
|
157
|
-
<Tooltip title={copied ? 'Copied!' : 'Copy Source Code'}>
|
|
158
|
-
<TertiaryButton
|
|
159
|
-
aria-label="Copy Code"
|
|
160
|
-
size="large"
|
|
161
|
-
data-part="copy-btn"
|
|
162
|
-
variant="inverse"
|
|
163
|
-
iconPosition="end"
|
|
164
|
-
icon={copied ? checkCircleIcon : copyIcon}
|
|
165
|
-
onClick={onCopy}
|
|
166
|
-
/>
|
|
167
|
-
</Tooltip>
|
|
174
|
+
</Tooltip>
|
|
175
|
+
</CanvasProvider>
|
|
168
176
|
</Card.Body>
|
|
169
177
|
</Card>
|
|
170
178
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1225-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",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1225-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1225-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1225-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1225-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "521a212f0bb4fa645b980f065086277464445490"
|
|
65
65
|
}
|