feat: complete Avatar

demo/src/routes/index.svelte

@@ -18,7 +18,11 @@
     SelectMenu,
     Toast,
     Subhead,
-    BoxOverlay
+    BoxOverlay,
+    DashedConnection,
+    CircleBadge,
+    AvatarParentChild,
+    AvatarStack
   } from "svelte-primer";
   import { Tools, Eye } from "svelte-octicons";
 </script>
@@ -27,6 +31,19 @@
   <title>svelte-primer</title>
 </svelte:head>
 
+<AvatarParentChild>
+  <Avatar
+    parent
+    alt="jonrohan"
+    src="https://github.com/jonrohan.png?v=3&s=96" />
+  <Avatar child alt="josh" src="https://github.com/josh.png?v=3&s=40" />
+</AvatarParentChild>
+
+<AvatarStack>
+  <Avatar alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
+  <Avatar alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=96" />
+</AvatarStack>
+
 <Breadcrumb.Breadcrumb>
   <Breadcrumb.Item>One</Breadcrumb.Item>
   <Breadcrumb.Item>Two</Breadcrumb.Item>
@@ -40,6 +57,14 @@
   <Dropdown.Item>two</Dropdown.Item>
 </Dropdown.Dropdown>
 
+<DashedConnection>
+  <li>
+    <CircleBadge>1</CircleBadge>
+  </li>
+  <li>
+    <CircleBadge>2</CircleBadge>
+  </li>
+</DashedConnection>
 <BoxOverlay size="wide">1</BoxOverlay>
 <div>
   <Label color="green">green outlined label</Label>

src/Avatar/Avatar.svelte

@@ -0,0 +1,51 @@
+<script>
+  export let small = false;
+  export let alt = undefined;
+  export let src = undefined;
+  export let parent = false;
+  export let child = false;
+  export let width = 72;
+  export let height = 72;
+
+  import { getContext, onMount } from "svelte";
+
+  const id = Math.random().toString(36);
+  const ctx = getContext("AvatarStack");
+
+  onMount(() => {
+    if (ctx) {
+      ctx.add({ id });
+    }
+
+    return () => {
+      if (ctx) {
+        ctx.remove({ id });
+      }
+    };
+  });
+
+  $: if (small) {
+    width = 32;
+    height = 32;
+  }
+
+  $: if (parent) {
+    width = 48;
+    height = 48;
+  }
+
+  $: if (child) {
+    width = 20;
+    height = 20;
+  }
+</script>
+
+<img
+  {...$$restProps}
+  class:avatar={true}
+  class:avatar-small={small}
+  class:avatar-child={child}
+  {alt}
+  {src}
+  {width}
+  {height} />

src/Avatar/AvatarParentChild.svelte

@@ -0,0 +1,10 @@
+<script>
+  import Avatar from "./Avatar.svelte";
+</script>
+
+<div
+  {...$$restProps}
+  class:avatar-parent-child={true}
+  class:d-inline-flex={true}>
+  <slot />
+</div>

src/Avatar/AvatarStack.svelte

@@ -0,0 +1,34 @@
+<script>
+  export let title = "Avatar stack title";
+  export let align = "left"; // 'left' | 'right'
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const avatars = writable([]);
+
+  setContext("AvatarStack", {
+    add: item => {
+      avatars.update(_ => [..._, item]);
+    },
+    remove: item => {
+      avatars.update(_ => _.filter(avatar => avatar.id !== item.id));
+    }
+  });
+</script>
+
+<div
+  class:AvatarStack={true}
+  class:AvatarStack--two={$avatars.length === 2}
+  class:AvatarStack--three-plus={$avatars.length > 2}
+  class:AvatarStack--right={align === 'right'}>
+  <div
+    class="AvatarStack-body tooltipped"
+    class:tooltipped-se={align === 'left'}
+    class:tooltipped-align-left-1={align === 'left'}
+    class:tooltipped-sw={align === 'right'}
+    class:tooltipped-align-right-1={align === 'right'}
+    aria-label={title}>
+    <slot />
+  </div>
+</div>

src/Avatar/CircleBadge.svelte

@@ -0,0 +1,27 @@
+<script>
+  export let size = "small"; // 'small' | 'medium' | 'large'
+  export let href = undefined;
+</script>
+
+{#if href}
+  <a
+    {...$$restProps}
+    class:CircleBadge={true}
+    class:CircleBadge--small={size === 'small'}
+    class:CircleBadge--medium={size === 'medium'}
+    class:CircleBadge--large={size === 'large'}
+    {href}
+    on:click>
+    <slot props={{ class: 'CircleBadge-icon' }} />
+  </a>
+{:else}
+  <div
+    {...$$restProps}
+    class:CircleBadge={true}
+    class:CircleBadge--small={size === 'small'}
+    class:CircleBadge--medium={size === 'medium'}
+    class:CircleBadge--large={size === 'large'}
+    on:click>
+    <slot props={{ class: 'CircleBadge-icon' }} />
+  </div>
+{/if}

src/Avatar/DashedConnection.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let title = "Title";
+</script>
+
+<div {...$$restProps} class:DashedConnection={true}>
+  <ul class="d-flex list-style-none flex-justify-between" aria-label={title}>
+    <slot />
+  </ul>
+</div>

src/index.js

@@ -1,10 +1,14 @@
 // in progress
-export { default as Avatar } from "./Avatar.svelte";
 export { default as Form } from "./Form";
 export { default as Navigation } from "./Navigation";
 export { default as Timeline } from "./Timeline";
 
 // completed
+export { default as Avatar } from "./Avatar/Avatar.svelte";
+export { default as AvatarStack } from "./Avatar/AvatarStack.svelte";
+export { default as AvatarParentChild } from "./Avatar/AvatarParentChild.svelte";
+export { default as CircleBadge } from "./Avatar/CircleBadge.svelte";
+export { default as DashedConnection } from "./Avatar/DashedConnection.svelte";
 export { default as Alert } from "./Alert.svelte";
 export { default as BoxOverlay } from "./BoxOverlay.svelte";
 export { default as BranchName } from "./BranchName.svelte";