feat: Add Avatar component

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

@@ -0,0 +1,15 @@
+<!-- @license CC0-1.0 -->
+
+# Avatar
+
+A circular badge containing either up to two initials or a profile picture of the currently logged-in user.
+
+The badge contains the personal login icon by default when no user is logged-in or no label is provided.
+
+Interaction can be added by wrapping the avatar in a link.
+
+## Design
+
+The avatar contains either one or two initial letters from the user's full name, a picture or a generic user icon.
+
+The default background colour is dark blue.

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

@@ -0,0 +1,74 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-avatar {
+  aspect-ratio: 1/1;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 50%;
+  display: inline-flex;
+  font-family: var(--ams-avatar-font-family);
+  font-size: var(--ams-avatar-font-size);
+  justify-content: center;
+  line-height: var(--ams-avatar-line-height);
+  padding-block: var(--ams-avatar-padding);
+  padding-inline: var(--ams-avatar-padding);
+  width: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
+}
+
+.ams-avatar--blue {
+  background-color: var(--ams-avatar-blue-background-color);
+  background-image: var(--ams-avatar-blue-background-image);
+  color: var(--ams-avatar-blue-color);
+}
+
+.ams-avatar--dark-blue {
+  background-color: var(--ams-avatar-dark-blue-background-color);
+  background-image: var(--ams-avatar-dark-blue-background-image);
+  color: var(--ams-avatar-dark-blue-color);
+}
+
+.ams-avatar--dark-green {
+  background-color: var(--ams-avatar-dark-green-background-color);
+  background-image: var(--ams-avatar-dark-green-background-image);
+  color: var(--ams-avatar-dark-green-color);
+}
+
+.ams-avatar--green {
+  background-color: var(--ams-avatar-green-background-color);
+  background-image: var(--ams-avatar-green-background-image);
+  color: var(--ams-avatar-green-color);
+}
+
+.ams-avatar--magenta {
+  background-color: var(--ams-avatar-magenta-background-color);
+  background-image: var(--ams-avatar-magenta-background-image);
+  color: var(--ams-avatar-magenta-color);
+}
+
+.ams-avatar--orange {
+  background-color: var(--ams-avatar-orange-background-color);
+  background-image: var(--ams-avatar-orange-background-image);
+  color: var(--ams-avatar-orange-color);
+}
+
+.ams-avatar--purple {
+  background-color: var(--ams-avatar-purple-background-color);
+  background-image: var(--ams-avatar-purple-background-image);
+  color: var(--ams-avatar-purple-color);
+}
+
+.ams-avatar--red {
+  background-color: var(--ams-avatar-red-background-color);
+  background-image: var(--ams-avatar-red-background-image);
+  color: var(--ams-avatar-red-color);
+}
+
+.ams-avatar--yellow {
+  background-color: var(--ams-avatar-yellow-background-color);
+  background-image: var(--ams-avatar-yellow-background-image);
+  color: var(--ams-avatar-yellow-color);
+}

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./avatar/avatar";
 @import "./form-field-character-counter/form-field-character-counter";
 @import "./row/row";
 @import "./radio/radio";

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

@@ -0,0 +1,94 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { Avatar, avatarColors } from './Avatar'
+import '@testing-library/jest-dom'
+
+describe('Avatar', () => {
+  it('renders', () => {
+    const { container } = render(<Avatar label="NR" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<Avatar label="RS" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-avatar')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<Avatar label="VS" className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-avatar extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+
+    const { container } = render(<Avatar label="AL" ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+
+  it('renders with a label consisting of no more than two, uppercase letters', () => {
+    const { container } = render(<Avatar label="Design System" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveTextContent('DE')
+    expect(component).toHaveAttribute('style', 'background-image: none;')
+  })
+
+  it('renders with default content and title', () => {
+    const { container } = render(<Avatar label="" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveTextContent('‏‏‎ ‎')
+    expect(component).toHaveAttribute('title', 'Niet-ingelogde gebruiker')
+  })
+
+  it('renders with default color', () => {
+    const { container } = render(<Avatar label="VS" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-avatar--dark-blue')
+  })
+
+  avatarColors.map((color) =>
+    it(`renders with ${color} color`, () => {
+      const { container } = render(<Avatar label="AL" color={color} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveClass(`ams-avatar--${color}`)
+    }),
+  )
+
+  it('renders with a profile picture', () => {
+    const { container } = render(
+      <Avatar
+        label=""
+        imageUrl="https://web.archive.org/web/20230610011324im_/https://avatars.githubusercontent.com/u/7290629?v=4"
+      />,
+    )
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveTextContent('‏‏‎ ‎')
+    expect(component).toHaveAttribute(
+      'style',
+      'background-image: url(https://web.archive.org/web/20230610011324im_/https://avatars.githubusercontent.com/u/7290629?v=4);',
+    )
+  })
+})

packages/react/src/Avatar/Avatar.tsx

@@ -0,0 +1,64 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef, useMemo } from 'react'
+import type { ForwardedRef, HTMLAttributes, ReactElement } from 'react'
+
+export const avatarColors = [
+  'blue',
+  'dark-blue',
+  'dark-green',
+  'green',
+  'magenta',
+  'orange',
+  'purple',
+  'red',
+  'yellow',
+] as const
+
+type AvatarColor = (typeof avatarColors)[number]
+
+export type AvatarProps = {
+  color?: AvatarColor
+  imageUrl?: string
+  label: string
+} & HTMLAttributes<HTMLElement>
+
+export const Avatar = forwardRef(
+  ({ label, imageUrl, className, color = 'dark-blue', ...restProps }: AvatarProps, ref: ForwardedRef<HTMLElement>) => {
+    const initials: string | ReactElement = useMemo(() => {
+      return (label.length > 2 ? label.slice(0, 2) : label).toUpperCase()
+    }, [label])
+
+    const title = useMemo(() => {
+      return !initials.length ? 'Niet-ingelogde gebruiker' : `Initialen gebruiker: ${initials.split('').join('.')}.`
+    }, [initials])
+
+    const backgroundImageValue: string | undefined = useMemo(() => {
+      if (imageUrl) {
+        return `url(${imageUrl})`
+      } else if (label.length) {
+        return 'none'
+      } else {
+        return undefined
+      }
+    }, [imageUrl, label])
+
+    return (
+      <span
+        {...restProps}
+        ref={ref}
+        className={clsx('ams-avatar', `ams-avatar--${color}`, className)}
+        style={{ backgroundImage: backgroundImageValue }}
+        title={title}
+      >
+        {backgroundImageValue !== 'none' ? '‏‏‎ ‎' : initials}
+      </span>
+    )
+  },
+)
+
+Avatar.displayName = 'Avatar'

packages/react/src/Avatar/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React Avatar component
+
+[Avatar documentation](../../../css/src/components/avatar/README.md)

packages/react/src/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar'
+export type { AvatarProps } from './Avatar'

packages/react/src/index.ts

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './Avatar'
 export * from './FormFieldCharacterCounter'
 export * from './Row'
 export * from './Radio'

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

@@ -0,0 +1,74 @@
+{
+  "ams": {
+    "avatar": {
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" },
+      "padding": { "value": "5px" },
+      "blue": {
+        "background-color": { "value": "{ams.color.blue}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='black' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "dark-blue": {
+        "background-color": { "value": "{ams.color.primary-blue}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='white' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "dark-green": {
+        "background-color": { "value": "{ams.color.dark-green}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='white' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "green": {
+        "background-color": { "value": "{ams.color.green}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='black' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "magenta": {
+        "background-color": { "value": "{ams.color.magenta}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='white' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "orange": {
+        "background-color": { "value": "{ams.color.orange}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='black' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "purple": {
+        "background-color": { "value": "{ams.color.purple}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='white' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "red": {
+        "background-color": { "value": "{ams.color.primary-red}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='white' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "yellow": {
+        "background-color": { "value": "{ams.color.yellow}" },
+        "background-image": {
+          "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='black' fill-rule='evenodd' d='M31 32H1v-2.5c0-7.5 4.2-10 10-10h10c5.8 0 10 2.5 10 10V32zM16 17a7.6 7.6 0 0 0 7.5-7.5 7.5 7.5 0 0 0-15 0A7.6 7.6 0 0 0 16 17z'/></svg>\")"
+        },
+        "color": { "value": "{ams.color.primary-black}" }
+      }
+    }
+  }
+}

storybook/src/components/Avatar/Avatar.docs.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as AvatarStories from "./Avatar.stories.tsx";
+import README from "../../../../packages/css/src/components/avatar/README.md?raw";
+
+<Meta of={AvatarStories} />
+
+<Markdown>{README}</Markdown>
+
+## Stories
+
+### Default
+
+<Primary />
+
+<Controls />
+
+### Without Label
+
+Avatar without a label, i.e. no user is logged-in.
+
+<Canvas of={AvatarStories.WithoutLabel} />
+
+### With Picture
+
+<Canvas of={AvatarStories.WithImageURL} />