From d30a9ef494b7e8ebd4ea84ee4ba0b3c1211f1808 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 21 May 2021 10:31:45 +0100
Subject: [PATCH] Add StatusLight and Badge components to BBUI

---
 packages/bbui/package.json                    |  3 +-
 packages/bbui/src/Badge/Badge.svelte          | 27 ++++++++++++
 .../bbui/src/StatusLight/StatusLight.svelte   | 41 +++++++++++++++++++
 packages/bbui/src/Tags/Tag.svelte             |  9 ++++
 packages/bbui/src/index.js                    |  2 +
 packages/bbui/yarn.lock                       |  7 +++-
 6 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 packages/bbui/src/Badge/Badge.svelte
 create mode 100644 packages/bbui/src/StatusLight/StatusLight.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index c4c7e14b4b..3449931d12 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -52,7 +52,7 @@
     "@spectrum-css/icon": "^3.0.1",
     "@spectrum-css/illustratedmessage": "^3.0.2",
     "@spectrum-css/inputgroup": "^3.0.2",
-    "@spectrum-css/label": "^2.0.9",
+    "@spectrum-css/label": "^2.0.10",
     "@spectrum-css/link": "^3.1.1",
     "@spectrum-css/menu": "^3.0.1",
     "@spectrum-css/modal": "^3.0.1",
@@ -64,6 +64,7 @@
     "@spectrum-css/radio": "^3.0.2",
     "@spectrum-css/search": "^3.0.2",
     "@spectrum-css/sidenav": "^3.0.2",
+    "@spectrum-css/statuslight": "^3.0.2",
     "@spectrum-css/switch": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
diff --git a/packages/bbui/src/Badge/Badge.svelte b/packages/bbui/src/Badge/Badge.svelte
new file mode 100644
index 0000000000..737d4133d8
--- /dev/null
+++ b/packages/bbui/src/Badge/Badge.svelte
@@ -0,0 +1,27 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+
+  export let size = "M"
+  export let grey = false
+  export let red = false
+  export let orange = false
+  export let yellow = false
+  export let seafoam = false
+  export let active = false
+  export let inactive = false
+</script>
+
+<span
+  class="spectrum-Label"
+  class:spectrum-Label--small={size === "S"}
+  class:spectrum-Label--large={size === "L"}
+  class:spectrum-Label--grey={grey}
+  class:spectrum-Label--red={red}
+  class:spectrum-Label--orange={orange}
+  class:spectrum-Label--yellow={yellow}
+  class:spectrum-Label--seafoam={seafoam}
+  class:spectrum-Label--active={active}
+  class:spectrum-Label--inactive={inactive}
+>
+  <slot />
+</span>
diff --git a/packages/bbui/src/StatusLight/StatusLight.svelte b/packages/bbui/src/StatusLight/StatusLight.svelte
new file mode 100644
index 0000000000..f56fee0c2a
--- /dev/null
+++ b/packages/bbui/src/StatusLight/StatusLight.svelte
@@ -0,0 +1,41 @@
+<script>
+  import "@spectrum-css/statuslight"
+
+  export let size = "M"
+  export let celery = false
+  export let yellow = false
+  export let fuchsia = false
+  export let indigo = false
+  export let seafoam = false
+  export let chartreuse = false
+  export let magenta = false
+  export let purple = false
+  export let neutral = false
+  export let info = false
+  export let positive = false
+  export let notice = false
+  export let negative = false
+  export let disabled = false
+  export let active = false
+</script>
+
+<div
+  class="spectrum-StatusLight spectrum-StatusLight--size{size}"
+  class:spectrum-StatusLight--celery={celery}
+  class:spectrum-StatusLight--yellow={yellow}
+  class:spectrum-StatusLight--fuchsia={fuchsia}
+  class:spectrum-StatusLight--indigo={indigo}
+  class:spectrum-StatusLight--seafoam={seafoam}
+  class:spectrum-StatusLight--chartreuse={chartreuse}
+  class:spectrum-StatusLight--magenta={magenta}
+  class:spectrum-StatusLight--purple={purple}
+  class:spectrum-StatusLight--neutral={neutral}
+  class:spectrum-StatusLight--info={info}
+  class:spectrum-StatusLight--positive={positive}
+  class:spectrum-StatusLight--notice={notice}
+  class:spectrum-StatusLight--negative={negative}
+  class:spectrum-StatusLight--disabled={disabled}
+  class:spectrum-StatusLight--active={active}
+>
+  <slot />
+</div>
diff --git a/packages/bbui/src/Tags/Tag.svelte b/packages/bbui/src/Tags/Tag.svelte
index 906065cc71..f7089decdb 100644
--- a/packages/bbui/src/Tags/Tag.svelte
+++ b/packages/bbui/src/Tags/Tag.svelte
@@ -1,6 +1,8 @@
 <script>
+  import "@spectrum-css/tags/dist/index-vars.css"
   import Avatar from "../Avatar/Avatar.svelte"
   import ClearButton from "../ClearButton/ClearButton.svelte"
+
   export let icon = ""
   export let avatar = ""
   export let invalid = false
@@ -32,3 +34,10 @@
     <ClearButton on:click />
   {/if}
 </div>
+
+<style>
+  .spectrum-Tags-item {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+</style>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 8ed1dadf1f..63abfa319b 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -52,6 +52,8 @@ export { default as TreeItem } from "./TreeView/Item.svelte"
 export { default as Divider } from "./Divider/Divider.svelte"
 export { default as Search } from "./Form/Search.svelte"
 export { default as Pagination } from "./Pagination/Pagination.svelte"
+export { default as Badge } from "./Badge/Badge.svelte"
+export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 36e26b0ea6..c6991c4a03 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -141,7 +141,7 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691"
   integrity sha512-O0G3Lw9gxsh8gTLQWIAKkN1O8cWhjpEUl+oR1PguIKFni72uNr2ikU9piOwy/r0gJG2Q/TVs6hAshoAAkmsSzw==
 
-"@spectrum-css/label@^2.0.9":
+"@spectrum-css/label@^2.0.10":
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.10.tgz#2368651d7636a19385b5d300cdf6272db1916001"
   integrity sha512-xCbtEiQkZIlLdWFikuw7ifDCC21DOC/KMgVrrVJHXFc4KRQe9LTZSqmGF3tovm+CSq1adE59mYoTbojVQ9YuEQ==
@@ -201,6 +201,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.2.tgz#9d70f408d588ee79c69857751010333671f32713"
   integrity sha512-YpIdH/F0jEICYmoduGrnkTmxwJq1kfKxEp0wOs+ZkQOsvKMv1an7nyhsfOKCQqcGNfYzJ9mJAk7/u5+vsxHa8g==
 
+"@spectrum-css/statuslight@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/statuslight/-/statuslight-3.0.2.tgz#dc54b6cd113413dcdb909c486b5d7bae60db65c5"
+  integrity sha512-xodB8g8vGJH20XmUj9ZsPlM1jHrGeRbvmVXkz0q7YvQrYAhim8pP3W+XKKZAletPFAuu8cmUOc6SWn6i4X4z6w==
+
 "@spectrum-css/switch@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"