From 89997567388df9538007c93f3a167b898d9ba3e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 30 Jun 2021 08:46:18 +0100
Subject: [PATCH] Make icon component slightly more presentable

---
 packages/standard-components/manifest.json   | 35 ++++++++++----------
 packages/standard-components/src/Icon.svelte | 25 ++++++++++----
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 98f7066acb..f81fa9ed50 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -811,30 +811,29 @@
         "type": "select",
         "label": "Size",
         "key": "size",
-        "defaultValue": "md",
+        "defaultValue": "ri-1x",
         "options": [
-          { "value": "ri-xxs", "label": "xxs" },
-          { "value": "ri-xs", "label": "xs" },
-          { "value": "ri-sm", "label": "sm" },
-          { "value": "ri-1x", "label": "md" },
-          { "value": "ri-lg", "label": "lg" },
-          { "value": "ri-xl", "label": "xl" },
-          { "value": "ri-2x", "label": "2x" },
-          { "value": "ri-3x", "label": "3x" },
-          { "value": "ri-4x", "label": "4x" },
-          { "value": "ri-5x", "label": "5x" },
-          { "value": "ri-6x", "label": "6x" },
-          { "value": "ri-7x", "label": "7x" },
-          { "value": "ri-8x", "label": "8x" },
-          { "value": "ri-9x", "label": "9x" },
-          { "value": "ri-10x", "label": "10x" }
+          { "value": "ri-xxs", "label": "XXS" },
+          { "value": "ri-xs", "label": "XS" },
+          { "value": "ri-sm", "label": "Small" },
+          { "value": "ri-1x", "label": "Medium" },
+          { "value": "ri-lg", "label": "Large" },
+          { "value": "ri-xl", "label": "XL" },
+          { "value": "ri-2x", "label": "2XL" },
+          { "value": "ri-3x", "label": "3XL" },
+          { "value": "ri-4x", "label": "4XL" },
+          { "value": "ri-5x", "label": "5XL" },
+          { "value": "ri-6x", "label": "6XL" },
+          { "value": "ri-7x", "label": "7XL" },
+          { "value": "ri-8x", "label": "8XL" },
+          { "value": "ri-9x", "label": "9XL" },
+          { "value": "ri-10x", "label": "10XL" }
         ]
       },
       {
         "type": "color",
         "label": "Color",
-        "key": "color",
-        "defaultValue": "#000"
+        "key": "color"
       },
       {
         "type": "event",
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index 12dc21d325..de0b1921e6 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -1,21 +1,34 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let icon = ""
-  export let size = "fa-lg"
-  export let color = "#f00"
+  export let icon
+  export let size
+  export let color
   export let onClick
 
   $: styles = {
     ...$component.styles,
     normal: {
       ...$component.styles.normal,
-      color,
+      color: color || "var(--spectrum-global-color-gray-900)",
     },
   }
 </script>
 
-<i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+{#if icon}
+  <i use:styleable={styles} class="{icon} {size}" on:click={onClick} />
+{:else if $builderStore.inBuilder}
+  <div use:styleable={styles}>
+    <Placeholder />
+  </div>
+{/if}
+
+<style>
+  div {
+    font-style: italic;
+  }
+</style>