feat!: Allow additional background colours for Avatar and remove dark…

… blue option (#1257)
Amsterdam · Jun 12, 2024 · a1a3c8f · a1a3c8f
1 parent 478508a
commit a1a3c8f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 15 deletions.
diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss
@@ -28,16 +28,16 @@
   vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
 }
 
+.ams-avatar--black {
+  background-color: var(--ams-avatar-black-background-color);
+  color: var(--ams-avatar-black-color);
+}
+
 .ams-avatar--blue {
   background-color: var(--ams-avatar-blue-background-color);
   color: var(--ams-avatar-blue-color);
 }
 
-.ams-avatar--dark-blue {
-  background-color: var(--ams-avatar-dark-blue-background-color);
-  color: var(--ams-avatar-dark-blue-color);
-}
-
 .ams-avatar--dark-green {
   background-color: var(--ams-avatar-dark-green-background-color);
   color: var(--ams-avatar-dark-green-color);
@@ -48,6 +48,26 @@
   color: var(--ams-avatar-green-color);
 }
 
+.ams-avatar--grey-1 {
+  background-color: var(--ams-avatar-grey-1-background-color);
+  color: var(--ams-avatar-grey-1-color);
+}
+
+.ams-avatar--grey-2 {
+  background-color: var(--ams-avatar-grey-2-background-color);
+  color: var(--ams-avatar-grey-2-color);
+}
+
+.ams-avatar--grey-3 {
+  background-color: var(--ams-avatar-grey-3-background-color);
+  color: var(--ams-avatar-grey-3-color);
+}
+
+.ams-avatar--light-blue {
+  background-color: var(--ams-avatar-light-blue-background-color);
+  color: var(--ams-avatar-light-blue-color);
+}
+
 .ams-avatar--magenta {
   background-color: var(--ams-avatar-magenta-background-color);
   color: var(--ams-avatar-magenta-color);
@@ -68,6 +88,11 @@
   color: var(--ams-avatar-red-color);
 }
 
+.ams-avatar--white {
+  background-color: var(--ams-avatar-white-background-color);
+  color: var(--ams-avatar-white-color);
+}
+
 .ams-avatar--yellow {
   background-color: var(--ams-avatar-yellow-background-color);
   color: var(--ams-avatar-yellow-color);

diff --git a/packages/react/src/Avatar/Avatar.test.tsx b/packages/react/src/Avatar/Avatar.test.tsx
@@ -70,7 +70,7 @@ describe('Avatar', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-avatar--dark-blue')
+    expect(component).toHaveClass('ams-avatar--blue')
   })
 
   avatarColors.map((color) =>

diff --git a/packages/react/src/Avatar/Avatar.tsx b/packages/react/src/Avatar/Avatar.tsx
@@ -12,14 +12,19 @@ import { Image } from '../Image'
 import { VisuallyHidden } from '../VisuallyHidden'
 
 export const avatarColors = [
+  'black',
   'blue',
-  'dark-blue',
   'dark-green',
   'green',
+  'grey-1',
+  'grey-2',
+  'grey-3',
+  'light-blue',
   'magenta',
   'orange',
   'purple',
   'red',
+  'white',
   'yellow',
 ] as const
 
@@ -52,10 +57,7 @@ export type AvatarProps = {
 } & HTMLAttributes<HTMLSpanElement>
 
 export const Avatar = forwardRef(
-  (
-    { label, imageSrc, className, color = 'dark-blue', ...restProps }: AvatarProps,
-    ref: ForwardedRef<HTMLSpanElement>,
-  ) => {
+  ({ label, imageSrc, className, color = 'blue', ...restProps }: AvatarProps, ref: ForwardedRef<HTMLSpanElement>) => {
     const initials = label.slice(0, 2).toUpperCase()
 
     const a11yLabel = initials.length === 0 ? 'Gebruiker' : `Initialen gebruiker: ${initials}`

diff --git a/proprietary/tokens/src/components/ams/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json
@@ -8,11 +8,11 @@
       "line-height": { "value": "{ams.text.level.6.line-height}" },
       "padding-block": { "value": "0.25rem" },
       "padding-inline": { "value": "0.25rem" },
-      "blue": {
-        "background-color": { "value": "{ams.color.blue}" },
-        "color": { "value": "{ams.color.primary-black}" }
+      "black": {
+        "background-color": { "value": "{ams.color.primary-black}" },
+        "color": { "value": "{ams.color.primary-white}" }
       },
-      "dark-blue": {
+      "blue": {
         "background-color": { "value": "{ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
@@ -24,6 +24,22 @@
         "background-color": { "value": "{ams.color.green}" },
         "color": { "value": "{ams.color.primary-black}" }
       },
+      "grey-1": {
+        "background-color": { "value": "{ams.color.neutral-grey1}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "grey-2": {
+        "background-color": { "value": "{ams.color.neutral-grey2}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "grey-3": {
+        "background-color": { "value": "{ams.color.neutral-grey3}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "light-blue": {
+        "background-color": { "value": "{ams.color.blue}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
       "magenta": {
         "background-color": { "value": "{ams.color.magenta}" },
         "color": { "value": "{ams.color.primary-white}" }
@@ -40,6 +56,10 @@
         "background-color": { "value": "{ams.color.primary-red}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
+      "white": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
       "yellow": {
         "background-color": { "value": "{ams.color.yellow}" },
         "color": { "value": "{ams.color.primary-black}" }