From 0361f2248b822a6e848ae389d014dd20b250e6fb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 25 Jun 2021 15:36:51 +0100
Subject: [PATCH] Add placeholder to background image, fix default styles and
 add size styles

---
 packages/standard-components/manifest.json    |  1 +
 .../src/BackgroundImage.svelte                | 25 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 6b5f8d99b4..5cca0d7e3d 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -742,6 +742,7 @@
     "name": "Background Image",
     "description": "A background image",
     "icon": "Images",
+    "styles": ["size"],
     "illegalChildren": ["section"],
     "settings": [
       {
diff --git a/packages/standard-components/src/BackgroundImage.svelte b/packages/standard-components/src/BackgroundImage.svelte
index c78cdc87b6..d81e6c800b 100644
--- a/packages/standard-components/src/BackgroundImage.svelte
+++ b/packages/standard-components/src/BackgroundImage.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -18,13 +19,24 @@
   }
 </script>
 
-<div class="outer" use:styleable={$component.styles}>
-  <div class="inner" {style} />
-</div>
+{#if url}
+  <div class="outer" use:styleable={$component.styles}>
+    <div class="inner" {style} />
+  </div>
+{:else}
+  <div
+    class="placeholder"
+    use:styleable={{ ...$component.styles, empty: true }}
+  >
+    <Placeholder />
+  </div>
+{/if}
 
 <style>
   .outer {
     position: relative;
+    width: 100%;
+    height: 400px;
   }
 
   .inner {
@@ -35,4 +47,11 @@
     background-size: cover;
     background-position: center center;
   }
+
+  .placeholder {
+    display: grid;
+    place-items: center;
+    height: 75px;
+    width: 150px;
+  }
 </style>