From 147e4b6292865eb56a229725015b8e2f12331146 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 14 Jun 2021 17:41:18 +0100
Subject: [PATCH] Update section component to use new placeholder styles

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

diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 72659228bd..e409852052 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@@ -58,6 +58,7 @@
         "type": "select",
         "label": "Direction",
         "key": "direction",
+        "key": "direction",
         "showInBar": true,
         "options": [
           {
@@ -172,6 +173,7 @@
     "styleable": true,
     "transitionable": true,
     "illegalChildren": ["Section"],
+    "showEmptyState": false,
     "settings": [
       {
         "type": "section",
diff --git a/packages/standard-components/src/Section.svelte b/packages/standard-components/src/Section.svelte
index 6aa6d71a07..31c957fd3e 100644
--- a/packages/standard-components/src/Section.svelte
+++ b/packages/standard-components/src/Section.svelte
@@ -1,8 +1,10 @@
 <script>
   import { getContext } from "svelte"
+  import Placeholder from "./Placeholder.svelte"
 
-  const { styleable, transition } = getContext("sdk")
+  const { styleable, transition, builderStore } = getContext("sdk")
   const component = getContext("component")
+
   export let type = "mainSidebar"
   export let gap = "16px"
   export let minSize = 250
@@ -36,7 +38,9 @@
   <slot />
   {#if layoutMap[type] - $component.children > 0}
     {#each new Array(layoutMap[type] - $component.children) as _}
-      <p><i class="ri-image-line" />Add some components to display.</p>
+      <div class:placeholder={$builderStore.inBuilder}>
+        <Placeholder />
+      </div>
     {/each}
   {/if}
 </div>
@@ -79,4 +83,9 @@
     font-size: 1.5rem;
     color: var(--grey-5);
   }
+
+  .placeholder {
+    border: 2px dashed var(--grey-5);
+    padding: var(--spacing-l);
+  }
 </style>