From 2e6a0e36c0cf21010023b516fdf91134c8ddcd3b Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 8 May 2020 20:29:15 +0100
Subject: [PATCH] Pre demo changes

---
 .../ComponentPropertiesPanel.svelte           |  5 ++--
 .../userInterface/PropertyGroup.svelte        | 15 ++++++++++++
 .../userInterface/propertyCategories.js       | 20 ++++++++++++++--
 .../userInterface/temporaryPanelStructure.js  | 24 ++++++++++++-------
 packages/standard-components/components.json  |  4 +++-
 .../standard-components/src/Button.svelte     |  6 ++---
 .../standard-components/src/Container.svelte  | 12 ++++++++++
 7 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 94c450823a..12a7b3eb90 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -29,7 +29,7 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
-  $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component
+  $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components.find(
     c => c.name === componentInstance._component
   )
@@ -39,8 +39,7 @@
     c => c._component === componentInstance._component
   )
 
-  // OLD PROPS =============================================
-
+  // SCREEN PROPS =============================================
   $: screen_props =
     $store.currentFrontEndType === "page"
       ? getProps($store.currentPreviewItem, ["name", "favicon"])
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 96d5ba7a7b..2d88557777 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -1,6 +1,7 @@
 <script>
   import { excludeProps } from "./propertyCategories.js"
   import PropertyControl from "./PropertyControl.svelte"
+
   export let name = ""
   export let properties = {}
   export let componentInstance = {}
@@ -8,6 +9,7 @@
   export let onPropChanged = () => {}
 
   export let show = false
+  let showComponentGroup = false
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
@@ -16,10 +18,22 @@
     !!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
   }
 
+  $: {
+    let res = false
+    let componentProps = Object.keys(componentDefinition.props)
+    for (let prop in properties) {
+      if (componentProps.includes(prop)) {
+        showComponentGroup = true
+      }
+      if (showComponentGroup) break
+    }
+  }
+
   $: propertyDefinition = Object.entries(properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
+<!-- {#if showComponentGroup} -->
 <div class="property-group-container">
   <div class="property-group-name" on:click={() => (show = !show)}>
     <div class="icon">
@@ -41,6 +55,7 @@
     {/each}
   </div>
 </div>
+<!-- {/if} -->
 
 <style>
   .property-group-container {
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 7505645b65..08503b4414 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -96,7 +96,13 @@ export const typography = {
   lineHeight: { label: "Line H", control: Input },
   color: {
     control: OptionSelect,
-    options: [{ label: "red" }, { label: "blue" }, { label: "green" }],
+    options: [
+      { label: "black" },
+      { label: "red" },
+      { label: "white" },
+      { label: "blue" },
+      { label: "green" },
+    ],
   },
   textAlign: {
     label: "align",
@@ -114,7 +120,17 @@ export const typography = {
 }
 
 export const background = {
-  backgroundColor: { label: "Background Color", control: Input },
+  backgroundColor: {
+    label: "Background Color",
+    control: OptionSelect,
+    options: [
+      { label: "white" },
+      { label: "red" },
+      { label: "blue" },
+      { label: "green" },
+      { label: "black" },
+    ],
+  },
   image: { control: Input }, //custom
 }
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index c4426d1035..116984be4a 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,12 @@
-import { general, layout, typography, background, all } from "./propertyCategories.js"
+import {
+  general,
+  layout,
+  typography,
+  border,
+  size,
+  background,
+  all,
+} from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -13,7 +21,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          properties: { ...all },
+          properties: { background, size },
         },
         {
           name: 'Text',
@@ -27,9 +35,7 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               properties: {
-                general,
-                layout,
-                typography,
+               ...all
               },
             },
             {
@@ -37,7 +43,7 @@ export default {
               name: 'Paragraph',
               description: "A component for displaying paragraph text.",
               icon: 'ri-paragraph',
-              properties: {}
+              properties: { general, typography },
             }
           ]
         },
@@ -83,7 +89,7 @@ export default {
           description: 'A basic html button that is ready for styling',
           icon: 'ri-radio-button-fill',
           children: [],
-          properties: {},
+          properties: { background, typography, border, size },
         },
         {
           _component: "@budibase/standard-components/icon",
@@ -112,8 +118,8 @@ export default {
           name: 'Card',
           description: 'A basic card component that can contain content and actions.',
           icon: 'ri-layout-bottom-line',
-          properties: {},
-          children: []
+          children: [],
+          properties: { size, background, border },
         },
         {
           name: 'Login',
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 3bea545c9b..417721221b 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -326,6 +326,8 @@
 			},
 			"backgroundColor": "string",
 			"color": "string",
+			"height": "string",
+			"width": "string",
 			"borderWidth": "string",
 			"borderColor": "string",
 			"borderStyle": {
@@ -343,7 +345,7 @@
 				],
 				"default": "none"
 			}
-		},
+		},		
 		"container": true,
 		"tags": [
 			"div",
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 3d50c22df5..60c022f4ea 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -3,7 +3,7 @@
   import { buildStyle } from "./buildStyle"
   export let className = "default"
   export let disabled = false
-  export let contentText
+  export let text
   export let onClick
   export let background
   export let color
@@ -66,9 +66,7 @@
   disabled={disabled || false}
   on:click={clickHandler}
   style={buttonStyles}>
-  {#if !_bb.props._children || _bb.props._children.length === 0}
-    {contentText}
-  {/if}
+  {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
 </button>
 
 <style>
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 99835a3454..099051c7b2 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -6,6 +6,8 @@
   export let type = "div"
   export let backgroundColor
   export let color
+  export let width
+  export let height
   export let borderWidth
   export let borderColor
   export let borderStyle
@@ -18,6 +20,8 @@
   $: cssVariables = {
     backgroundColor,
     color,
+    height,
+    width,
     borderWidth,
     borderColor,
     borderStyle,
@@ -108,6 +112,14 @@
     color: var(--color);
   }
 
+  .height {
+    height: var(--height);
+  }
+
+  .width {
+    width: var(--width);
+  }
+
   .borderColor {
     border-color: var(--borderColor);
   }