From cc65aff3913022b172c9f535aab41dc8649a4246 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 13 Aug 2021 12:07:45 +0100
Subject: [PATCH] Add more size options for paragraphs and headings

---
 packages/standard-components/manifest.json   | 24 ++++++++++++++++++++
 packages/standard-components/src/Text.svelte | 13 +++--------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index d1357d7301..56fc321ad3 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -595,6 +595,9 @@
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
+          "label": "Extra Small",
+          "value": "XS"
+        }, {
           "label": "Small",
           "value": "S"
         }, {
@@ -603,6 +606,15 @@
         }, {
           "label": "Large",
           "value": "L"
+        }, {
+          "label": "Extra Large",
+          "value": "XL"
+        }, {
+          "label": "2XL",
+          "value": "XXL"
+        }, {
+          "label": "3XL",
+          "value": "XXXL"
         }]
       },
       {
@@ -689,6 +701,9 @@
         "showInBar": true,
         "barStyle": "picker",
         "options": [{
+          "label": "Extra Small",
+          "value": "XS"
+        }, {
           "label": "Small",
           "value": "S"
         }, {
@@ -697,6 +712,15 @@
         }, {
           "label": "Large",
           "value": "L"
+        }, {
+          "label": "Extra Large",
+          "value": "XL"
+        }, {
+          "label": "2XL",
+          "value": "XXL"
+        }, {
+          "label": "3XL",
+          "value": "XXXL"
         }]
       },
       {
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index ff35eeb38e..d3d341a38e 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -16,6 +16,8 @@
   $: componentText = $builderStore.inBuilder
     ? text || $component.name || "Placeholder text"
     : text || ""
+  $: sizeClass = `spectrum-Body--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.
@@ -41,7 +43,7 @@
   class:bold
   class:italic
   class:underline
-  class="align--{align || 'left'} size--{size || 'M'}"
+  class="spectrum-Body {sizeClass} {alignClass}"
 >
   {componentText}
 </p>
@@ -65,15 +67,6 @@
   .underline {
     text-decoration: underline;
   }
-  .size--S {
-    font-size: 14px;
-  }
-  .size--M {
-    font-size: 16px;
-  }
-  .size--L {
-    font-size: 18px;
-  }
   .align--left {
     text-align: left;
   }