Browse Source

convert Heading to new API

pull/1431/head
Keviin Åberg Kultalahti 5 years ago
parent
commit
edb16eeff8
  1. 18
      packages/bbui/src/Typography/Body.svelte
  2. 22
      packages/bbui/src/Typography/Heading.svelte

18
packages/bbui/src/Typography/Body.svelte

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

22
packages/bbui/src/Typography/Heading.svelte

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

Loading…
Cancel
Save