From f283e2b0f5d3fb16bc089e790bfadf7756e1e356 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 5 May 2021 10:43:06 +0200
Subject: [PATCH] add sizing prop to Avatar

---
 packages/bbui/src/Avatar/Avatar.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte
index ae3ebda82c..be8172b05d 100644
--- a/packages/bbui/src/Avatar/Avatar.svelte
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@@ -1,5 +1,15 @@
 <script>
   import "@spectrum-css/avatar/dist/index-vars.css"
+  let sizes = new Map([
+    ["XXS", "--spectrum-alias-avatar-size-50"],
+    ["XS", "--spectrum-alias-avatar-size-75"],
+    ["S", "--spectrum-alias-avatar-size-200"],
+    ["M", "--spectrum-alias-avatar-size-300"],
+    ["L", "--spectrum-alias-avatar-size-500"],
+    ["XL", "--spectrum-alias-avatar-size-600"],
+    ["XXL", "--spectrum-alias-avatar-size-700"],
+  ])
+  export let size = "M"
   export let url = ""
   export let disabled = false
   export let initials = "KA"
@@ -11,9 +21,12 @@
     class="spectrum-Avatar"
     src={url}
     alt="Avatar"
+    style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"
   />
 {:else}
-  <div>{initials}</div>
+  <div style="width: var({sizes.get(size)}); height: var({sizes.get(size)});">
+    {initials}
+  </div>
 {/if}
 
 <style>
@@ -29,7 +42,5 @@
       rgba(53, 199, 86, 1) 47%
     );
     border-radius: 50%;
-    width: 32px;
-    height: 32px;
   }
 </style>