From fa63b8f9ea2bc6ee30cb0cfec26cbb98df55deb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 30 Apr 2021 13:39:42 +0200
Subject: [PATCH] convert Detail component to new API

---
 packages/bbui/src/Typography/Detail.svelte | 26 +++++++++-------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/bbui/src/Typography/Detail.svelte b/packages/bbui/src/Typography/Detail.svelte
index adc7ecf5c7..7cbafdadef 100644
--- a/packages/bbui/src/Typography/Detail.svelte
+++ b/packages/bbui/src/Typography/Detail.svelte
@@ -1,21 +1,15 @@
 <script>
-    import "@spectrum-css/typography/dist/index-vars.css"
+  import "@spectrum-css/typography/dist/index-vars.css"
 
-    // Sizes
-    export let xl = false;
-    export let l = false;
-    export let m = false;
-    export let s = false;
+  // Sizes
+  export let size = "M"
 
-    export let serif = false;
-    $: useDefault = ![xl, l, m, s].includes(true)
+  export let serif = false
 </script>
 
-<p class="spectrum-Detail"
-    class:spectrum-Detail--serif={serif}
-    class:spectrum-Detail--sizeXL={xl}
-    class:spectrum-Detail--sizeL={l}
-    class:spectrum-Detail--sizeM={m || useDefault}
-    class:spectrum-Detail--sizeS={s}>
-    <slot />
-</p>
\ No newline at end of file
+<p
+  class="spectrum-Detail spectrum-Detail--size{size}"
+  class:spectrum-Detail--serif={serif}
+>
+  <slot />
+</p>