Updating icon context if check as per Martins discussion point
This commit is contained in:
parent
7189643710
commit
3d743122d2
|
@ -1,42 +1,36 @@
|
||||||
<script>
|
<script>
|
||||||
import { setContext, getContext } from "svelte";
|
import { setContext, getContext } from "svelte"
|
||||||
import Icon from "../Icon.svelte";
|
import Icon from "../Icon.svelte"
|
||||||
import ripple from "../Ripple.js";
|
import ripple from "../Ripple.js"
|
||||||
import ClassBuilder from "../ClassBuilder.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 variant = "raised"
|
||||||
export let colour = "primary";
|
export let colour = "primary"
|
||||||
export let size = "medium";
|
export let size = "medium"
|
||||||
|
|
||||||
export let href = "";
|
export let href = ""
|
||||||
export let icon = "";
|
export let icon = ""
|
||||||
export let trailingIcon = false;
|
export let trailingIcon = false
|
||||||
export let fullBleed = false;
|
export let fullBleed = false
|
||||||
|
|
||||||
export let text = "";
|
export let text = ""
|
||||||
export let disabled = false;
|
export let disabled = false
|
||||||
|
|
||||||
$: if (!!icon) {
|
$: if (icon) {
|
||||||
setContext("BBMD:icon:context", "button");
|
setContext("BBMD:icon:context", "button")
|
||||||
}
|
}
|
||||||
|
|
||||||
$: renderLeadingIcon = !!icon && !trailingIcon;
|
$: renderLeadingIcon = !!icon && !trailingIcon
|
||||||
$: renderTrailingIcon = !!icon && trailingIcon;
|
$: renderTrailingIcon = !!icon && trailingIcon
|
||||||
|
|
||||||
let blockClasses = cb.blocks({
|
let blockClasses = cb.blocks({
|
||||||
modifiers: !href ? [variant] : null,
|
modifiers: !href ? [variant] : null,
|
||||||
customs: { size, colour }
|
customs: { size, colour },
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.fullBleed {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- TODO: Activated colour on primary elevated buttons seems to be rendering weird -->
|
<!-- TODO: Activated colour on primary elevated buttons seems to be rendering weird -->
|
||||||
{#if href}
|
{#if href}
|
||||||
<a class={blockClasses} {href} on:click>
|
<a class={blockClasses} {href} on:click>
|
||||||
|
@ -58,3 +52,9 @@
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.fullBleed {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue