@workday/canvas-kit-docs 12.3.4 → 12.3.6
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.
package/dist/es6/lib/docs.js
CHANGED
|
@@ -139368,24 +139368,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
139368
139368
|
}
|
|
139369
139369
|
],
|
|
139370
139370
|
"tags": {}
|
|
139371
|
-
},
|
|
139372
|
-
{
|
|
139373
|
-
"kind": "property",
|
|
139374
|
-
"name": "action",
|
|
139375
|
-
"required": true,
|
|
139376
|
-
"type": {
|
|
139377
|
-
"kind": "symbol",
|
|
139378
|
-
"name": "CanvasThemePalette",
|
|
139379
|
-
"value": "CanvasThemePalette"
|
|
139380
|
-
},
|
|
139381
|
-
"description": "",
|
|
139382
|
-
"declarations": [
|
|
139383
|
-
{
|
|
139384
|
-
"name": "action",
|
|
139385
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
|
|
139386
|
-
}
|
|
139387
|
-
],
|
|
139388
|
-
"tags": {}
|
|
139389
139371
|
}
|
|
139390
139372
|
]
|
|
139391
139373
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsD1B,eAAO,MAAM,WAAW,yBAkHvB,CAAC"}
|
|
@@ -1,61 +1,85 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
// @ts-ignore: Cannot find module error
|
|
3
|
-
import headerImage from './
|
|
3
|
+
import headerImage from './CK-banner-temp.jpg';
|
|
4
4
|
import { Flex, Grid, Box } from '@workday/canvas-kit-react/layout';
|
|
5
5
|
import { InstallBlock } from './installBlock';
|
|
6
6
|
import { Text, Heading } from '@workday/canvas-kit-react/text';
|
|
7
7
|
import { Card } from '@workday/canvas-kit-react/card';
|
|
8
8
|
import { ExternalHyperlink, Hyperlink } from '@workday/canvas-kit-react/button';
|
|
9
|
-
import { colors } from '@workday/canvas-kit-react/tokens';
|
|
10
9
|
import { rocketIcon, tokensIcon, shapesIcon } from '@workday/canvas-system-icons-web';
|
|
11
10
|
import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
12
|
-
import { system } from '@workday/canvas-tokens-web';
|
|
13
|
-
import {
|
|
11
|
+
import { system, base } from '@workday/canvas-tokens-web';
|
|
12
|
+
import { createStyles } from '@workday/canvas-kit-styling';
|
|
14
13
|
// @ts-ignore: Cannot find module error
|
|
15
14
|
import { version } from '../../../lerna.json';
|
|
15
|
+
const parentFlexStyles = createStyles({
|
|
16
|
+
display: 'flex',
|
|
17
|
+
flexDirection: 'column',
|
|
18
|
+
gap: system.space.x4,
|
|
19
|
+
marginBottom: system.space.x6,
|
|
20
|
+
});
|
|
21
|
+
const textStyles = createStyles({
|
|
22
|
+
color: system.color.text.inverse,
|
|
23
|
+
fontSize: '5vmin',
|
|
24
|
+
lineHeight: '5vmin',
|
|
25
|
+
});
|
|
26
|
+
const versionStyles = createStyles({
|
|
27
|
+
fontWeight: base.fontFamily100,
|
|
28
|
+
marginInlineStart: system.space.x4,
|
|
29
|
+
});
|
|
30
|
+
const imageStyles = createStyles({
|
|
31
|
+
width: '100%',
|
|
32
|
+
height: 'auto',
|
|
33
|
+
});
|
|
34
|
+
const borderStyles = createStyles({
|
|
35
|
+
borderBottom: `1px solid ${base.blueberry200}`,
|
|
36
|
+
marginBottom: system.space.x2,
|
|
37
|
+
});
|
|
38
|
+
const gridStyles = createStyles({
|
|
39
|
+
maxHeight: 320,
|
|
40
|
+
gridTemplateRows: '1fr 1fr 2fr 1fr',
|
|
41
|
+
display: 'grid',
|
|
42
|
+
});
|
|
43
|
+
const linkStyles = createStyles({
|
|
44
|
+
alignSelf: 'end',
|
|
45
|
+
marginTop: system.space.x3,
|
|
46
|
+
});
|
|
16
47
|
export const WelcomePage = () => {
|
|
17
|
-
return (React.createElement(
|
|
18
|
-
React.createElement(
|
|
19
|
-
React.createElement(
|
|
20
|
-
React.createElement(
|
|
21
|
-
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
React.createElement(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
React.createElement(
|
|
37
|
-
React.createElement(Grid
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
React.createElement(Card
|
|
44
|
-
React.createElement(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
' ',
|
|
55
|
-
"View Assets"))),
|
|
56
|
-
React.createElement(Heading, { size: "medium", borderBottom: `1px solid ${colors.blueberry200}`, paddingBottom: "xxs" }, "Installation"),
|
|
57
|
-
React.createElement(Text, null, "To get started using Canvas kit React first add or install the module to your existing React project"),
|
|
58
|
-
React.createElement(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react" }),
|
|
59
|
-
"or",
|
|
60
|
-
React.createElement(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react" })));
|
|
48
|
+
return (React.createElement("div", { className: "sb-unstyled" },
|
|
49
|
+
React.createElement("div", { className: parentFlexStyles },
|
|
50
|
+
React.createElement(Box, { cs: { overflow: 'hidden', position: 'relative' } },
|
|
51
|
+
React.createElement(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' } },
|
|
52
|
+
React.createElement(Text, { typeLevel: "title.medium", cs: textStyles }, "Canvas Kit"),
|
|
53
|
+
React.createElement(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles] },
|
|
54
|
+
"v",
|
|
55
|
+
version)),
|
|
56
|
+
React.createElement("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })),
|
|
57
|
+
React.createElement(Text, { typeLevel: "body.medium" },
|
|
58
|
+
"This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with",
|
|
59
|
+
React.createElement(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window" }, "Workday Design Principles.")),
|
|
60
|
+
React.createElement(Heading, { size: "medium", className: borderStyles }, "Quick Links"),
|
|
61
|
+
React.createElement(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s" },
|
|
62
|
+
React.createElement(Grid, { as: Card, className: gridStyles },
|
|
63
|
+
React.createElement(SystemIcon, { color: base.cantaloupe400, colorHover: base.cantaloupe400, icon: rocketIcon, size: 60 }),
|
|
64
|
+
React.createElement(Card.Heading, null, "Getting Started"),
|
|
65
|
+
React.createElement(Card.Body, null,
|
|
66
|
+
React.createElement(Text, null, "For all things getting started including helpful guides and docs.")),
|
|
67
|
+
React.createElement(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" }, "Getting Started Guide")),
|
|
68
|
+
React.createElement(Grid, { as: Card, className: gridStyles },
|
|
69
|
+
React.createElement(SystemIcon, { color: base.blueberry400, icon: tokensIcon, colorHover: base.blueberry400, size: 60 }),
|
|
70
|
+
React.createElement(Card.Heading, null, "Tokens"),
|
|
71
|
+
React.createElement(Card.Body, null,
|
|
72
|
+
React.createElement(Text, null, "Tokens are the smallest pieces of our Design System with the primary function of storing UI information.")),
|
|
73
|
+
React.createElement(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview" }, "View Our Tokens")),
|
|
74
|
+
React.createElement(Grid, { as: Card, className: gridStyles },
|
|
75
|
+
React.createElement(SystemIcon, { color: base.greenApple400, icon: shapesIcon, size: 60, colorHover: base.greenApple400 }),
|
|
76
|
+
React.createElement(Card.Heading, null, "Assets"),
|
|
77
|
+
React.createElement(Card.Body, null,
|
|
78
|
+
React.createElement(Text, null, "Assets are graphics which help communicate meaning or highlight areas of interaction to our users.")),
|
|
79
|
+
React.createElement(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview" }, "View Assets"))),
|
|
80
|
+
React.createElement(Heading, { size: "medium", className: borderStyles }, "Installation"),
|
|
81
|
+
React.createElement(Text, null, "To get started using Canvas Kit React first add or install the module to your existing React project"),
|
|
82
|
+
React.createElement(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react" }),
|
|
83
|
+
"or",
|
|
84
|
+
React.createElement(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react" }))));
|
|
61
85
|
};
|
|
@@ -94,7 +94,11 @@ or view the example below.
|
|
|
94
94
|
|
|
95
95
|
### Theme Overrides
|
|
96
96
|
|
|
97
|
-
The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
|
|
97
|
+
The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
|
|
98
|
+
|
|
99
|
+
> **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
|
|
100
|
+
|
|
101
|
+
> **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application.
|
|
98
102
|
|
|
99
103
|
<ExampleCodeBlock code={ThemeOverrides} />
|
|
100
104
|
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
caretDownIcon,
|
|
9
9
|
} from '@workday/canvas-system-icons-web';
|
|
10
10
|
import {createStyles} from '@workday/canvas-kit-styling';
|
|
11
|
-
import {system} from '@workday/canvas-tokens-web';
|
|
11
|
+
import {brand, system} from '@workday/canvas-tokens-web';
|
|
12
12
|
import {CanvasProvider} from '@workday/canvas-kit-react/common';
|
|
13
13
|
import {Heading} from '@workday/canvas-kit-react/text';
|
|
14
14
|
|
|
@@ -17,17 +17,24 @@ const parentContainerStyles = createStyles({
|
|
|
17
17
|
padding: system.space.x4,
|
|
18
18
|
});
|
|
19
19
|
|
|
20
|
+
const customActionTheme = createStyles({
|
|
21
|
+
[brand.action.base]: 'teal',
|
|
22
|
+
[brand.action.accent]: 'white',
|
|
23
|
+
[brand.action.dark]: 'hsla(180, 100%, 20%)',
|
|
24
|
+
[brand.action.darkest]: 'hsla(180, 100%, 16%)',
|
|
25
|
+
});
|
|
26
|
+
|
|
20
27
|
export default () => (
|
|
21
28
|
<div>
|
|
22
29
|
<Heading size="medium" as="h3">
|
|
23
|
-
Override Primary Color
|
|
30
|
+
Override Primary Color Via Canvas Provider
|
|
24
31
|
</Heading>
|
|
25
32
|
<CanvasProvider
|
|
26
33
|
theme={{
|
|
27
34
|
canvas: {
|
|
28
35
|
palette: {
|
|
29
|
-
|
|
30
|
-
main: '
|
|
36
|
+
primary: {
|
|
37
|
+
main: 'navy',
|
|
31
38
|
},
|
|
32
39
|
},
|
|
33
40
|
},
|
|
@@ -45,19 +52,9 @@ export default () => (
|
|
|
45
52
|
</Flex>
|
|
46
53
|
</CanvasProvider>
|
|
47
54
|
<Heading size="medium" as="h3">
|
|
48
|
-
Override Action Color
|
|
55
|
+
Override Action Color Via CSS Action Token
|
|
49
56
|
</Heading>
|
|
50
|
-
<
|
|
51
|
-
theme={{
|
|
52
|
-
canvas: {
|
|
53
|
-
palette: {
|
|
54
|
-
primary: {
|
|
55
|
-
main: 'navy',
|
|
56
|
-
},
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
}}
|
|
60
|
-
>
|
|
57
|
+
<div className={customActionTheme}>
|
|
61
58
|
<Flex cs={parentContainerStyles}>
|
|
62
59
|
<PrimaryButton>Primary</PrimaryButton>
|
|
63
60
|
<PrimaryButton icon={plusIcon} iconPosition="start">
|
|
@@ -68,6 +65,6 @@ export default () => (
|
|
|
68
65
|
</PrimaryButton>
|
|
69
66
|
<PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
|
|
70
67
|
</Flex>
|
|
71
|
-
</
|
|
68
|
+
</div>
|
|
72
69
|
</div>
|
|
73
70
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.3.
|
|
3
|
+
"version": "12.3.6",
|
|
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,12 +44,12 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^12.3.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.3.
|
|
49
|
-
"@workday/canvas-kit-react": "^12.3.
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.3.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^12.3.6",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^12.3.6",
|
|
49
|
+
"@workday/canvas-kit-react": "^12.3.6",
|
|
50
|
+
"@workday/canvas-kit-styling": "^12.3.6",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
|
-
"@workday/canvas-tokens-web": "^2.1.
|
|
52
|
+
"@workday/canvas-tokens-web": "^2.1.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
54
54
|
"react-syntax-highlighter": "^15.5.0",
|
|
55
55
|
"ts-node": "^10.9.1"
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "5.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "20a9a33c6a1b54b37959d5523881f633e377ddda"
|
|
64
64
|
}
|