-
Notifications
You must be signed in to change notification settings - Fork 209
/
Card.tsx
81 lines (69 loc) · 1.57 KB
/
Card.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import * as React from 'react';
import styled from '@emotion/styled';
import {
colors,
depth as depthValues,
type,
spacing,
borderRadius,
CanvasDepthValue,
CanvasSpacingValue,
} from '@workday/canvas-kit-react-core';
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Heading at the top of the card.
*/
heading?: React.ReactNode;
/**
* Heading ID for accessibility. Useful tie to an `aria-labelledby`
*/
headingId?: string;
/**
* Padding of the card.
*/
padding: CanvasSpacingValue;
/**
* Depth of the card.
*/
depth: CanvasDepthValue;
/**
* Width of the card.
*/
width?: number | string;
/**
* Height of the card.
*/
height?: number | string;
}
const Box = styled('div')<CardProps>(
{
backgroundColor: colors.frenchVanilla100,
border: `1px solid ${colors.soap500}`,
borderRadius: borderRadius.l,
boxSizing: 'border-box',
},
({depth}) => depth,
({padding}) => ({padding}),
({width}) => width && {width},
({height}) => height && {height}
);
const Header = styled('h3')(type.h3, {
marginBottom: spacing.m,
marginTop: 0,
});
const Body = styled('div')(type.body);
export default class Card extends React.Component<CardProps> {
public static defaultProps = {
depth: depthValues[2],
padding: spacing.l,
};
public render() {
const {heading, headingId, ...elemProps} = this.props;
return (
<Box {...elemProps}>
{heading && <Header id={headingId}>{heading}</Header>}
<Body>{this.props.children}</Body>
</Box>
);
}
}