Skip to content

Commit 612d4be

Browse files
SirSnacksalotSirSnacksalot
authored
UIDS-5532 Added ProfileCell component and story (#5532) (#164)
UIDS-5532 Added purple palette & ProfileCell component/story w/ updated colors & maxWidth prop
1 parent 0c12483 commit 612d4be

File tree

12 files changed

+572
-1
lines changed

12 files changed

+572
-1
lines changed

‎scss/colors.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@import './colors/flash';
22
@import './colors/inputs';
3+
@import './colors/mod_rainbow';
34
@import './colors/palette';

‎scss/colors/mod_rainbow.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@mixin mod-rainbow($selector: '', $lighten: 0%, $color: $ux-white) {
2+
&.ui-mod #{$selector} {
3+
color: $color;
4+
}
5+
6+
&.ui-mod--0 #{$selector} {
7+
background-color: $ux-gray-300;
8+
color: $ux-gray-800;
9+
}
10+
11+
&.ui-mod--1 #{$selector} {
12+
background-color: $ux-green-300;
13+
color: $ux-green-900;
14+
}
15+
16+
&.ui-mod--2 #{$selector} {
17+
background-color: $ux-orange-200;
18+
color: $ux-orange-900;
19+
}
20+
21+
&.ui-mod--3 #{$selector} {
22+
background-color: $ux-yellow-300;
23+
color: $ux-yellow-900;
24+
}
25+
26+
&.ui-mod--4 #{$selector} {
27+
background-color: $ux-red-200;
28+
color: $ux-red-900;
29+
}
30+
31+
&.ui-mod--5 #{$selector} {
32+
background-color: $ux-purple-200;
33+
color: $ux-purple-900;
34+
}
35+
}

‎scss/colors/palette.scss‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ $ux-gray: #A1A1A1;
66
$ux-green: #6DBD63;
77
$ux-light-blue: #7CCBF2;
88
$ux-orange: #F59C27;
9-
$ux-purple: #874B96;
9+
$ux-purple: #725CCC;
1010
$ux-red: #FF4E00;
1111
$ux-white: #FFFFFF;
1212
$ux-yellow: #F7DD58;
@@ -78,3 +78,13 @@ $ux-yellow-600: #E1C228;
7878
$ux-yellow-700: #AE9208;
7979
$ux-yellow-800: #7D6906;
8080
$ux-yellow-900: #655505;
81+
82+
$ux-purple-100: #EAE6FA;
83+
$ux-purple-200: #DCD7F1;
84+
$ux-purple-300: #BDB3E5;
85+
$ux-purple-400: #9382D9;
86+
$ux-purple-500: $ux-purple;
87+
$ux-purple-600: #5642A6;
88+
$ux-purple-700: #42308C;
89+
$ux-purple-800: #34227A;
90+
$ux-purple-900: #201259;

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1345,6 +1345,178 @@ exports[`Storyshots Design System/Popper Default 1`] = `
13451345
</div>
13461346
`;
13471347

1348+
exports[`Storyshots Design System/Profile Cell Large 1`] = `
1349+
<div
1350+
style={
1351+
Object {
1352+
"padding": "1rem",
1353+
}
1354+
}
1355+
>
1356+
<div
1357+
className="ProfileCell ProfileCell--large"
1358+
>
1359+
<div
1360+
className="ProfileCell__image"
1361+
>
1362+
<div
1363+
aria-hidden={false}
1364+
className="Avatar Avatar--large"
1365+
>
1366+
<div
1367+
className="Avatar__circle"
1368+
>
1369+
<span
1370+
className="Avatar__circle__initials"
1371+
>
1372+
RR
1373+
</span>
1374+
</div>
1375+
</div>
1376+
</div>
1377+
<div
1378+
className="ProfileCell__content"
1379+
style={
1380+
Object {
1381+
"maxWidth": "none",
1382+
}
1383+
}
1384+
>
1385+
<h5
1386+
className="ProfileCell__content__name"
1387+
>
1388+
Riley Researcher
1389+
</h5>
1390+
<div
1391+
className="ProfileCell__content__subtitle"
1392+
>
1393+
<div>
1394+
[email protected]
1395+
</div>
1396+
<div>
1397+
+1 888 888 8888
1398+
</div>
1399+
<div>
1400+
(-5:00) America/New York
1401+
</div>
1402+
</div>
1403+
</div>
1404+
</div>
1405+
</div>
1406+
`;
1407+
1408+
exports[`Storyshots Design System/Profile Cell Small 1`] = `
1409+
<div
1410+
style={
1411+
Object {
1412+
"padding": "1rem",
1413+
}
1414+
}
1415+
>
1416+
<div
1417+
className="ProfileCell"
1418+
>
1419+
<div
1420+
className="ProfileCell__image"
1421+
>
1422+
<div
1423+
aria-hidden={false}
1424+
className="Avatar"
1425+
>
1426+
<div
1427+
className="Avatar__circle"
1428+
>
1429+
<span
1430+
className="Avatar__circle__initials"
1431+
>
1432+
RR
1433+
</span>
1434+
</div>
1435+
</div>
1436+
</div>
1437+
<div
1438+
className="ProfileCell__content"
1439+
style={
1440+
Object {
1441+
"maxWidth": "none",
1442+
}
1443+
}
1444+
>
1445+
<h5
1446+
className="ProfileCell__content__name"
1447+
>
1448+
Riley Researcher
1449+
</h5>
1450+
<div
1451+
className="ProfileCell__content__subtitle"
1452+
>
1453+
[email protected]
1454+
</div>
1455+
</div>
1456+
</div>
1457+
</div>
1458+
`;
1459+
1460+
exports[`Storyshots Design System/Profile Cell With Image 1`] = `
1461+
<div
1462+
style={
1463+
Object {
1464+
"padding": "1rem",
1465+
}
1466+
}
1467+
>
1468+
<div
1469+
className="ProfileCell ProfileCell--large"
1470+
>
1471+
<div
1472+
className="ProfileCell__image"
1473+
>
1474+
<div
1475+
aria-hidden={false}
1476+
className="Avatar Avatar--large"
1477+
>
1478+
<div
1479+
className="Avatar__circle"
1480+
>
1481+
<img
1482+
alt="Riley Researcher"
1483+
onError={[Function]}
1484+
src="https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg"
1485+
/>
1486+
</div>
1487+
</div>
1488+
</div>
1489+
<div
1490+
className="ProfileCell__content"
1491+
style={
1492+
Object {
1493+
"maxWidth": "none",
1494+
}
1495+
}
1496+
>
1497+
<h5
1498+
className="ProfileCell__content__name"
1499+
>
1500+
Riley Researcher
1501+
</h5>
1502+
<div
1503+
className="ProfileCell__content__subtitle"
1504+
>
1505+
<div>
1506+
[email protected]
1507+
</div>
1508+
<div>
1509+
+1 888 888 8888
1510+
</div>
1511+
<div>
1512+
(-5:00) America/New York
1513+
</div>
1514+
</div>
1515+
</div>
1516+
</div>
1517+
</div>
1518+
`;
1519+
13481520
exports[`Storyshots Design System/Selects/Async Default 1`] = `
13491521
<div
13501522
style={

‎src/ProfileCell/Avatar.jsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React, { useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
5+
import { uiModClassName } from '../Styles/classNames';
6+
7+
import './Avatar.scss';
8+
9+
function Avatar(props) {
10+
const [imageLoadFailed, setImageLoadFailed] = useState(false);
11+
12+
function onImageLoadError() {
13+
setImageLoadFailed(true);
14+
}
15+
16+
function wrapIfUrlPresent(content) {
17+
if (props.url) {
18+
return (
19+
<a
20+
href={props.url}
21+
rel="noopener noreferrer"
22+
target="_blank"
23+
>
24+
{content}
25+
</a>
26+
);
27+
}
28+
return content;
29+
}
30+
31+
const displayImage = props.image && !imageLoadFailed;
32+
const content = displayImage ? (
33+
<img
34+
alt={props.name}
35+
src={props.image}
36+
onError={onImageLoadError}
37+
/>
38+
) : (
39+
<span className="Avatar__circle__initials">
40+
{props.initials}
41+
</span>
42+
);
43+
44+
return (
45+
<div
46+
aria-hidden={props.ariaHidden}
47+
className={classNames(
48+
'Avatar',
49+
{ 'Avatar--large': props.large },
50+
)}
51+
>
52+
<div
53+
className={classNames([
54+
'Avatar__circle',
55+
{ [uiModClassName(props.colorId)]: !!props.colorId },
56+
])}
57+
>
58+
{wrapIfUrlPresent(content)}
59+
</div>
60+
{props.showAlert && (
61+
<div className="Avatar__alert" />
62+
)}
63+
</div>
64+
);
65+
}
66+
67+
Avatar.propTypes = {
68+
ariaHidden: PropTypes.bool,
69+
colorId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
70+
image: PropTypes.string,
71+
initials: PropTypes.string.isRequired,
72+
large: PropTypes.bool,
73+
name: PropTypes.string,
74+
showAlert: PropTypes.bool,
75+
url: PropTypes.string,
76+
};
77+
78+
Avatar.defaultProps = {
79+
ariaHidden: false,
80+
colorId: undefined,
81+
image: undefined,
82+
large: false,
83+
name: '',
84+
showAlert: false,
85+
url: undefined,
86+
};
87+
88+
export default Avatar;

‎src/ProfileCell/Avatar.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
@import '../../scss/theme';
2+
3+
.Avatar {
4+
position: relative;
5+
display: inline-block;
6+
height: 2.75rem;
7+
width: 2.75rem;
8+
9+
&__alert {
10+
background-color: $ux-red-400;
11+
border: 2px solid $ux-white;
12+
border-radius: 50%;
13+
height: 0.75rem;
14+
position: absolute;
15+
top: 0;
16+
right: 0;
17+
width: 0.75rem;
18+
}
19+
20+
&__circle {
21+
@include mod-rainbow;
22+
23+
&:before {
24+
content: '';
25+
display: inline-block;
26+
height: 100%;
27+
vertical-align: middle;
28+
}
29+
30+
background-color: $ux-blue;
31+
border-radius: 50%;
32+
color: $ux-white;
33+
display: inline-block;
34+
height: 100%;
35+
overflow: hidden;
36+
text-align: center;
37+
width: 100%;
38+
39+
&__initials {
40+
@include font-type-30--bold;
41+
display: inline-block;
42+
vertical-align: middle;
43+
}
44+
45+
> img {
46+
height: 100%;
47+
width: 100%;
48+
}
49+
}
50+
51+
&--large {
52+
height: 5rem;
53+
width: 5rem;
54+
55+
.Avatar {
56+
&__circle__initials {
57+
@include font-type-70--bold;
58+
}
59+
&__alert {
60+
height: 1.36rem;
61+
width: 1.36rem;
62+
}
63+
}
64+
}
65+
}

0 commit comments

Comments
 (0)