Skip to content

Commit 3e177ee

Browse files
jasonbasuiljasonbasuil
authored
Feature/UIDS-206-update-pills-in-ds (#216)
* update Pill. Icons, close, colors, etc. * lint * adjust icons and close button scss * remove inline style and update classNames * BEM naming * default to blue & small, include large prop option
1 parent fb59e36 commit 3e177ee

File tree

4 files changed

+170
-55
lines changed

4 files changed

+170
-55
lines changed

‎src/Pill/Pill.jsx‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,54 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
4+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
45

56
import './Pill.scss';
67

8+
const colors = ['blue', 'orange', 'yellow', 'green', 'gray', 'silver'];
9+
710
const Pill = ({
811
color,
9-
size,
10-
squared,
12+
icon,
13+
id,
14+
large,
15+
onClose,
1116
text,
1217
}) => (
13-
<div
18+
<span
1419
className={
1520
classNames(
1621
'Pill',
17-
{ 'Pill--squared': squared },
1822
{ [`Pill--${color}`]: !!color },
19-
{ [`Pill--${size}`]: !!size },
23+
{ [`Pill--large`]: !!large },
2024
)
2125
}
2226
>
27+
{ icon && (
28+
<FontAwesomeIcon className="Pill__icon--lead" icon={icon} />
29+
)}
2330
{text}
24-
</div>
31+
{ onClose && (
32+
<button className="Pill__button--close" type="button" onClick={() => onClose(id)}> &times;</button>
33+
)}
34+
</span>
2535
);
2636

2737
Pill.propTypes = {
28-
color: PropTypes.string,
29-
size: PropTypes.string,
30-
squared: PropTypes.bool,
38+
color: PropTypes.oneOf(colors),
39+
icon: PropTypes.any,
40+
id: PropTypes.string,
41+
large: PropTypes.bool,
3142
text: PropTypes.node.isRequired,
43+
onClose: PropTypes.func,
3244
};
3345

3446
Pill.defaultProps = {
35-
color: undefined,
36-
size: undefined,
37-
squared: false,
47+
color: 'blue',
48+
icon: undefined,
49+
id: undefined,
50+
large: undefined,
51+
onClose: undefined,
3852
};
3953

4054
export default Pill;

‎src/Pill/Pill.scss‎

Lines changed: 92 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,137 @@
22
@import '../../scss/theme';
33

44
.Pill {
5-
display: inline;
5+
@include font-type-30;
66
font-weight: $font-weight-normal;
7-
background-color: $ux-gray-200;
8-
color: $ux-gray-800;
9-
border: 0.06rem solid $ux-gray-400;
7+
display: inline;
8+
background-color: $ux-blue-100;
9+
color: $ux-blue-700;
10+
border: 0.06rem solid $ux-blue-300;
11+
border-radius: $ux-border-radius;
12+
padding: $ux-spacing-10 $ux-spacing-20;
1013

1114
&--blue {
1215
background-color: $ux-blue-100;
1316
color: $ux-blue-700;
1417
border: 0.06rem solid $ux-blue-300;
18+
19+
.Pill__icon--lead {
20+
color: $ux-blue;
21+
margin-right: $ux-spacing-10;
22+
}
23+
24+
.Pill__button--close {
25+
background-color: unset;
26+
border: none;
27+
color: $ux-blue;
28+
margin-left: $ux-spacing-20;
29+
margin-right: 0;
30+
padding: 0;
31+
}
1532
}
1633

1734
&--orange {
1835
background-color: $ux-orange-100;
1936
color: $ux-orange-900;
2037
border: 0.06rem solid $ux-orange-400;
38+
39+
.Pill__icon--lead {
40+
color: $ux-orange-700;
41+
margin-right: $ux-spacing-10;
42+
}
43+
44+
.Pill__button--close {
45+
background-color: unset;
46+
border: none;
47+
color: $ux-orange;
48+
margin-left: $ux-spacing-20;
49+
margin-right: 0;
50+
padding: 0;
51+
}
2152
}
2253

2354
&--green {
2455
background-color: $ux-green-200;
2556
color: $ux-green-800;
2657
border: 0.06rem solid $ux-green-400;
58+
59+
.Pill__icon--lead {
60+
color: $ux-green-600;
61+
margin-right: $ux-spacing-10;
62+
}
63+
64+
.Pill__button--close {
65+
background-color: unset;
66+
border: none;
67+
color: $ux-green-500;
68+
margin-left: $ux-spacing-20;
69+
margin-right: 0;
70+
padding: 0;
71+
}
2772
}
2873

2974
&--yellow {
3075
background-color: $ux-yellow-100;
3176
color: $ux-yellow-900;
3277
border: 0.06rem solid $ux-yellow-600;
78+
79+
.Pill__icon--lead {
80+
color: $ux-yellow-700;
81+
margin-right: $ux-spacing-10;
82+
}
83+
84+
.Pill__button--close {
85+
background-color: unset;
86+
border: none;
87+
color: $ux-yellow-600;
88+
margin-left: $ux-spacing-20;
89+
margin-right: 0;
90+
padding: 0;
91+
}
3392
}
3493

3594
&--gray {
3695
background-color: $ux-gray-300;
3796
color: $ux-gray-800;
3897
border: 0.06rem solid $ux-gray-400;
98+
99+
.Pill__icon--lead {
100+
margin-right: $ux-spacing-10;
101+
}
102+
103+
.Pill__button--close {
104+
background-color: unset;
105+
border: none;
106+
color: $ux-gray-500;
107+
margin-left: $ux-spacing-20;
108+
margin-right: 0;
109+
padding: 0;
110+
}
39111
}
40112

41113
&--silver {
42114
background-color: $ux-gray-200;
43115
color: $ux-gray-800;
44116
border: 0.06rem solid $ux-gray-400;
45-
}
46117

47-
/////// SIZES
48-
// Seems like a fine default size
49-
border-radius: 2rem;
50-
font-size: $font-size-base;
51-
padding: $ux-spacing-10 $ux-spacing-30;
118+
.Pill__icon--lead {
119+
color: $ux-gray-700;
120+
margin-right: $ux-spacing-10;
121+
}
52122

53-
&--sm {
54-
border-radius: 1rem;
55-
font-size: .625rem;
56-
padding: $ux-spacing-10 $ux-spacing-20;
123+
.Pill__button--close {
124+
background-color: unset;
125+
border: none;
126+
color: $ux-gray-500;
127+
margin-left: $ux-spacing-20;
128+
margin-right: 0;
129+
padding: 0;
130+
}
57131
}
58132

59-
&--squared {
60-
border-radius: $ux-border-radius;
133+
&--large {
134+
@include font-type-40;
135+
border-radius: 0.5rem;
136+
padding: $ux-spacing-10 $ux-spacing-20;
61137
}
62138
}

‎stories/Pill.stories.jsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎stories/Pill/Pill.stories.jsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { action } from '@storybook/addon-actions';
3+
import {
4+
withKnobs,
5+
text,
6+
select,
7+
boolean,
8+
} from '@storybook/addon-knobs';
9+
import { faUsers } from '@fortawesome/free-solid-svg-icons';
10+
11+
import Pill from 'src/Pill';
12+
13+
export default {
14+
title: 'Design System/Pill',
15+
component: Pill,
16+
decorators: [withKnobs],
17+
};
18+
19+
const colors = ['blue', 'orange', 'yellow', 'green', 'gray', 'silver'];
20+
21+
const handleClose = (id) => {
22+
action('handle close')(id);
23+
};
24+
25+
export const Default = () => (
26+
<Pill
27+
color={select('Color', colors, 'blue')}
28+
id="1"
29+
large={boolean('Large', false)}
30+
text={text('Text', 'Text')}
31+
/>
32+
);
33+
34+
export const WithLeadingIcon = () => (
35+
<Pill
36+
color={select('Color', colors, 'blue')}
37+
icon={faUsers}
38+
id="2"
39+
large={boolean('Large', false)}
40+
text={text('Text', 'Text')}
41+
/>
42+
);
43+
44+
export const WithClose = () => (
45+
<Pill
46+
color={select('Color', colors, 'blue')}
47+
id="3"
48+
large={boolean('Large', false)}
49+
text={text('Text', 'Text')}
50+
onClose={handleClose}
51+
/>
52+
);

0 commit comments

Comments
 (0)