Skip to content

Commit c561ef2

Browse files
PetrBukovPetrBukov
authored
Merge pull request 8base#393 from 8base/feat-new-avatar
feat: add new features to the avatar component
2 parents 0aeadd2 + 6e34314 commit c561ef2

File tree

11 files changed

+217
-23
lines changed

11 files changed

+217
-23
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ Storybook - https://8base.github.io/boost/
88
yarn storybook
99
```
1010

11+
## Update snapshots
12+
```
13+
docker pull vorobeez/puppeteer-e2e-chrome:74.0.3729.169-1
14+
15+
docker run --privileged --name e2e-chrome -p 9222:9222 -d vorobeez/puppeteer-e2e-chrome:74.0.3729.169-1
16+
17+
yarn e2e:update
18+
```
19+
1120
## Usage
1221

1322
### Basic usage

‎e2e/__tests__/__image_snapshots__/avatar-test-js-components-avatar-common-1-snap.png‎

7.05 KB
Loading

‎src/components/Avatar/Avatar.js‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,77 @@
11
// @flow
22

33
import React from 'react';
4-
import { theme, AvatarImgTag, AvatarTag, AvatarHandleTag } from './Avatar.theme';
4+
import { theme, AvatarImgTag, AvatarTag, AvatarHandleTag, AvatarHandleFullWidthTag, AvatarHandleIconContainerTag } from './Avatar.theme';
5+
import { Icon } from '../Icon';
56

67
type AvatarProps = {
78
src?: string,
89
firstName?: string,
910
lastName?: string,
10-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
11+
/** avatar size ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl') */
12+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
1113
onPick?: () => void,
1214
pickLabel?: string,
15+
/** shape of the avatar ('circle' | 'square' | 'rounded') */
16+
variant?: 'circle' | 'square' | 'rounded',
17+
/** appearance of the pick element ('bottom' | 'fullWidth') */
18+
pickVariant?: 'bottom' | 'fullWidth',
1319
};
1420

1521
const DEFAULT_INITIALS = 'A';
1622

23+
const CAMERA_ICON_SIZE = {
24+
xs: '8px',
25+
sm: '12px',
26+
md: '18px',
27+
lg: '18px',
28+
xl: '24px',
29+
xxl: '24px',
30+
};
31+
1732
function Avatar({
1833
src,
1934
firstName,
2035
lastName,
2136
onPick,
2237
pickLabel,
38+
pickVariant,
2339
...rest
2440
}: AvatarProps) {
2541
const initials = firstName && lastName ? firstName.slice(0, 1) + lastName.slice(0, 1) : DEFAULT_INITIALS;
2642

2743
return (
28-
<AvatarTag { ...rest } firstName={ firstName } tagName="div">
44+
<AvatarTag pickVariant={ pickVariant } { ...rest } firstName={ firstName } tagName="div">
2945
{
3046
src ? <AvatarImgTag modifiers={ rest } tagName="img" src={ src } /> : initials
3147
}
3248
{
33-
(onPick && pickLabel)
49+
(onPick && pickVariant === 'bottom')
3450
&&
3551
<AvatarHandleTag modifiers={ rest } onClick={ onPick }>{ pickLabel }</AvatarHandleTag>
3652
}
53+
{
54+
(onPick && pickVariant === 'fullWidth')
55+
&&
56+
<AvatarHandleFullWidthTag modifiers={ rest } onClick={ onPick } >
57+
<AvatarHandleIconContainerTag modifiers={ rest }>
58+
<Icon name="Camera" color="WHITE" size="custom" customSize={ CAMERA_ICON_SIZE[rest.size || 'lg'] } />
59+
<div>
60+
{ pickLabel }
61+
</div>
62+
</AvatarHandleIconContainerTag>
63+
</AvatarHandleFullWidthTag>
64+
}
3765
</AvatarTag>
3866
);
3967
}
4068

4169

4270
Avatar.defaultProps = {
4371
size: 'lg',
72+
variant: 'circle',
73+
pickVariant: 'bottom',
74+
pickLabel: 'Change',
4475
};
4576

4677
export { Avatar, theme };

‎src/components/Avatar/Avatar.stories.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,18 @@ export const common = () => (
2020
<Avatar src="https://randomuser.me/api/portraits/women/17.jpg" />
2121
</Row>
2222
<Row>
23+
<Avatar size="xxl" />
2324
<Avatar size="xl" />
2425
<Avatar size="lg" />
2526
<Avatar size="md" />
2627
<Avatar size="sm" />
2728
<Avatar size="xs" />
2829
</Row>
30+
<Row>
31+
<Avatar size="xl" variant="circle" />
32+
<Avatar size="xl" variant="square" />
33+
<Avatar size="xl" variant="rounded" />
34+
</Row>
2935
</Column>
3036
);
3137

@@ -34,11 +40,23 @@ common.story = {
3440
};
3541

3642
export const withPick = () => (
37-
<Avatar
38-
src="https://randomuser.me/api/portraits/women/17.jpg"
39-
onPick={ () => alert(1) }
40-
pickLabel="Change"
41-
/>
43+
<Column>
44+
<Row>
45+
<Avatar
46+
src="https://randomuser.me/api/portraits/women/17.jpg"
47+
onPick={ () => alert(1) }
48+
/>
49+
<Avatar
50+
src="https://randomuser.me/api/portraits/women/17.jpg"
51+
size="xxl"
52+
onPick={ () => alert(1) }
53+
pickLabel="Update"
54+
pickVariant="fullWidth"
55+
variant="rounded"
56+
/>
57+
</Row>
58+
</Column>
59+
4260
);
4361

4462
withPick.story = {

‎src/components/Avatar/Avatar.theme.js‎

Lines changed: 115 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const getBackgroundColorByName = (firstName: ?string) => {
1414

1515
const [AvatarTag, themeAvatar] = createThemeTag(name, ({ COLORS }: *) => ({
1616
root: (props) => ({
17-
borderRadius: '100%',
1817
overflow: 'hidden',
1918
display: 'flex',
2019
justifyContent: 'center',
@@ -23,12 +22,35 @@ const [AvatarTag, themeAvatar] = createThemeTag(name, ({ COLORS }: *) => ({
2322
backgroundColor: getBackgroundColorByName(props.firstName),
2423
color: COLORS.WHITE,
2524
fontWeight: 600,
26-
27-
[`&:hover ${AvatarHandleTag}`]: {
28-
bottom: 0,
29-
},
3025
}),
3126
modifiers: {
27+
pickVariant: {
28+
bottom: {
29+
[`&:hover ${AvatarHandleTag}`]: {
30+
bottom: '0',
31+
},
32+
},
33+
fullWidth: {
34+
[`&:hover > ${AvatarHandleFullWidthTag}`]: {
35+
background: 'rgba(50, 60, 71, 0.7);',
36+
37+
[`${AvatarHandleIconContainerTag}`]: {
38+
opacity: 1,
39+
},
40+
},
41+
},
42+
},
43+
variant: {
44+
circle: {
45+
borderRadius: '100%',
46+
},
47+
square: {
48+
borderRadius: '0%',
49+
},
50+
rounded: {
51+
borderRadius: '17%',
52+
},
53+
},
3254
size: {
3355
xs: {
3456
width: '16px',
@@ -55,6 +77,11 @@ const [AvatarTag, themeAvatar] = createThemeTag(name, ({ COLORS }: *) => ({
5577
height: '100px',
5678
fontSize: '32px',
5779
},
80+
xxl: {
81+
width: '120px',
82+
height: '120px',
83+
fontSize: '48px',
84+
},
5885
stretch: {
5986
width: '100%',
6087
height: '100%',
@@ -85,6 +112,86 @@ const [AvatarHandleTag, themeHandle] = createThemeTag(`${name}Handle`, ({ COLORS
85112
},
86113
}));
87114

115+
const [AvatarHandleFullWidthTag, themeHandleFullWidth] = createThemeTag(`${name}HandleFullWidth`, ({ COLORS }: *) => ({
116+
root: {
117+
position: 'absolute',
118+
top: '0',
119+
left: '0',
120+
right: '0',
121+
height: '100%',
122+
cursor: 'pointer',
123+
124+
display: 'flex',
125+
justifyContent: 'center',
126+
alignItems: 'center',
127+
textAlign: 'center',
128+
129+
background: 'rgba(50, 60, 71, 0)',
130+
fontSize: '8px',
131+
transition: 'all .15s ease-in-out',
132+
userSelect: 'none',
133+
color: COLORS.WHITE,
134+
},
135+
modifiers: {
136+
variant: {
137+
circle: {
138+
borderRadius: '100%',
139+
},
140+
square: {
141+
borderRadius: '0%',
142+
},
143+
rounded: {
144+
borderRadius: '17%',
145+
},
146+
},
147+
},
148+
}));
149+
150+
const [AvatarHandleIconContainerTag, themeHandleIconContainer] = createThemeTag(`${name}HandleIconContainer`, ({ COLORS }: *) => ({
151+
root: {
152+
color: COLORS.WHITE,
153+
display: 'flex',
154+
flexFlow: 'column',
155+
alignItems: 'center',
156+
157+
'> div:nth-child(2)': {
158+
paddingTop: '2px',
159+
position: 'relative',
160+
top: '1px',
161+
},
162+
opacity: 0,
163+
},
164+
modifiers: {
165+
size: {
166+
xs: {
167+
'> div:nth-child(2)': {
168+
display: 'none',
169+
},
170+
},
171+
sm: {
172+
'> div:nth-child(2)': {
173+
display: 'none',
174+
},
175+
},
176+
md: {
177+
fontSize: '6px',
178+
},
179+
lg: {
180+
fontSize: '12px',
181+
},
182+
xl: {
183+
fontSize: '14px',
184+
},
185+
xxl: {
186+
fontSize: '14px',
187+
},
188+
stretch: {
189+
fontSize: '2rem',
190+
},
191+
},
192+
},
193+
}));
194+
88195
const [AvatarImgTag, themeAvatarImg] = createThemeTag(`${name}Img`, {
89196
root: {
90197
width: '100%',
@@ -97,6 +204,8 @@ const theme = {
97204
...themeHandle,
98205
...themeAvatar,
99206
...themeAvatarImg,
207+
...themeHandleFullWidth,
208+
...themeHandleIconContainer,
100209
};
101210

102-
export { theme, AvatarImgTag, AvatarTag, AvatarHandleTag };
211+
export { theme, AvatarImgTag, AvatarTag, AvatarHandleTag, AvatarHandleFullWidthTag, themeHandleFullWidth, AvatarHandleIconContainerTag };

‎src/components/Icon/Icon.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ export type IconProps = {
1212
name: string,
1313
/** icon color */
1414
color?: $Keys<typeof COLORS>,
15-
/** icon size */
16-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'stretch',
15+
/** icon size ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'stretch' | 'custom') */
16+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'stretch' | 'custom',
17+
/** custom icon size (it is required if the size set to custom) */
18+
customSize?: string,
1719
/** custom icon class */
1820
className?: string,
1921
/** title attribute for the icon */

‎src/components/Icon/Icon.stories.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,14 @@ export const withSize = () => (
5151
withSize.story = {
5252
name: 'with size',
5353
};
54+
55+
export const withCustomSize = () => (
56+
<Row alignItems="center">
57+
<Icon name="House" size="custom" customSize="100px" />
58+
<Icon name="House" size="custom" customSize="2rem" />
59+
</Row>
60+
);
61+
62+
withCustomSize.story = {
63+
name: 'with custom size',
64+
};

‎src/components/Icon/Icon.theme.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const [IconSvgTag, themeSvg] = createThemeTag(`${name}Svg`, {
3535
width: '100%',
3636
},
3737
},
38-
modifiers: {
38+
modifiers: (props) => ({
3939
size: {
4040
xs: {
4141
width: '12px',
@@ -61,8 +61,12 @@ const [IconSvgTag, themeSvg] = createThemeTag(`${name}Svg`, {
6161
height: '100%',
6262
width: '100%',
6363
},
64+
custom: {
65+
height: props.customSize,
66+
width: props.customSize,
67+
},
6468
},
65-
},
69+
}),
6670
});
6771

6872

‎src/components/Icon/glyphs/Camera.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/Icon/glyphs/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Add from './Add.svg';
55
import Alert from './Alert.svg';
66
import APIToken from './APIToken.svg';
77
import Calendar from './Calendar.svg';
8+
import Camera from './Camera.svg';
89
import Check from './Check.svg';
910
import ChevronDown from './ChevronDown.svg';
1011
import ChevronLeft from './ChevronLeft.svg';
@@ -57,6 +58,7 @@ export {
5758
Alert,
5859
APIToken,
5960
Calendar,
61+
Camera,
6062
Check,
6163
ChevronDown,
6264
ChevronLeft,

0 commit comments

Comments
 (0)