-
Notifications
You must be signed in to change notification settings - Fork 26
/
card.js
46 lines (42 loc) 路 1.06 KB
/
card.js
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
import PropTypes from 'prop-types';
import React from 'react';
import { css } from '@emotion/core';
import { customProperties as vars } from '@commercetools-uikit/design-system';
import { filterDataAttributes } from '@commercetools-uikit/utils';
const Card = props => (
<div
{...filterDataAttributes(props)}
css={css`
display: flex;
font-size: 1rem;
flex-direction: column;
width: 100%;
box-shadow: ${props.type === 'raised' ? vars.shadow1 : 'none'};
border-radius: ${vars.borderRadius6};
background: ${props.theme === 'dark'
? vars.colorNeutral95
: vars.colorSurface};
`}
className={props.className}
>
<div
css={css`
padding: ${vars.spacingM};
`}
>
{props.children}
</div>
</div>
);
Card.displayName = 'Card';
Card.propTypes = {
className: PropTypes.string,
type: PropTypes.oneOf(['raised', 'flat']),
children: PropTypes.any,
theme: PropTypes.oneOf(['light', 'dark']),
};
Card.defaultProps = {
type: 'raised',
theme: 'light',
};
export default Card;