1
0
Fork 0
mirror of synced 2024-06-14 08:24:48 +12:00

Add StatusLight and Badge components to BBUI

This commit is contained in:
Andrew Kingston 2021-05-21 10:31:45 +01:00
parent bb76f13d2f
commit 70e08d6a15
6 changed files with 87 additions and 2 deletions

View file

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

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

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

View file

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