From 22259b50777610fa66ddcfc28533fadb1b47b8fe 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 11:00:04 +0200
Subject: [PATCH] passing in a name now shows initials in Avatar component

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

diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte
index 9a69a94834..141b7c1b37 100644
--- a/packages/bbui/src/Avatar/Avatar.svelte
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@@ -12,7 +12,12 @@
   export let size = "M"
   export let url = ""
   export let disabled = false
-  export let initials = "KA"
+  export let name = "John Doe"
+
+  function getInitials(name) {
+    let parts = name.split(" ")
+    return parts.map((name) => name[0]).join("")
+  }
 </script>
 
 {#if url}
@@ -25,11 +30,12 @@
   />
 {:else}
   <div
+    class:is-disabled={disabled}
     style="width: var({sizes.get(size)}); height: var({sizes.get(
       size
     )}); font-size: calc(var({sizes.get(size)}) / 2)"
   >
-    {initials}
+    {getInitials(name)}
   </div>
 {/if}
 
@@ -38,7 +44,7 @@
     color: white;
     display: grid;
     place-items: center;
-    font-weight: bold;
+    font-weight: 500;
     background: rgb(63, 94, 251);
     background: linear-gradient(
       155deg,
@@ -47,5 +53,6 @@
     );
     border-radius: 50%;
     overflow: hidden;
+    user-select: none;
   }
 </style>