feat(avatar-stack): new component

.changeset/neat-eggs-clap.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+**AvatarStack**: New component

.changeset/sour-beers-knock.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": minor
+---
+
+**avatar-stack**: New component

packages/css/src/avatar-stack.css

@@ -0,0 +1,81 @@
+@property --captured-length {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+.ds-avatar-stack {
+  --dsc-avatar-stack-size: var(--ds-size-12);
+  --dsc-avatar-stack-gap: 2;
+  --dsc-avatar-stack-overlap: 50;
+  /*--dsc-avatar-count<number> is only needed when the stack is expandable="fixed", to calculate a fixed width.*/
+  --dsc-avatar-count: initial;
+
+  --_gap: calc(var(--dsc-avatar-stack-gap) * 1px);
+  --_overlap: calc(((var(--dsc-avatar-stack-size) / 100) * var(--dsc-avatar-stack-overlap)) * -1);
+
+  --captured-length: var(--_overlap);
+  display: flex;
+  isolation: isolate;
+  padding-block: 1px;
+  width: max-content;
+  transition: --captured-length 0.2s ease;
+
+  &:focus-visible {
+    @composes ds-focus--visible from './base.css';
+  }
+
+  &[data-expandable] {
+    &:hover,
+    &:focus-visible {
+      --captured-length: var(--_gap);
+    }
+  }
+
+  &[data-expandable='fixed'] {
+    width: calc(var(--dsc-avatar-stack-size) * var(--dsc-avatar-count) + var(--_overlap) * (var(--dsc-avatar-count) - 1));
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  &[data-suffix]::after {
+    content: attr(data-suffix);
+    place-self: center;
+    margin-left: 1ch;
+    font-size: max(1rem, calc(var(--dsc-avatar-stack-size) * 0.4));
+  }
+
+  .ds-avatar {
+    --dsc-avatar-size: var(--dsc-avatar-stack-size);
+    --_font-size: max(0.75rem, calc(var(--dsc-avatar-stack-size) * 0.5));
+    mask: radial-gradient(50% 50% at calc(150% + var(--captured-length)), transparent calc(100% - 1px + var(--_gap)), #000 calc(100% + var(--_gap)));
+    &[data-variant='square'] {
+      mask: linear-gradient(to right, #000 calc(100% + var(--captured-length) - var(--_gap)), transparent calc(100% + var(--captured-length) - var(--_gap)));
+    }
+
+    &:not(:first-child) {
+      margin-left: var(--captured-length);
+    }
+    &:nth-last-child(1 of .ds-avatar) {
+      mask: none;
+    }
+
+    &[data-initials]:empty::before {
+      font-size: var(--_font-size);
+    }
+
+    > span {
+      font-size: var(--_font-size);
+    }
+    > a {
+      line-height: 0;
+    }
+    &:has(:focus-visible) {
+      mask: none;
+      @composes ds-focus--visible from './base.css';
+      z-index: 1;
+    }
+  }
+}

packages/css/src/index.css

@@ -37,5 +37,6 @@
 @import url('./breadcrumbs.css') layer(ds.components);
 @import url('./badge.css') layer(ds.components);
 @import url('./avatar.css') layer(ds.components);
+@import url('./avatar-stack.css') layer(ds.components);
 @import url('./suggestion.css') layer(ds.components);
 @import url('./combobox.css') layer(ds.components);

packages/react/src/components/avatar-stack/avatar-stack.mdx

@@ -0,0 +1,31 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
+import * as AvatarStackStories from './avatar-stack.stories';
+
+<Meta of={AvatarStackStories} />
+
+# AvatarStack
+
+`AvatarStack` er en komponent som stabler `Avatar`.
+
+<Primary />
+<Controls />
+
+## Interactive playground
+<Canvas of={AvatarStackStories.Playground} />
+
+## expandable
+<Canvas of={AvatarStackStories.Expandable} />
+
+## data-size with differen units
+<Canvas of={AvatarStackStories.DataSize} />
+
+## Square
+<Canvas of={AvatarStackStories.ShapeVariants} />
+
+## Tooltip
+<Canvas of={AvatarStackStories.WithTooltip} />
+
+## Link
+<Canvas of={AvatarStackStories.WithTooltipAndLink} />
+
+