Skip to content

Commit 52d8c64

Browse files
VincentSmedingaVincentSmedinga
authored
feat(Avatar)!: Remove some colour options and make purple the default (#1825)
1 parent ef849ed commit 52d8c64

File tree

6 files changed

+20
-101
lines changed

6 files changed

+20
-101
lines changed

‎packages/css/src/components/avatar/README.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ A circular badge representing a person.
66

77
## Design
88

9-
The avatar contains 1 or 2 initial letters from the person's full name, a picture, or a generic icon.
10-
The default background colour is dark blue.
9+
The avatar contains 1 or 2 initial letters from the person’s full name, a picture, or a generic icon.
10+
To personalize the avatar, the user can be allowed to choose one of the highlight colours.
11+
The default background colour is purple.
1112

1213
## Guidelines
1314

14-
- Display an avatar for the person currently using the application,
15+
- Show an avatar for the user of the application,
1516
or to associate a person with a content item.

‎packages/css/src/components/avatar/avatar.scss

+2-40
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55

66
.ams-avatar {
77
aspect-ratio: var(--ams-avatar-aspect-ratio);
8+
background-color: var(--ams-avatar-background-color);
89
border-radius: 50%;
10+
color: var(--ams-avatar-color);
911
display: inline-flex;
1012
font-family: var(--ams-avatar-font-family);
1113
font-size: var(--ams-avatar-font-size);
@@ -37,16 +39,6 @@
3739
vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
3840
}
3941

40-
.ams-avatar--black {
41-
background-color: var(--ams-avatar-black-background-color);
42-
color: var(--ams-avatar-black-color);
43-
}
44-
45-
.ams-avatar--blue {
46-
background-color: var(--ams-avatar-blue-background-color);
47-
color: var(--ams-avatar-blue-color);
48-
}
49-
5042
.ams-avatar--dark-green {
5143
background-color: var(--ams-avatar-dark-green-background-color);
5244
color: var(--ams-avatar-dark-green-color);
@@ -57,21 +49,6 @@
5749
color: var(--ams-avatar-green-color);
5850
}
5951

60-
.ams-avatar--grey-1 {
61-
background-color: var(--ams-avatar-grey-1-background-color);
62-
color: var(--ams-avatar-grey-1-color);
63-
}
64-
65-
.ams-avatar--grey-2 {
66-
background-color: var(--ams-avatar-grey-2-background-color);
67-
color: var(--ams-avatar-grey-2-color);
68-
}
69-
70-
.ams-avatar--grey-3 {
71-
background-color: var(--ams-avatar-grey-3-background-color);
72-
color: var(--ams-avatar-grey-3-color);
73-
}
74-
7552
.ams-avatar--light-blue {
7653
background-color: var(--ams-avatar-light-blue-background-color);
7754
color: var(--ams-avatar-light-blue-color);
@@ -87,21 +64,6 @@
8764
color: var(--ams-avatar-orange-color);
8865
}
8966

90-
.ams-avatar--purple {
91-
background-color: var(--ams-avatar-purple-background-color);
92-
color: var(--ams-avatar-purple-color);
93-
}
94-
95-
.ams-avatar--red {
96-
background-color: var(--ams-avatar-red-background-color);
97-
color: var(--ams-avatar-red-color);
98-
}
99-
100-
.ams-avatar--white {
101-
background-color: var(--ams-avatar-white-background-color);
102-
color: var(--ams-avatar-white-color);
103-
}
104-
10567
.ams-avatar--yellow {
10668
background-color: var(--ams-avatar-yellow-background-color);
10769
color: var(--ams-avatar-yellow-color);

‎packages/react/src/Avatar/Avatar.test.tsx

-8
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,6 @@ describe('Avatar', () => {
6565
expect(component).toHaveTextContent('AB')
6666
})
6767

68-
it('renders with default color', () => {
69-
const { container } = render(<Avatar label="VS" />)
70-
71-
const component = container.querySelector(':only-child')
72-
73-
expect(component).toHaveClass('ams-avatar--blue')
74-
})
75-
7668
avatarColors.map((color) =>
7769
it(`renders with ${color} color`, () => {
7870
const { container } = render(<Avatar label="AL" color={color} />)

‎packages/react/src/Avatar/Avatar.tsx

+3-18
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,7 @@ import { forwardRef } from 'react'
99
import type { ForwardedRef, HTMLAttributes } from 'react'
1010
import { Icon } from '../Icon'
1111

12-
export const avatarColors = [
13-
'black',
14-
'blue',
15-
'dark-green',
16-
'green',
17-
'grey-1',
18-
'grey-2',
19-
'grey-3',
20-
'light-blue',
21-
'magenta',
22-
'orange',
23-
'purple',
24-
'red',
25-
'white',
26-
'yellow',
27-
] as const
12+
export const avatarColors = ['dark-green', 'green', 'light-blue', 'magenta', 'orange', 'yellow'] as const
2813

2914
type AvatarColor = (typeof avatarColors)[number]
3015

@@ -55,7 +40,7 @@ export type AvatarProps = {
5540
} & HTMLAttributes<HTMLSpanElement>
5641

5742
export const Avatar = forwardRef(
58-
({ label, imageSrc, className, color = 'blue', ...restProps }: AvatarProps, ref: ForwardedRef<HTMLSpanElement>) => {
43+
({ label, imageSrc, className, color, ...restProps }: AvatarProps, ref: ForwardedRef<HTMLSpanElement>) => {
5944
const initials = label.slice(0, 2).toUpperCase()
6045

6146
const a11yLabel = initials.length === 0 ? 'Gebruiker' : `Initialen gebruiker: ${initials}`
@@ -64,7 +49,7 @@ export const Avatar = forwardRef(
6449
<span
6550
{...restProps}
6651
ref={ref}
67-
className={clsx('ams-avatar', `ams-avatar--${color}`, imageSrc && 'ams-avatar--has-image', className)}
52+
className={clsx('ams-avatar', color && `ams-avatar--${color}`, imageSrc && 'ams-avatar--has-image', className)}
6853
>
6954
<span className="ams-visually-hidden">{a11yLabel}</span>
7055
<AvatarContent imageSrc={imageSrc} initials={initials} />

‎proprietary/tokens/src/components/ams/avatar.tokens.json

+2-32
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,14 @@
22
"ams": {
33
"avatar": {
44
"aspect-ratio": { "value": "{ams.aspect-ratio.square}" },
5+
"background-color": { "value": "{ams.color.purple}" },
6+
"color": { "value": "{ams.color.primary-white}" },
57
"font-family": { "value": "{ams.text.font-family}" },
68
"font-size": { "value": "{ams.text.level.6.font-size}" },
79
"font-weight": { "value": "{ams.text.font-weight.normal}" },
810
"line-height": { "value": "{ams.text.level.6.line-height}" },
911
"padding-block": { "value": "{ams.space.xs}" },
1012
"padding-inline": { "value": "{ams.space.xs}" },
11-
"black": {
12-
"background-color": { "value": "{ams.color.primary-black}" },
13-
"color": { "value": "{ams.color.primary-white}" }
14-
},
15-
"blue": {
16-
"background-color": { "value": "{ams.color.primary-blue}" },
17-
"color": { "value": "{ams.color.primary-white}" }
18-
},
1913
"dark-green": {
2014
"background-color": { "value": "{ams.color.dark-green}" },
2115
"color": { "value": "{ams.color.primary-white}" }
@@ -27,18 +21,6 @@
2721
"background-color": { "value": "{ams.color.green}" },
2822
"color": { "value": "{ams.color.primary-black}" }
2923
},
30-
"grey-1": {
31-
"background-color": { "value": "{ams.color.neutral-grey1}" },
32-
"color": { "value": "{ams.color.primary-black}" }
33-
},
34-
"grey-2": {
35-
"background-color": { "value": "{ams.color.neutral-grey2}" },
36-
"color": { "value": "{ams.color.primary-black}" }
37-
},
38-
"grey-3": {
39-
"background-color": { "value": "{ams.color.neutral-grey3}" },
40-
"color": { "value": "{ams.color.primary-white}" }
41-
},
4224
"light-blue": {
4325
"background-color": { "value": "{ams.color.blue}" },
4426
"color": { "value": "{ams.color.primary-black}" }
@@ -51,18 +33,6 @@
5133
"background-color": { "value": "{ams.color.orange}" },
5234
"color": { "value": "{ams.color.primary-black}" }
5335
},
54-
"purple": {
55-
"background-color": { "value": "{ams.color.purple}" },
56-
"color": { "value": "{ams.color.primary-white}" }
57-
},
58-
"red": {
59-
"background-color": { "value": "{ams.color.primary-red}" },
60-
"color": { "value": "{ams.color.primary-white}" }
61-
},
62-
"white": {
63-
"background-color": { "value": "{ams.color.primary-white}" },
64-
"color": { "value": "{ams.color.primary-black}" }
65-
},
6636
"yellow": {
6737
"background-color": { "value": "{ams.color.yellow}" },
6838
"color": { "value": "{ams.color.primary-black}" }

‎storybook/src/components/Avatar/Avatar.stories.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { Avatar } from '@amsterdam/design-system-react/src'
7+
import { avatarColors } from '@amsterdam/design-system-react/src/Avatar/Avatar'
78
import { Meta, StoryObj } from '@storybook/react'
89

910
const meta = {
@@ -13,6 +14,14 @@ const meta = {
1314
label: 'DS',
1415
imageSrc: '',
1516
},
17+
argTypes: {
18+
color: {
19+
control: {
20+
labels: { undefined: 'purple (default)' },
21+
},
22+
options: [undefined, ...avatarColors],
23+
},
24+
},
1625
} satisfies Meta<typeof Avatar>
1726

1827
export default meta

0 commit comments

Comments
 (0)