Updating icon context if check as per Martins discussion point

This commit is contained in:
Conor Mack 2020-02-03 21:10:47 +00:00
parent 8b415d7adf
commit 21db6077fe
1 changed files with 26 additions and 26 deletions

View File

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