@workday/canvas-kit-docs 8.6.8 → 8.6.10
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.
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import Basic from './examples/MediaModal';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
## Media Modal example
|
|
5
|
+
|
|
6
|
+
These are modals that have an image or video as the primary content. The example can use a special
|
|
7
|
+
`MediaContainer` component that allows for media to take up more space in the Modal.
|
|
8
|
+
|
|
9
|
+
<ExampleCodeBlock code={Basic} />
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {Modal} from '@workday/canvas-kit-react/modal';
|
|
3
|
+
import {Box, BoxProps, Flex} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {Text} from '@workday/canvas-kit-react/text';
|
|
5
|
+
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
6
|
+
import {spaceNumbers} from '@workday/canvas-kit-react/tokens';
|
|
7
|
+
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
8
|
+
|
|
9
|
+
const MediaImage = createComponent('img')({
|
|
10
|
+
displayName: 'Media.Image',
|
|
11
|
+
Component: (elemProps: React.ImgHTMLAttributes<HTMLImageElement>, ref, Element) => {
|
|
12
|
+
const [loaded, setLoaded] = React.useState(false);
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<Box
|
|
16
|
+
as={Element}
|
|
17
|
+
ref={ref}
|
|
18
|
+
display="block"
|
|
19
|
+
backgroundColor="frenchVanilla200"
|
|
20
|
+
transition="opacity ease 200ms"
|
|
21
|
+
width="100%"
|
|
22
|
+
height={293}
|
|
23
|
+
style={{opacity: loaded ? 1 : 0}}
|
|
24
|
+
onLoad={() => setLoaded(true)}
|
|
25
|
+
{...elemProps}
|
|
26
|
+
/>
|
|
27
|
+
);
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
const Media = createComponent('div')({
|
|
32
|
+
displayName: 'Media',
|
|
33
|
+
subComponents: {Image: MediaImage},
|
|
34
|
+
Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
|
|
35
|
+
return (
|
|
36
|
+
<Box
|
|
37
|
+
as={Element}
|
|
38
|
+
ref={ref}
|
|
39
|
+
width={`calc(100% + ${spaceNumbers.l * 2}px)`}
|
|
40
|
+
marginLeft={`-${spaceNumbers.l}px`}
|
|
41
|
+
marginTop="m"
|
|
42
|
+
marginBottom="s"
|
|
43
|
+
{...elemProps}
|
|
44
|
+
>
|
|
45
|
+
{children}
|
|
46
|
+
</Box>
|
|
47
|
+
);
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
export default () => {
|
|
52
|
+
return (
|
|
53
|
+
<Modal>
|
|
54
|
+
<Modal.Target>Open Media Modal</Modal.Target>
|
|
55
|
+
<Modal.Overlay>
|
|
56
|
+
<Modal.Card>
|
|
57
|
+
<Modal.CloseIcon aria-label="Close" size="small" />
|
|
58
|
+
<Media>
|
|
59
|
+
<Media.Image
|
|
60
|
+
src="https://www.theuiaa.org/wp-content/uploads/2017/11/RTM19-banner-web.jpg"
|
|
61
|
+
alt="Sunrise in the mountains"
|
|
62
|
+
/>
|
|
63
|
+
</Media>
|
|
64
|
+
<Modal.Heading>TED's Secret to Public Speaking</Modal.Heading>
|
|
65
|
+
<Modal.Body>
|
|
66
|
+
<Text as="p" marginTop={0} marginBottom="m">
|
|
67
|
+
The secret to great public speaking, according to former actor Martin Danielson, is as
|
|
68
|
+
simple as one, two, three.
|
|
69
|
+
</Text>
|
|
70
|
+
<Flex gap="s">
|
|
71
|
+
<Modal.CloseButton as={PrimaryButton}>Learn More</Modal.CloseButton>
|
|
72
|
+
</Flex>
|
|
73
|
+
</Modal.Body>
|
|
74
|
+
</Modal.Card>
|
|
75
|
+
</Modal.Overlay>
|
|
76
|
+
</Modal>
|
|
77
|
+
);
|
|
78
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "8.6.
|
|
3
|
+
"version": "8.6.10",
|
|
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": "^8.6.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^8.6.
|
|
49
|
-
"@workday/canvas-kit-react": "^8.6.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^8.6.10",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^8.6.10",
|
|
49
|
+
"@workday/canvas-kit-react": "^8.6.10",
|
|
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": "bb8329642b121f28363380a4de395d97c30afa7a"
|
|
61
61
|
}
|