Add size styles and placeholder to image component

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",

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 url = ""
-  export let description = ""
-  export let height
-  export let width
 </script>
 
-<img
+{#if url}
-  {height}
+  <img src={url} alt={$component.name} use:styleable={$component.styles} />
-  {width}
+{:else}
-  class={className}
+  <div
-  src={url}
+    class="placeholder"
-  alt={description}
+    use:styleable={{ ...$component.styles, empty: true }}
-  use:styleable={$component.styles}
+  >
-/>
+    <Placeholder />
+  </div>
+{/if}
+
+<style>
+  .placeholder {
+    display: grid;
+    place-items: center;
+    height: 75px;
+    width: 150px;
+  }
+</style>

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}