convert Heading to new API
This commit is contained in:
parent
3480045f11
commit
8ecdbc9bf4
|
@ -1,11 +1,13 @@
|
||||||
<script>
|
<script>
|
||||||
import "@spectrum-css/typography/dist/index-vars.css"
|
import "@spectrum-css/typography/dist/index-vars.css"
|
||||||
|
|
||||||
export let size = "M";
|
export let size = "M"
|
||||||
export let serif = false;
|
export let serif = false
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p class="spectrum-Body class:spectrum-Body--size{size}"
|
<p
|
||||||
class:spectrum-Body--serif={serif}
|
class="spectrum-Body class:spectrum-Body--size{size}"
|
||||||
<slot />
|
class:spectrum-Body--serif={serif}
|
||||||
</p>
|
>
|
||||||
|
<slot />
|
||||||
|
</p>
|
||||||
|
|
|
@ -2,27 +2,9 @@
|
||||||
import "@spectrum-css/typography/dist/index-vars.css"
|
import "@spectrum-css/typography/dist/index-vars.css"
|
||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
export let xxxl = false
|
export let size = "M"
|
||||||
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)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1
|
<h1 class="spectrum-Heading spectrum-Heading--size{size}">
|
||||||
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}>
|
|
||||||
<slot />
|
<slot />
|
||||||
</h1>
|
</h1>
|
||||||
|
|
Loading…
Reference in New Issue