From 22b665d164b3d2411e8306d4a7dddb9a66712da1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 21 Apr 2021 14:10:24 +0200
Subject: [PATCH] Implements Tags and Tag components

---
 packages/bbui/src/Tags/Tag.svelte  | 35 ++++++++++++++++++++----------
 packages/bbui/src/Tags/Tags.svelte |  7 ++++++
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/packages/bbui/src/Tags/Tag.svelte b/packages/bbui/src/Tags/Tag.svelte
index 6e1605982c..e186514376 100644
--- a/packages/bbui/src/Tags/Tag.svelte
+++ b/packages/bbui/src/Tags/Tag.svelte
@@ -1,11 +1,24 @@
-<div class="spectrum-Tags" role="list" aria-label="list">
-    <div class="spectrum-Tags-item" role="listitem">
-      <span class="spectrum-Tags-itemLabel">Tag 1</span>
-    </div>
-    <div class="spectrum-Tags-item is-invalid" role="listitem">
-      <span class="spectrum-Tags-itemLabel">Tag 2</span>
-    </div>
-    <div class="spectrum-Tags-item is-disabled" role="listitem">
-      <span class="spectrum-Tags-itemLabel">Tag 2</span>
-    </div>
-  </div>
\ No newline at end of file
+<script>
+  import Avatar from '../Avatar/Avatar.svelte'
+  import ClearButton from '../ClearButton/ClearButton.svelte'
+  export let icon = "";
+  export let avatar = "";
+  export let invalid = false;
+  export let disabled = false;
+  export let closable = false;
+</script>
+
+<div class:is-invalid={invalid} class:is-disabled={disabled} class="spectrum-Tags-item" role="listitem">
+  {#if avatar}
+    <Avatar url={avatar} />
+  {/if}
+  {#if icon}
+    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
+      <use xlink:href="#spectrum-icon-24-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tags-itemLabel"><slot /></span>
+  {#if closable}
+     <ClearButton on:click />
+  {/if}
+</div>
\ No newline at end of file
diff --git a/packages/bbui/src/Tags/Tags.svelte b/packages/bbui/src/Tags/Tags.svelte
index e69de29bb2..8eecc1dbff 100644
--- a/packages/bbui/src/Tags/Tags.svelte
+++ b/packages/bbui/src/Tags/Tags.svelte
@@ -0,0 +1,7 @@
+<script>
+    import "@spectrum-css/tags/dist/index-vars.css"
+</script>
+
+<div class="spectrum-Tags" role="list" aria-label="list">
+    <slot />
+</div>
\ No newline at end of file