From 1711331261e7be1b076c1cfd956ad7fb820312b6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:29:24 +0100
Subject: [PATCH] Add size styles and placeholder to image component

---
 packages/standard-components/manifest.json    |  1 +
 packages/standard-components/src/Image.svelte | 34 ++++++++++++-------
 .../src/Placeholder.svelte                    |  4 +--
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index ba858c44b4..6b5f8d99b4 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -729,6 +729,7 @@
     "description": "A basic component for displaying images",
     "icon": "Image",
     "illegalChildren": ["section"],
+    "styles": ["size"],
     "settings": [
       {
         "type": "text",
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index d5cafca4d5..fb04f866c6 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -1,21 +1,29 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  export let className = ""
-  export let url = ""
-  export let description = ""
-  export let height
-  export let width
+  export let url
 </script>
 
-<img
-  {height}
-  {width}
-  class={className}
-  src={url}
-  alt={description}
-  use:styleable={$component.styles}
-/>
+{#if url}
+  <img src={url} alt={$component.name} use:styleable={$component.styles} />
+{:else}
+  <div
+    class="placeholder"
+    use:styleable={{ ...$component.styles, empty: true }}
+  >
+    <Placeholder />
+  </div>
+{/if}
+
+<style>
+  .placeholder {
+    display: grid;
+    place-items: center;
+    height: 75px;
+    width: 150px;
+  }
+</style>
diff --git a/packages/standard-components/src/Placeholder.svelte b/packages/standard-components/src/Placeholder.svelte
index 421ecf17e4..455b6fe747 100644
--- a/packages/standard-components/src/Placeholder.svelte
+++ b/packages/standard-components/src/Placeholder.svelte
@@ -4,12 +4,12 @@
   const { builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let text = $component.name || "Placeholder"
+  export let text
 </script>
 
 {#if $builderStore.inBuilder}
   <div>
-    {text}
+    {text || $component.name || "Placeholder"}
   </div>
 {/if}