convert Heading to new API

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-30 13:33:50 +02:00
parent 3480045f11
commit 8ecdbc9bf4
2 changed files with 12 additions and 28 deletions

View File

@ -1,11 +1,13 @@
<script>
import "@spectrum-css/typography/dist/index-vars.css"
export let size = "M";
export let serif = false;
export let size = "M"
export let serif = false
</script>
<p class="spectrum-Body class:spectrum-Body--size{size}"
<p
class="spectrum-Body class:spectrum-Body--size{size}"
class:spectrum-Body--serif={serif}
>
<slot />
</p>

View File

@ -2,27 +2,9 @@
import "@spectrum-css/typography/dist/index-vars.css"
// Sizes
export let xxxl = false
export let xxl = false
export let xl = false
export let l = false
export let m = false
export let s = false
export let xs = false
export let xxs = false
$: useDefault = ![xxxl, xxl, xl, l, m, s, xs, xxs].includes(true)
export let size = "M"
</script>
<h1
class="spectrum-Heading"
class:spectrum-Heading--sizeXXXL={xxxl}
class:spectrum-Heading--sizeXXL={xxl}
class:spectrum-Heading--sizeXL={xl}
class:spectrum-Heading--sizeL={l}
class:spectrum-Heading--sizeM={m || useDefault}
class:spectrum-Heading--sizeS={s}
class:spectrum-Heading--sizeXS={xs}
class:spectrum-Heading--sizeXXS={xxs}>
<h1 class="spectrum-Heading spectrum-Heading--size{size}">
<slot />
</h1>