feat(Avatar): new component

.changeset/spotty-oranges-guess.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Avatar: new component

packages/css/avatar.css

@@ -0,0 +1,98 @@
+.ds-avatar {
+  --dsc-avatar-background: var(--ds-color-accent-base-default);
+  --dsc-avatar-color: var(--ds-color-accent-contrast-default);
+  --dsc-avatar-size: var(--ds-sizing-12);
+  --dsc-avatar-padding: var(--ds-spacing-2);
+  --dsc-avatar-border-radius: 50%;
+
+  background: var(--dsc-avatar-background);
+  height: var(--dsc-avatar-size);
+  aspect-ratio: 1 / 1;
+  color: var(--dsc-avatar-color);
+  border-radius: var(--dsc-avatar-border-radius);
+  overflow: hidden;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  text-transform: uppercase;
+  text-decoration: none;
+
+  &:not(:has(> img)) {
+    padding: var(--dsc-avatar-padding);
+  }
+
+  & img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  & svg {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  &:empty::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    background-color: currentcolor;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
+  }
+
+  &[data-ds-variant='circle'] {
+    --dsc-avatar-border-radius: var(--ds-border-radius-full);
+  }
+
+  &[data-ds-variant='square'] {
+    --dsc-avatar-border-radius: var(--ds-border-radius-sm);
+  }
+
+  &[data-ds-color='accent'] {
+    --dsc-avatar-background: var(--ds-color-accent-base-default);
+    --dsc-avatar-color: var(--ds-color-accent-contrast-default);
+  }
+
+  &[data-ds-color='neutral'] {
+    --dsc-avatar-background: var(--ds-color-neutral-base-default);
+    --dsc-avatar-color: var(--ds-color-neutral-contrast-default);
+  }
+
+  &[data-ds-color='brand1'] {
+    --dsc-avatar-background: var(--ds-color-brand1-base-default);
+    --dsc-avatar-color: var(--ds-color-brand1-contrast-default);
+  }
+
+  &[data-ds-color='brand2'] {
+    --dsc-avatar-background: var(--ds-color-brand2-base-default);
+    --dsc-avatar-color: var(--ds-color-brand2-contrast-default);
+  }
+
+  &[data-ds-color='brand3'] {
+    --dsc-avatar-background: var(--ds-color-brand3-base-default);
+    --dsc-avatar-color: var(--ds-color-brand3-contrast-default);
+  }
+
+  &[data-ds-size='xs'] {
+    --dsc-avatar-size: var(--ds-sizing-7);
+    --dsc-avatar-padding: var(--ds-spacing-1);
+  }
+
+  &[data-ds-size='sm'] {
+    --dsc-avatar-size: var(--ds-sizing-9);
+    --dsc-avatar-padding: var(--ds-spacing-1);
+  }
+
+  &[data-ds-size='md'] {
+    --dsc-avatar-size: var(--ds-sizing-12);
+    --dsc-avatar-padding: var(--ds-spacing-2);
+  }
+
+  &[data-ds-size='lg'] {
+    --dsc-avatar-size: var(--ds-sizing-15);
+    --dsc-avatar-padding: var(--ds-spacing-2);
+  }
+}

packages/css/index.css

@@ -44,3 +44,4 @@
 @import url('./combobox.css') layer(ds.components);
 @import url('./breadcrumbs.css') layer(ds.components);
 @import url('./badge.css') layer(ds.components);
+@import url('./avatar.css') layer(ds.components);

packages/react/src/components/Avatar/Avatar.mdx

@@ -0,0 +1,75 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
+
+import * as AvatarStories from './Avatar.stories';
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+`Avatar` er en komponent som viser et bilde, initialer eller ikon for en bruker eller profil.
+
+<Primary />
+<Controls />
+
+## Bruk
+
+```tsx
+import { Avatar } from '@digdir/designsystemet-react';
+
+/* Med standard brukerikon */
+<Avatar aria-label="Ola Nordmann" />
+
+/* Med initialer */
+<Avatar aria-label="Ola Nordmann">ON</Avatar>
+
+/* Med bilde */
+<Avatar aria-label="Ola Nordmann">
+  <img src="..." />
+</Avatar>
+```
+
+## Standard ikon
+
+Sender du ikke inn `children` viser vi et standard brukerikon.	
+
+<Canvas of={AvatarStories.NoName} />
+
+## Størrelser
+
+`Avatar` kommer i flere størrelser. Tekst og ikon vil skalere, men det kan hende ikonet ditt må tilpasses.
+
+<Canvas of={AvatarStories.Sizes} />
+
+## Fargevarianter
+
+Du kan bruke alle tema fargene dine på `Avatar`.
+
+<Canvas of={AvatarStories.ColorVariants} />
+
+## Varianter
+
+Du kan endre mellom sirkel og firkantet form. Standard er sirkel.
+
+<Canvas of={AvatarStories.ShapeVariants} />
+
+## Med bilde
+
+Skal du ha bilde, legger du dette som direkte barn av `Avatar`. 
+
+Bilde (og andre child elements) får automatisk `aria-hidden="true"` for å unngå dobbel informasjon.
+
+<Canvas of={AvatarStories.WithImage} />
+
+## Komponering
+
+Du kan komponere `Avatar` inn i andre komponenter, som `DropdownMenu`, samt bruke komponenter som
+`Badge` rundt for å vise status.
+
+<Canvas of={AvatarStories.InDropdownMenu} />
+
+## Som lenke
+
+Legg lenker eller knapper rundt `Avatar` for å gjøre det klikkbart.
+Du må selv sette styling dersom du skal ha en interaktiv `Avatar`.
+
+<Canvas of={AvatarStories.AsLink} />

packages/react/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,129 @@
+import cat1 from '@assets/img/cats/Cat 3.jpg';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { BriefcaseIcon } from '@navikt/aksel-icons';
+import { Avatar } from '.';
+import { Badge, DropdownMenu } from '../';
+
+type Story = StoryFn<typeof Avatar>;
+
+const meta: Meta = {
+  title: 'Komponenter/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          gap: 'var(--ds-spacing-2)',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Preview: Story = (args) => <Avatar {...args} />;
+
+Preview.args = {
+  'aria-label': 'Ola Nordmann',
+  color: 'accent',
+  size: 'md',
+  variant: 'circle',
+  children: '',
+};
+
+export const NoName: Story = () => <Avatar aria-label='Ola' />;
+
+export const Sizes: Story = () => (
+  <>
+    <Avatar size='xs' aria-label='extra small'>
+      xs
+    </Avatar>
+    <Avatar size='xs' aria-label='extra small' />
+    <Avatar size='sm' aria-label='small'>
+      sm
+    </Avatar>
+    <Avatar size='sm' aria-label='small' />
+    <Avatar size='md' aria-label='medium'>
+      md
+    </Avatar>
+    <Avatar size='md' aria-label='medium' />
+    <Avatar size='lg' aria-label='large'>
+      lg
+    </Avatar>
+    <Avatar size='lg' aria-label='large' />
+  </>
+);
+
+export const ColorVariants: Story = () => (
+  <>
+    <Avatar color='accent' aria-label='color accent' />
+    <Avatar color='neutral' aria-label='color neutral' />
+    <Avatar color='brand1' aria-label='color brand1' />
+    <Avatar color='brand2' aria-label='color brand2' />
+    <Avatar color='brand3' aria-label='color brand3' />
+  </>
+);
+
+export const ShapeVariants: Story = () => (
+  <>
+    <Avatar variant='circle' aria-label='variant circle' />
+    <Avatar variant='square' aria-label='variant square' />
+    <Avatar variant='circle' aria-label='Ola Nordman'>
+      ON
+    </Avatar>
+    <Avatar variant='square' aria-label='Ola Nordman'>
+      ON
+    </Avatar>
+  </>
+);
+
+export const WithImage: Story = () => (
+  <Avatar aria-label='Ola Nordman'>
+    <img src={cat1} alt='' />
+  </Avatar>
+);
+
+export const InDropdownMenu: Story = () => (
+  <DropdownMenu.Root placement='bottom-end' size='md' portal>
+    <DropdownMenu.Trigger variant='tertiary'>
+      <Avatar aria-label='Ola Nordmann' size='sm'>
+        ON
+      </Avatar>
+      Velg Profil
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+      <DropdownMenu.Group heading='Alle kontoer'>
+        <DropdownMenu.Item>
+          <Badge overlap='circle' color='danger' size='sm'>
+            <Avatar aria-label='Ola Nordmann' size='xs'>
+              ON
+            </Avatar>
+          </Badge>
+          Ola Nordmann
+        </DropdownMenu.Item>
+        <DropdownMenu.Item>
+          <Avatar size='xs' color='brand1' aria-label='Sogndal Kommune'>
+            <BriefcaseIcon fontSize='5em' />
+          </Avatar>
+          Sogndal kommune
+        </DropdownMenu.Item>
+      </DropdownMenu.Group>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+);
+
+export const AsLink: Story = () => (
+  <a href='#'>
+    <Avatar aria-label='Ola Nordmann' />
+  </a>
+);

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

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { Avatar } from './';
+
+describe('Avatar', () => {
+  it('should render correctly with default props', () => {
+    render(<Avatar aria-label='ola' />);
+    expect(screen.getByRole('img')).toBeInTheDocument();
+    expect(screen.getByRole('img')).toHaveAttribute('data-ds-size', 'md');
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'data-ds-variant',
+      'circle',
+    );
+    expect(screen.getByRole('img')).toHaveAttribute('data-ds-color', 'accent');
+  });
+
+  it('should render correctly with custom props', () => {
+    render(<Avatar size='lg' variant='square' aria-label='ola' />);
+    expect(screen.getByRole('img')).toBeInTheDocument();
+    expect(screen.getByRole('img')).toHaveAttribute('data-ds-size', 'lg');
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'data-ds-variant',
+      'square',
+    );
+  });
+
+  it('should render initials when aria-label is set', () => {
+    render(<Avatar aria-label='Ola Nordmann'>ON</Avatar>);
+    expect(screen.getByText('ON')).toBeInTheDocument();
+  });
+
+  it('should render children', () => {
+    render(
+      <Avatar aria-label='Ola Nordmann'>
+        <img src='' alt='ola nordmann' data-testid='child-image' />
+      </Avatar>,
+    );
+    /* look for image with correct id */
+    expect(screen.getByTestId('child-image')).toBeInTheDocument();
+  });
+
+  it('children should have aria-hidden', () => {
+    render(
+      <Avatar aria-label='Ola Nordmann'>
+        <img src='' alt='ola nordmann' data-testid='child-image' />
+      </Avatar>,
+    );
+    expect(screen.getByTestId('child-image')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
+  });
+});