|
|
|
@ -1,42 +1,36 @@ |
|
|
|
<script> |
|
|
|
import { setContext, getContext } from "svelte"; |
|
|
|
import Icon from "../Icon.svelte"; |
|
|
|
import ripple from "../Ripple.js"; |
|
|
|
import ClassBuilder from "../ClassBuilder.js"; |
|
|
|
import { setContext, getContext } from "svelte" |
|
|
|
import Icon from "../Icon.svelte" |
|
|
|
import ripple from "../Ripple.js" |
|
|
|
import ClassBuilder from "../ClassBuilder.js" |
|
|
|
|
|
|
|
const cb = new ClassBuilder("button", ["primary", "medium"]); |
|
|
|
const cb = new ClassBuilder("button", ["primary", "medium"]) |
|
|
|
|
|
|
|
export let variant = "raised"; |
|
|
|
export let colour = "primary"; |
|
|
|
export let size = "medium"; |
|
|
|
export let variant = "raised" |
|
|
|
export let colour = "primary" |
|
|
|
export let size = "medium" |
|
|
|
|
|
|
|
export let href = ""; |
|
|
|
export let icon = ""; |
|
|
|
export let trailingIcon = false; |
|
|
|
export let fullBleed = false; |
|
|
|
export let href = "" |
|
|
|
export let icon = "" |
|
|
|
export let trailingIcon = false |
|
|
|
export let fullBleed = false |
|
|
|
|
|
|
|
export let text = ""; |
|
|
|
export let disabled = false; |
|
|
|
export let text = "" |
|
|
|
export let disabled = false |
|
|
|
|
|
|
|
$: if (!!icon) { |
|
|
|
setContext("BBMD:icon:context", "button"); |
|
|
|
$: if (icon) { |
|
|
|
setContext("BBMD:icon:context", "button") |
|
|
|
} |
|
|
|
|
|
|
|
$: renderLeadingIcon = !!icon && !trailingIcon; |
|
|
|
$: renderTrailingIcon = !!icon && trailingIcon; |
|
|
|
$: renderLeadingIcon = !!icon && !trailingIcon |
|
|
|
$: renderTrailingIcon = !!icon && trailingIcon |
|
|
|
|
|
|
|
let blockClasses = cb.blocks({ |
|
|
|
modifiers: !href ? [variant] : null, |
|
|
|
customs: { size, colour } |
|
|
|
}); |
|
|
|
customs: { size, colour }, |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.fullBleed { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
<!-- TODO: Activated colour on primary elevated buttons seems to be rendering weird --> |
|
|
|
{#if href} |
|
|
|
<a class={blockClasses} {href} on:click> |
|
|
|
@ -58,3 +52,9 @@ |
|
|
|
{/if} |
|
|
|
</button> |
|
|
|
{/if} |
|
|
|
|
|
|
|
<style> |
|
|
|
.fullBleed { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|