Browse Source

Update avatar to take initials prop and render text as uppercase

gh-pages
Andrew Kingston 5 years ago
parent
commit
ce71ce1041
  1. 13
      packages/bbui/src/Avatar/Avatar.svelte

13
packages/bbui/src/Avatar/Avatar.svelte

@ -12,15 +12,7 @@
export let size = "M" export let size = "M"
export let url = "" export let url = ""
export let disabled = false export let disabled = false
export let name = "John Doe" export let initials = "JD"
function getInitials(name) {
let parts = name.split(" ")
if (parts.length > 0) {
return parts.map(name => name[0]).join("")
}
return name
}
</script> </script>
{#if url} {#if url}
@ -38,7 +30,7 @@
size size
)}); font-size: calc(var({sizes.get(size)}) / 2)" )}); font-size: calc(var({sizes.get(size)}) / 2)"
> >
{getInitials(name)} {initials || ""}
</div> </div>
{/if} {/if}
@ -52,5 +44,6 @@
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
text-transform: uppercase;
} }
</style> </style>

Loading…
Cancel
Save