Skip to content
This repository was archived by the owner on Jun 9, 2024. It is now read-only.

Commit 947d93e

Browse files
liorocksliorocks
committed
feat(card): add Card component
1 parent 3d4e84b commit 947d93e

File tree

6 files changed

+200
-0
lines changed

6 files changed

+200
-0
lines changed

‎__tests__/Card.test.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import { renderToStaticMarkup } from 'react-dom/server';
3+
import { Card } from '../src/index';
4+
import { Intent, Classes } from '@blueprintjs/core';
5+
6+
describe('<Card />', () => {
7+
it('renders basic <Card />', () => {
8+
expect(renderToStaticMarkup(<Card />)).toEqual(
9+
'<div class="pt-card"></div>'
10+
);
11+
});
12+
13+
it('renders basic <Card /> with props and children', () => {
14+
expect(
15+
renderToStaticMarkup(
16+
<Card interactive>
17+
<h5>Card Heading</h5>
18+
<p>Card Content</p>
19+
</Card>
20+
)
21+
).toEqual(
22+
'<div class="pt-card pt-interactive"><h5>Card Heading</h5><p>Card Content</p></div>'
23+
);
24+
});
25+
26+
it('renders basic <Card /> with `elevation` prop', () => {
27+
expect(renderToStaticMarkup(<Card elevation={0} />)).toEqual(
28+
'<div class="pt-card pt-elevation-0"></div>'
29+
);
30+
31+
expect(renderToStaticMarkup(<Card elevation={1} />)).toEqual(
32+
'<div class="pt-card pt-elevation-1"></div>'
33+
);
34+
35+
expect(renderToStaticMarkup(<Card elevation={2} />)).toEqual(
36+
'<div class="pt-card pt-elevation-2"></div>'
37+
);
38+
39+
expect(renderToStaticMarkup(<Card elevation={3} />)).toEqual(
40+
'<div class="pt-card pt-elevation-3"></div>'
41+
);
42+
43+
expect(renderToStaticMarkup(<Card elevation={4} />)).toEqual(
44+
'<div class="pt-card pt-elevation-4"></div>'
45+
);
46+
});
47+
});

‎src/components/Card/Card.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import classnames from 'classnames';
4+
5+
const Card = ({ children, elevation, interactive, className, ...rest }) => {
6+
return (
7+
<div
8+
className={classnames(
9+
'pt-card',
10+
{ 'pt-interactive': interactive },
11+
{ [`pt-elevation-${elevation}`]: elevation >= 0 && elevation <= 4 },
12+
className
13+
)}
14+
{...rest}
15+
>
16+
{children}
17+
</div>
18+
);
19+
};
20+
21+
/**
22+
* Card property types.
23+
*/
24+
Card.propTypes = {
25+
/**
26+
* Primary content.
27+
*/
28+
children: PropTypes.node,
29+
30+
/**
31+
* Additional CSS classes.
32+
*/
33+
className: PropTypes.string,
34+
35+
/**
36+
* Elevation level. Shadow simulation. Coud be from **0** to **4**.
37+
*/
38+
elevation: PropTypes.number,
39+
40+
/**
41+
* Visual intent color.
42+
*/
43+
interactive: PropTypes.bool,
44+
};
45+
46+
/**
47+
* Card default properties.
48+
*/
49+
Card.defaultProps = {
50+
children: null,
51+
className: '',
52+
elevation: -1,
53+
interactive: false,
54+
};
55+
56+
export default Card;

‎src/components/Card/Card.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
Card is a bounded unit of UI content with a solid background color.
2+
3+
```js static
4+
import { Card } from 'blueprint-components';
5+
```
6+
7+
```html static
8+
<Card>
9+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris, vitae dictum metus.
10+
</Card>
11+
```
12+
13+
An elevation applies a drop shadow that simulates height in the UI.
14+
To add an elevation to card component, add `elevation` prop with values from **0** to **4**.
15+
16+
```html static
17+
<Card elevation={(0|1|2|3|4)}>
18+
...
19+
</Card>
20+
```
21+
22+
```jsx
23+
<div>
24+
<div className="df">
25+
<div className="mr mb">
26+
<Card>
27+
<strong>Elevation - None</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris, vitae dictum metus.
28+
</Card>
29+
</div>
30+
<div className="mr mb">
31+
<Card elevation={0}>
32+
<strong>Elevation - 0</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris, vitae dictum metus.
33+
</Card>
34+
</div>
35+
<div className="mr mb">
36+
<Card elevation={1}>
37+
<strong>Elevation - 1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris, vitae dictum metus.
38+
</Card>
39+
</div>
40+
</div>
41+
<div className="df">
42+
<div className="mr mb">
43+
<Card elevation={2}>
44+
<strong>Elevation - 2</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris, vitae dictum metus.
45+
</Card>
46+
</div>
47+
<div className="mr mb">
48+
<Card elevation={3}>
49+
<strong>Elevation - 3</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris, vitae dictum metus.
50+
</Card>
51+
</div>
52+
<div className="mr mb">
53+
<Card elevation={4}>
54+
<strong>Elevation - 4</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec dapibus et mauris, vitae dictum metus.
55+
</Card>
56+
</div>
57+
</div>
58+
</div>
59+
```
60+
61+
### Interactive Cards
62+
63+
Adds respond to user interactions on cards. Just add the `interactive` prop:
64+
65+
```html static
66+
<Card interactive>
67+
...
68+
</Card>
69+
```
70+
71+
72+
```jsx
73+
<div className="df">
74+
<div className="mr">
75+
<Card interactive>
76+
<h5><a href="#">Trader Profile</a></h5>
77+
<p>Overview of employee activity, including risk model, scores and scenario alert history.</p>
78+
</Card>
79+
</div>
80+
<div className="mr">
81+
<Card interactive>
82+
<h5><a href="#">Desk Profile</a></h5>
83+
<p>Desk-level summary of trading activity and trading profiles.</p>
84+
</Card>
85+
</div>
86+
<div>
87+
<Card interactive>
88+
<h5><a href="#">Dataset Dashboards</a></h5>
89+
<p>Stats of dataset completeness and reference data join percentages.</p>
90+
</Card>
91+
</div>
92+
</div>
93+
```

‎src/components/Card/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Card } from './Card';

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export { ButtonGroup } from './components/ButtonGroup';
22
export { Callout } from './components/Callout';
3+
export { Card } from './components/Card';
34
export { Navbar } from './components/Navbar';
45
export { NavbarDivider } from './components/NavbarDivider';
56
export { NavbarGroup } from './components/NavbarGroup';

‎styleguide/styleguide.setup.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ global.Intent = Intent;
66
import {
77
ButtonGroup,
88
Callout,
9+
Card,
910
Navbar,
1011
NavbarGroup,
1112
NavbarHeading,
1213
NavbarDivider,
1314
} from '../src/index';
1415
global.ButtonGroup = ButtonGroup;
1516
global.Callout = Callout;
17+
global.Card = Card;
1618
global.Navbar = Navbar;
1719
global.NavbarGroup = NavbarGroup;
1820
global.NavbarHeading = NavbarHeading;

0 commit comments

Comments
 (0)