From df5c2e04a7a5db75b407ee698dc4bfb9ed6da81d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 14 Apr 2021 10:40:44 +0200
Subject: [PATCH] adds Heading component

---
 packages/bbui/src/Modal/Modal.svelte        |  1 -
 packages/bbui/src/Typography/Body.svelte    |  0
 packages/bbui/src/Typography/Code.svelte    |  0
 packages/bbui/src/Typography/Detail.svelte  |  0
 packages/bbui/src/Typography/Heading.svelte | 78 +++++++++++++++++++++
 5 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 packages/bbui/src/Typography/Body.svelte
 create mode 100644 packages/bbui/src/Typography/Code.svelte
 create mode 100644 packages/bbui/src/Typography/Detail.svelte
 create mode 100644 packages/bbui/src/Typography/Heading.svelte

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index 10e3db35c6..048530f337 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -1,5 +1,4 @@
 <script>
-  import "@spectrum-css/dialog/dist/index-vars.css"
   import "@spectrum-css/modal/dist/index-vars.css"
   import "@spectrum-css/underlay/dist/index-vars.css"
   import { createEventDispatcher, setContext, tick } from "svelte"
diff --git a/packages/bbui/src/Typography/Body.svelte b/packages/bbui/src/Typography/Body.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/bbui/src/Typography/Code.svelte b/packages/bbui/src/Typography/Code.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/bbui/src/Typography/Detail.svelte b/packages/bbui/src/Typography/Detail.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/bbui/src/Typography/Heading.svelte b/packages/bbui/src/Typography/Heading.svelte
new file mode 100644
index 0000000000..cb6a1551c2
--- /dev/null
+++ b/packages/bbui/src/Typography/Heading.svelte
@@ -0,0 +1,78 @@
+<script>
+    import "@spectrum-css/heading/dist/index-vars.css"
+
+    // Level
+    export let h1 = false;
+    export let h2 = false;
+    export let h3 = false;
+    export let h4 = false;
+
+    // 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;
+
+    export let serif = false;
+
+</script>
+
+{#if h1}
+    <h1 class="spectrum-Heading"
+        class:spectrum-Heading--serif={serif}
+        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}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h1>
+{:else if  h2}
+    <h2 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        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}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h2>
+{:else if  h3}
+    <h3 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        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}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h3>
+{:else if  h4}
+    <h4 class="spectrum-Heading" 
+        class:spectrum-Heading--serif={serif}
+        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}
+        class:spectrum-Heading--sizeS={s}
+        class:spectrum-Heading--sizeXS={xs}
+        class:spectrum-Heading--sizeXXS={xxs}>
+        <slot />
+    </h4>
+{:else}
+     SPECIFY HEADING SIZE!
+{/if}