From 3325cc1eb58364970e55921a8e8d3a680557e610 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 30 Jun 2021 20:09:26 +0100
Subject: [PATCH] Use spectrum heading in standard components

---
 packages/standard-components/package.json     |  1 +
 .../standard-components/src/Heading.svelte    | 23 +++++--------------
 packages/standard-components/yarn.lock        |  4 ++--
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 3d6202cf9c..bccd422ee9 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -37,6 +37,7 @@
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/link": "^3.1.3",
     "@spectrum-css/page": "^3.0.1",
+    "@spectrum-css/typography": "^3.0.2",
     "@spectrum-css/vars": "^3.0.1",
     "apexcharts": "^3.22.1",
     "dayjs": "^1.10.5",
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 9e8e361a24..3e04471e67 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import "@spectrum-css/typography/dist/index-vars.css"
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -16,6 +17,8 @@
   $: componentText = $builderStore.inBuilder
     ? text || $component.name || "Placeholder text"
     : text || ""
+  $: sizeClass = `spectrum-Heading--size${size || "M"}`
+  $: alignClass = `align--${align || "left"}`
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
@@ -34,21 +37,15 @@
   class:bold
   class:italic
   class:underline
-  class="align--{align || 'left'} size--{size || 'M'}"
+  class="spectrum-Heading {sizeClass} {alignClass}"
 >
-  {#if bold}
-    <strong>{componentText}</strong>
-  {:else}
-    {componentText}
-  {/if}
+  {componentText}
 </h1>
 
 <style>
   h1 {
-    display: inline-block;
     white-space: pre-wrap;
     font-weight: 600;
-    margin: 0;
   }
   .placeholder {
     font-style: italic;
@@ -63,15 +60,7 @@
   .underline {
     text-decoration: underline;
   }
-  .size--S {
-    font-size: 18px;
-  }
-  .size--M {
-    font-size: 22px;
-  }
-  .size--L {
-    font-size: 28px;
-  }
+
   .align--left {
     text-align: left;
   }
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 533293b8ad..1b03715ef1 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -7,7 +7,7 @@
   resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.1.tgz#7e2cb3fcfb5c8b12d7275afafbb6ec44913551b4"
   integrity sha512-uVgekyBXnOVkxp+CUssjN/gefARtudZC8duEn1vm0lBQFwGRZFlDEzU1QC+aIRWCrD1Z8OgRpmBYlSZ7QS003w==
 
-"@budibase/bbui@^0.9.65":
+"@budibase/bbui@^0.9.67":
   version "0.9.67"
   resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-0.9.67.tgz#9e242cbf25c04d9843d64cd676f5c293f531f18f"
   integrity sha512-XwwwPuOG4y/bV9psjOjYBvAqVaVJ56nklKOm2snaSS0P9WlQ17TWVcixQo5Ol9ecvzl9iVD2Wi2rWTX6y6sYaA==
@@ -252,7 +252,7 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.3.tgz#aeda5175158b9f8d7529cb2b394428eb2a428046"
   integrity sha512-D5gGzZC/KtRArdx86Mesc9+99W9nTbUOeyYGqoJoAfJSOttoT6Tk5CrDvlCmAqjKf5rajemAkGri1ChqvUIwkw==
 
-"@spectrum-css/typography@^3.0.1":
+"@spectrum-css/typography@^3.0.1", "@spectrum-css/typography@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.2.tgz#ea3ca0a60e18064527819d48c8c4364cab4fcd38"
   integrity sha512-5ZOLmQe0edzsDMyhghUd4hBb5uxGsFrxzf+WasfcUw9klSfTsRZ09n1BsaaWbgrLjlMQ+EEHS46v5VNo0Ms2CA==