Add StatusLight and Badge components to BBUI

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",

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>

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>

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>

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"

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"