Skip to content

Commit 180727b

Browse files
felixjungfernandofleury
felixjung
authored and
fernandofleury
committed
Add support for colored Badge component (#220)
* Add PRIMARY and NEUTRAL color constants * Add Badge color variations * Add Badge coloring tests * Update Badge component * Remove null onClick from defaultProps * Update spec description * Update Badge snapshots
1 parent c72f2d9 commit 180727b

File tree

6 files changed

+232
-38
lines changed

6 files changed

+232
-38
lines changed

‎src/components/Badge/Badge.js

+68-15
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,71 @@
11
import PropTypes from 'prop-types';
22
import styled, { css } from 'react-emotion';
33
import { size } from 'polished';
4+
import { values } from 'lodash/fp';
45

56
import { subHeadingKilo } from '../../styles/style-helpers';
7+
import { colorNames } from '../../styles/constants';
68

7-
const baseStyles = ({ theme }) => css`
9+
const COLOR_MAP = {
10+
[colorNames.SUCCESS]: {
11+
default: 'g500',
12+
hover: 'g700',
13+
active: 'g900'
14+
},
15+
[colorNames.WARNING]: {
16+
default: 'y500',
17+
hover: 'y700',
18+
active: 'y900'
19+
},
20+
[colorNames.DANGER]: {
21+
default: 'r500',
22+
hover: 'r700',
23+
active: 'r900'
24+
},
25+
[colorNames.PRIMARY]: {
26+
default: 'b500',
27+
hover: 'b700',
28+
active: 'b900'
29+
},
30+
[colorNames.NEUTRAL]: {
31+
default: 'n500',
32+
hover: 'n700',
33+
active: 'n900'
34+
}
35+
};
36+
37+
const colorStyles = ({ theme, color, onClick }) => {
38+
const currentColor = COLOR_MAP[color];
39+
40+
if (!currentColor) {
41+
return null;
42+
}
43+
44+
return css`
45+
label: badge--${color};
46+
background-color: ${theme.colors[currentColor.default]};
47+
${onClick &&
48+
`
49+
&:hover {
50+
background-color: ${theme.colors[currentColor.hover]};
51+
}
52+
53+
&:active {
54+
background-color: ${theme.colors[currentColor.active]};
55+
}
56+
`};
57+
`;
58+
};
59+
60+
const baseStyles = ({ theme, onClick }) => css`
861
label: badge;
9-
background-color: ${theme.colors.r500};
1062
border-radius: 100px;
1163
color: ${theme.colors.white};
12-
cursor: default;
64+
cursor: ${onClick ? 'pointer' : 'default'};
1365
padding: 0 ${theme.spacings.byte};
1466
${subHeadingKilo({ theme })};
1567
text-transform: uppercase;
1668
user-select: none;
17-
18-
&:hover {
19-
background-color: ${theme.colors.r700};
20-
}
21-
22-
&:active {
23-
background-color: ${theme.colors.r900};
24-
}
2569
`;
2670

2771
const circleStyles = ({ circle }) =>
@@ -37,7 +81,9 @@ const circleStyles = ({ circle }) =>
3781
* A badge for displaying update notifications etc.
3882
*/
3983
const Badge = styled('div')`
40-
${baseStyles} ${circleStyles};
84+
${baseStyles};
85+
${colorStyles};
86+
${circleStyles};
4187
`;
4288

4389
Badge.propTypes = {
@@ -48,12 +94,19 @@ Badge.propTypes = {
4894
/**
4995
* Ensures text is centered and the badge looks like a circle.
5096
*/
51-
circle: PropTypes.bool
97+
circle: PropTypes.bool,
98+
color: PropTypes.oneOf(values(colorNames))
5299
};
53100

101+
Badge.NEUTRAL = colorNames.NEUTRAL;
102+
Badge.PRIMARY = colorNames.PRIMARY;
103+
Badge.SUCCESS = colorNames.SUCCESS;
104+
Badge.WARNING = colorNames.WARNING;
105+
Badge.DANGER = colorNames.DANGER;
106+
54107
Badge.defaultProps = {
55-
onClick: () => {},
56-
circle: false
108+
circle: false,
109+
color: Badge.NEUTRAL
57110
};
58111

59112
/**

‎src/components/Badge/Badge.spec.js

+27
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,33 @@ describe('Badge', () => {
1111
expect(actual).toMatchSnapshot();
1212
});
1313

14+
describe('rendering color variations', () => {
15+
it('should render with success colors', () => {
16+
const actual = create(<Badge color={Badge.SUCCESS} />);
17+
expect(actual).toMatchSnapshot();
18+
});
19+
20+
it('should render with warning colors', () => {
21+
const actual = create(<Badge color={Badge.WARNING} />);
22+
expect(actual).toMatchSnapshot();
23+
});
24+
25+
it('should render with danger colors', () => {
26+
const actual = create(<Badge color={Badge.DANGER} />);
27+
expect(actual).toMatchSnapshot();
28+
});
29+
30+
it('should render with primary colors', () => {
31+
const actual = create(<Badge color={Badge.PRIMARY} />);
32+
expect(actual).toMatchSnapshot();
33+
});
34+
});
35+
36+
it('should have hover/active styles only when the onClick handler is provided', () => {
37+
const actual = create(<Badge onClick={() => {}} />);
38+
expect(actual).toMatchSnapshot();
39+
});
40+
1441
it('should have the correct circle styles', () => {
1542
const actual = create(<Badge circle />);
1643
expect(actual).toMatchSnapshot();

‎src/components/Badge/Badge.story.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
import React, { Fragment } from 'react';
22
import { storiesOf } from '@storybook/react';
33
import { withInfo } from '@storybook/addon-info';
4+
import { select } from '@storybook/addon-knobs/react';
5+
import { values } from 'lodash/fp';
6+
47
import { GROUPS } from '../../../.storybook/hierarchySeparators';
8+
import { colorNames } from '../../styles/constants';
59

610
import withTests from '../../util/withTests';
711
import Badge from './Badge';
812

913
storiesOf(`${GROUPS.COMPONENTS}|Badge`, module)
1014
.addDecorator(withTests('Badge'))
11-
.add('Default Badge', withInfo()(() => <Badge>Update</Badge>))
15+
.add(
16+
'Default Badge',
17+
withInfo()(() => (
18+
<Badge color={select('Color', values(colorNames))}>Update</Badge>
19+
))
20+
)
1221
.add(
1322
'Circular Badge',
1423
withInfo()(() => (

‎src/components/Badge/__snapshots__/Badge.spec.js.snap

+123-20
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,126 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Badge should have the correct circle styles 1`] = `
3+
exports[`Badge rendering color variations should render with danger colors 1`] = `
44
.circuit-0 {
5+
border-radius: 100px;
6+
color: #FFFFFF;
7+
cursor: default;
8+
padding: 0 8px;
9+
font-size: 12px;
10+
line-height: 20px;
11+
text-transform: uppercase;
12+
-webkit-user-select: none;
13+
-moz-user-select: none;
14+
-ms-user-select: none;
15+
user-select: none;
516
background-color: #FF7559;
17+
}
18+
19+
<div
20+
className="circuit-0 circuit-1"
21+
color="danger"
22+
/>
23+
`;
24+
25+
exports[`Badge rendering color variations should render with primary colors 1`] = `
26+
.circuit-0 {
27+
border-radius: 100px;
28+
color: #FFFFFF;
29+
cursor: default;
30+
padding: 0 8px;
31+
font-size: 12px;
32+
line-height: 20px;
33+
text-transform: uppercase;
34+
-webkit-user-select: none;
35+
-moz-user-select: none;
36+
-ms-user-select: none;
37+
user-select: none;
38+
background-color: #3388FF;
39+
}
40+
41+
<div
42+
className="circuit-0 circuit-1"
43+
color="primary"
44+
/>
45+
`;
46+
47+
exports[`Badge rendering color variations should render with success colors 1`] = `
48+
.circuit-0 {
49+
border-radius: 100px;
50+
color: #FFFFFF;
51+
cursor: default;
52+
padding: 0 8px;
53+
font-size: 12px;
54+
line-height: 20px;
55+
text-transform: uppercase;
56+
-webkit-user-select: none;
57+
-moz-user-select: none;
58+
-ms-user-select: none;
59+
user-select: none;
60+
background-color: #62DE76;
61+
}
62+
63+
<div
64+
className="circuit-0 circuit-1"
65+
color="success"
66+
/>
67+
`;
68+
69+
exports[`Badge rendering color variations should render with warning colors 1`] = `
70+
.circuit-0 {
71+
border-radius: 100px;
72+
color: #FFFFFF;
73+
cursor: default;
74+
padding: 0 8px;
75+
font-size: 12px;
76+
line-height: 20px;
77+
text-transform: uppercase;
78+
-webkit-user-select: none;
79+
-moz-user-select: none;
80+
-ms-user-select: none;
81+
user-select: none;
82+
background-color: #FFC859;
83+
}
84+
85+
<div
86+
className="circuit-0 circuit-1"
87+
color="warning"
88+
/>
89+
`;
90+
91+
exports[`Badge should have hover/active styles only when the onClick handler is provided 1`] = `
92+
.circuit-0 {
93+
border-radius: 100px;
94+
color: #FFFFFF;
95+
cursor: pointer;
96+
padding: 0 8px;
97+
font-size: 12px;
98+
line-height: 20px;
99+
text-transform: uppercase;
100+
-webkit-user-select: none;
101+
-moz-user-select: none;
102+
-ms-user-select: none;
103+
user-select: none;
104+
background-color: #9DA7B1;
105+
}
106+
107+
.circuit-0:hover {
108+
background-color: #5C656F;
109+
}
110+
111+
.circuit-0:active {
112+
background-color: #212933;
113+
}
114+
115+
<div
116+
className="circuit-0 circuit-1"
117+
color="neutral"
118+
onClick={[Function]}
119+
/>
120+
`;
121+
122+
exports[`Badge should have the correct circle styles 1`] = `
123+
.circuit-0 {
6124
border-radius: 100px;
7125
color: #FFFFFF;
8126
cursor: default;
@@ -14,6 +132,7 @@ exports[`Badge should have the correct circle styles 1`] = `
14132
-moz-user-select: none;
15133
-ms-user-select: none;
16134
user-select: none;
135+
background-color: #9DA7B1;
17136
display: -webkit-box;
18137
display: -webkit-flex;
19138
display: -ms-flexbox;
@@ -30,23 +149,14 @@ exports[`Badge should have the correct circle styles 1`] = `
30149
width: 24px;
31150
}
32151
33-
.circuit-0:hover {
34-
background-color: #D55A41;
35-
}
36-
37-
.circuit-0:active {
38-
background-color: #A73D28;
39-
}
40-
41152
<div
42153
className="circuit-0 circuit-1"
43-
onClick={[Function]}
154+
color="neutral"
44155
/>
45156
`;
46157

47158
exports[`Badge should render with default styles 1`] = `
48159
.circuit-0 {
49-
background-color: #FF7559;
50160
border-radius: 100px;
51161
color: #FFFFFF;
52162
cursor: default;
@@ -58,18 +168,11 @@ exports[`Badge should render with default styles 1`] = `
58168
-moz-user-select: none;
59169
-ms-user-select: none;
60170
user-select: none;
61-
}
62-
63-
.circuit-0:hover {
64-
background-color: #D55A41;
65-
}
66-
67-
.circuit-0:active {
68-
background-color: #A73D28;
171+
background-color: #9DA7B1;
69172
}
70173
71174
<div
72175
className="circuit-0 circuit-1"
73-
onClick={[Function]}
176+
color="neutral"
74177
/>
75178
`;

‎src/styles/constants.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import {
33
BIT, BYTE, KILO, MEGA, GIGA, TERA, PETA, EXA, ZETTA,
44
SINGLE, DOUBLE, TRIPLE,
5-
SUCCESS, DANGER, WARNING
5+
SUCCESS, DANGER, WARNING, PRIMARY, NEUTRAL
66
} from '../util/constants';
77

88
/**
@@ -21,7 +21,7 @@ export const shadows = { SINGLE, DOUBLE, TRIPLE };
2121
* Colors?
2222
*/
2323

24-
export const colorNames = { SUCCESS, DANGER, WARNING };
24+
export const colorNames = { SUCCESS, DANGER, WARNING, PRIMARY, NEUTRAL };
2525

2626
/**
2727
* Directions

‎src/util/constants.js

+2
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,5 @@ export const TRIPLE = 'triple';
4444
export const SUCCESS = 'success';
4545
export const DANGER = 'danger';
4646
export const WARNING = 'warning';
47+
export const NEUTRAL = 'neutral';
48+
export const PRIMARY = 'primary';

0 commit comments

Comments
 (0)