@workday/canvas-kit-docs 9.0.2 → 9.0.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/mdx/react/_examples/SidePanel.mdx +13 -0
- package/dist/mdx/react/_examples/examples/SidePanelWithNavigation.tsx +131 -0
- package/dist/mdx/react/form-field/examples/Hint.tsx +2 -0
- package/package.json +5 -5
- package/dist/mdx/preview-react/_examples/SidePanelWithOverlay.mdx +0 -8
- /package/dist/mdx/{preview-react → react}/_examples/examples/SidePanelWithOverlay.tsx +0 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import WithNavigation from './examples/SidePanelWithNavigation';
|
|
2
|
+
import WithOverlay from './examples/SidePanelWithOverlay';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
# Canvas Kit Examples
|
|
6
|
+
|
|
7
|
+
## Side Panel With Navigation
|
|
8
|
+
|
|
9
|
+
<ExampleCodeBlock code={WithNavigation} />
|
|
10
|
+
|
|
11
|
+
## Side Panel With WithOverlay
|
|
12
|
+
|
|
13
|
+
<ExampleCodeBlock code={WithOverlay} />
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {styled, StyledType} from '@workday/canvas-kit-react/common';
|
|
3
|
+
import {colors, space, gradients, type} from '@workday/canvas-kit-react/tokens';
|
|
4
|
+
import {SidePanel} from '@workday/canvas-kit-preview-react/side-panel';
|
|
5
|
+
import {Flex, Box} from '@workday/canvas-kit-react/layout';
|
|
6
|
+
import {BodyText, Subtext} from '@workday/canvas-kit-react/text';
|
|
7
|
+
import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
|
|
8
|
+
import {SystemIcon} from '@workday/canvas-kit-react/icon';
|
|
9
|
+
import {birthdayIcon, ribbonIcon} from '@workday/canvas-system-icons-web';
|
|
10
|
+
|
|
11
|
+
const StyledPanel = styled(SidePanel.as('nav'))({
|
|
12
|
+
backgroundColor: colors.soap200,
|
|
13
|
+
zIndex: 1,
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
const StyledExpandable = styled(Expandable.Target)({
|
|
17
|
+
borderRadius: 0,
|
|
18
|
+
':hover': {
|
|
19
|
+
backgroundColor: colors.soap500,
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
const StyledLink = styled(Subtext.as('a'))<StyledType>({
|
|
24
|
+
color: colors.blackPepper300,
|
|
25
|
+
':hover': {
|
|
26
|
+
backgroundColor: colors.soap500,
|
|
27
|
+
},
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
const cakes = [
|
|
31
|
+
{value: 'Anniversary', linkValue: '#AnniversaryCakes'},
|
|
32
|
+
{value: 'Birthday', linkValue: '#BirthdayCakes'},
|
|
33
|
+
{value: 'Graduation', linkValue: '#GraduationCakes'},
|
|
34
|
+
{value: 'Wedding', linkValue: 'WeddingCakes'},
|
|
35
|
+
];
|
|
36
|
+
|
|
37
|
+
const bestsellers = [
|
|
38
|
+
{value: 'Mango Coco Sago', linkValue: '#LemonRhubarbBars'},
|
|
39
|
+
{value: 'Matcha Creme Pie', linkValue: '#MatchaCremePie'},
|
|
40
|
+
{value: 'Key Lime Cheesecake', linkValue: '#KeyLimeCheesecake'},
|
|
41
|
+
{value: 'Tiramisu', linkValue: '#Tiramisu'},
|
|
42
|
+
];
|
|
43
|
+
|
|
44
|
+
const gettingStarted = [
|
|
45
|
+
'Extended Systems',
|
|
46
|
+
'Canvas Glossary',
|
|
47
|
+
'Frequently Asked Questions',
|
|
48
|
+
'Canvas Support',
|
|
49
|
+
];
|
|
50
|
+
|
|
51
|
+
export default () => {
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<Flex height={800} position="relative" backgroundColor="frenchVanilla100">
|
|
55
|
+
<StyledPanel touched={true} variant="alternate">
|
|
56
|
+
<Flex as="ul" flexDirection="column" rowGap="zero" paddingInlineStart="zero">
|
|
57
|
+
<Flex.Item as="li" listStyle="none">
|
|
58
|
+
<Expandable padding="zero">
|
|
59
|
+
<StyledExpandable paddingTop="m" paddingBottom="xxs" paddingX="m" textAlign="center">
|
|
60
|
+
<SystemIcon icon={ribbonIcon} paddingRight="s" />
|
|
61
|
+
<Expandable.Title padding="zero">
|
|
62
|
+
<BodyText size="small" fontWeight="bold" color="blackpepper300" marginY="zero">
|
|
63
|
+
Bestsellers
|
|
64
|
+
</BodyText>
|
|
65
|
+
<Subtext size="medium" color="blackpepper300" marginY="zero">
|
|
66
|
+
Award winning sweet treats
|
|
67
|
+
</Subtext>
|
|
68
|
+
</Expandable.Title>
|
|
69
|
+
<Expandable.Icon iconPosition="end" />
|
|
70
|
+
</StyledExpandable>
|
|
71
|
+
<Expandable.Content paddingY="zero" paddingX="zero" as="ul">
|
|
72
|
+
{bestsellers.map(item => {
|
|
73
|
+
return (
|
|
74
|
+
<li>
|
|
75
|
+
<StyledLink
|
|
76
|
+
size="large"
|
|
77
|
+
display="flex"
|
|
78
|
+
textDecoration="none"
|
|
79
|
+
paddingLeft="xxl"
|
|
80
|
+
paddingTop="xxs"
|
|
81
|
+
paddingBottom="zero"
|
|
82
|
+
href={item.linkValue}
|
|
83
|
+
>
|
|
84
|
+
{item.value}
|
|
85
|
+
</StyledLink>
|
|
86
|
+
</li>
|
|
87
|
+
);
|
|
88
|
+
})}
|
|
89
|
+
</Expandable.Content>
|
|
90
|
+
</Expandable>
|
|
91
|
+
</Flex.Item>
|
|
92
|
+
<Flex.Item as="li" listStyle="none">
|
|
93
|
+
<Expandable padding="zero">
|
|
94
|
+
<StyledExpandable paddingTop="m" paddingBottom="xxs" paddingX="m" textAlign="center">
|
|
95
|
+
<SystemIcon icon={birthdayIcon} paddingRight="s" />
|
|
96
|
+
<Expandable.Title padding="zero">
|
|
97
|
+
<BodyText size="small" fontWeight="bold" color="blackpepper300" marginY="zero">
|
|
98
|
+
Custom Cakes
|
|
99
|
+
</BodyText>
|
|
100
|
+
<Subtext size="medium" color="blackpepper300" marginY="zero">
|
|
101
|
+
To celebrate your life milestones
|
|
102
|
+
</Subtext>
|
|
103
|
+
</Expandable.Title>
|
|
104
|
+
<Expandable.Icon iconPosition="end" />
|
|
105
|
+
</StyledExpandable>
|
|
106
|
+
<Expandable.Content paddingY="zero" paddingX="zero" as="ul">
|
|
107
|
+
{cakes.map(item => {
|
|
108
|
+
return (
|
|
109
|
+
<li>
|
|
110
|
+
<StyledLink
|
|
111
|
+
size="large"
|
|
112
|
+
display="flex"
|
|
113
|
+
textDecoration="none"
|
|
114
|
+
paddingLeft="xxl"
|
|
115
|
+
paddingTop="xxs"
|
|
116
|
+
paddingBottom="zero"
|
|
117
|
+
href={item.linkValue}
|
|
118
|
+
>
|
|
119
|
+
{item.value}
|
|
120
|
+
</StyledLink>
|
|
121
|
+
</li>
|
|
122
|
+
);
|
|
123
|
+
})}
|
|
124
|
+
</Expandable.Content>
|
|
125
|
+
</Expandable>
|
|
126
|
+
</Flex.Item>
|
|
127
|
+
</Flex>
|
|
128
|
+
</StyledPanel>
|
|
129
|
+
</Flex>
|
|
130
|
+
);
|
|
131
|
+
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
3
3
|
import {TextInput} from '@workday/canvas-kit-react/text-input';
|
|
4
|
+
import {useUniqueId} from '@workday/canvas-kit-react/common';
|
|
4
5
|
|
|
5
6
|
export default () => {
|
|
6
7
|
const [value, setValue] = React.useState('');
|
|
@@ -11,6 +12,7 @@ export default () => {
|
|
|
11
12
|
|
|
12
13
|
return (
|
|
13
14
|
<FormField
|
|
15
|
+
hintId={useUniqueId()}
|
|
14
16
|
hintText="This address will be shown as a shipping address option for future orders."
|
|
15
17
|
label="Address Name"
|
|
16
18
|
>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.4",
|
|
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.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^9.0.
|
|
49
|
-
"@workday/canvas-kit-react": "^9.0.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^9.0.4",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^9.0.4",
|
|
49
|
+
"@workday/canvas-kit-react": "^9.0.4",
|
|
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": "2e7522f9b45fb703a2cfc34a464f9318a82c4bcd"
|
|
61
61
|
}
|
|
File without changes
|