@workday/canvas-kit-docs 9.0.0-alpha.382-next.2 → 9.0.0-alpha.385-next.4
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 +782 -0
- package/dist/mdx/9.0-UPGRADE-GUIDE.mdx +263 -99
- package/dist/mdx/preview-react/table/Table.mdx +60 -0
- package/dist/mdx/preview-react/table/examples/Basic.tsx +36 -0
- package/dist/mdx/preview-react/table/examples/BasicWithHeading.tsx +34 -0
- package/dist/mdx/preview-react/table/examples/FixedColumn.tsx +127 -0
- package/dist/mdx/preview-react/table/examples/TableWithContainer.tsx +48 -0
- package/package.json +5 -5
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
4
|
+
import {Heading} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
6
|
+
|
|
7
|
+
export default () => {
|
|
8
|
+
const exampleData = [
|
|
9
|
+
{
|
|
10
|
+
brand: 'Porsche',
|
|
11
|
+
model: '992 911 GT3',
|
|
12
|
+
year: '2022',
|
|
13
|
+
price: 'Starts at $160,000',
|
|
14
|
+
engine: '4.0L Flat 6',
|
|
15
|
+
transmission: 'PDK or 7-Speed Manual',
|
|
16
|
+
horsepower: '502hp',
|
|
17
|
+
torque: '346 lb-ft',
|
|
18
|
+
curbWeight: '3,164 lbs',
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
brand: 'BMW',
|
|
22
|
+
model: 'M5 Competition',
|
|
23
|
+
year: '2018',
|
|
24
|
+
price: 'Starts at $105,000',
|
|
25
|
+
engine: 'Twin-Turbo 4.4L V8',
|
|
26
|
+
transmission: 'Automatic',
|
|
27
|
+
horsepower: '627hp',
|
|
28
|
+
torque: '553 lb-ft',
|
|
29
|
+
curbWeight: '4,345 lbs',
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
brand: 'Audi',
|
|
33
|
+
model: 'R8',
|
|
34
|
+
year: '2022',
|
|
35
|
+
price: 'Starts at $148,000',
|
|
36
|
+
engine: '5.2L V10',
|
|
37
|
+
transmission: 'Automatic',
|
|
38
|
+
horsepower: '562hp',
|
|
39
|
+
torque: '408 lb-ft',
|
|
40
|
+
curbWeight: '3,594 lbs',
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
brand: 'Lotus',
|
|
44
|
+
model: 'Emira',
|
|
45
|
+
year: '2023',
|
|
46
|
+
price: 'Starts at $78,000',
|
|
47
|
+
engine: 'Supercharged 3.5L V6',
|
|
48
|
+
transmission: 'Automatic or 6-Speed Manual',
|
|
49
|
+
horsepower: '400hp',
|
|
50
|
+
torque: '317 lb-ft',
|
|
51
|
+
curbWeight: '3520 lbs',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
brand: 'Toyota',
|
|
55
|
+
model: 'Supra',
|
|
56
|
+
year: '1998',
|
|
57
|
+
price: '$40,000 - $80,000',
|
|
58
|
+
engine: '3.0L Inline 6',
|
|
59
|
+
transmission: 'Automatic or 6-Speed Manual',
|
|
60
|
+
horsepower: '320hp',
|
|
61
|
+
torque: '315 lb-ft',
|
|
62
|
+
curbWeight: '3,599 lbs',
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
brand: 'Nissan',
|
|
66
|
+
model: 'Skyline GT-R',
|
|
67
|
+
year: '1994',
|
|
68
|
+
price: '$45,000 - $90,000',
|
|
69
|
+
engine: '2.6L Twin-Turbo Inline 6',
|
|
70
|
+
transmission: '5-Speed Manual',
|
|
71
|
+
horsepower: '276hp',
|
|
72
|
+
torque: '260 lb-ft',
|
|
73
|
+
curbWeight: '3,153 lbs',
|
|
74
|
+
},
|
|
75
|
+
];
|
|
76
|
+
return (
|
|
77
|
+
<>
|
|
78
|
+
<Heading size="small">Performance Car Specs</Heading>
|
|
79
|
+
<Table>
|
|
80
|
+
<Table.Head>
|
|
81
|
+
<Table.Row>
|
|
82
|
+
<Table.Header
|
|
83
|
+
position="sticky"
|
|
84
|
+
left="0"
|
|
85
|
+
backgroundColor="soap100"
|
|
86
|
+
borderRight={`2px solid ${colors.soap400}`}
|
|
87
|
+
>
|
|
88
|
+
Brand
|
|
89
|
+
</Table.Header>
|
|
90
|
+
<Table.Header>Model</Table.Header>
|
|
91
|
+
<Table.Header>Year</Table.Header>
|
|
92
|
+
<Table.Header>Price</Table.Header>
|
|
93
|
+
<Table.Header>Engine</Table.Header>
|
|
94
|
+
<Table.Header>Transmission</Table.Header>
|
|
95
|
+
<Table.Header>Horsepower</Table.Header>
|
|
96
|
+
<Table.Header>Torque</Table.Header>
|
|
97
|
+
<Table.Header>Tires</Table.Header>
|
|
98
|
+
</Table.Row>
|
|
99
|
+
</Table.Head>
|
|
100
|
+
<Table.Body>
|
|
101
|
+
{exampleData.map(item => (
|
|
102
|
+
<>
|
|
103
|
+
<Table.Row>
|
|
104
|
+
<Table.Header
|
|
105
|
+
position="sticky"
|
|
106
|
+
left="0"
|
|
107
|
+
backgroundColor="soap100"
|
|
108
|
+
borderRight={`2px solid ${colors.soap400}`}
|
|
109
|
+
>
|
|
110
|
+
{item.brand}
|
|
111
|
+
</Table.Header>
|
|
112
|
+
<Table.Cell>{item.model}</Table.Cell>
|
|
113
|
+
<Table.Cell>{item.year}</Table.Cell>
|
|
114
|
+
<Table.Cell>{item.price}</Table.Cell>
|
|
115
|
+
<Table.Cell>{item.engine}</Table.Cell>
|
|
116
|
+
<Table.Cell>{item.transmission}</Table.Cell>
|
|
117
|
+
<Table.Cell>{item.horsepower}</Table.Cell>
|
|
118
|
+
<Table.Cell>{item.torque}</Table.Cell>
|
|
119
|
+
<Table.Cell>{item.curbWeight}</Table.Cell>
|
|
120
|
+
</Table.Row>
|
|
121
|
+
</>
|
|
122
|
+
))}
|
|
123
|
+
</Table.Body>
|
|
124
|
+
</Table>
|
|
125
|
+
</>
|
|
126
|
+
);
|
|
127
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {Table} from '@workday/canvas-kit-preview-react/table';
|
|
4
|
+
import {Box} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import {Heading} from '@workday/canvas-kit-react/text';
|
|
6
|
+
import {space, borderRadius, colors} from '@workday/canvas-kit-react/tokens';
|
|
7
|
+
import styled from '@emotion/styled';
|
|
8
|
+
|
|
9
|
+
const Container = styled(Box)({
|
|
10
|
+
border: `1px solid ${colors.soap500}`,
|
|
11
|
+
borderRadius: borderRadius.l,
|
|
12
|
+
paddingTop: space.xxxs,
|
|
13
|
+
paddingRight: space.xs,
|
|
14
|
+
paddingLeft: space.xs,
|
|
15
|
+
paddingBottom: space.xs,
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export default () => {
|
|
19
|
+
return (
|
|
20
|
+
<>
|
|
21
|
+
<Heading size="small">Pizza Toppings</Heading>
|
|
22
|
+
<Container>
|
|
23
|
+
<Table border="none">
|
|
24
|
+
<Table.Head>
|
|
25
|
+
<Table.Row>
|
|
26
|
+
<Table.Header borderColor="soap500">Toppings</Table.Header>
|
|
27
|
+
<Table.Header borderColor="soap500">Amount</Table.Header>
|
|
28
|
+
</Table.Row>
|
|
29
|
+
</Table.Head>
|
|
30
|
+
<Table.Body>
|
|
31
|
+
<Table.Row>
|
|
32
|
+
<Table.Cell>Pepperoni</Table.Cell>
|
|
33
|
+
<Table.Cell>2.5 oz</Table.Cell>
|
|
34
|
+
</Table.Row>
|
|
35
|
+
<Table.Row>
|
|
36
|
+
<Table.Cell>Mozzarella</Table.Cell>
|
|
37
|
+
<Table.Cell>5 oz</Table.Cell>
|
|
38
|
+
</Table.Row>
|
|
39
|
+
<Table.Row>
|
|
40
|
+
<Table.Cell>Basil</Table.Cell>
|
|
41
|
+
<Table.Cell>10 Leaves</Table.Cell>
|
|
42
|
+
</Table.Row>
|
|
43
|
+
</Table.Body>
|
|
44
|
+
</Table>
|
|
45
|
+
</Container>
|
|
46
|
+
</>
|
|
47
|
+
);
|
|
48
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.385-next.4+399695e0",
|
|
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,9 +44,9 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^9.0.0-alpha.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^9.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^9.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^9.0.0-alpha.385-next.4+399695e0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^9.0.0-alpha.385-next.4+399695e0",
|
|
49
|
+
"@workday/canvas-kit-react": "^9.0.0-alpha.385-next.4+399695e0",
|
|
50
50
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
51
51
|
"markdown-to-jsx": "^6.10.3",
|
|
52
52
|
"ts-node": "^10.9.1"
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"mkdirp": "^1.0.3",
|
|
58
58
|
"typescript": "4.2"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "399695e0108fa563e49cae17ecde059a7de58890"
|
|
61
61
|
}
|