From 06bbc88b3e37ccef13ea70fb332b8efd9d380cd4 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 4 May 2020 16:07:04 +0100
Subject: [PATCH 01/16] WIP: Changes for property panel

---
 .../userInterface/CategoryTab.svelte          |  43 ++++++
 .../ComponentPropertiesPanel.svelte           | 129 ++++++++----------
 .../ComponentSelectionList.svelte             |  16 +--
 .../userInterface/DesignView.svelte           |  17 +++
 .../userInterface/PropertyGroup.svelte        |  72 ++++++++++
 .../userInterface/propertyCategories.js       |  77 +++++++++++
 .../userInterface/temporaryPanelStructure.js  |  33 +++--
 7 files changed, 289 insertions(+), 98 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/CategoryTab.svelte
 create mode 100644 packages/builder/src/components/userInterface/DesignView.svelte
 create mode 100644 packages/builder/src/components/userInterface/PropertyGroup.svelte
 create mode 100644 packages/builder/src/components/userInterface/propertyCategories.js

diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
new file mode 100644
index 0000000000..246c1141e8
--- /dev/null
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -0,0 +1,43 @@
+<script>
+  export let categories = []
+  export let selectedCategory = {}
+  export let onClick = category => {}
+</script>
+
+<ul class="tabs">
+  {#each categories as category}
+    <li
+      on:click={() => onClick(category)}
+      class:active={selectedCategory === category}>
+      {category.name}
+    </li>
+  {/each}
+
+</ul>
+
+<style>
+  .tabs {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    margin: 0 auto;
+    padding: 0 30px;
+    border-bottom: 1px solid #d8d8d8;
+
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.14px;
+  }
+
+  li {
+    color: #808192;
+    margin: 0 5px;
+    padding: 0 8px;
+    cursor: pointer;
+  }
+
+  .active {
+    border-bottom: solid 3px #0055ff;
+    color: #393c44;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index c4c57c8e04..84480b2d69 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -14,17 +14,33 @@
   import LayoutEditor from "./LayoutEditor.svelte"
   import EventsEditor from "./EventsEditor"
 
-  let current_view = "props"
-  let codeEditor
+  import panelStructure from "./temporaryPanelStructure.js"
+  import CategoryTab from "./CategoryTab.svelte"
+  import DesignView from "./DesignView.svelte"
+
+  let current_view = "design"
+  let codeEditor
+  let flattenedPanel = flattenComponents(panelStructure.categories)
+  let categories = [
+    { name: "Design" },
+    { name: "Settings" },
+    { name: "Actions" },
+  ]
+  let selectedCategory = categories[0]
 
-  $: component = $store.currentComponentInfo
-  $: originalName = component.name
-  $: name =
-    $store.currentView === "detail"
-      ? $store.currentPreviewItem.name
-      : component._component
-  $: description = component.description
   $: components = $store.components
+  $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component
+  $: componentDefinition = $store.components.find(
+    c => c.name === componentInstance._component
+  )
+
+  $: panelDefinition = flattenedPanel.find(
+    //use for getting controls for each component property
+    c => c._component === componentInstance._component
+  )
+
+  // OLD PROPS =============================================
+
   $: screen_props =
     $store.currentFrontEndType === "page"
       ? getProps($store.currentPreviewItem, ["name", "favicon"])
@@ -33,77 +49,47 @@
   const onPropChanged = store.setComponentProp
   const onStyleChanged = store.setComponentStyle
 
+  //May be able to remove some of the nested components in PropsView, PropsControl and StateBindingControl tree
+
+  function walkProps(component, action) {
+    action(component)
+    if (component.children) {
+      for (let child of component.children) {
+        walkProps(child, action)
+      }
+    }
+  }
+
+  function flattenComponents(props) {
+    const components = []
+    props.forEach(comp =>
+      walkProps(comp, c => {
+        if ("_component" in c) {
+          components.push(c)
+        }
+      })
+    )
+    return components
+  }
+
   function getProps(obj, keys) {
     return keys.map((k, i) => [k, obj[k], obj.props._id + i])
   }
 </script>
 
 <div class="root">
-  <ul>
-    <li>
-      <button
-        class:selected={current_view === 'props'}
-        on:click={() => (current_view = 'props')}>
-        <PaintIcon />
-      </button>
-    </li>
-    <li>
-      <button
-        class:selected={current_view === 'layout'}
-        on:click={() => (current_view = 'layout')}>
-        <LayoutIcon />
-      </button>
-    </li>
-    {#if !component._component.startsWith('##')}
-      <li>
-        <button
-          class:selected={current_view === 'code'}
-          on:click={() => codeEditor && codeEditor.show()}>
-          {#if component._code && component._code.trim().length > 0}
-            <div class="button-indicator">
-              <CircleIndicator />
-            </div>
-          {/if}
-          <TerminalIcon />
-        </button>
-      </li>
-      <li>
-        <button
-          class:selected={current_view === 'events'}
-          on:click={() => (current_view = 'events')}>
-          <EventsIcon />
-        </button>
-      </li>
-    {/if}
-  </ul>
+
+  <CategoryTab
+    onClick={category => (selectedCategory = category)}
+    {categories}
+    {selectedCategory} />
+
   <div class="component-props-container">
-
-    {#if current_view === 'props'}
-      {#if $store.currentView === 'detail'}
-        {#each screen_props as [k, v, id] (id)}
-          <div class="detail-prop" for={k}>
-            <label>{k}:</label>
-            <input
-              id={k}
-              value={v}
-              on:input={({ target }) => store.setMetadataProp(k, target.value)} />
-          </div>
-        {/each}
-        <PropsView {component} {components} {onPropChanged} />
-      {:else}
-        <PropsView {component} {components} {onPropChanged} />
-      {/if}
-    {:else if current_view === 'layout'}
-      <LayoutEditor {onStyleChanged} {component} />
-    {:else if current_view === 'events'}
-      <EventsEditor {component} {components} {onPropChanged} />
+    {#if current_view === 'design'}
+      <!-- <PropsView {component} {components} {onPropChanged} /> -->
+      <DesignView {panelDefinition} {componentInstance} {componentDefinition} />
     {/if}
 
-    <CodeEditor
-      bind:this={codeEditor}
-      code={component._code}
-      onCodeChanged={store.setComponentCode} />
-
   </div>
 
 </div>
@@ -146,7 +132,6 @@
 
   .root {
     height: 100%;
-    padding: 20px;
     display: flex;
     flex-direction: column;
   }
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index eb27559933..139dd65c59 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -2,6 +2,7 @@
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
   import components from "./temporaryPanelStructure.js"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import CategoryTab from "./CategoryTab.svelte"
   import {
     find,
     sortBy,
@@ -85,15 +86,12 @@
 </script>
 
 <div class="root">
-  <ul class="tabs">
-    {#each categories as category}
-      <li
-        on:click={() => (selectedCategory = category)}
-        class:active={selectedCategory === category}>
-        {category.name}
-      </li>
-    {/each}
-  </ul>
+
+  <CategoryTab
+    onClick={category => (selectedCategory = category)}
+    {selectedCategory}
+    {categories} />
+
   <div class="panel">
     <Tab
       list={selectedCategory}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
new file mode 100644
index 0000000000..60a6dc8bc3
--- /dev/null
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -0,0 +1,17 @@
+<script>
+  import PropertyGroup from "./PropertyGroup.svelte"
+  export let panelDefinition = {}
+  export let componentInstance = {}
+  export let componentDefinition = {}
+  const getProperties = prop => panelDefinition.props[prop]
+
+  $: props = !!panelDefinition.props && Object.keys(panelDefinition.props)
+</script>
+
+{#each props as prop}
+  <PropertyGroup
+    title={prop}
+    content={getProperties(prop)}
+    {componentDefinition}
+    {componentInstance} />
+{/each}
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
new file mode 100644
index 0000000000..1b424dcd28
--- /dev/null
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -0,0 +1,72 @@
+<script>
+  export let title = ""
+  export let content = {}
+  export let componentInstance = {}
+  export let componentDefinition = {}
+
+  let show = false
+
+  const propExistsOnComponentDef = prop => prop in componentDefinition.props
+
+  const capitalize = title => title[0].toUpperCase() + title.slice(1)
+
+  $: propertyKeys = Object.keys(content)
+  $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
+</script>
+
+<div class="property-group-container" on:click={() => (show = !show)}>
+  <div class="property-group-title">
+    <div class="icon">
+      <i class={icon} />
+    </div>
+    <div class="title">{capitalize(title)}</div>
+  </div>
+  <div class="property-panel" class:show>
+    <ul>
+      {#each propertyKeys as key}
+        <!-- {#if propExistsOnComponentDef(key)} -->
+        <li>{content[key].displayName || capitalize(key)}</li>
+        <!-- {/if} -->
+      {/each}
+    </ul>
+  </div>
+</div>
+
+<style>
+  .property-group-container {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    background: #fbfbfb;
+    margin: 5px;
+    padding: 5px;
+  }
+
+  .property-group-title {
+    cursor: pointer;
+    flex: 0 0 20px;
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .icon {
+    flex: 0 0 20px;
+    text-align: center;
+  }
+
+  .title {
+    flex: 1;
+    text-align: left;
+  }
+
+  .property-panel {
+    height: 0px;
+    overflow: hidden;
+    /* transition: height 2s ease-in-out; */
+  }
+
+  .show {
+    overflow: auto;
+    height: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
new file mode 100644
index 0000000000..8b662d443c
--- /dev/null
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -0,0 +1,77 @@
+
+/* 
+  TODO: all strings types are really inputs and could be typed as such
+  TODO: Options types need option items
+  TODO: Allow for default values for all properties
+*/
+
+export const layout = {
+  flexDirection: { displayName: "Direction", type: "string" },
+  justifyContent: { displayName: "Justify", type: "string" },
+  alignItems: { displayName: "Align", type: "string" },
+  flexWrap: { displayName: "Wrap", type: "options" },
+}
+
+export const spacing = {
+  padding: { type: "string" },
+  margin: { type: "string" },
+}
+
+export const size = {
+  width: { type: "string" },
+  height: { type: "string" },
+  minWidth: { displayName: "Min W", type: "string" },
+  minHeight: { displayName: "Min H", type: "string" },
+  maxWidth: { displayName: "Max W", type: "string" },
+  maxHeight: { displayName: "Max H", type: "string" },
+  overflow: { type: "string" }, //custom
+}
+
+export const position = {
+  position: { type: "options" },
+}
+
+export const typography = {
+  font: { type: "options" },
+  weight: { type: "options" },
+  size: { type: "string" },
+  lineHeight: { displayName: "Line H", type: "string" },
+  color: { type: "colour" },
+  align: { type: "string" }, //custom
+  transform: { type: "string" }, //custom
+  style: { type: "string" }, //custom
+}
+
+export const background = {
+  backgroundColor: { displayName: "Background Color", type: "colour" },
+  image: { type: "string" }, //custom
+}
+
+export const border = {
+  radius: { type: "string" },
+  width: { type: "string" }, //custom
+  color: { type: "colour" },
+  style: { type: "options" },
+}
+
+export const effects = {
+  opacity: "string",
+  rotate: "string",
+  shadow: "string",
+}
+
+export const transitions = {
+  property: { type: "options" },
+  duration: { type: "string" },
+  ease: { type: "options" },
+}
+
+export function excludeProps(props, propsToExclude) {
+  const modifiedProps = {}
+  for (const prop in props) {
+    if (!propsToExclude.includes(prop)) {
+      modifiedProps[prop] = props[prop]
+    }
+  }
+  return modifiedProps
+}
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 5c4188d311..07facd4e28 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,3 +1,5 @@
+import { layout, background } from "./propertyCategories.js"
+
 export default {
   categories: [
     {
@@ -10,7 +12,8 @@ export default {
           description: 'This component contains things within itself',
           icon: 'ri-layout-row-fill',
           commonProps: {},
-          children: []
+          children: [],
+          props: { layout, background },
         },
         {
           name: 'Text',
@@ -24,12 +27,8 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               props: {
-                type: {
-                  type: "options",
-                  options: ["h1", "h2", "h3", "h4", "h5", "h6"],
-                  default: "h1",
-                },
-                text: "string",
+                layout,
+                background,
               },
             },
             {
@@ -82,15 +81,15 @@ export default {
           name: 'Button',
           description: 'A basic html button that is ready for styling',
           icon: 'ri-radio-button-fill',
-          commonProps: {},
-          children: []
+          children: [],
+          props: {},
         },
         {
           _component: "@budibase/standard-components/icon",
           name: 'Icon',
           description: 'A basic component for displaying icons',
           icon: 'ri-sun-fill',
-          commonProps: {},
+          props: {},
           children: []
         },
         {
@@ -98,7 +97,7 @@ export default {
           name: 'Link',
           description: 'A basic link component for internal and external links',
           icon: 'ri-link',
-          commonProps: {},
+          props: {},
           children: []
         }
       ]
@@ -112,14 +111,14 @@ export default {
           name: 'Card',
           description: 'A basic card component that can contain content and actions.',
           icon: 'ri-layout-bottom-line',
-          commonProps: {},
+          props: {},
           children: []
         },
         {
           name: 'Login',
           description: 'A component that automatically generates a login screen for your app.',
           icon: 'ri-login-box-fill',
-          commonProps: {},
+          props: {},
           children: []
         },
         {
@@ -127,7 +126,7 @@ export default {
           _component: "@budibase/standard-components/Navigation",
           description: "A component for handling the navigation within your app.",
           icon: "ri-navigation-fill",
-          commonProps: {},
+          props: {},
           children: []
         }
       ]
@@ -140,15 +139,15 @@ export default {
           name: 'Table',
           description: 'A component that generates a table from your data.',
           icon: 'ri-archive-drawer-fill',
-          commonProps: {},
+          props: {},
           children: []
         },
         {
           name: 'Form',
           description: 'A component that generates a form from your data.',
           icon: 'ri-file-edit-fill',
-          commonProps: {},
-          component: "@budibase/materialdesign-components/Form",
+          props: {},
+          _component: "@budibase/materialdesign-components/Form",
           template: {
             component: "@budibase/materialdesign-components/Form",
             description: "Form for saving a record",

From 8ad10976d3f03c2225a04873409014534e9703b3 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 5 May 2020 10:02:10 +0100
Subject: [PATCH 02/16] Updates to naming conventions

---
 .../userInterface/DesignView.svelte           | 12 ++--
 .../userInterface/PropertyGroup.svelte        | 18 +++---
 .../userInterface/propertyCategories.js       | 63 +++++++++----------
 .../userInterface/temporaryPanelStructure.js  | 30 ++++-----
 4 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 60a6dc8bc3..f8dad08905 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,17 +1,19 @@
 <script>
   import PropertyGroup from "./PropertyGroup.svelte"
+
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
-  const getProperties = prop => panelDefinition.props[prop]
+  const getProperties = name => panelDefinition.properties[name]
 
-  $: props = !!panelDefinition.props && Object.keys(panelDefinition.props)
+  $: propertyGroupNames =
+    !!panelDefinition.properties && Object.keys(panelDefinition.properties)
 </script>
 
-{#each props as prop}
+{#each propertyGroupNames as groupName}
   <PropertyGroup
-    title={prop}
-    content={getProperties(prop)}
+    name={groupName}
+    properties={getProperties(groupName)}
     {componentDefinition}
     {componentInstance} />
 {/each}
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 1b424dcd28..b2b1e9c9eb 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -1,6 +1,6 @@
 <script>
-  export let title = ""
-  export let content = {}
+  export let name = ""
+  export let properties = {}
   export let componentInstance = {}
   export let componentDefinition = {}
 
@@ -8,24 +8,24 @@
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
 
-  const capitalize = title => title[0].toUpperCase() + title.slice(1)
+  const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
-  $: propertyKeys = Object.keys(content)
+  $: propertyKeys = Object.keys(properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
 <div class="property-group-container" on:click={() => (show = !show)}>
-  <div class="property-group-title">
+  <div class="property-group-name">
     <div class="icon">
       <i class={icon} />
     </div>
-    <div class="title">{capitalize(title)}</div>
+    <div class="name">{capitalize(name)}</div>
   </div>
   <div class="property-panel" class:show>
     <ul>
       {#each propertyKeys as key}
         <!-- {#if propExistsOnComponentDef(key)} -->
-        <li>{content[key].displayName || capitalize(key)}</li>
+        <li>{properties[key].label || capitalize(key)}</li>
         <!-- {/if} -->
       {/each}
     </ul>
@@ -42,7 +42,7 @@
     padding: 5px;
   }
 
-  .property-group-title {
+  .property-group-name {
     cursor: pointer;
     flex: 0 0 20px;
     display: flex;
@@ -54,7 +54,7 @@
     text-align: center;
   }
 
-  .title {
+  .name {
     flex: 1;
     text-align: left;
   }
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 8b662d443c..352baea93e 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,4 +1,3 @@
-
 /* 
   TODO: all strings types are really inputs and could be typed as such
   TODO: Options types need option items
@@ -6,52 +5,52 @@
 */
 
 export const layout = {
-  flexDirection: { displayName: "Direction", type: "string" },
-  justifyContent: { displayName: "Justify", type: "string" },
-  alignItems: { displayName: "Align", type: "string" },
-  flexWrap: { displayName: "Wrap", type: "options" },
+  flexDirection: { label: "Direction", control: "string" },
+  justifyContent: { label: "Justify", control: "string" },
+  alignItems: { label: "Align", control: "string" },
+  flexWrap: { label: "Wrap", control: "options" },
 }
 
 export const spacing = {
-  padding: { type: "string" },
-  margin: { type: "string" },
+  padding: { control: "string" },
+  margin: { control: "string" },
 }
 
 export const size = {
-  width: { type: "string" },
-  height: { type: "string" },
-  minWidth: { displayName: "Min W", type: "string" },
-  minHeight: { displayName: "Min H", type: "string" },
-  maxWidth: { displayName: "Max W", type: "string" },
-  maxHeight: { displayName: "Max H", type: "string" },
-  overflow: { type: "string" }, //custom
+  width: { control: "string" },
+  height: { control: "string" },
+  minWidth: { label: "Min W", control: "string" },
+  minHeight: { label: "Min H", control: "string" },
+  maxWidth: { label: "Max W", control: "string" },
+  maxHeight: { label: "Max H", control: "string" },
+  overflow: { control: "string" }, //custom
 }
 
 export const position = {
-  position: { type: "options" },
+  position: { control: "options" },
 }
 
 export const typography = {
-  font: { type: "options" },
-  weight: { type: "options" },
-  size: { type: "string" },
-  lineHeight: { displayName: "Line H", type: "string" },
-  color: { type: "colour" },
-  align: { type: "string" }, //custom
-  transform: { type: "string" }, //custom
-  style: { type: "string" }, //custom
+  font: { control: "options" },
+  weight: { control: "options" },
+  size: { control: "string" },
+  lineHeight: { label: "Line H", control: "string" },
+  color: { control: "colour" },
+  align: { control: "string" }, //custom
+  transform: { control: "string" }, //custom
+  style: { control: "string" }, //custom
 }
 
 export const background = {
-  backgroundColor: { displayName: "Background Color", type: "colour" },
-  image: { type: "string" }, //custom
+  backgroundColor: { label: "Background Color", control: "colour" },
+  image: { control: "string" }, //custom
 }
 
 export const border = {
-  radius: { type: "string" },
-  width: { type: "string" }, //custom
-  color: { type: "colour" },
-  style: { type: "options" },
+  radius: { control: "string" },
+  width: { control: "string" }, //custom
+  color: { control: "colour" },
+  style: { control: "options" },
 }
 
 export const effects = {
@@ -61,9 +60,9 @@ export const effects = {
 }
 
 export const transitions = {
-  property: { type: "options" },
-  duration: { type: "string" },
-  ease: { type: "options" },
+  property: { control: "options" },
+  duration: { control: "string" },
+  ease: { control: "options" },
 }
 
 export function excludeProps(props, propsToExclude) {
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 07facd4e28..7ec5988def 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -13,7 +13,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          props: { layout, background },
+          properties: { layout, background },
         },
         {
           name: 'Text',
@@ -26,7 +26,7 @@ export default {
               name: 'Headline',
               description: "A component for displaying heading text",
               icon: "ri-heading",
-              props: {
+              properties: {
                 layout,
                 background,
               },
@@ -36,7 +36,7 @@ export default {
               name: 'Paragraph',
               description: "A component for displaying paragraph text.",
               icon: 'ri-paragraph',
-              props: {}
+              properties: {}
             }
           ]
         },
@@ -51,28 +51,28 @@ export default {
               name: "Textfield",
               description: "A textfield component that allows the user to input text.",
               icon: 'ri-edit-box-line',
-              props: {}
+              properties: {}
             },
             {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
               icon: 'ri-checkbox-line',
-              props: {}
+              properties: {}
             },
             {
               _component: "@budibase/standard-components/radiobutton",
               name: "Radiobutton",
               description: "A selectable radiobutton component",
               icon: 'ri-radio-button-line',
-              props: {}
+              properties: {}
             },
             {
               _component: "@budibase/standard-components/select",
               name: "Select",
               description: "A select component for choosing from different options",
               icon: 'ri-file-list-line',
-              props: {}
+              properties: {}
             }
           ]
         },
@@ -82,14 +82,14 @@ export default {
           description: 'A basic html button that is ready for styling',
           icon: 'ri-radio-button-fill',
           children: [],
-          props: {},
+          properties: {},
         },
         {
           _component: "@budibase/standard-components/icon",
           name: 'Icon',
           description: 'A basic component for displaying icons',
           icon: 'ri-sun-fill',
-          props: {},
+          properties: {},
           children: []
         },
         {
@@ -97,7 +97,7 @@ export default {
           name: 'Link',
           description: 'A basic link component for internal and external links',
           icon: 'ri-link',
-          props: {},
+          properties: {},
           children: []
         }
       ]
@@ -111,14 +111,14 @@ export default {
           name: 'Card',
           description: 'A basic card component that can contain content and actions.',
           icon: 'ri-layout-bottom-line',
-          props: {},
+          properties: {},
           children: []
         },
         {
           name: 'Login',
           description: 'A component that automatically generates a login screen for your app.',
           icon: 'ri-login-box-fill',
-          props: {},
+          properties: {},
           children: []
         },
         {
@@ -126,7 +126,7 @@ export default {
           _component: "@budibase/standard-components/Navigation",
           description: "A component for handling the navigation within your app.",
           icon: "ri-navigation-fill",
-          props: {},
+          properties: {},
           children: []
         }
       ]
@@ -139,14 +139,14 @@ export default {
           name: 'Table',
           description: 'A component that generates a table from your data.',
           icon: 'ri-archive-drawer-fill',
-          props: {},
+          properties: {},
           children: []
         },
         {
           name: 'Form',
           description: 'A component that generates a form from your data.',
           icon: 'ri-file-edit-fill',
-          props: {},
+          properties: {},
           _component: "@budibase/materialdesign-components/Form",
           template: {
             component: "@budibase/materialdesign-components/Form",

From b52b9fdd2f65584111646f13b57a9868729cf30a Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 5 May 2020 14:45:52 +0100
Subject: [PATCH 03/16] <svelte:component> solution for rendering

---
 .../src/components/common/Colorpicker.svelte  | 13 +++---
 .../ComponentPropertiesPanel.svelte           |  7 +++-
 .../userInterface/DesignView.svelte           |  4 ++
 .../userInterface/PropertyGroup.svelte        | 42 +++++++++++++------
 .../userInterface/TempSelect.svelte           | 14 +++++++
 .../userInterface/propertyCategories.js       | 13 ++++--
 .../userInterface/temporaryPanelStructure.js  |  5 ++-
 .../standard-components/src/Heading.svelte    |  1 -
 8 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte

diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte
index 9cc3b3926a..28ca92554d 100644
--- a/packages/builder/src/components/common/Colorpicker.svelte
+++ b/packages/builder/src/components/common/Colorpicker.svelte
@@ -2,7 +2,7 @@
   import { onMount, beforeUpdate, afterUpdate } from "svelte"
 
   export let value = null
-  export let onChanged = () => {}
+  export let onChange = () => {}
   export let swatches = []
 
   let picker
@@ -58,13 +58,10 @@
   onMount(() => {
     getRecentColors()
     createPicker()
-
-    picker.on("save", (colour, instance) => {
-      let color = colour.toHEXA().toString()
-      onChanged(color)
-      setRecentColor(color)
-      picker.hide()
-    })
+    return () => {
+      picker.destroyAndRemove()
+      picker = null
+    }
   })
 </script>
 
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 84480b2d69..944862ebee 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -86,8 +86,11 @@
 
   <div class="component-props-container">
     {#if current_view === 'design'}
-      <!-- <PropsView {component} {components} {onPropChanged} /> -->
-      <DesignView {panelDefinition} {componentInstance} {componentDefinition} />
+      <DesignView
+        {panelDefinition}
+        {componentInstance}
+        {componentDefinition}
+        {onPropChanged} />
     {/if}
 
   </div>
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index f8dad08905..0aebd7b186 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -4,8 +4,11 @@
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
+  export let onPropChanged = () => {}
+
   const getProperties = name => panelDefinition.properties[name]
 
+  $: console.log("PDEF", panelDefinition)
   $: propertyGroupNames =
     !!panelDefinition.properties && Object.keys(panelDefinition.properties)
 </script>
@@ -14,6 +17,7 @@
   <PropertyGroup
     name={groupName}
     properties={getProperties(groupName)}
+    {onPropChanged}
     {componentDefinition}
     {componentInstance} />
 {/each}
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index b2b1e9c9eb..fa6dba0156 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -1,20 +1,27 @@
 <script>
+  import { excludeProps } from "./propertyCategories.js"
   export let name = ""
   export let properties = {}
   export let componentInstance = {}
   export let componentDefinition = {}
+  export let onPropChanged = () => {}
 
-  let show = false
+  let show = true
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
-
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
-  $: propertyKeys = Object.keys(properties)
+  function onChange(v) {
+    !!v.target ? onPropChanged(v.target.value) : onPropChanged(v)
+  }
+
+  $: propertyDefinition = Object.entries(properties)
+  $: console.log("props group", properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
-<div class="property-group-container" on:click={() => (show = !show)}>
+<!-- () => (show = !show) -->
+<div class="property-group-container" on:click={() => {}}>
   <div class="property-group-name">
     <div class="icon">
       <i class={icon} />
@@ -22,13 +29,20 @@
     <div class="name">{capitalize(name)}</div>
   </div>
   <div class="property-panel" class:show>
-    <ul>
-      {#each propertyKeys as key}
-        <!-- {#if propExistsOnComponentDef(key)} -->
-        <li>{properties[key].label || capitalize(key)}</li>
-        <!-- {/if} -->
-      {/each}
-    </ul>
+
+    {#each propertyDefinition as [key, definition]}
+      <div class="property-control">
+        {#if propExistsOnComponentDef(key)}
+          <span>{definition.label || capitalize(key)}</span>
+          <svelte:component
+            this={definition.control}
+            value={componentInstance[key]}
+            on:change={onChange}
+            {onChange}
+            {...excludeProps(definition, ['control'])} />
+        {/if}
+      </div>
+    {/each}
   </div>
 </div>
 
@@ -62,7 +76,11 @@
   .property-panel {
     height: 0px;
     overflow: hidden;
-    /* transition: height 2s ease-in-out; */
+  }
+
+  .property-control {
+    display: flex;
+    flex-flow: row nowrap;
   }
 
   .show {
diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte
new file mode 100644
index 0000000000..514c9b5a20
--- /dev/null
+++ b/packages/builder/src/components/userInterface/TempSelect.svelte
@@ -0,0 +1,14 @@
+<script>
+  export let value = ""
+  export let onChange = value => {}
+  export let options = []
+</script>
+
+<select
+  class="uk-select uk-form-small"
+  {value}
+  on:change={ev => onChange(ev.target.value)}>
+  {#each options || [] as option}
+    <option value={option}>{option}</option>
+  {/each}
+</select>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 352baea93e..6246462ecb 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,9 +1,16 @@
-/* 
+import ColorPicker from "../common/Colorpicker.svelte"
+import Input from "../common/Input.svelte"
+import TempSelect from "./TempSelect.svelte"
+/*
   TODO: all strings types are really inputs and could be typed as such
   TODO: Options types need option items
   TODO: Allow for default values for all properties
 */
 
+export const general = {
+  text: { control: Input }
+}
+
 export const layout = {
   flexDirection: { label: "Direction", control: "string" },
   justifyContent: { label: "Justify", control: "string" },
@@ -42,8 +49,8 @@ export const typography = {
 }
 
 export const background = {
-  backgroundColor: { label: "Background Color", control: "colour" },
-  image: { control: "string" }, //custom
+  backgroundColor: { label: "Background Color", control: ColorPicker },
+  image: { control: Input }, //custom
 }
 
 export const border = {
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 7ec5988def..bc60ac2bd6 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,4 @@
-import { layout, background } from "./propertyCategories.js"
+import { general, layout, background } from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -13,7 +13,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          properties: { layout, background },
+          properties: { background },
         },
         {
           name: 'Text',
@@ -27,6 +27,7 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               properties: {
+                general,
                 layout,
                 background,
               },
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 6a3a210dc3..4bbb9d0b36 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -11,7 +11,6 @@
 
   $: containerElement && !text && _bb.attachChildren(containerElement)
   $: style = buildStyle({ "font-family": fontFamily, color })
-  // $: console.log("HEADING", color)
 </script>
 
 {#if type === 'h1'}

From 8d8caa9ff5be59147d2b27726074af57fba30121 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Thu, 7 May 2020 14:30:04 +0100
Subject: [PATCH 04/16] Properties panel structure complete

---
 .../src/components/common/Input.svelte        |   5 +-
 .../ComponentPropertiesPanel.svelte           |  86 +--------------
 .../ComponentsPaneSwitcher.svelte             |   5 +-
 .../userInterface/DesignView.svelte           |  57 ++++++++--
 .../userInterface/FlatButton.svelte           |  38 +++++++
 .../userInterface/FlatButtonGroup.svelte      |  54 +++++++++
 .../userInterface/OptionSelect.svelte         |  22 ++++
 .../userInterface/PropertyControl.svelte      |  41 +++++++
 .../userInterface/PropertyGroup.svelte        |  52 ++++-----
 .../userInterface/TempSelect.svelte           |  14 ---
 .../userInterface/UserInterfaceRoot.svelte    |   4 +-
 .../userInterface/propertyCategories.js       | 103 +++++++++++-------
 .../userInterface/temporaryPanelStructure.js  |   6 +-
 13 files changed, 305 insertions(+), 182 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/FlatButton.svelte
 create mode 100644 packages/builder/src/components/userInterface/FlatButtonGroup.svelte
 create mode 100644 packages/builder/src/components/userInterface/OptionSelect.svelte
 create mode 100644 packages/builder/src/components/userInterface/PropertyControl.svelte
 delete mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte

diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index 50b07f41f0..bc6741e0d8 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -1,8 +1,11 @@
 <script>
   export let value = ""
+  export let width = ""
+
+  let style = { width }
 </script>
 
-<input type="text" on:change bind:value />
+<input type="text" style={`width: ${width};`} on:change bind:value />
 
 <style>
   input {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 944862ebee..94c450823a 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -49,8 +49,6 @@
   const onPropChanged = store.setComponentProp
   const onStyleChanged = store.setComponentStyle
 
-  //May be able to remove some of the nested components in PropsView, PropsControl and StateBindingControl tree
-
   function walkProps(component, action) {
     action(component)
     if (component.children) {
@@ -98,45 +96,11 @@
 </div>
 
 <style>
-  .detail-prop {
-    height: 40px;
-    margin-bottom: 15px;
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 70px 1fr;
-    grid-gap: 10px;
-  }
-
-  .detail-prop label {
-    word-wrap: break-word;
-    font-size: 13px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.6;
-    padding-top: 13px;
-    margin-bottom: 0;
-  }
-
-  input {
-    height: 30px;
-    padding-left: 8px;
-    padding-right: 8px;
-    border: 1px solid #dbdbdb;
-    border-radius: 2px;
-    opacity: 0.5;
-  }
-
-  input:focus {
-    outline: 0;
-    background-color: #fff;
-    color: #666;
-    border-color: #1e87f0;
-  }
-
   .root {
     height: 100%;
     display: flex;
     flex-direction: column;
+    overflow-x: hidden;
   }
 
   .title > div:nth-child(1) {
@@ -152,52 +116,4 @@
     margin-top: 10px;
     flex: 1 1 auto;
   }
-
-  ul {
-    list-style: none;
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-  }
-
-  li {
-    background: none;
-    border-radius: 3px;
-    width: 48px;
-    height: 48px;
-  }
-
-  li button {
-    width: 48px;
-    height: 48px;
-    background: none;
-    border: none;
-    border-radius: 3px;
-    padding: 7px;
-    outline: none;
-    cursor: pointer;
-    position: relative;
-  }
-
-  li:nth-last-child(1) {
-    margin-right: 0px;
-    background: none;
-    border-radius: 3px;
-    width: 48px;
-    height: 48px;
-  }
-
-  .selected {
-    color: var(--button-text);
-    background: #f9f9f9 !important;
-    width: 48px;
-    height: 48px;
-  }
-
-  .button-indicator {
-    position: absolute;
-    top: 8px;
-    right: 10px;
-    color: var(--button-text);
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
index 9ca5b1e122..8e72a17c54 100644
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -24,13 +24,13 @@
       <button
         class:selected={selected === COMPONENT_SELECTION_TAB}
         on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
-        Components
+        Add
       </button>
 
       <button
         class:selected={selected === PROPERTIES_TAB}
         on:click={() => selectTab(PROPERTIES_TAB)}>
-        Properties
+        Edit
       </button>
 
     </div>
@@ -55,6 +55,7 @@
     display: flex;
     flex-direction: column;
     padding: 20px 0;
+    border-left: solid 1px #e8e8ef;
   }
 
   .switcher {
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 0aebd7b186..7fc6af5312 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,23 +1,62 @@
 <script>
   import PropertyGroup from "./PropertyGroup.svelte"
+  import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onPropChanged = () => {}
 
+  let selectedCategory = "desktop"
+
   const getProperties = name => panelDefinition.properties[name]
 
-  $: console.log("PDEF", panelDefinition)
+  function onChange(category) {
+    selectedCategory = category
+  }
+
+  const buttonProps = [
+    { value: "desktop", text: "Desktop" },
+    { value: "mobile", text: "Mobile" },
+    { value: "hover", text: "Hover" },
+    { value: "active", text: "Active" },
+    { value: "selected", text: "Selected" },
+  ]
+
   $: propertyGroupNames =
     !!panelDefinition.properties && Object.keys(panelDefinition.properties)
 </script>
 
-{#each propertyGroupNames as groupName}
-  <PropertyGroup
-    name={groupName}
-    properties={getProperties(groupName)}
-    {onPropChanged}
-    {componentDefinition}
-    {componentInstance} />
-{/each}
+<div class="design-view-container">
+
+  <div class="design-view-state-categories">
+    <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
+  </div>
+
+  <div class="design-view-property-groups">
+    {#each propertyGroupNames as groupName}
+      <PropertyGroup
+        name={groupName}
+        properties={getProperties(groupName)}
+        {onPropChanged}
+        {componentDefinition}
+        {componentInstance} />
+    {/each}
+  </div>
+</div>
+
+<style>
+  .design-view-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .design-view-state-categories {
+    flex: 0 0 50px;
+  }
+
+  .design-view-property-groups {
+    flex: 1;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
new file mode 100644
index 0000000000..abc4a3dc28
--- /dev/null
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -0,0 +1,38 @@
+<script>
+  export let value = ""
+  export let text = ""
+  export let icon = ""
+  export let onClick = value => {}
+  export let selected = false
+
+  $: useIcon = !!icon
+</script>
+
+<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
+  {#if useIcon}
+    <i class={icon} />
+  {:else}
+    <span>{text}</span>
+  {/if}
+</div>
+
+<style>
+  .flatbutton {
+    cursor: pointer;
+    padding: 5px;
+    text-align: center;
+    background: #ffffff;
+    color: #808192;
+    border-radius: 4px;
+    font-family: Roboto;
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.11px;
+    transition: background 0.5s, color 0.5s ease;
+  }
+
+  .selected {
+    background: #808192;
+    color: #ffffff;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
new file mode 100644
index 0000000000..f16d832c67
--- /dev/null
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -0,0 +1,54 @@
+<script>
+  import { onMount } from "svelte"
+
+  import FlatButton from "./FlatButton.svelte"
+  export let buttonProps = []
+  export let isMultiSelect = false
+  export let value = []
+  export let initialValue = ""
+  export let onChange = selected => {}
+
+  onMount(() => {
+    if (!value && !!initialValue) {
+      value = initialValue
+    }
+  })
+
+  function onButtonClicked(v) {
+    let val
+    if (isMultiSelect) {
+      if (value.includes(v)) {
+        let idx = value.findIndex(i => i === v)
+        val = [...value].splice(idx, 1)
+      } else {
+        val = [...value, v]
+      }
+    } else {
+      val = v
+    }
+    onChange(val)
+  }
+</script>
+
+<div class="flatbutton-group">
+  {#each buttonProps as props}
+    <div class="button-container">
+      <FlatButton
+        selected={value.includes(props.value)}
+        onClick={onButtonClicked}
+        {...props} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .flatbutton-group {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .button-container {
+    flex: 1;
+    margin: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
new file mode 100644
index 0000000000..cbbdb8f91f
--- /dev/null
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { onMount } from "svelte"
+  export let value = ""
+  export let onChange = value => {}
+  export let options = []
+  export let initialValue = ""
+
+  onMount(() => {
+    if (!value && !!initialValue) {
+      value = initialValue
+    }
+  })
+</script>
+
+<select
+  class="uk-select uk-form-small"
+  {value}
+  on:change={ev => onChange(ev.target.value)}>
+  {#each options as { value, label }}
+    <option value={value || label}>{label}</option>
+  {/each}
+</select>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
new file mode 100644
index 0000000000..23dd223de6
--- /dev/null
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -0,0 +1,41 @@
+<script>
+  export let label = ""
+  export let control = null
+  export let value = ""
+  export let props = {}
+  export let onChange = () => {}
+</script>
+
+<div class="property-control">
+  <div class="label">{label}</div>
+  <div class="control">
+    <svelte:component
+      this={control}
+      {value}
+      on:change={onChange}
+      {onChange}
+      {...props} />
+  </div>
+</div>
+
+<style>
+  .property-control {
+    display: flex;
+    flex-flow: row nowrap;
+    margin: 8px 0px;
+  }
+
+  .label {
+    flex: 0 0 50px;
+    padding: 0px 5px;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.12px;
+    text-align: left;
+  }
+
+  .control {
+    flex: 1;
+    padding-left: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index fa6dba0156..96d5ba7a7b 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -1,28 +1,27 @@
 <script>
   import { excludeProps } from "./propertyCategories.js"
+  import PropertyControl from "./PropertyControl.svelte"
   export let name = ""
   export let properties = {}
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onPropChanged = () => {}
 
-  let show = true
+  export let show = false
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
-  function onChange(v) {
-    !!v.target ? onPropChanged(v.target.value) : onPropChanged(v)
+  function onChange(key, v) {
+    !!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
   }
 
   $: propertyDefinition = Object.entries(properties)
-  $: console.log("props group", properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
-<!-- () => (show = !show) -->
-<div class="property-group-container" on:click={() => {}}>
-  <div class="property-group-name">
+<div class="property-group-container">
+  <div class="property-group-name" on:click={() => (show = !show)}>
     <div class="icon">
       <i class={icon} />
     </div>
@@ -31,17 +30,14 @@
   <div class="property-panel" class:show>
 
     {#each propertyDefinition as [key, definition]}
-      <div class="property-control">
-        {#if propExistsOnComponentDef(key)}
-          <span>{definition.label || capitalize(key)}</span>
-          <svelte:component
-            this={definition.control}
-            value={componentInstance[key]}
-            on:change={onChange}
-            {onChange}
-            {...excludeProps(definition, ['control'])} />
-        {/if}
-      </div>
+      <!-- {#if propExistsOnComponentDef(key)} -->
+      <PropertyControl
+        label={definition.label || capitalize(key)}
+        control={definition.control}
+        value={componentInstance[key]}
+        onChange={value => onChange(key, value)}
+        props={{ ...excludeProps(definition, ['control']) }} />
+      <!-- {/if} -->
     {/each}
   </div>
 </div>
@@ -63,14 +59,19 @@
     flex-flow: row nowrap;
   }
 
-  .icon {
-    flex: 0 0 20px;
-    text-align: center;
-  }
-
   .name {
     flex: 1;
     text-align: left;
+    padding-top: 2px;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.14px;
+    color: #393c44;
+  }
+
+  .icon {
+    flex: 0 0 20px;
+    text-align: center;
   }
 
   .property-panel {
@@ -78,11 +79,6 @@
     overflow: hidden;
   }
 
-  .property-control {
-    display: flex;
-    flex-flow: row nowrap;
-  }
-
   .show {
     overflow: auto;
     height: auto;
diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte
deleted file mode 100644
index 514c9b5a20..0000000000
--- a/packages/builder/src/components/userInterface/TempSelect.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  export let value = ""
-  export let onChange = value => {}
-  export let options = []
-</script>
-
-<select
-  class="uk-select uk-form-small"
-  {value}
-  on:change={ev => onChange(ev.target.value)}>
-  {#each options || [] as option}
-    <option value={option}>{option}</option>
-  {/each}
-</select>
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 4f32c55d24..13d7a7e2a1 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -114,7 +114,7 @@
 
   .root {
     display: grid;
-    grid-template-columns: 275px 1fr 275px;
+    grid-template-columns: 275px 1fr 300px;
     height: 100%;
     width: 100%;
     background: #fafafa;
@@ -151,7 +151,7 @@
   .components-pane {
     grid-column: 3;
     background-color: var(--white);
-    min-height: 0px;
+    height: 100vh;
     overflow-y: scroll;
   }
 
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 6246462ecb..525738f02f 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,75 +1,102 @@
-import ColorPicker from "../common/Colorpicker.svelte"
 import Input from "../common/Input.svelte"
-import TempSelect from "./TempSelect.svelte"
+import OptionSelect from "./OptionSelect.svelte"
 /*
-  TODO: all strings types are really inputs and could be typed as such
-  TODO: Options types need option items
   TODO: Allow for default values for all properties
 */
 
 export const general = {
-  text: { control: Input }
+  text: { control: Input },
 }
 
 export const layout = {
-  flexDirection: { label: "Direction", control: "string" },
-  justifyContent: { label: "Justify", control: "string" },
-  alignItems: { label: "Align", control: "string" },
-  flexWrap: { label: "Wrap", control: "options" },
+  flexDirection: {
+    label: "Direction",
+    control: OptionSelect,
+    initialValue: "columnReverse",
+    options: [
+      { label: "row" },
+      { label: "row-reverse", value: "rowReverse" },
+      { label: "column" },
+      { label: "column-reverse", value: "columnReverse" },
+    ],
+  },
+  justifyContent: { label: "Justify", control: Input },
+  alignItems: { label: "Align", control: Input },
+  flexWrap: {
+    label: "Wrap",
+    control: OptionSelect,
+    options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
+  },
 }
 
 export const spacing = {
-  padding: { control: "string" },
-  margin: { control: "string" },
+  padding: { control: Input },
+  margin: { control: Input },
 }
 
 export const size = {
-  width: { control: "string" },
-  height: { control: "string" },
-  minWidth: { label: "Min W", control: "string" },
-  minHeight: { label: "Min H", control: "string" },
-  maxWidth: { label: "Max W", control: "string" },
-  maxHeight: { label: "Max H", control: "string" },
-  overflow: { control: "string" }, //custom
+  width: { control: Input },
+  height: { control: Input },
+  minWidth: { label: "Min W", control: Input },
+  minHeight: { label: "Min H", control: Input },
+  maxWidth: { label: "Max W", control: Input },
+  maxHeight: { label: "Max H", control: Input },
+  overflow: { control: Input }, //custom
 }
 
 export const position = {
-  position: { control: "options" },
+  position: { control: Input },
 }
 
 export const typography = {
-  font: { control: "options" },
-  weight: { control: "options" },
-  size: { control: "string" },
-  lineHeight: { label: "Line H", control: "string" },
-  color: { control: "colour" },
-  align: { control: "string" }, //custom
-  transform: { control: "string" }, //custom
-  style: { control: "string" }, //custom
+  font: { control: Input },
+  weight: { control: Input },
+  size: { control: Input },
+  lineHeight: { label: "Line H", control: Input },
+  color: {
+    control: OptionSelect,
+    options: [{ label: "red" }, { label: "blue" }, { label: "green" }],
+  },
+  align: { control: Input }, //custom
+  transform: { control: Input }, //custom
+  style: { control: Input }, //custom
 }
 
 export const background = {
-  backgroundColor: { label: "Background Color", control: ColorPicker },
+  backgroundColor: { label: "Background Color", control: Input },
   image: { control: Input }, //custom
 }
 
 export const border = {
-  radius: { control: "string" },
-  width: { control: "string" }, //custom
-  color: { control: "colour" },
-  style: { control: "options" },
+  radius: { control: Input },
+  width: { control: Input }, //custom
+  color: { control: Input },
+  style: { control: Input },
 }
 
 export const effects = {
-  opacity: "string",
-  rotate: "string",
-  shadow: "string",
+  opacity: { control: Input },
+  rotate: { control: Input },
+  shadow: { control: Input },
 }
 
 export const transitions = {
-  property: { control: "options" },
-  duration: { control: "string" },
-  ease: { control: "options" },
+  property: { control: Input },
+  duration: { control: Input },
+  ease: { control: Input },
+}
+
+export const all = {
+  general,
+  layout,
+  spacing,
+  size,
+  position,
+  typography,
+  background,
+  border,
+  effects,
+  transitions,
 }
 
 export function excludeProps(props, propsToExclude) {
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index bc60ac2bd6..c4426d1035 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,4 @@
-import { general, layout, background } from "./propertyCategories.js"
+import { general, layout, typography, background, all } from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -13,7 +13,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          properties: { background },
+          properties: { ...all },
         },
         {
           name: 'Text',
@@ -29,7 +29,7 @@ export default {
               properties: {
                 general,
                 layout,
-                background,
+                typography,
               },
             },
             {

From 6b7a3d1d7e4a650a2e071fa1113dec1451dae626 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 8 May 2020 09:57:41 +0100
Subject: [PATCH 05/16] Style binding options and property categories

---
 .../userInterface/OptionSelect.svelte         | 13 +++-
 .../userInterface/propertyCategories.js       | 75 ++++++++++++++++---
 2 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index cbbdb8f91f..b3cfa5e54b 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -4,6 +4,9 @@
   export let onChange = value => {}
   export let options = []
   export let initialValue = ""
+  export let styleBindingProperty = ""
+
+  $: bindOptionToStyle = !!styleBindingProperty
 
   onMount(() => {
     if (!value && !!initialValue) {
@@ -17,6 +20,14 @@
   {value}
   on:change={ev => onChange(ev.target.value)}>
   {#each options as { value, label }}
-    <option value={value || label}>{label}</option>
+    {#if bindOptionToStyle}
+      <option
+        style={`${styleBindingProperty}: ${value || label};`}
+        value={value || label}>
+        {label}
+      </option>
+    {:else}
+      <option value={value || label}>{label}</option>
+    {/if}
   {/each}
 </select>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 525738f02f..7505645b65 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -41,25 +41,76 @@ export const size = {
   minHeight: { label: "Min H", control: Input },
   maxWidth: { label: "Max W", control: Input },
   maxHeight: { label: "Max H", control: Input },
-  overflow: { control: Input }, //custom
+  overflow: {
+    control: OptionSelect,
+    options: [
+      { label: "visible" },
+      { label: "auto" },
+      { label: "hidden" },
+      { label: "auto" },
+      { label: "scroll" },
+    ],
+  }, //custom
 }
 
 export const position = {
-  position: { control: Input },
+  position: {
+    control: OptionSelect,
+    options: [
+      { label: "static" },
+      { label: "relative" },
+      { label: "fixed" },
+      { label: "absolute" },
+      { label: "sticky" },
+    ],
+  },
 }
 
 export const typography = {
-  font: { control: Input },
-  weight: { control: Input },
-  size: { control: Input },
+  fontFamily: {
+    label: "Font",
+    control: OptionSelect,
+    options: [
+      { label: "initial" },
+      { label: "Times New Roman" },
+      { label: "Georgia" },
+      { label: "Arial" },
+      { label: "Arial Black" },
+      { label: "Comic Sans MS" },
+      { label: "Impact" },
+      { label: "Lucida Sans Unicode" },
+    ],
+    styleBindingProperty: "font-family",
+  },
+  fontWeight: {
+    label: "weight",
+    control: OptionSelect,
+    options: [
+      { label: "normal" },
+      { label: "bold" },
+      { label: "bolder" },
+      { label: "lighter" },
+    ],
+  },
+  fontSize: { label: "size", control: Input },
   lineHeight: { label: "Line H", control: Input },
   color: {
     control: OptionSelect,
     options: [{ label: "red" }, { label: "blue" }, { label: "green" }],
   },
-  align: { control: Input }, //custom
-  transform: { control: Input }, //custom
-  style: { control: Input }, //custom
+  textAlign: {
+    label: "align",
+    control: OptionSelect,
+    options: [
+      { label: "initial" },
+      { label: "left" },
+      { label: "right" },
+      { label: "center" },
+      { label: "justify" },
+    ],
+  }, //custom
+  textTransform: { label: "transform", control: Input }, //custom
+  fontStyle: { label: "style", control: Input }, //custom
 }
 
 export const background = {
@@ -68,10 +119,10 @@ export const background = {
 }
 
 export const border = {
-  radius: { control: Input },
-  width: { control: Input }, //custom
-  color: { control: Input },
-  style: { control: Input },
+  borderRadius: { label: "radius", control: Input },
+  borderWidth: { label: "width", control: Input }, //custom
+  borderColor: { label: "color", control: Input },
+  borderStyle: { label: "style", control: Input },
 }
 
 export const effects = {

From 2e636dec9347e8fdf6e84408754de51b205def0e Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 8 May 2020 20:29:15 +0100
Subject: [PATCH 06/16] 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);
   }

From 81cfdf69aa56341f7e1bc9da41e2a34771f5b04a Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 12 May 2020 14:44:30 +0100
Subject: [PATCH 07/16] Fixing errors

---
 .../AppPreview/CurrentItemPreview.svelte      | 10 +++++-----
 packages/standard-components/components.json  | 19 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 02250a0fe1..7ece231cf7 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -25,7 +25,7 @@
     )
   $: hasComponent = !!$store.currentPreviewItem
   $: {
-    style = ""
+    styles = ""
     // Apply the CSS from the currently selected page and its screens
     const currentPage = $store.pages[$store.currentPageName]
     styles += currentPage._css
@@ -35,10 +35,10 @@
     styles = styles
   }
 
-  $: stylesheetLinks = pipe($store.pages.stylesheets, [
-    map(s => `<link rel="stylesheet" href="${s}"/>`),
-    join("\n"),
-  ])
+  $: stylesheetLinks = pipe(
+    $store.pages.stylesheets,
+    [map(s => `<link rel="stylesheet" href="${s}"/>`), join("\n")]
+  )
 
   $: screensExist =
     $store.currentPreviewItem._screens &&
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 4705f2b45b..e3cde3586a 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -12,10 +12,10 @@
 		"props": {
 			"logoUrl": "string",
 			"title": "string",
-			"backgroundColor": "colour",
-			"color": "colour",
+			"backgroundColor": "string",
+			"color": "string",
 			"borderWidth": "string",
-			"borderColor": "colour",
+			"borderColor": "string",
 			"borderStyle": "string"
 		}
 	},
@@ -30,8 +30,8 @@
 			"className": "string",
 			"disabled": "bool",
 			"onClick": "event",
-			"background": "colour",
-			"color": "colour",
+			"background": "string",
+			"color": "string",
 			"border": "string",
 			"padding": "string",
 			"hoverColor": "string",
@@ -167,7 +167,7 @@
 		"children": false,
 		"props": {
 			"text": "string",
-			"color": "colour",
+			"color": "string",
 			"fontFamily": {
 				"type": "options",
 				"default": "initial",
@@ -259,7 +259,7 @@
 		"props": {
 			"icon": "string",
 			"fontSize": "string",
-			"color": "colour"
+			"color": "string"
 		}
 	},
 	"datatable": {
@@ -328,8 +328,8 @@
 			"url": "string",
 			"openInNewTab": "bool",
 			"text": "string",
-			"color": "colour",
-			"hoverColor": "colour",
+			"color": "string",
+			"hoverColor": "string",
 			"underline": "bool",
 			"fontSize": "string",
 			"fontFamily": {
@@ -416,7 +416,6 @@
 		"description": "An HTML H1 - H6 tag",
 		"props": {
 			"className": "string",
-			"color":"colour",
 			"text": "string",
 		"type": {
 				"type": "options",

From 983a1c37189bade5c3952a12ae9f6fd193e6a182 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 18 May 2020 16:32:00 +0100
Subject: [PATCH 08/16] Testing Complete - Resolve Post Issue

---
 .../builder/src/builderStore/generate_css.js  |  35 ++--
 .../builder/src/builderStore/store/index.js   |   9 +-
 .../common/Inputs/InputGroup.svelte           |  54 ++++---
 .../AppPreview/CurrentItemPreview.svelte      |   4 +-
 .../AppPreview/iframeTemplate.js              |   2 +-
 .../ComponentPropertiesPanel.svelte           |  32 ++--
 .../userInterface/DesignView.svelte           |   9 +-
 .../userInterface/PropertyControl.svelte      |   2 +
 .../userInterface/PropertyGroup.svelte        |  22 +--
 .../userInterface/SettingsView.svelte         |  35 ++++
 .../userInterface/pagesParsing/createProps.js |   4 +-
 .../userInterface/propertyCategories.js       | 145 +++++++++--------
 .../userInterface/temporaryPanelStructure.js  | 152 ++++++++++--------
 packages/client/src/render/attachChildren.js  |   2 +-
 .../src/render/prepareRenderComponent.js      |   2 +-
 15 files changed, 294 insertions(+), 215 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/SettingsView.svelte

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index 4326e7cb0f..4311950a58 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -110,33 +110,36 @@ const object_to_css_string = [
   join_with("\n"),
 ]
 
-export const generate_css = ({ layout, position }) => {
-  let _layout = pipe(layout, object_to_css_string)
-  if (_layout.length) {
-    _layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`
-  }
+export const generate_css = style => {
+  // let cssString = pipe(style, object_to_css_string)
+  let cssString = Object.entries(style).reduce((str, [key, value]) => {
+    //TODO Handle arrays and objects here also
+    if (typeof value === "string") {
+      if (value) {
+        return (str += `${key}: ${value};\n`)
+      }
+    } else if (Array.isArray(value)) {
+      return (str += `${key}: ${value.map(v => `${v}px`).join(" ")};\n`)
+    }
+  }, "")
 
-  return {
-    layout: _layout,
-    position: pipe(position, object_to_css_string),
-  }
+  return (cssString || "").trim()
 }
 
 const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
 
 export const generate_screen_css = component_array => {
   let styles = ""
-  let emptyStyles = { layout: {}, position: {} }
-
+  let emptyStyles = {}
   for (let i = 0; i < component_array.length; i += 1) {
     const { _styles, _id, _children } = component_array[i]
-    const { layout, position } = generate_css(_styles || emptyStyles)
-
-    styles += apply_class(_id, "pos", position) + "\n"
-    styles += apply_class(_id, "lay", layout) + "\n"
+    const cssString = generate_css(_styles || emptyStyles) || ""
+    if (cssString) {
+      styles += apply_class(_id, "element", cssString)
+    }
     if (_children && _children.length) {
       styles += generate_screen_css(_children) + "\n"
     }
   }
   return styles.trim()
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index a8315918ba..7e108bbe09 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -140,10 +140,12 @@ const _saveScreen = async (store, s, screen) => {
   return s
 }
 
-const _saveScreenApi = (screen, s) =>
+const _saveScreenApi = (screen, s) => {
+
   api
     .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
     .then(() => _savePage(s))
+}
 
 const createScreen = store => (screenName, route, layoutComponentName) => {
   store.update(state => {
@@ -278,7 +280,6 @@ const removeStylesheet = store => stylesheet => {
 
 const _savePage = async s => {
   const page = s.pages[s.currentPageName]
-
   await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
     page: { componentLibraries: s.pages.componentLibraries, ...page },
     uiFunctions: s.currentPageFunctions,
@@ -426,7 +427,9 @@ const setComponentStyle = store => (type, name, value) => {
     if (!state.currentComponentInfo._styles) {
       state.currentComponentInfo._styles = {}
     }
-    state.currentComponentInfo._styles[type][name] = value
+    // state.currentComponentInfo._styles[type][name] = value
+    state.currentComponentInfo._styles[name] = value
+
     state.currentPreviewItem._css = generate_screen_css([
       state.currentPreviewItem.props,
     ])
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 078edea28f..7976cabd55 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -2,36 +2,50 @@
   import { onMount } from "svelte"
 
   export let meta = []
-  export let size = ""
+  export let label = ""
   export let values = []
   export let type = "number"
-  export let onStyleChanged = () => {}
+  export let onChange = () => {}
 
   let _values = values.map(v => v)
 
-  $: onStyleChanged(_values)
+  // $: onChange(_values)
 </script>
 
-<div class="inputs {size}">
-  {#each meta as { placeholder }, i}
-    <input
-      {type}
-      {placeholder}
-      value={values[i]}
-      on:input={e => (_values[i] = e.target.value)} />
-  {/each}
+<div class="input-container">
+  <div class="label">{label}</div>
+  <div class="inputs">
+    {#each meta as { placeholder }, i}
+      <input
+        {type}
+        placeholder={placeholder || ''}
+        value={values[i]}
+        on:input={e => (_values[i] = e.target.value)} />
+    {/each}
+  </div>
 </div>
 
 <style>
-  .inputs {
+  .input-container {
     display: flex;
-    justify-content: space-between;
+  }
+
+  .label {
+    flex: 0;
+  }
+
+  .inputs {
+    flex: 1;
+    /* display: flex;
+    justify-content: space-between; */
   }
 
   input {
-    width: 83px;
+    width: 40px;
+    height: 32px;
     font-size: 13px;
     font-weight: 700;
+    margin: 0px 5px;
     color: #163057;
     opacity: 0.7;
     padding: 5px 10px;
@@ -49,17 +63,11 @@
     margin: 0;
   }
 
-  .small > input {
-    width: 38px;
-    height: 38px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: 0;
+  input[type="number"] {
+    -moz-appearance: textfield;
   }
 
-  .small > input::placeholder {
+  input::placeholder {
     text-align: center;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 02aa072910..18afb123ef 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -60,7 +60,7 @@
               _children: [
                 {
                   _component: "@budibase/standard-components/container",
-                  _styles: { position: {}, layout: {} },
+                  _styles: {},
                   _id: "__screenslot__text",
                   _code: "",
                   className: "",
@@ -69,7 +69,7 @@
                   _children: [
                     {
                       _component: "@budibase/standard-components/text",
-                      _styles: { position: {}, layout: {} },
+                      _styles: {},
                       _id: "__screenslot__text_2",
                       _code: "",
                       text: "content",
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index 3c774cc4b8..c1cf4aab1f 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -11,7 +11,7 @@ export default ({
     <style>
       ${styles || ""}
 
-      .pos-${selectedComponentId} {
+      .element-${selectedComponentId} {
         border: 2px solid #0055ff; 
       }
 
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 5c07895792..051bc48bc2 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { setContext, onMount } from "svelte"
   import PropsView from "./PropsView.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -16,27 +17,28 @@
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
+  import SettingsView from "./SettingsView.svelte"
 
   let current_view = "design"
   let codeEditor
   let flattenedPanel = flattenComponents(panelStructure.categories)
   let categories = [
-    { name: "Design" },
-    { name: "Settings" },
-    { name: "Actions" },
+    { value: "design", name: "Design" },
+    { value: "settings", name: "Settings" },
+    { value: "actions", name: "Actions" },
   ]
   let selectedCategory = categories[0]
 
   $: components = $store.components
   $: componentInstance = $store.currentComponentInfo
-  $: componentDefinition = $store.components.find(
-    c => c.name === componentInstance._component
-  )
-
-  $: panelDefinition = flattenedPanel.find(
+  $: componentDefinition = $store.components[componentInstance._component]
+  $: componentPropDefinition = flattenedPanel.find(
     //use for getting controls for each component property
     c => c._component === componentInstance._component
   )
+  $: panelDefinition = componentPropDefinition
+    ? componentPropDefinition.properties[selectedCategory.value]
+    : {}
 
   // SCREEN PROPS =============================================
   $: screen_props =
@@ -44,8 +46,11 @@
       ? getProps($store.currentPreviewItem, ["name", "favicon"])
       : getProps($store.currentPreviewItem, ["name", "description", "route"])
 
+  // const onStyleChanged = store.setComponentStyle
+  // const onStyleChanged = store.onStyleChanged
+
   const onStyleChanged = store.setComponentStyle
-  const onPropChanged = store.onPropChanged
+  const onPropChanged = store.setComponentProp
 
   function walkProps(component, action) {
     action(component)
@@ -81,12 +86,17 @@
     {selectedCategory} />
 
   <div class="component-props-container">
-    {#if current_view === 'design'}
+    {#if selectedCategory.value === 'design'}
       <DesignView
         {panelDefinition}
         {componentInstance}
         {componentDefinition}
-        {onPropChanged} />
+        {onStyleChanged} />
+    {:else if selectedCategory.value === 'settings'}
+      <SettingsView
+        {componentInstance}
+        {panelDefinition}
+        onChange={onPropChanged} />
     {/if}
 
   </div>
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 7fc6af5312..612def10b0 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -5,11 +5,11 @@
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
-  export let onPropChanged = () => {}
+  export let onStyleChanged = () => {}
 
   let selectedCategory = "desktop"
 
-  const getProperties = name => panelDefinition.properties[name]
+  const getProperties = name => panelDefinition[name]
 
   function onChange(category) {
     selectedCategory = category
@@ -23,8 +23,7 @@
     { value: "selected", text: "Selected" },
   ]
 
-  $: propertyGroupNames =
-    !!panelDefinition.properties && Object.keys(panelDefinition.properties)
+  $: propertyGroupNames = Object.keys(panelDefinition)
 </script>
 
 <div class="design-view-container">
@@ -38,7 +37,7 @@
       <PropertyGroup
         name={groupName}
         properties={getProperties(groupName)}
-        {onPropChanged}
+        {onStyleChanged}
         {componentDefinition}
         {componentInstance} />
     {/each}
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 23dd223de6..4c018f49e4 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { onMount, getContext } from "svelte"
+
   export let label = ""
   export let control = null
   export let value = ""
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 2d88557777..be0e257355 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -3,10 +3,10 @@
   import PropertyControl from "./PropertyControl.svelte"
 
   export let name = ""
-  export let properties = {}
+  export let properties = []
   export let componentInstance = {}
   export let componentDefinition = {}
-  export let onPropChanged = () => {}
+  export let onStyleChanged = () => {}
 
   export let show = false
   let showComponentGroup = false
@@ -15,7 +15,10 @@
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
   function onChange(key, v) {
-    !!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
+    console.log("PROPERTY GROUP ON CHANGE")
+    !!v.target
+      ? onStyleChanged(name, key, v.target.value)
+      : onStyleChanged(name, key, v)
   }
 
   $: {
@@ -29,7 +32,6 @@
     }
   }
 
-  $: propertyDefinition = Object.entries(properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
@@ -43,14 +45,14 @@
   </div>
   <div class="property-panel" class:show>
 
-    {#each propertyDefinition as [key, definition]}
+    {#each properties as props}
       <!-- {#if propExistsOnComponentDef(key)} -->
       <PropertyControl
-        label={definition.label || capitalize(key)}
-        control={definition.control}
-        value={componentInstance[key]}
-        onChange={value => onChange(key, value)}
-        props={{ ...excludeProps(definition, ['control']) }} />
+        label={props.label}
+        control={props.control}
+        value={componentInstance[props.cssKey]}
+        onChange={value => onChange(props.cssKey, value)}
+        props={{ ...excludeProps(props, ['control']) }} />
       <!-- {/if} -->
     {/each}
   </div>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
new file mode 100644
index 0000000000..bf8ead76ff
--- /dev/null
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -0,0 +1,35 @@
+<script>
+  import PropertyControl from "./PropertyControl.svelte"
+  import InputGroup from "../common/Inputs/InputGroup.svelte"
+  import { excludeProps } from "./propertyCategories.js"
+
+  export let panelDefinition = {}
+  export let componentInstance = {}
+  export let onChange = () => {}
+
+  function handleChange(key, data) {
+    data.target ? onChange(key, data.target.value) : onChange(key, data)
+  }
+
+  const meta = [
+    { placeholder: "T" },
+    { placeholder: "R" },
+    { placeholder: "B" },
+    { placeholder: "L" },
+  ]
+
+  $: settingsControls = !!panelDefinition ? Object.entries(panelDefinition) : []
+</script>
+
+<h4>Settings Panel</h4>
+
+<InputGroup label="Testing" {meta} />
+
+{#each settingsControls as [key, definition]}
+  <PropertyControl
+    control={definition.control}
+    label={key}
+    value={componentInstance[key]}
+    onChange={value => handleChange(key, value)}
+    props={{ ...excludeProps(definition, ['control']) }} />
+{/each}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
index c37e05e023..99f67ccc80 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
@@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
   const props = {
     _id: uuid(),
     _component: componentDefinition._component,
-    _styles: { position: {}, layout: {} },
+    _styles: {},
     _code: "",
   }
 
@@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => {
   }
 
   if (!props._styles) {
-    props._styles = { layout: {}, position: {} }
+    props._styles = {}
   }
 
   return props
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 08503b4414..1ad86f810d 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,16 +1,14 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
+import InputGroup from "../common/Inputs/InputGroup.svelte"
 /*
   TODO: Allow for default values for all properties
 */
 
-export const general = {
-  text: { control: Input },
-}
-
-export const layout = {
-  flexDirection: {
+export const layout = [
+  {
     label: "Direction",
+    cssKey: "flex-direction",
     control: OptionSelect,
     initialValue: "columnReverse",
     options: [
@@ -20,41 +18,45 @@ export const layout = {
       { label: "column-reverse", value: "columnReverse" },
     ],
   },
-  justifyContent: { label: "Justify", control: Input },
-  alignItems: { label: "Align", control: Input },
-  flexWrap: {
+  { label: "Justify", cssKey: "justify-content", control: Input },
+  { label: "Align", cssKey: "align-items", control: Input },
+  {
     label: "Wrap",
+    cssKey: "flex-wrap",
     control: OptionSelect,
     options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
   },
-}
+]
 
-export const spacing = {
-  padding: { control: Input },
-  margin: { control: Input },
-}
+const spacingMeta = [
+  { placeholder: "T" },
+  { placeholder: "R" },
+  { placeholder: "B" },
+  { placeholder: "L" },
+]
+export const spacing = [
+  {
+    label: "Padding",
+    cssKey: "padding",
+    control: InputGroup,
+    meta: spacingMeta,
+  },
+  { label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta },
+]
 
-export const size = {
-  width: { control: Input },
-  height: { control: Input },
-  minWidth: { label: "Min W", control: Input },
-  minHeight: { label: "Min H", control: Input },
-  maxWidth: { label: "Max W", control: Input },
-  maxHeight: { label: "Max H", control: Input },
-  overflow: {
-    control: OptionSelect,
-    options: [
-      { label: "visible" },
-      { label: "auto" },
-      { label: "hidden" },
-      { label: "auto" },
-      { label: "scroll" },
-    ],
-  }, //custom
-}
+export const size = [
+  { label: "Width", cssKey: "width", control: Input },
+  { label: "Height", cssKey: "height", control: Input },
+  { label: "Min W", cssKey: "min-width", control: Input },
+  { label: "Min H", cssKey: "min-height", control: Input },
+  { label: "Max W", cssKey: "max-width", control: Input },
+  { label: "Max H", cssKey: "max-height", control: Input },
+]
 
-export const position = {
-  position: {
+export const position = [
+  {
+    label: "Position",
+    cssKey: "position",
     control: OptionSelect,
     options: [
       { label: "static" },
@@ -64,11 +66,12 @@ export const position = {
       { label: "sticky" },
     ],
   },
-}
+]
 
-export const typography = {
-  fontFamily: {
+export const typography = [
+  {
     label: "Font",
+    cssKey: "font-family",
     control: OptionSelect,
     options: [
       { label: "initial" },
@@ -82,8 +85,9 @@ export const typography = {
     ],
     styleBindingProperty: "font-family",
   },
-  fontWeight: {
-    label: "weight",
+  {
+    label: "Weight",
+    cssKey: "font-weight",
     control: OptionSelect,
     options: [
       { label: "normal" },
@@ -92,9 +96,11 @@ export const typography = {
       { label: "lighter" },
     ],
   },
-  fontSize: { label: "size", control: Input },
-  lineHeight: { label: "Line H", control: Input },
-  color: {
+  { label: "size", cssKey: "font-size", control: Input },
+  { label: "Line H", cssKey: "line-height", control: Input },
+  {
+    label: "Color",
+    cssKey: "color",
     control: OptionSelect,
     options: [
       { label: "black" },
@@ -104,8 +110,9 @@ export const typography = {
       { label: "green" },
     ],
   },
-  textAlign: {
+  {
     label: "align",
+    cssKey: "text-align",
     control: OptionSelect,
     options: [
       { label: "initial" },
@@ -115,13 +122,14 @@ export const typography = {
       { label: "justify" },
     ],
   }, //custom
-  textTransform: { label: "transform", control: Input }, //custom
-  fontStyle: { label: "style", control: Input }, //custom
-}
+  { label: "transform", cssKey: "text-transform", control: Input }, //custom
+  { label: "style", cssKey: "font-style", control: Input }, //custom
+]
 
-export const background = {
-  backgroundColor: {
-    label: "Background Color",
+export const background = [
+  {
+    label: "Background",
+    cssKey: "background",
     control: OptionSelect,
     options: [
       { label: "white" },
@@ -131,30 +139,29 @@ export const background = {
       { label: "black" },
     ],
   },
-  image: { control: Input }, //custom
-}
+  { label: "Image", cssKey: "image", control: Input }, //custom
+]
 
-export const border = {
-  borderRadius: { label: "radius", control: Input },
-  borderWidth: { label: "width", control: Input }, //custom
-  borderColor: { label: "color", control: Input },
-  borderStyle: { label: "style", control: Input },
-}
+export const border = [
+  { label: "Radius", cssKey: "border-radius", control: Input },
+  { label: "Width", cssKey: "border-width", control: Input }, //custom
+  { label: "Color", cssKey: "border-color", control: Input },
+  { label: "Style", cssKey: "border-style", control: Input },
+]
 
-export const effects = {
-  opacity: { control: Input },
-  rotate: { control: Input },
-  shadow: { control: Input },
-}
+export const effects = [
+  { label: "Opacity", cssKey: "opacity", control: Input },
+  { label: "Rotate", cssKey: "transform", control: Input }, //needs special control
+  { label: "Shadow", cssKey: "box-shadow", control: Input },
+]
 
-export const transitions = {
-  property: { control: Input },
-  duration: { control: Input },
-  ease: { control: Input },
-}
+export const transitions = [
+  { label: "Property", cssKey: "transition-property", control: Input },
+  { label: "Duration", cssKey: "transition-timing-function", control: Input },
+  { label: "Ease", cssKey: "transition-ease", control: Input },
+]
 
 export const all = {
-  general,
   layout,
   spacing,
   size,
@@ -174,4 +181,4 @@ export function excludeProps(props, propsToExclude) {
     }
   }
   return modifiedProps
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 918deacfc2..6e115431da 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,12 +1,6 @@
-import {
-  general,
-  layout,
-  typography,
-  border,
-  size,
-  background,
-  all,
-} from "./propertyCategories.js"
+import Input from "../common/Input.svelte"
+
+import { all } from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -30,7 +24,7 @@ export default {
           icon: "ri-layout-row-fill",
           commonProps: {},
           children: [],
-          properties: { background, size },
+          properties: { design: { ...all } },
         },
         {
           name: "Text",
@@ -44,17 +38,29 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               properties: {
-               ...all
+                design: { ...all },
+                settings: {
+                  text: {
+                    control: Input,
+                  },
+                },
               },
             },
             {
               _component: "@budibase/standard-components/text",
               name: "Paragraph",
               description: "A component for displaying paragraph text.",
-              icon: 'ri-paragraph',
-              properties: { general, typography },
-            }
-          ]
+              icon: "ri-paragraph",
+              properties: {
+                design: { ...all },
+                settings: {
+                  text: {
+                    control: Input,
+                  },
+                },
+              },
+            },
+          ],
         },
         {
           name: "Input",
@@ -65,58 +71,60 @@ export default {
             {
               _component: "@budibase/standard-components/input",
               name: "Textfield",
-              description: "A textfield component that allows the user to input text.",
-              icon: 'ri-edit-box-line',
-              properties: {}
+              description:
+                "A textfield component that allows the user to input text.",
+              icon: "ri-edit-box-line",
+              properties: { design: { ...all } },
             },
             {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
-              icon: 'ri-checkbox-line',
-              properties: {}
+              icon: "ri-checkbox-line",
+              properties: { design: { ...all } },
             },
             {
               _component: "@budibase/standard-components/radiobutton",
               name: "Radiobutton",
               description: "A selectable radiobutton component",
-              icon: 'ri-radio-button-line',
-              properties: {}
+              icon: "ri-radio-button-line",
+              properties: { design: { ...all } },
             },
             {
               _component: "@budibase/standard-components/select",
               name: "Select",
-              description: "A select component for choosing from different options",
-              icon: 'ri-file-list-line',
-              properties: {}
-            }
-          ]
+              description:
+                "A select component for choosing from different options",
+              icon: "ri-file-list-line",
+              properties: { design: { ...all } },
+            },
+          ],
         },
         {
           _component: "@budibase/standard-components/button",
-          name: 'Button',
-          description: 'A basic html button that is ready for styling',
-          icon: 'ri-radio-button-fill',
+          name: "Button",
+          description: "A basic html button that is ready for styling",
+          icon: "ri-radio-button-fill",
           children: [],
-          properties: { background, typography, border, size },
+          properties: { design: { ...all } },
         },
         {
           _component: "@budibase/standard-components/icon",
-          name: 'Icon',
-          description: 'A basic component for displaying icons',
-          icon: 'ri-sun-fill',
-          properties: {},
-          children: []
+          name: "Icon",
+          description: "A basic component for displaying icons",
+          icon: "ri-sun-fill",
+          children: [],
+          properties: { design: { ...all } },
         },
         {
           _component: "@budibase/standard-components/link",
-          name: 'Link',
-          description: 'A basic link component for internal and external links',
-          icon: 'ri-link',
-          properties: {},
-          children: []
-        }
-      ]
+          name: "Link",
+          description: "A basic link component for internal and external links",
+          icon: "ri-link",
+          children: [],
+          properties: { design: { ...all } },
+        },
+      ],
     },
     {
       name: "Blocks",
@@ -124,18 +132,20 @@ export default {
       children: [
         {
           _component: "@budibase/materialdesign-components/BasicCard",
-          name: 'Card',
-          description: 'A basic card component that can contain content and actions.',
-          icon: 'ri-layout-bottom-line',
+          name: "Card",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-layout-bottom-line",
           children: [],
-          properties: { size, background, border },
+          properties: { design: { ...all } },
         },
         {
-          name: 'Login',
-          description: 'A component that automatically generates a login screen for your app.',
-          icon: 'ri-login-box-fill',
-          properties: {},
-          children: []
+          name: "Login",
+          description:
+            "A component that automatically generates a login screen for your app.",
+          icon: "ri-login-box-fill",
+          children: [],
+          properties: { design: { ...all } },
         },
         {
           name: "Navigation Bar",
@@ -143,27 +153,27 @@ export default {
           description:
             "A component for handling the navigation within your app.",
           icon: "ri-navigation-fill",
-          properties: {},
-          children: []
-        }
-      ]
+          children: [],
+          properties: { design: { ...all } },
+        },
+      ],
     },
     {
       name: "Data",
       isCategory: true,
       children: [
         {
-          name: 'Table',
-          description: 'A component that generates a table from your data.',
-          icon: 'ri-archive-drawer-fill',
-          properties: {},
-          children: []
+          name: "Table",
+          description: "A component that generates a table from your data.",
+          icon: "ri-archive-drawer-fill",
+          properties: { design: { ...all } },
+          children: [],
         },
         {
-          name: 'Form',
-          description: 'A component that generates a form from your data.',
-          icon: 'ri-file-edit-fill',
-          properties: {},
+          name: "Form",
+          description: "A component that generates a form from your data.",
+          icon: "ri-file-edit-fill",
+          properties: { design: { ...all } },
           _component: "@budibase/materialdesign-components/Form",
           template: {
             component: "@budibase/materialdesign-components/Form",
@@ -177,7 +187,7 @@ export default {
           name: "DataTable",
           description: "A table for displaying data from the backend.",
           icon: "ri-archive-drawer-fill",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
         {
@@ -185,7 +195,7 @@ export default {
           name: "DataForm",
           description: "Form stuff",
           icon: "ri-file-edit-fill",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
         {
@@ -193,7 +203,7 @@ export default {
           _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
           icon: "ri-bar-chart-line",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
         {
@@ -201,7 +211,7 @@ export default {
           _component: "@budibase/standard-components/datalist",
           description: "Shiny list",
           icon: "ri-file-list-line",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
         {
@@ -209,10 +219,10 @@ export default {
           _component: "@budibase/standard-components/datamap",
           description: "Shiny map",
           icon: "ri-map-pin-line",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
       ],
     },
   ],
-}
+}
\ No newline at end of file
diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js
index ebb5dd34da..22dff2b2a8 100644
--- a/packages/client/src/render/attachChildren.js
+++ b/packages/client/src/render/attachChildren.js
@@ -31,7 +31,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
     }
   }
 
-  htmlElement.classList.add(`lay-${treeNode.props._id}`)
+  // htmlElement.classList.add(`lay-${treeNode.props._id}`)
 
   const childNodes = []
   for (let childProps of treeNode.props._children) {
diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js
index 916ac82960..91001018a7 100644
--- a/packages/client/src/render/prepareRenderComponent.js
+++ b/packages/client/src/render/prepareRenderComponent.js
@@ -36,7 +36,7 @@ export const prepareRenderComponent = ({
         htmlElement.children[htmlElement.children.length - 1]
 
       if (props._id && thisNode.rootElement) {
-        thisNode.rootElement.classList.add(`pos-${props._id}`)
+        thisNode.rootElement.classList.add(`element-${props._id}`)
       }
     }
   }

From 3cd48773d121fb22d28aa75d48000bb064c688fe Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 19 May 2020 17:00:53 +0100
Subject: [PATCH 09/16] Building components settings and refactoring

---
 .../builder/src/builderStore/generate_css.js  |   3 +
 .../ComponentPropertiesPanel.svelte           |  10 +-
 .../userInterface/ComponentsHierarchy.svelte  |  24 ++--
 .../ComponentsHierarchyChildren.svelte        |   7 +-
 .../userInterface/OptionSelect.svelte         |  23 ++--
 .../userInterface/PropertyControl.svelte      |  17 ++-
 .../userInterface/PropertyGroup.svelte        |  24 +---
 .../userInterface/SettingsView.svelte         |  35 +++---
 .../userInterface/propertyCategories.js       |  18 +--
 .../userInterface/temporaryPanelStructure.js  | 113 +++++++++++++++--
 packages/standard-components/components.json  | 119 +-----------------
 .../standard-components/src/Button.svelte     |  52 +-------
 .../standard-components/src/Container.svelte  | 110 ++--------------
 .../standard-components/src/Heading.svelte    |  18 ++-
 packages/standard-components/src/Text.svelte  |  62 ++++-----
 15 files changed, 227 insertions(+), 408 deletions(-)

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index 4311950a58..279c800396 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -87,6 +87,7 @@ const css_map = {
   },
 }
 
+//Only used here
 export const generate_rule = ([name, values]) =>
   `${css_map[name].name}: ${css_map[name].generate(values)};`
 
@@ -110,6 +111,7 @@ const object_to_css_string = [
   join_with("\n"),
 ]
 
+//USED BY generate_screen_css
 export const generate_css = style => {
   // let cssString = pipe(style, object_to_css_string)
   let cssString = Object.entries(style).reduce((str, [key, value]) => {
@@ -128,6 +130,7 @@ export const generate_css = style => {
 
 const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
 
+//USED IN MULTIPLE PLACES IN THE BUILDER STORE
 export const generate_screen_css = component_array => {
   let styles = ""
   let emptyStyles = {}
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 051bc48bc2..b1b07c514e 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -46,9 +46,6 @@
       ? getProps($store.currentPreviewItem, ["name", "favicon"])
       : getProps($store.currentPreviewItem, ["name", "description", "route"])
 
-  // const onStyleChanged = store.setComponentStyle
-  // const onStyleChanged = store.onStyleChanged
-
   const onStyleChanged = store.setComponentStyle
   const onPropChanged = store.setComponentProp
 
@@ -87,14 +84,11 @@
 
   <div class="component-props-container">
     {#if selectedCategory.value === 'design'}
-      <DesignView
-        {panelDefinition}
-        {componentInstance}
-        {componentDefinition}
-        {onStyleChanged} />
+      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
     {:else if selectedCategory.value === 'settings'}
       <SettingsView
         {componentInstance}
+        {componentDefinition}
         {panelDefinition}
         onChange={onPropChanged} />
     {/if}
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 10628b09a1..31ada23230 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -16,12 +16,15 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const lastPartOfName = c => {
     if (!c) return ""
@@ -31,10 +34,10 @@
 
   const isComponentSelected = (current, comp) => current === comp
 
-  $: _screens = pipe(screens, [
-    map(c => ({ component: c, title: lastPartOfName(c) })),
-    sortBy("title"),
-  ])
+  $: _screens = pipe(
+    screens,
+    [map(c => ({ component: c, title: lastPartOfName(c) })), sortBy("title")]
+  )
 
   const confirmDeleteComponent = component => {
     componentToDelete = component
@@ -42,6 +45,7 @@
   }
 
   const changeScreen = screen => {
+    debugger
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
   }
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index eafc1834d0..36d401f500 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -22,7 +22,11 @@
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const get_capitalised_name = name =>
+    pipe(
+      name,
+      [get_name, capitalise]
+    )
 
   const moveDownComponent = component => {
     const c = component
@@ -33,6 +37,7 @@
 
   const selectComponent = component => {
     // Set current component
+    debugger
     store.selectComponent(component)
 
     // Get ID path
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index b3cfa5e54b..4fbedde4ac 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -6,7 +6,10 @@
   export let initialValue = ""
   export let styleBindingProperty = ""
 
-  $: bindOptionToStyle = !!styleBindingProperty
+  const handleStyleBind = value =>
+    !!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
+
+  $: isOptionsObject = options.every(o => typeof o === "object")
 
   onMount(() => {
     if (!value && !!initialValue) {
@@ -19,15 +22,15 @@
   class="uk-select uk-form-small"
   {value}
   on:change={ev => onChange(ev.target.value)}>
-  {#each options as { value, label }}
-    {#if bindOptionToStyle}
-      <option
-        style={`${styleBindingProperty}: ${value || label};`}
-        value={value || label}>
+  {#if isOptionsObject}
+    {#each options as { value, label }}
+      <option {...handleStyleBind(value || label)} value={value || label}>
         {label}
       </option>
-    {:else}
-      <option value={value || label}>{label}</option>
-    {/if}
-  {/each}
+    {/each}
+  {:else}
+    {#each options as value}
+      <option {...handleStyleBind(value)} {value}>{value}</option>
+    {/each}
+  {/if}
 </select>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 4c018f49e4..99d91fcbd8 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -3,9 +3,20 @@
 
   export let label = ""
   export let control = null
+  export let key = ""
   export let value = ""
+  export let valueType = ""
   export let props = {}
   export let onChange = () => {}
+
+  function handleChange(key, v) {
+    !!v.target
+      ? onChange(name, key, valueType ? v.target[valueType] : v.target.value)
+      : onChange(name, key, v)
+  }
+
+  const handleValueType = value =>
+    valueType ? { [valueType]: value } : { value }
 </script>
 
 <div class="property-control">
@@ -13,9 +24,9 @@
   <div class="control">
     <svelte:component
       this={control}
-      {value}
-      on:change={onChange}
-      {onChange}
+      {...handleValueType(value)}
+      on:change={val => handleChange(key, val)}
+      onChange={val => handleChange(key, val)}
       {...props} />
   </div>
 </div>
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index be0e257355..e1e3a98980 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -5,37 +5,21 @@
   export let name = ""
   export let properties = []
   export let componentInstance = {}
-  export let componentDefinition = {}
   export let onStyleChanged = () => {}
 
   export let show = false
-  let showComponentGroup = false
 
-  const propExistsOnComponentDef = prop => prop in componentDefinition.props
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
   function onChange(key, v) {
-    console.log("PROPERTY GROUP ON CHANGE")
     !!v.target
       ? onStyleChanged(name, key, v.target.value)
       : onStyleChanged(name, 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
-    }
-  }
-
   $: 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">
@@ -46,18 +30,16 @@
   <div class="property-panel" class:show>
 
     {#each properties as props}
-      <!-- {#if propExistsOnComponentDef(key)} -->
       <PropertyControl
         label={props.label}
         control={props.control}
-        value={componentInstance[props.cssKey]}
-        onChange={value => onChange(props.cssKey, value)}
+        key={props.cssKey}
+        value={componentInstance['_styles'][props.cssKey]}
+        onChange={onStyleChanged}
         props={{ ...excludeProps(props, ['control']) }} />
-      <!-- {/if} -->
     {/each}
   </div>
 </div>
-<!-- {/if} -->
 
 <style>
   .property-group-container {
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index bf8ead76ff..fb017f47db 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -3,33 +3,26 @@
   import InputGroup from "../common/Inputs/InputGroup.svelte"
   import { excludeProps } from "./propertyCategories.js"
 
-  export let panelDefinition = {}
+  export let panelDefinition = []
+  export let componentDefinition = {}
   export let componentInstance = {}
   export let onChange = () => {}
 
+  const propExistsOnComponentDef = prop => prop in componentDefinition.props
+
   function handleChange(key, data) {
     data.target ? onChange(key, data.target.value) : onChange(key, data)
   }
-
-  const meta = [
-    { placeholder: "T" },
-    { placeholder: "R" },
-    { placeholder: "B" },
-    { placeholder: "L" },
-  ]
-
-  $: settingsControls = !!panelDefinition ? Object.entries(panelDefinition) : []
 </script>
 
-<h4>Settings Panel</h4>
-
-<InputGroup label="Testing" {meta} />
-
-{#each settingsControls as [key, definition]}
-  <PropertyControl
-    control={definition.control}
-    label={key}
-    value={componentInstance[key]}
-    onChange={value => handleChange(key, value)}
-    props={{ ...excludeProps(definition, ['control']) }} />
+{#each panelDefinition as definition}
+  {#if propExistsOnComponentDef(definition.key)}
+    <PropertyControl
+      control={definition.control}
+      label={definition.label}
+      key={definition.key}
+      value={componentInstance[definition.key]}
+      {onChange}
+      props={{ ...excludeProps(definition, ['control']) }} />
+  {/if}
 {/each}
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 1ad86f810d..6f7feaae45 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -102,25 +102,13 @@ export const typography = [
     label: "Color",
     cssKey: "color",
     control: OptionSelect,
-    options: [
-      { label: "black" },
-      { label: "red" },
-      { label: "white" },
-      { label: "blue" },
-      { label: "green" },
-    ],
+    options: ["black", "red", "white", "blue", "green"],
   },
   {
     label: "align",
     cssKey: "text-align",
     control: OptionSelect,
-    options: [
-      { label: "initial" },
-      { label: "left" },
-      { label: "right" },
-      { label: "center" },
-      { label: "justify" },
-    ],
+    options: ["initial", "left", "right", "center", "justify"],
   }, //custom
   { label: "transform", cssKey: "text-transform", control: Input }, //custom
   { label: "style", cssKey: "font-style", control: Input }, //custom
@@ -181,4 +169,4 @@ export function excludeProps(props, propsToExclude) {
     }
   }
   return modifiedProps
-}
\ No newline at end of file
+}
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 6e115431da..449393b67e 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,6 @@
 import Input from "../common/Input.svelte"
+import OptionSelect from "./OptionSelect.svelte"
+import Checkbox from "../common/Checkbox.svelte"
 
 import { all } from "./propertyCategories.js"
 
@@ -24,7 +26,31 @@ export default {
           icon: "ri-layout-row-fill",
           commonProps: {},
           children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                key: "type",
+                label: "Type",
+                control: OptionSelect,
+                options: [
+                  { label: "article" },
+                  { label: "aside" },
+                  { label: "details" },
+                  { label: "div" },
+                  { label: "figure" },
+                  { label: "figcaption" },
+                  { label: "footer" },
+                  { label: "header" },
+                  { label: "main" },
+                  { label: "mark" },
+                  { label: "nav" },
+                  { label: "paragraph" },
+                  { label: "summary" },
+                ],
+              },
+            ],
+          },
         },
         {
           name: "Text",
@@ -39,11 +65,19 @@ export default {
               icon: "ri-heading",
               properties: {
                 design: { ...all },
-                settings: {
-                  text: {
+                settings: [
+                  {
+                    key: "text",
+                    label: "Text",
                     control: Input,
                   },
-                },
+                  {
+                    key: "type",
+                    label: "Type",
+                    control: OptionSelect,
+                    options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+                  },
+                ],
               },
             },
             {
@@ -53,11 +87,31 @@ export default {
               icon: "ri-paragraph",
               properties: {
                 design: { ...all },
-                settings: {
-                  text: {
+                settings: [
+                  {
+                    label: "Text",
+                    key: "text",
                     control: Input,
                   },
-                },
+                  {
+                    label: "Type",
+                    key: "type",
+                    control: OptionSelect,
+                    options: [
+                      "none",
+                      "bold",
+                      "strong",
+                      "italic",
+                      "emphasis",
+                      "mark",
+                      "small",
+                      "del",
+                      "ins",
+                      "sub",
+                      "sup",
+                    ],
+                  },
+                ],
               },
             },
           ],
@@ -74,21 +128,38 @@ export default {
               description:
                 "A textfield component that allows the user to input text.",
               icon: "ri-edit-box-line",
-              properties: { design: { ...all } },
+              properties: {
+                design: { ...all },
+                settings: [
+                  { label: "Label", key: "label", control: Input },
+                  {
+                    label: "Type",
+                    key: "type",
+                    control: OptionSelect,
+                    options: ["text", "password"],
+                  },
+                ],
+              },
             },
             {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
               icon: "ri-checkbox-line",
-              properties: { design: { ...all } },
+              properties: {
+                design: { ...all },
+                settings: [{ label: "Label", key: "label", control: Input }],
+              },
             },
             {
               _component: "@budibase/standard-components/radiobutton",
               name: "Radiobutton",
               description: "A selectable radiobutton component",
               icon: "ri-radio-button-line",
-              properties: { design: { ...all } },
+              properties: {
+                design: { ...all },
+                settings: [{ label: "Label", key: "label", control: Input }],
+              },
             },
             {
               _component: "@budibase/standard-components/select",
@@ -96,7 +167,10 @@ export default {
               description:
                 "A select component for choosing from different options",
               icon: "ri-file-list-line",
-              properties: { design: { ...all } },
+              properties: {
+                design: { ...all },
+                settings: []
+              },
             },
           ],
         },
@@ -106,7 +180,20 @@ export default {
           description: "A basic html button that is ready for styling",
           icon: "ri-radio-button-fill",
           children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: {
+              ...all
+            },
+            settings: [
+              { label: "Text", key: "text", control: Input },
+              {
+                label: "Disabled",
+                key: "disabled",
+                valueType: "checked",
+                control: Checkbox,
+              },
+            ]
+          },
         },
         {
           _component: "@budibase/standard-components/icon",
@@ -225,4 +312,4 @@ export default {
       ],
     },
   ],
-}
\ No newline at end of file
+}
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 6795a01e57..f9c800489e 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -23,35 +23,10 @@
 		"name": "Button",
 		"description": "an html <button />",
 		"props": {
-			"contentText": {
-				"type": "string",
-				"default": "Button"
-			},
+			"text": "string",
 			"className": "string",
 			"disabled": "bool",
-			"onClick": "event",
-			"background": "string",
-			"color": "string",
-			"border": "string",
-			"padding": "string",
-			"hoverColor": "string",
-			"hoverBackground": "string",
-			"hoverBorder": "string",
-			"fontFamily": {
-				"type": "options",
-				"default": "initial",
-				"styleBindingProperty": "font-family",
-				"options": [
-					"initial",
-					"Times New Roman",	
-					"Georgia",
-					"Arial",
-					"Arial Black",	
-					"Comic Sans MS",
-					"Impact",	
-					"Lucida Sans Unicode"
-				]
-			}
+			"onClick": "event"
 		},
 		"tags": [
 			"layout"
@@ -167,58 +142,7 @@
 		"children": false,
 		"props": {
 			"text": "string",
-			"color": "string",
-			"fontFamily": {
-				"type": "options",
-				"default": "initial",
-				"styleBindingProperty": "font-family",
-				"options": [
-					"initial",
-					"Times New Roman",	
-					"Georgia",
-					"Arial",
-					"Arial Black",	
-					"Comic Sans MS",
-					"Impact",	
-					"Lucida Sans Unicode"
-				]
-			},
-			"fontSize": "string",			
-			"textAlign": {
-				"type": "options",
-				"default": "inline",
-				"options": [
-					"left",
-					"center",
-					"right"
-				]
-			},
-			"verticalAlign": {
-				"type": "options",
-				"default": "inline",
-				"options": [
-					"top",
-					"middle",
-					"bottom"
-				]
-			},
-			"formattingTag": {
-				"type": "options",
-				"default": "none",
-				"options": [
-					"none",
-					"<b> - bold",
-					"<strong> - important",
-					"<i> - italic",
-					"<em> - emphasized",
-					"<mark> - marked text",
-					"<small> - small",
-					"<del> - deleted",
-					"<ins> - inserted",
-					"<sub> - subscript",
-					"<sup> - superscript"
-				]
-			}
+			"type": {"type": "string", "default": "none"}
 		},
 		"tags": [
 			"div",
@@ -230,6 +154,7 @@
 		"description": "A component that allows the user to input text.",
 		"props": {
 			"label": "string",
+			"type": "string",
 			"value": "string",
 			"onchange": "event"
 		}
@@ -383,27 +308,6 @@
 					"summary"
 				],
 				"default": "div"
-			},
-			"backgroundColor": "string",
-			"color": "string",
-			"height": "string",
-			"width": "string",
-			"borderWidth": "string",
-			"borderColor": "string",
-			"borderStyle": {
-				"type": "options",
-				"options": [
-					"none",
-					"solid",
-					"dotted",
-					"dashed",
-					"double",
-					"groove",
-					"ridge",
-					"inset",
-					"outset"
-				],
-				"default": "none"
 			}
 		},		
 		"container": true,
@@ -430,21 +334,6 @@
 					"h5",
 					"h6"
 				]
-			},
-			"fontFamily": {
-				"type": "options",
-				"default": "initial",
-				"styleBindingProperty": "font-family",
-				"options": [
-					"initial",
-					"Times New Roman",	
-					"Georgia",
-					"Arial",
-					"Arial Black",	
-					"Comic Sans MS",
-					"Impact",	
-					"Lucida Sans Unicode"
-				]
 			}
 		},
 		"tags": []
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 60c022f4ea..159c6776b0 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -1,58 +1,15 @@
 <script>
-  import { cssVars, createClasses } from "./cssVars"
-  import { buildStyle } from "./buildStyle"
   export let className = "default"
   export let disabled = false
   export let text
   export let onClick
-  export let background
-  export let color
-  export let border
-  export let padding
-  export let hoverColor
-  export let hoverBackground
-  export let hoverBorder
-  export let fontFamily
 
   export let _bb
   let theButton
-  let cssVariables
-  let buttonStyles
-
-  let customHoverColorClass
-  let customHoverBorderClass
-  let customHoverBackClass
-
-  let customClasses = ""
 
   $: if (_bb.props._children && _bb.props._children.length > 0)
     theButton && _bb.attachChildren(theButton)
 
-  $: {
-    cssVariables = {
-      hoverColor,
-      hoverBorder,
-      hoverBackground,
-      background,
-      color,
-      border,
-    }
-
-    buttonStyles = buildStyle({
-      padding,
-      "font-family": fontFamily,
-    })
-
-    customClasses = createClasses({
-      hoverColor,
-      hoverBorder,
-      hoverBackground,
-      background,
-      border,
-      color,
-    })
-  }
-
   const clickHandler = () => {
     _bb.call(onClick)
   }
@@ -60,13 +17,12 @@
 
 <button
   bind:this={theButton}
-  use:cssVars={cssVariables}
   class="{className}
-  {customClasses}"
   disabled={disabled || false}
-  on:click={clickHandler}
-  style={buttonStyles}>
-  {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
+  on:click={clickHandler}>
+  {#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 099051c7b2..2c07ec0abe 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -4,30 +4,12 @@
   export let className = ""
   export let onLoad
   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
   export let _bb
 
   let containerElement
   let hasLoaded
   let currentChildren
 
-  $: cssVariables = {
-    backgroundColor,
-    color,
-    height,
-    width,
-    borderWidth,
-    borderColor,
-    borderStyle,
-  }
-  $: classes = `${createClasses(cssVariables)} ${className}`
-
   $: {
     if (containerElement) {
       _bb.attachChildren(containerElement)
@@ -40,95 +22,29 @@
 </script>
 
 {#if type === 'div'}
-  <div
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <div bind:this={containerElement} />
 {:else if type === 'header'}
-  <header
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <header bind:this={containerElement} />
 {:else if type === 'main'}
-  <main
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <main bind:this={containerElement} />
 {:else if type === 'footer'}
-  <footer
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <footer bind:this={containerElement} />
 {:else if type === 'aside'}
-  <aside
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <aside bind:this={containerElement} />
 {:else if type === 'summary'}
-  <summary
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <summary bind:this={containerElement} />
 {:else if type === 'details'}
-  <details
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <details bind:this={containerElement} />
 {:else if type === 'article'}
-  <article
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <article bind:this={containerElement} />
 {:else if type === 'nav'}
-  <nav
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <nav bind:this={containerElement} />
 {:else if type === 'mark'}
-  <mark
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <mark bind:this={containerElement} />
 {:else if type === 'figure'}
-  <figure
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <figure bind:this={containerElement} />
 {:else if type === 'figcaption'}
-  <figcaption
-    class={classes}
-    bind:this={containerElement}
-    use:cssVars={cssVariables} />
+  <figcaption bind:this={containerElement} />
 {:else if type === 'paragraph'}
-  <p class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
+  <p bind:this={containerElement} />
 {/if}
-
-<style>
-  .backgroundColor {
-    background-color: var(--backgroundColor);
-  }
-
-  .color {
-    color: var(--color);
-  }
-
-  .height {
-    height: var(--height);
-  }
-
-  .width {
-    width: var(--width);
-  }
-
-  .borderColor {
-    border-color: var(--borderColor);
-  }
-
-  .borderWidth {
-    border-width: var(--borderWidth);
-  }
-
-  .borderStyle {
-    border-style: var(--borderStyle);
-  }
-</style>
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 4bbb9d0b36..4760ae05db 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -2,27 +2,25 @@
   import { buildStyle } from "./buildStyle.js"
   export let className = ""
   export let type
-  export let _bb
   export let text = ""
-  export let fontFamily = ""
-  export let color = ""
+
+  export let _bb
 
   let containerElement
 
   $: containerElement && !text && _bb.attachChildren(containerElement)
-  $: style = buildStyle({ "font-family": fontFamily, color })
 </script>
 
 {#if type === 'h1'}
-  <h1 class={className} {style} bind:this={containerElement}>{text}</h1>
+  <h1 class={className} bind:this={containerElement}>{text}</h1>
 {:else if type === 'h2'}
-  <h2 class={className} {style} bind:this={containerElement}>{text}</h2>
+  <h2 class={className} bind:this={containerElement}>{text}</h2>
 {:else if type === 'h3'}
-  <h3 class={className} {style} bind:this={containerElement}>{text}</h3>
+  <h3 class={className} bind:this={containerElement}>{text}</h3>
 {:else if type === 'h4'}
-  <h4 class={className} {style} bind:this={containerElement}>{text}</h4>
+  <h4 class={className} bind:this={containerElement}>{text}</h4>
 {:else if type === 'h5'}
-  <h5 class={className} {style} bind:this={containerElement}>{text}</h5>
+  <h5 class={className} bind:this={containerElement}>{text}</h5>
 {:else if type === 'h6'}
-  <h6 class={className} {style} bind:this={containerElement}>{text}</h6>
+  <h6 class={className} bind:this={containerElement}>{text}</h6>
 {/if}
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index b6d3c159e9..96fc09e025 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -4,45 +4,35 @@
   export let text = ""
   export let className = ""
 
-  export let formattingTag = ""
-
-  export let fontFamily = ""
-  export let fontSize = "1em"
-  export let textAlign = ""
-  export let verticalAlign = ""
-  export let color = ""
+  export let type = ""
 
   export let _bb
 
-  const isTag = tag => (formattingTag || "").indexOf(tag) > -1
-
-  $: style = buildStyle({
-    "font-size": fontSize,
-    "font-family": fontFamily,
-    color,
-  })
+  const isTag = tag => type === tag
 </script>
 
 {#if isTag('none')}
-  <span {style}>{text}</span>
-{:else if isTag('<b>')}
-  <b class={className} {style}>{text}</b>
-{:else if isTag('<strong>')}
-  <strong class={className} {style}>{text}</strong>
-{:else if isTag('<i>')}
-  <i class={className} {style}>{text}</i>
-{:else if isTag('<em>')}
-  <em class={className} {style}>{text}</em>
-{:else if isTag('<mark>')}
-  <mark class={className} {style}>{text}</mark>
-{:else if isTag('<small>')}
-  <small class={className} {style}>{text}</small>
-{:else if isTag('<del>')}
-  <del class={className} {style}>{text}</del>
-{:else if isTag('<ins>')}
-  <ins class={className} {style}>{text}</ins>
-{:else if isTag('<sub>')}
-  <sub class={className} {style}>{text}</sub>
-{:else if isTag('<sup>')}
-  <sup class={className} {style}>{text}</sup>
-{:else}{text}{/if}
+  <span>{text}</span>
+{:else if isTag('bold')}
+  <b class={className}>{text}</b>
+{:else if isTag('strong')}
+  <strong class={className}>{text}</strong>
+{:else if isTag('italic')}
+  <i class={className}>{text}</i>
+{:else if isTag('emphasis')}
+  <em class={className}>{text}</em>
+{:else if isTag('mark')}
+  <mark class={className}>{text}</mark>
+{:else if isTag('small')}
+  <small class={className}>{text}</small>
+{:else if isTag('del')}
+  <del class={className}>{text}</del>
+{:else if isTag('ins')}
+  <ins class={className}>{text}</ins>
+{:else if isTag('sub')}
+  <sub class={className}>{text}</sub>
+{:else if isTag('sup')}
+  <sup class={className}>{text}</sup>
+{:else}
+  <span>{text}</span>
+{/if}

From 017ac7aced1de768a943e0897eeadf118508aa1a Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 20 May 2020 11:55:25 +0100
Subject: [PATCH 10/16] Settings, Tidyup and Refactor

---
 .../ComponentPropertiesPanel.svelte           | 12 ++--
 .../userInterface/ComponentsHierarchy.svelte  |  1 -
 .../ComponentsHierarchyChildren.svelte        |  1 -
 .../userInterface/DesignView.svelte           | 26 +++++---
 .../userInterface/PropertyControl.svelte      | 12 ++--
 .../userInterface/PropertyGroup.svelte        | 14 ++--
 .../userInterface/SettingsView.svelte         | 34 ++++++----
 .../userInterface/propertyCategories.js       | 66 +++++++++----------
 .../userInterface/temporaryPanelStructure.js  | 18 ++++-
 packages/standard-components/src/Link.svelte  | 38 +----------
 10 files changed, 109 insertions(+), 113 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index b1b07c514e..507d04c356 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -32,11 +32,13 @@
   $: components = $store.components
   $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components[componentInstance._component]
-  $: componentPropDefinition = flattenedPanel.find(
-    //use for getting controls for each component property
-    c => c._component === componentInstance._component
-  )
-  $: panelDefinition = componentPropDefinition
+  $: componentPropDefinition =
+    flattenedPanel.find(
+      //use for getting controls for each component property
+      c => c._component === componentInstance._component
+    ) || {}
+
+  $: panelDefinition = componentPropDefinition.properties
     ? componentPropDefinition.properties[selectedCategory.value]
     : {}
 
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 31ada23230..56b0af8814 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -45,7 +45,6 @@
   }
 
   const changeScreen = screen => {
-    debugger
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
   }
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 36d401f500..c7b426b02b 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -37,7 +37,6 @@
 
   const selectComponent = component => {
     // Set current component
-    debugger
     store.selectComponent(component)
 
     // Get ID path
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 612def10b0..4b505420c6 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -33,14 +33,20 @@
   </div>
 
   <div class="design-view-property-groups">
-    {#each propertyGroupNames as groupName}
-      <PropertyGroup
-        name={groupName}
-        properties={getProperties(groupName)}
-        {onStyleChanged}
-        {componentDefinition}
-        {componentInstance} />
-    {/each}
+    {#if propertyGroupNames.length > 0}
+      {#each propertyGroupNames as groupName}
+        <PropertyGroup
+          name={groupName}
+          properties={getProperties(groupName)}
+          {onStyleChanged}
+          {componentDefinition}
+          {componentInstance} />
+      {/each}
+    {:else}
+      <div class="no-design">
+        <span>This component does not have any design properties</span>
+      </div>
+    {/if}
   </div>
 </div>
 
@@ -58,4 +64,8 @@
   .design-view-property-groups {
     flex: 1;
   }
+
+  .no-design {
+    text-align: center;
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 99d91fcbd8..600005b5b6 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -5,18 +5,20 @@
   export let control = null
   export let key = ""
   export let value = ""
-  export let valueType = ""
   export let props = {}
   export let onChange = () => {}
 
   function handleChange(key, v) {
-    !!v.target
-      ? onChange(name, key, valueType ? v.target[valueType] : v.target.value)
-      : onChange(name, key, v)
+    if (v.target) {
+      let val = props.valueType ? v.target[props.valueType] : v.target.value
+      onChange(key, val)
+    } else {
+      onChange(key, v)
+    }
   }
 
   const handleValueType = value =>
-    valueType ? { [valueType]: value } : { value }
+    props.valueType ? { [props.valueType]: value } : { value }
 </script>
 
 <div class="property-control">
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index e1e3a98980..d15df62545 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -11,12 +11,6 @@
 
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
-  function onChange(key, v) {
-    !!v.target
-      ? onStyleChanged(name, key, v.target.value)
-      : onStyleChanged(name, key, v)
-  }
-
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
@@ -33,10 +27,10 @@
       <PropertyControl
         label={props.label}
         control={props.control}
-        key={props.cssKey}
-        value={componentInstance['_styles'][props.cssKey]}
-        onChange={onStyleChanged}
-        props={{ ...excludeProps(props, ['control']) }} />
+        key={props.key}
+        value={componentInstance['_styles'][props.key]}
+        onChange={(key, value) => onStyleChanged(name, key, value)}
+        props={{ ...excludeProps(props, ['control', 'label']) }} />
     {/each}
   </div>
 </div>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index fb017f47db..c945f90bdd 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -15,14 +15,26 @@
   }
 </script>
 
-{#each panelDefinition as definition}
-  {#if propExistsOnComponentDef(definition.key)}
-    <PropertyControl
-      control={definition.control}
-      label={definition.label}
-      key={definition.key}
-      value={componentInstance[definition.key]}
-      {onChange}
-      props={{ ...excludeProps(definition, ['control']) }} />
-  {/if}
-{/each}
+{#if panelDefinition.length > 0}
+  {#each panelDefinition as definition}
+    {#if propExistsOnComponentDef(definition.key)}
+      <PropertyControl
+        control={definition.control}
+        label={definition.label}
+        key={definition.key}
+        value={componentInstance[definition.key]}
+        {onChange}
+        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+    {/if}
+  {/each}
+{:else}
+  <div>
+    <span>This component does not have any settings.</span>
+  </div>
+{/if}
+
+<style>
+  div {
+    text-align: center;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 6f7feaae45..99cd42638b 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -8,7 +8,7 @@ import InputGroup from "../common/Inputs/InputGroup.svelte"
 export const layout = [
   {
     label: "Direction",
-    cssKey: "flex-direction",
+    key: "flex-direction",
     control: OptionSelect,
     initialValue: "columnReverse",
     options: [
@@ -18,11 +18,11 @@ export const layout = [
       { label: "column-reverse", value: "columnReverse" },
     ],
   },
-  { label: "Justify", cssKey: "justify-content", control: Input },
-  { label: "Align", cssKey: "align-items", control: Input },
+  { label: "Justify", key: "justify-content", control: Input },
+  { label: "Align", key: "align-items", control: Input },
   {
     label: "Wrap",
-    cssKey: "flex-wrap",
+    key: "flex-wrap",
     control: OptionSelect,
     options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
   },
@@ -37,26 +37,26 @@ const spacingMeta = [
 export const spacing = [
   {
     label: "Padding",
-    cssKey: "padding",
+    key: "padding",
     control: InputGroup,
     meta: spacingMeta,
   },
-  { label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta },
+  { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
 ]
 
 export const size = [
-  { label: "Width", cssKey: "width", control: Input },
-  { label: "Height", cssKey: "height", control: Input },
-  { label: "Min W", cssKey: "min-width", control: Input },
-  { label: "Min H", cssKey: "min-height", control: Input },
-  { label: "Max W", cssKey: "max-width", control: Input },
-  { label: "Max H", cssKey: "max-height", control: Input },
+  { label: "Width", key: "width", control: Input },
+  { label: "Height", key: "height", control: Input },
+  { label: "Min W", key: "min-width", control: Input },
+  { label: "Min H", key: "min-height", control: Input },
+  { label: "Max W", key: "max-width", control: Input },
+  { label: "Max H", key: "max-height", control: Input },
 ]
 
 export const position = [
   {
     label: "Position",
-    cssKey: "position",
+    key: "position",
     control: OptionSelect,
     options: [
       { label: "static" },
@@ -71,7 +71,7 @@ export const position = [
 export const typography = [
   {
     label: "Font",
-    cssKey: "font-family",
+    key: "font-family",
     control: OptionSelect,
     options: [
       { label: "initial" },
@@ -87,7 +87,7 @@ export const typography = [
   },
   {
     label: "Weight",
-    cssKey: "font-weight",
+    key: "font-weight",
     control: OptionSelect,
     options: [
       { label: "normal" },
@@ -96,28 +96,28 @@ export const typography = [
       { label: "lighter" },
     ],
   },
-  { label: "size", cssKey: "font-size", control: Input },
-  { label: "Line H", cssKey: "line-height", control: Input },
+  { label: "size", key: "font-size", control: Input },
+  { label: "Line H", key: "line-height", control: Input },
   {
     label: "Color",
-    cssKey: "color",
+    key: "color",
     control: OptionSelect,
     options: ["black", "red", "white", "blue", "green"],
   },
   {
     label: "align",
-    cssKey: "text-align",
+    key: "text-align",
     control: OptionSelect,
     options: ["initial", "left", "right", "center", "justify"],
   }, //custom
-  { label: "transform", cssKey: "text-transform", control: Input }, //custom
-  { label: "style", cssKey: "font-style", control: Input }, //custom
+  { label: "transform", key: "text-transform", control: Input }, //custom
+  { label: "style", key: "font-style", control: Input }, //custom
 ]
 
 export const background = [
   {
     label: "Background",
-    cssKey: "background",
+    key: "background",
     control: OptionSelect,
     options: [
       { label: "white" },
@@ -127,26 +127,26 @@ export const background = [
       { label: "black" },
     ],
   },
-  { label: "Image", cssKey: "image", control: Input }, //custom
+  { label: "Image", key: "image", control: Input }, //custom
 ]
 
 export const border = [
-  { label: "Radius", cssKey: "border-radius", control: Input },
-  { label: "Width", cssKey: "border-width", control: Input }, //custom
-  { label: "Color", cssKey: "border-color", control: Input },
-  { label: "Style", cssKey: "border-style", control: Input },
+  { label: "Radius", key: "border-radius", control: Input },
+  { label: "Width", key: "border-width", control: Input }, //custom
+  { label: "Color", key: "border-color", control: Input },
+  { label: "Style", key: "border-style", control: Input },
 ]
 
 export const effects = [
-  { label: "Opacity", cssKey: "opacity", control: Input },
-  { label: "Rotate", cssKey: "transform", control: Input }, //needs special control
-  { label: "Shadow", cssKey: "box-shadow", control: Input },
+  { label: "Opacity", key: "opacity", control: Input },
+  { label: "Rotate", key: "transform", control: Input }, //needs special control
+  { label: "Shadow", key: "box-shadow", control: Input },
 ]
 
 export const transitions = [
-  { label: "Property", cssKey: "transition-property", control: Input },
-  { label: "Duration", cssKey: "transition-timing-function", control: Input },
-  { label: "Ease", cssKey: "transition-ease", control: Input },
+  { label: "Property", key: "transition-property", control: Input },
+  { label: "Duration", key: "transition-timing-function", control: Input },
+  { label: "Ease", key: "transition-ease", control: Input },
 ]
 
 export const all = {
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 449393b67e..58a8a2c674 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -201,7 +201,9 @@ export default {
           description: "A basic component for displaying icons",
           icon: "ri-sun-fill",
           children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+          },
         },
         {
           _component: "@budibase/standard-components/link",
@@ -209,7 +211,19 @@ export default {
           description: "A basic link component for internal and external links",
           icon: "ri-link",
           children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [
+              { label: "Text", key: "text", control: Input },
+              { label: "Url", key: "url", control: Input },
+              {
+                label: "Open New Tab",
+                key: "openInNewTab",
+                valueType: "checked",
+                control: Checkbox,
+              },
+            ],
+          },
         },
       ],
     },
diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte
index 0ac3d9f628..ef0b71d62e 100644
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@@ -4,11 +4,6 @@
   export let url = ""
   export let text = ""
   export let openInNewTab = false
-  export let color
-  export let hoverColor
-  export let underline = false
-  export let fontFamily
-  export let fontSize
 
   export let _bb
 
@@ -16,43 +11,12 @@
 
   $: anchorElement && !text && _bb.attachChildren(anchorElement)
   $: target = openInNewTab ? "_blank" : "_self"
-  $: cssVariables = {
-    hoverColor,
-    color,
-    textDecoration: underline ? "underline" : "none",
-    fontSize,
-    fontFamily,
-  }
-  $: classes = createClasses(cssVariables)
 </script>
 
-<a
-  href={url}
-  bind:this={anchorElement}
-  class={classes}
-  {target}
-  use:cssVars={cssVariables}>
-  {text}
-</a>
+<a href={url} bind:this={anchorElement} {target}>{text}</a>
 
 <style>
-  .color {
-    color: var(--color);
-  }
-
-  .hoverColor:hover {
-    color: var(--color);
-  }
-
   .textDecoration {
     text-decoration: var(--textDecoration);
   }
-
-  .fontSize {
-    font-size: var(--fontSize);
-  }
-
-  .fontFamily {
-    font-family: var(--fontFamily);
-  }
 </style>

From facd99f58a5c54c24b3f9b5ca671112c30fc2bda Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Thu, 21 May 2020 14:28:32 +0100
Subject: [PATCH 11/16] Stable property panel

---
 packages/builder/package.json                 |   3 +-
 .../builder/src/builderStore/generate_css.js  |   4 +-
 .../src/components/common/Colorpicker.svelte  | 136 ++++++++++++------
 .../common/Inputs/InputGroup.svelte           |  16 +--
 .../userInterface/PropertyControl.svelte      |  11 +-
 .../userInterface/SettingsView.svelte         |   3 +
 .../userInterface/propertyCategories.js       |  15 +-
 .../userInterface/temporaryPanelStructure.js  |   4 +-
 packages/server/builder/nano.min.css          |   1 -
 .../standard-components/src/Button.svelte     |   6 +-
 10 files changed, 122 insertions(+), 77 deletions(-)
 delete mode 100644 packages/server/builder/nano.min.css

diff --git a/packages/builder/package.json b/packages/builder/package.json
index d92f64ce17..4e639f2eeb 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -79,7 +79,8 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-url": "^2.2.2",
-    "svelte": "^3.0.0"
+    "svelte": "^3.0.0",
+    "svelte-color-picker": "^1.0.7"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
 }
diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index 279c800396..f592e250bd 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -121,7 +121,9 @@ export const generate_css = style => {
         return (str += `${key}: ${value};\n`)
       }
     } else if (Array.isArray(value)) {
-      return (str += `${key}: ${value.map(v => `${v}px`).join(" ")};\n`)
+      return (str += `${key}: ${value
+        .map(v => (!/px$/.test(v) ? `${v}px` : v))
+        .join(" ")};\n`)
     }
   }, "")
 
diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte
index 28ca92554d..0b52cebe5f 100644
--- a/packages/builder/src/components/common/Colorpicker.svelte
+++ b/packages/builder/src/components/common/Colorpicker.svelte
@@ -1,13 +1,78 @@
 <script>
-  import { onMount, beforeUpdate, afterUpdate } from "svelte"
+  import { onMount } from "svelte"
+  import { HsvPicker } from "svelte-color-picker"
 
-  export let value = null
-  export let onChange = () => {}
-  export let swatches = []
+  // export let initialValue = "#ffffff"
+  export let onChange = color => {}
+  export let open = false
+  let value = "#ffffff"
 
-  let picker
-  let cp = null
+  let _justMounted = true //see onColorChange
+  let pickerHeight = 275
+  let colorPreview
+  let pickerTopPosition = null
 
+  function rbgaToHexa({ r, g, b, a }) {
+    r = r.toString(16)
+    g = g.toString(16)
+    b = b.toString(16)
+    a = Math.round(a * 255).toString(16)
+
+    if (r.length == 1) r = "0" + r
+    if (g.length == 1) g = "0" + g
+    if (b.length == 1) b = "0" + b
+    if (a.length == 1) a = "0" + a
+
+    return "#" + r + g + b + a
+  }
+
+  function onColourChange(rgba) {
+    value = rbgaToHexa(rgba.detail)
+
+    //Hack: so that color change doesn't fire onMount
+    if (!_justMounted) {
+      // onChange(value)
+    }
+    _justMounted = false
+  }
+
+  function toggleColorpicker(isOpen) {
+    if (isOpen) {
+      const {
+        y: previewYPosition,
+        height: previewHeight,
+      } = colorPreview.getBoundingClientRect()
+
+      let wiggleRoom = window.innerHeight - previewYPosition
+      let displayTop = wiggleRoom < pickerHeight
+
+      if (displayTop) {
+        pickerTopPosition = previewYPosition - (pickerHeight - window.scrollY)
+      } else {
+        pickerTopPosition = null
+      }
+    }
+    open = isOpen
+  }
+
+  $: style = open ? "display: block;" : "display: none;"
+  $: pickerStyle = pickerTopPosition ? `top: ${pickerTopPosition}px;` : ""
+</script>
+
+<div
+  bind:this={colorPreview}
+  on:click={() => toggleColorpicker(true)}
+  class="color-preview"
+  style={`background: ${value}`} />
+
+<div class="colorpicker" {style}>
+  <div class="overlay" on:click|self={() => toggleColorpicker(false)} />
+  <div class="cp" style={pickerStyle}>
+    <HsvPicker on:colorChange={onColourChange} startColor={value} />
+  </div>
+</div>
+<!-- 
+OLD LOCAL STORAGE OPTIONS. INCLUDING FOR ADDING LATER
   function getRecentColors() {
     let colorStore = localStorage.getItem("bb:recentColors")
     if (!!colorStore) {
@@ -25,44 +90,27 @@
       picker.addSwatch(color)
       localStorage.setItem("bb:recentColors", JSON.stringify(swatches))
     }
+  } -->
+
+<style>
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    /* background: rgba(5, 5, 5, 0.25); */
   }
 
-  function createPicker() {
-    picker = Pickr.create({
-      el: cp,
-      theme: "nano",
-      default: value || "#000000",
-
-      swatches,
-      closeWithKey: "Escape",
-
-      components: {
-        preview: true,
-        opacity: true,
-        hue: true,
-
-        interaction: {
-          hex: true,
-          rgba: true,
-          input: true,
-          save: true,
-        },
-      },
-    })
+  .cp {
+    position: absolute;
+    right: 25px;
   }
-
-  afterUpdate(() => {
-    picker.setColor(value)
-  })
-
-  onMount(() => {
-    getRecentColors()
-    createPicker()
-    return () => {
-      picker.destroyAndRemove()
-      picker = null
-    }
-  })
-</script>
-
-<div bind:this={cp} class="color-picker" />
+  .color-preview {
+    height: 30px;
+    width: 100%;
+    margin: 5px;
+    cursor: pointer;
+    border: 1px solid gainsboro;
+  }
+</style>
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 7976cabd55..7f6d20337b 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -3,13 +3,15 @@
 
   export let meta = []
   export let label = ""
-  export let values = []
+  export let value = [0, 0, 0, 0]
   export let type = "number"
   export let onChange = () => {}
 
-  let _values = values.map(v => v)
-
-  // $: onChange(_values)
+  function handleChange(val, idx) {
+    value.splice(idx, 1, val)
+    value = value
+    onChange(value)
+  }
 </script>
 
 <div class="input-container">
@@ -19,8 +21,8 @@
       <input
         {type}
         placeholder={placeholder || ''}
-        value={values[i]}
-        on:input={e => (_values[i] = e.target.value)} />
+        value={value[i] === 0 ? '' : value[i]}
+        on:change={e => handleChange(e.target.value || 0, i)} />
     {/each}
   </div>
 </div>
@@ -36,8 +38,6 @@
 
   .inputs {
     flex: 1;
-    /* display: flex;
-    justify-content: space-between; */
   }
 
   input {
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 600005b5b6..ff0d332a76 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -4,21 +4,22 @@
   export let label = ""
   export let control = null
   export let key = ""
-  export let value = ""
+  export let value
   export let props = {}
   export let onChange = () => {}
 
   function handleChange(key, v) {
     if (v.target) {
-      let val = props.valueType ? v.target[props.valueType] : v.target.value
+      let val = props.valueKey ? v.target[props.valueKey] : v.target.value
       onChange(key, val)
     } else {
       onChange(key, v)
     }
   }
 
-  const handleValueType = value =>
-    props.valueType ? { [props.valueType]: value } : { value }
+  //Incase the component has a different value key name
+  const handlevalueKey = value =>
+    props.valueKey ? { [props.valueKey]: value } : { value }
 </script>
 
 <div class="property-control">
@@ -26,7 +27,7 @@
   <div class="control">
     <svelte:component
       this={control}
-      {...handleValueType(value)}
+      {...handlevalueKey(value)}
       on:change={val => handleChange(key, val)}
       onChange={val => handleChange(key, val)}
       {...props} />
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index c945f90bdd..56ede7bc91 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -1,6 +1,7 @@
 <script>
   import PropertyControl from "./PropertyControl.svelte"
   import InputGroup from "../common/Inputs/InputGroup.svelte"
+  import Colorpicker from "../common/Colorpicker.svelte"
   import { excludeProps } from "./propertyCategories.js"
 
   export let panelDefinition = []
@@ -15,6 +16,8 @@
   }
 </script>
 
+<Colorpicker />
+
 {#if panelDefinition.length > 0}
   {#each panelDefinition as definition}
     {#if propExistsOnComponentDef(definition.key)}
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 99cd42638b..0ee26d958e 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,6 +1,7 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
+import Colorpicker from "../common/Colorpicker.svelte"
 /*
   TODO: Allow for default values for all properties
 */
@@ -101,8 +102,7 @@ export const typography = [
   {
     label: "Color",
     key: "color",
-    control: OptionSelect,
-    options: ["black", "red", "white", "blue", "green"],
+    control: Colorpicker,
   },
   {
     label: "align",
@@ -118,14 +118,7 @@ export const background = [
   {
     label: "Background",
     key: "background",
-    control: OptionSelect,
-    options: [
-      { label: "white" },
-      { label: "red" },
-      { label: "blue" },
-      { label: "green" },
-      { label: "black" },
-    ],
+    control: Colorpicker,
   },
   { label: "Image", key: "image", control: Input }, //custom
 ]
@@ -133,7 +126,7 @@ export const background = [
 export const border = [
   { label: "Radius", key: "border-radius", control: Input },
   { label: "Width", key: "border-width", control: Input }, //custom
-  { label: "Color", key: "border-color", control: Input },
+  { label: "Color", key: "border-color", control: Colorpicker },
   { label: "Style", key: "border-style", control: Input },
 ]
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 58a8a2c674..9beca685db 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -189,7 +189,7 @@ export default {
               {
                 label: "Disabled",
                 key: "disabled",
-                valueType: "checked",
+                valueKey: "checked",
                 control: Checkbox,
               },
             ]
@@ -219,7 +219,7 @@ export default {
               {
                 label: "Open New Tab",
                 key: "openInNewTab",
-                valueType: "checked",
+                valueKey: "checked",
                 control: Checkbox,
               },
             ],
diff --git a/packages/server/builder/nano.min.css b/packages/server/builder/nano.min.css
deleted file mode 100644
index fb7e96080f..0000000000
--- a/packages/server/builder/nano.min.css
+++ /dev/null
@@ -1 +0,0 @@
-/*! Pickr 1.5.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{-webkit-filter:brightness(1.05);filter:brightness(1.05)}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{-webkit-filter:brightness(.975);filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{-webkit-filter:brightness(.925);filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:currentColor;width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,.25em}
\ No newline at end of file
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 159c6776b0..eac2150274 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -17,12 +17,10 @@
 
 <button
   bind:this={theButton}
-  class="{className}
+  class={className}
   disabled={disabled || false}
   on:click={clickHandler}>
-  {#if !_bb.props._children || _bb.props._children.length === 0}
-  {text}
-  {/if}
+  {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
 </button>
 
 <style>

From 54e7dba667e8482d8a85502d47a797bf556d6738 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 22 May 2020 10:42:02 +0100
Subject: [PATCH 12/16] Cleanup

---
 .../builder/src/components/userInterface/SettingsView.svelte    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 56ede7bc91..36b2ab9c75 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -16,8 +16,6 @@
   }
 </script>
 
-<Colorpicker />
-
 {#if panelDefinition.length > 0}
   {#each panelDefinition as definition}
     {#if propExistsOnComponentDef(definition.key)}

From 0a745edfe4d5009f608283c4b9de935f9efb1a01 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 22 May 2020 15:30:29 +0100
Subject: [PATCH 13/16] Change of structure for _styles

---
 packages/builder/src/builderStore/generate_css.js        | 6 ++++--
 .../userInterface/AppPreview/CurrentItemPreview.svelte   | 9 +++++++--
 .../src/components/userInterface/DesignView.svelte       | 6 +++---
 .../src/components/userInterface/PropertyGroup.svelte    | 1 +
 .../components/userInterface/pagesParsing/createProps.js | 4 ++--
 .../new/appDirectoryTemplate/pages/main/page.json        | 6 ++++--
 .../appDirectoryTemplate/pages/unauthenticated/page.json | 6 ++++--
 packages/cli/src/commands/new/page.template.json         | 6 ++++--
 8 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index f592e250bd..eb37cc07be 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -135,9 +135,11 @@ const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
 //USED IN MULTIPLE PLACES IN THE BUILDER STORE
 export const generate_screen_css = component_array => {
   let styles = ""
-  let emptyStyles = {}
+  let emptyStyles = { normal: {}, hover: {}, active: {}, selected: {} }
   for (let i = 0; i < component_array.length; i += 1) {
-    const { _styles, _id, _children } = component_array[i]
+    const { _styles, _id, _children, _component } = component_array[i]
+    // let [componentName] = _component.match(/[a-z]*$/)
+    debugger
     const cssString = generate_css(_styles || emptyStyles) || ""
     if (cssString) {
       styles += apply_class(_id, "element", cssString)
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 18afb123ef..7303c3b20b 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -60,7 +60,7 @@
               _children: [
                 {
                   _component: "@budibase/standard-components/container",
-                  _styles: {},
+                  _styles: { normal: {}, hover: {}, active: {}, selected: {} },
                   _id: "__screenslot__text",
                   _code: "",
                   className: "",
@@ -69,7 +69,12 @@
                   _children: [
                     {
                       _component: "@budibase/standard-components/text",
-                      _styles: {},
+                      _styles: {
+                        normal: {},
+                        hover: {},
+                        active: {},
+                        selected: {},
+                      },
                       _id: "__screenslot__text_2",
                       _code: "",
                       text: "content",
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 4b505420c6..40aac9027a 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -7,7 +7,7 @@
   export let componentDefinition = {}
   export let onStyleChanged = () => {}
 
-  let selectedCategory = "desktop"
+  let selectedCategory = "normal"
 
   const getProperties = name => panelDefinition[name]
 
@@ -16,8 +16,7 @@
   }
 
   const buttonProps = [
-    { value: "desktop", text: "Desktop" },
-    { value: "mobile", text: "Mobile" },
+    { value: "normal", text: "Normal" },
     { value: "hover", text: "Hover" },
     { value: "active", text: "Active" },
     { value: "selected", text: "Selected" },
@@ -38,6 +37,7 @@
         <PropertyGroup
           name={groupName}
           properties={getProperties(groupName)}
+          styleCategory={selectedCategory}
           {onStyleChanged}
           {componentDefinition}
           {componentInstance} />
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index d15df62545..2d4ab6f29c 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -3,6 +3,7 @@
   import PropertyControl from "./PropertyControl.svelte"
 
   export let name = ""
+  export let styleCategory = "normal"
   export let properties = []
   export let componentInstance = {}
   export let onStyleChanged = () => {}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
index 99f67ccc80..de4de1c2a6 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
@@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
   const props = {
     _id: uuid(),
     _component: componentDefinition._component,
-    _styles: {},
+    _styles: { normal: {}, hover: {}, active: {}, selected: {} },
     _code: "",
   }
 
@@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => {
   }
 
   if (!props._styles) {
-    props._styles = {}
+    props._styles = { normal: {}, hover: {}, active: {}, selected: {} }
   }
 
   return props
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json
index 4f25934bba..af75ddec68 100644
--- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json
+++ b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json
@@ -9,8 +9,10 @@
 		"_id": 0,
 		"type": "div",
 		"_styles": {
-			"layout": {},
-			"position": {}
+			"normal": {},
+			"hover": {},
+			"active": {},
+			"selected": {}
 		},
 		"_code": ""
 	},
diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json
index 298d73e8b6..3452a6df55 100644
--- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json
+++ b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json
@@ -9,8 +9,10 @@
 		"_id": 1,
 		"type": "div",
 		"_styles": {
-			"layout": {},
-			"position": {}
+			"normal": {},
+			"hover": {},
+			"active": {},
+			"selected": {}
 		},
 		"_code": ""
 	},
diff --git a/packages/cli/src/commands/new/page.template.json b/packages/cli/src/commands/new/page.template.json
index 89a23a78e5..6f02b78c62 100644
--- a/packages/cli/src/commands/new/page.template.json
+++ b/packages/cli/src/commands/new/page.template.json
@@ -9,8 +9,10 @@
 		"_id": 0,
 		"type": "div",
 		"_styles": {
-			"layout": {},
-			"position": {}
+			"normal": {},
+			"hover": {},
+			"active": {},
+			"selected": {}
 		},
 		"_code": ""
 	},

From deab1adc3183dea9757f3888f4e9ad3c71147670 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 25 May 2020 15:23:56 +0100
Subject: [PATCH 14/16] Completed CSS Selector Styling

---
 .../builder/src/builderStore/generate_css.js  | 153 +++---------------
 .../builder/src/builderStore/store/index.js   |   4 +-
 .../common/Inputs/InputGroup.svelte           |   2 +-
 .../AppPreview/CurrentItemPreview.svelte      |   8 +
 .../AppPreview/iframeTemplate.js              |   3 +-
 .../userInterface/PropertyControl.svelte      |   8 +-
 .../userInterface/PropertyGroup.svelte        |   5 +-
 .../userInterface/propertyCategories.js       |  32 ++--
 packages/builder/src/index.html               |   1 -
 .../src/render/prepareRenderComponent.js      |   3 +-
 10 files changed, 65 insertions(+), 154 deletions(-)

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index eb37cc07be..abe6517a73 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -1,119 +1,21 @@
-import { pipe } from "components/common/core"
-import { filter, map, reduce, toPairs } from "lodash/fp"
-
-const self = n => n
-const join_with = delimiter => a => a.join(delimiter)
-const empty_string_to_unset = s => (s.length ? s : "0")
-const add_suffix_if_number = suffix => s => {
-  try {
-    if (isNaN(s) || isNaN(parseFloat(s))) return s
-  } catch (_) {
-    return s
+export const generate_screen_css = component_arr => {
+  let styles = ""
+  for (const { _styles, _id, _children, _component } of component_arr) {
+    let [componentName] = _component.match(/[a-z]*$/)
+    Object.keys(_styles).forEach(selector => {
+      const cssString = generate_css(_styles[selector])
+      if (cssString) {
+        styles += apply_class(_id, componentName, cssString, selector)
+      }
+    })
+    if (_children && _children.length) {
+      styles += generate_screen_css(_children) + "\n"
+    }
   }
-  return s + suffix
+  return styles.trim()
 }
 
-export const make_margin = values =>
-  pipe(values, [
-    map(empty_string_to_unset),
-    map(add_suffix_if_number("px")),
-    join_with(" "),
-  ])
-
-const css_map = {
-  templaterows: {
-    name: "grid-template-rows",
-    generate: self,
-  },
-  templatecolumns: {
-    name: "grid-template-columns",
-    generate: self,
-  },
-  align: {
-    name: "align-items",
-    generate: self,
-  },
-  justify: {
-    name: "justify-content",
-    generate: self,
-  },
-  direction: {
-    name: "flex-direction",
-    generate: self,
-  },
-  gridarea: {
-    name: "grid-area",
-    generate: make_margin,
-  },
-  gap: {
-    name: "grid-gap",
-    generate: n => `${n}px`,
-  },
-  columnstart: {
-    name: "grid-column-start",
-    generate: self,
-  },
-  columnend: {
-    name: "grid-column-end",
-    generate: self,
-  },
-  rowstart: {
-    name: "grid-row-start",
-    generate: self,
-  },
-  rowend: {
-    name: "grid-row-end",
-    generate: self,
-  },
-  padding: {
-    name: "padding",
-    generate: make_margin,
-  },
-  margin: {
-    name: "margin",
-    generate: make_margin,
-  },
-  zindex: {
-    name: "z-index",
-    generate: self,
-  },
-  height: {
-    name: "height",
-    generate: self,
-  },
-  width: {
-    name: "width",
-    generate: self,
-  },
-}
-
-//Only used here
-export const generate_rule = ([name, values]) =>
-  `${css_map[name].name}: ${css_map[name].generate(values)};`
-
-const handle_grid = (acc, [name, value]) => {
-  let tmp = []
-
-  if (name === "row" || name === "column") {
-    if (value[0]) tmp.push([`${name}start`, value[0]])
-    if (value[1]) tmp.push([`${name}end`, value[1]])
-    return acc.concat(tmp)
-  }
-
-  return acc.concat([[name, value]])
-}
-
-const object_to_css_string = [
-  toPairs,
-  reduce(handle_grid, []),
-  filter(v => (Array.isArray(v[1]) ? v[1].some(s => s.length) : v[1].length)),
-  map(generate_rule),
-  join_with("\n"),
-]
-
-//USED BY generate_screen_css
 export const generate_css = style => {
-  // let cssString = pipe(style, object_to_css_string)
   let cssString = Object.entries(style).reduce((str, [key, value]) => {
     //TODO Handle arrays and objects here also
     if (typeof value === "string") {
@@ -130,23 +32,12 @@ export const generate_css = style => {
   return (cssString || "").trim()
 }
 
-const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
-
-//USED IN MULTIPLE PLACES IN THE BUILDER STORE
-export const generate_screen_css = component_array => {
-  let styles = ""
-  let emptyStyles = { normal: {}, hover: {}, active: {}, selected: {} }
-  for (let i = 0; i < component_array.length; i += 1) {
-    const { _styles, _id, _children, _component } = component_array[i]
-    // let [componentName] = _component.match(/[a-z]*$/)
-    debugger
-    const cssString = generate_css(_styles || emptyStyles) || ""
-    if (cssString) {
-      styles += apply_class(_id, "element", cssString)
-    }
-    if (_children && _children.length) {
-      styles += generate_screen_css(_children) + "\n"
-    }
+const apply_class = (id, name = "element", styles, selector) => {
+  if (selector === "normal") {
+    return `.${name}-${id} {\n${styles}\n}`
+  } else {
+    let sel = selector === "selected" ? "::selection" : `:${selector}`
+    return `.${name}-${id}${sel} {\n${styles}\n}`
   }
-  return styles.trim()
-}
\ No newline at end of file
+}
+
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 7e108bbe09..f4d47064be 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -141,7 +141,6 @@ const _saveScreen = async (store, s, screen) => {
 }
 
 const _saveScreenApi = (screen, s) => {
-
   api
     .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
     .then(() => _savePage(s))
@@ -427,8 +426,7 @@ const setComponentStyle = store => (type, name, value) => {
     if (!state.currentComponentInfo._styles) {
       state.currentComponentInfo._styles = {}
     }
-    // state.currentComponentInfo._styles[type][name] = value
-    state.currentComponentInfo._styles[name] = value
+    state.currentComponentInfo._styles[type][name] = value
 
     state.currentPreviewItem._css = generate_screen_css([
       state.currentPreviewItem.props,
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 7f6d20337b..c4118aa289 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -21,7 +21,7 @@
       <input
         {type}
         placeholder={placeholder || ''}
-        value={value[i] === 0 ? '' : value[i]}
+        value={!value || value[i] === 0 ? '' : value[i]}
         on:change={e => handleChange(e.target.value || 0, i)} />
     {/each}
   </div>
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 7303c3b20b..b2ca1936d2 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -16,6 +16,11 @@
     return props
   }
 
+  const getComponentTypeName = component => {
+    let [componentName] = component._component.match(/[a-z]*$/)
+    return componentName || "element"
+  }
+
   $: iframe &&
     console.log(
       iframe.contentDocument.head.insertAdjacentHTML(
@@ -93,6 +98,8 @@
     appRootPath: "",
   }
 
+  $: selectedComponentType = getComponentTypeName($store.currentComponentInfo)
+
   $: selectedComponentId = $store.currentComponentInfo
     ? $store.currentComponentInfo._id
     : ""
@@ -107,6 +114,7 @@
       srcdoc={iframeTemplate({
         styles,
         stylesheetLinks,
+        selectedComponentType,
         selectedComponentId,
         frontendDefinition: JSON.stringify(frontendDefinition),
         currentPageFunctions: $store.currentPageFunctions,
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index c1cf4aab1f..dd2ca69dbb 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -1,6 +1,7 @@
 export default ({
   styles,
   stylesheetLinks,
+  selectedComponentType,
   selectedComponentId,
   frontendDefinition,
   currentPageFunctions,
@@ -11,7 +12,7 @@ export default ({
     <style>
       ${styles || ""}
 
-      .element-${selectedComponentId} {
+      .${selectedComponentType}-${selectedComponentId} {
         border: 2px solid #0055ff; 
       }
 
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index ff0d332a76..cd1bad35f7 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -17,9 +17,15 @@
     }
   }
 
+  const safeValue = () => {
+    return value === undefined && props.defaultValue !== undefined
+      ? props.defaultValue
+      : value
+  }
+
   //Incase the component has a different value key name
   const handlevalueKey = value =>
-    props.valueKey ? { [props.valueKey]: value } : { value }
+    props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
 
 <div class="property-control">
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 2d4ab6f29c..240618a4c7 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -13,6 +13,7 @@
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
+  $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
 <div class="property-group-container">
@@ -29,8 +30,8 @@
         label={props.label}
         control={props.control}
         key={props.key}
-        value={componentInstance['_styles'][props.key]}
-        onChange={(key, value) => onStyleChanged(name, key, value)}
+        value={style[props.key]}
+        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
         props={{ ...excludeProps(props, ['control', 'label']) }} />
     {/each}
   </div>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 0ee26d958e..ef60ba727c 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,7 +1,7 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import InputGroup from "../common/Inputs/InputGroup.svelte"
-import Colorpicker from "../common/Colorpicker.svelte"
+// import Colorpicker from "../common/Colorpicker.svelte"
 /*
   TODO: Allow for default values for all properties
 */
@@ -74,15 +74,16 @@ export const typography = [
     label: "Font",
     key: "font-family",
     control: OptionSelect,
+    defaultValue: "initial",
     options: [
-      { label: "initial" },
-      { label: "Times New Roman" },
-      { label: "Georgia" },
-      { label: "Arial" },
-      { label: "Arial Black" },
-      { label: "Comic Sans MS" },
-      { label: "Impact" },
-      { label: "Lucida Sans Unicode" },
+      "initial",
+      "Times New Roman",
+      "Georgia",
+      "Arial",
+      "Arial Black",
+      "Comic Sans MS",
+      "Impact",
+      "Lucida Sans Unicode",
     ],
     styleBindingProperty: "font-family",
   },
@@ -97,12 +98,13 @@ export const typography = [
       { label: "lighter" },
     ],
   },
-  { label: "size", key: "font-size", control: Input },
+  { label: "size", key: "font-size", defaultValue: "", control: Input },
   { label: "Line H", key: "line-height", control: Input },
   {
     label: "Color",
     key: "color",
-    control: Colorpicker,
+    control: OptionSelect,
+    options: ["black", "white", "red", "blue", "green"],
   },
   {
     label: "align",
@@ -118,7 +120,8 @@ export const background = [
   {
     label: "Background",
     key: "background",
-    control: Colorpicker,
+    control: OptionSelect,
+    options: ["black", "white", "red", "blue", "green"],
   },
   { label: "Image", key: "image", control: Input }, //custom
 ]
@@ -126,7 +129,10 @@ export const background = [
 export const border = [
   { label: "Radius", key: "border-radius", control: Input },
   { label: "Width", key: "border-width", control: Input }, //custom
-  { label: "Color", key: "border-color", control: Colorpicker },
+  {
+    label: "Color", key: "border-color", control: OptionSelect,
+    options: ["black", "white", "red", "blue", "green"]
+  },
   { label: "Style", key: "border-style", control: Input },
 ]
 
diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html
index 9fff40d0b6..c878c3d67a 100644
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@@ -15,7 +15,6 @@
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>
 	<link rel='stylesheet' href="/_builder/uikit.min.css">
-	<link rel='stylesheet' href="/_builder/nano.min.css">
 </head>
 
 <body id="app">
diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js
index 91001018a7..a7c3e6ddcf 100644
--- a/packages/client/src/render/prepareRenderComponent.js
+++ b/packages/client/src/render/prepareRenderComponent.js
@@ -35,8 +35,9 @@ export const prepareRenderComponent = ({
       thisNode.rootElement =
         htmlElement.children[htmlElement.children.length - 1]
 
+      let [componentName] = props._component.match(/[a-z]*$/)
       if (props._id && thisNode.rootElement) {
-        thisNode.rootElement.classList.add(`element-${props._id}`)
+        thisNode.rootElement.classList.add(`${componentName}-${props._id}`)
       }
     }
   }

From cff58f6a2d53611e8b037947582057113c8deead Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 26 May 2020 10:19:04 +0100
Subject: [PATCH 15/16] linter formatting

---
 .../builder/src/builderStore/generate_css.js  |  1 -
 .../AppPreview/CurrentItemPreview.svelte      |  8 +++----
 .../userInterface/ComponentsHierarchy.svelte  | 23 ++++++++-----------
 .../ComponentsHierarchyChildren.svelte        |  6 +----
 .../userInterface/propertyCategories.js       |  6 +++--
 .../userInterface/temporaryPanelStructure.js  |  6 ++---
 .../[application]/backend/_layout.svelte      | 14 +++++------
 7 files changed, 29 insertions(+), 35 deletions(-)

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index abe6517a73..093b43337c 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -40,4 +40,3 @@ const apply_class = (id, name = "element", styles, selector) => {
     return `.${name}-${id}${sel} {\n${styles}\n}`
   }
 }
-
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index b2ca1936d2..27a4851c8d 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -40,10 +40,10 @@
     styles = styles
   }
 
-  $: stylesheetLinks = pipe(
-    $store.pages.stylesheets,
-    [map(s => `<link rel="stylesheet" href="${s}"/>`), join("\n")]
-  )
+  $: stylesheetLinks = pipe($store.pages.stylesheets, [
+    map(s => `<link rel="stylesheet" href="${s}"/>`),
+    join("\n"),
+  ])
 
   $: screensExist =
     $store.currentPreviewItem._screens &&
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index bd733fb245..26929fcdce 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -16,15 +16,12 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(
-      name,
-      [
-        trimCharsStart("./"),
-        trimCharsStart("~/"),
-        trimCharsStart("../"),
-        trimChars(" "),
-      ]
-    )
+    pipe(name, [
+      trimCharsStart("./"),
+      trimCharsStart("~/"),
+      trimCharsStart("../"),
+      trimChars(" "),
+    ])
 
   const lastPartOfName = c => {
     if (!c) return ""
@@ -34,10 +31,10 @@
 
   const isComponentSelected = (current, comp) => current === comp
 
-  $: _screens = pipe(
-    screens,
-    [map(c => ({ component: c, title: lastPartOfName(c) })), sortBy("title")]
-  )
+  $: _screens = pipe(screens, [
+    map(c => ({ component: c, title: lastPartOfName(c) })),
+    sortBy("title"),
+  ])
 
   const confirmDeleteComponent = component => {
     componentToDelete = component
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index c7b426b02b..eafc1834d0 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -22,11 +22,7 @@
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
-  const get_capitalised_name = name =>
-    pipe(
-      name,
-      [get_name, capitalise]
-    )
+  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
 
   const moveDownComponent = component => {
     const c = component
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index ef60ba727c..07101779a5 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -130,8 +130,10 @@ export const border = [
   { label: "Radius", key: "border-radius", control: Input },
   { label: "Width", key: "border-width", control: Input }, //custom
   {
-    label: "Color", key: "border-color", control: OptionSelect,
-    options: ["black", "white", "red", "blue", "green"]
+    label: "Color",
+    key: "border-color",
+    control: OptionSelect,
+    options: ["black", "white", "red", "blue", "green"],
   },
   { label: "Style", key: "border-style", control: Input },
 ]
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 9beca685db..ae6a658e7a 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -169,7 +169,7 @@ export default {
               icon: "ri-file-list-line",
               properties: {
                 design: { ...all },
-                settings: []
+                settings: [],
               },
             },
           ],
@@ -182,7 +182,7 @@ export default {
           children: [],
           properties: {
             design: {
-              ...all
+              ...all,
             },
             settings: [
               { label: "Text", key: "text", control: Input },
@@ -192,7 +192,7 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
-            ]
+            ],
           },
         },
         {
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index 4a4a715534..069e720b17 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -38,12 +38,12 @@
     height: 100%;
   }
 
-@media only screen and (min-width: 1800px) {
-  .nav {
-    overflow: auto;
-    flex: 0 1 auto;
-    width: 300px;
-    height: 100%;
+  @media only screen and (min-width: 1800px) {
+    .nav {
+      overflow: auto;
+      flex: 0 1 auto;
+      width: 300px;
+      height: 100%;
+    }
   }
-}
 </style>

From 9dc65eef9882841f745dda28032ee3099dfdc529 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 26 May 2020 14:27:33 +0100
Subject: [PATCH 16/16] New jest tests for generate-css

---
 .../builder/src/builderStore/generate_css.js  |  20 +-
 packages/builder/tests/generate_css.spec.js   | 331 ++----------------
 2 files changed, 49 insertions(+), 302 deletions(-)

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index 093b43337c..5826d4f824 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -23,16 +23,28 @@ export const generate_css = style => {
         return (str += `${key}: ${value};\n`)
       }
     } else if (Array.isArray(value)) {
-      return (str += `${key}: ${value
-        .map(v => (!/px$/.test(v) ? `${v}px` : v))
-        .join(" ")};\n`)
+      if (value.length > 0 && !value.every(v => v === "")) {
+        return (str += `${key}: ${value
+          .map(generate_array_styles)
+          .join(" ")};\n`)
+      }
     }
   }, "")
 
   return (cssString || "").trim()
 }
 
-const apply_class = (id, name = "element", styles, selector) => {
+export const generate_array_styles = item => {
+  let safeItem = item === "" ? 0 : item
+  let hasPx = new RegExp("px$")
+  if (!hasPx.test(safeItem)) {
+    return `${safeItem}px`
+  } else {
+    return safeItem
+  }
+}
+
+export const apply_class = (id, name = "element", styles, selector) => {
   if (selector === "normal") {
     return `.${name}-${id} {\n${styles}\n}`
   } else {
diff --git a/packages/builder/tests/generate_css.spec.js b/packages/builder/tests/generate_css.spec.js
index 5fa4a94db9..b2a7fca64d 100644
--- a/packages/builder/tests/generate_css.spec.js
+++ b/packages/builder/tests/generate_css.spec.js
@@ -1,320 +1,55 @@
 import {
   generate_css,
-  make_margin,
   generate_screen_css,
+  generate_array_styles
 } from "../src/builderStore/generate_css.js"
 
-describe("make_margin", () => {
-  test("it should generate a valid rule", () => {
-    expect(make_margin(["1", "1", "1", "1"])).toEqual("1px 1px 1px 1px")
-  })
-
-  test("empty values should output 0", () => {
-    expect(make_margin(["1", "1", "", ""])).toEqual("1px 1px 0px 0px")
-    expect(make_margin(["1", "", "", "1"])).toEqual("1px 0px 0px 1px")
-    expect(make_margin(["", "", "", ""])).toEqual("0px 0px 0px 0px")
-  })
-})
-
 describe("generate_css", () => {
-  test("it should generate a valid css rule: grid-area", () => {
-    expect(generate_css({ layout: { gridarea: ["", "", "", ""] } })).toEqual({
-      layout: "",
-      position: "",
-    })
+
+  test("Check how partially empty arrays are handled", () => {
+    expect(["", "5", "", ""].map(generate_array_styles)).toEqual(["0px", "5px", "0px", "0px"])
   })
 
-  test("it should generate a valid css rule: grid-gap", () => {
-    expect(generate_css({ layout: { gap: "10" } })).toEqual({
-      layout: "grid-gap: 10px;\ndisplay: grid;",
-      position: "",
-    })
+  test("Check how array styles are output", () => {
+    expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;")
   })
 
-  test("it should generate a valid css rule: column 1", () => {
-    expect(generate_css({ position: { column: ["", ""] } })).toEqual({
-      layout: "",
-      position: "",
-    })
+  test("Check handling of an array with empty string values", () => {
+    expect(generate_css({ padding: ["", "", "", ""] })).toBe("")
   })
 
-  test("it should generate a valid css rule: column 2", () => {
-    expect(generate_css({ position: { column: ["1", ""] } })).toEqual({
-      position: "grid-column-start: 1;",
-      layout: "",
-    })
+  test("Check handling of an empty array", () => {
+    expect(generate_css({ margin: [] })).toBe("")
   })
 
-  test("it should generate a valid css rule: column 3", () => {
-    expect(generate_css({ position: { column: ["", "1"] } })).toEqual({
-      position: "grid-column-end: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: column 4", () => {
-    expect(generate_css({ position: { column: ["1", "1"] } })).toEqual({
-      position: "grid-column-start: 1;\ngrid-column-end: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: row 1", () => {
-    expect(generate_css({ position: { row: ["", ""] } })).toEqual({
-      layout: "",
-      position: "",
-    })
-  })
-
-  test("it should generate a valid css rule: row 2", () => {
-    expect(generate_css({ position: { row: ["1", ""] } })).toEqual({
-      position: "grid-row-start: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: row 3", () => {
-    expect(generate_css({ position: { row: ["", "1"] } })).toEqual({
-      position: "grid-row-end: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: row 4", () => {
-    expect(generate_css({ position: { row: ["1", "1"] } })).toEqual({
-      position: "grid-row-start: 1;\ngrid-row-end: 1;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: padding 1", () => {
-    expect(
-      generate_css({ position: { padding: ["1", "1", "1", "1"] } })
-    ).toEqual({
-      position: "padding: 1px 1px 1px 1px;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: padding 2", () => {
-    expect(generate_css({ position: { padding: ["1", "", "", "1"] } })).toEqual(
-      {
-        position: "padding: 1px 0px 0px 1px;",
-        layout: "",
-      }
-    )
-  })
-
-  test("it should generate a valid css rule: margin 1", () => {
-    expect(
-      generate_css({ position: { margin: ["1", "1", "1", "1"] } })
-    ).toEqual({
-      position: "margin: 1px 1px 1px 1px;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: margin 2", () => {
-    expect(generate_css({ position: { margin: ["1", "", "", "1"] } })).toEqual({
-      position: "margin: 1px 0px 0px 1px;",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: z-index 1", () => {
-    expect(generate_css({ position: { zindex: "" } })).toEqual({
-      position: "",
-      layout: "",
-    })
-  })
-
-  test("it should generate a valid css rule: z-index 2", () => {
-    expect(generate_css({ position: { zindex: "1" } })).toEqual({
-      position: "z-index: 1;",
-      layout: "",
-    })
+  test("Check handling of valid font property", () => {
+    expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;")
   })
 })
 
+
 describe("generate_screen_css", () => {
-  test("it should compile the css for a list of components", () => {
-    const components = [
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 1,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 2,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 3,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 4,
-      },
-    ]
-
-    const compiled = `.pos-1 {
-margin: 1px 1px 1px 1px;
-}
-.lay-1 {
-
-}
-.pos-2 {
-margin: 1px 1px 1px 1px;
-}
-.lay-2 {
-
-}
-.pos-3 {
-margin: 1px 1px 1px 1px;
-}
-.lay-3 {
-
-}
-.pos-4 {
-margin: 1px 1px 1px 1px;
-}
-.lay-4 {
-
-}`
-
-    expect(generate_screen_css(components)).toEqual(compiled)
+  const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } }
+    
+  test("Test generation of normal css styles", () => {
+    expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}")
   })
 
-  test("it should compile the css for a list of components", () => {
-    const components = [
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 1,
-        _children: [
-          {
-            _styles: {
-              layout: { gridarea: ["", "", "", ""] },
-              position: { margin: ["1", "1", "1", "1"] },
-            },
-            _id: 2,
-            _children: [
-              {
-                _styles: {
-                  layout: { gridarea: ["", "", "", ""] },
-                  position: { margin: ["1", "1", "1", "1"] },
-                },
-                _id: 3,
-                _children: [
-                  {
-                    _styles: {
-                      layout: { gridarea: ["", "", "", ""] },
-                      position: { margin: ["1", "1", "1", "1"] },
-                    },
-                    _id: 4,
-                    _children: [
-                      {
-                        _styles: {
-                          layout: { gridarea: ["", "", "", ""] },
-                          position: { margin: ["1", "1", "1", "1"] },
-                        },
-                        _id: 5,
-                        _children: [],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 6,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 7,
-      },
-      {
-        _styles: {
-          layout: { gridarea: ["", "", "", ""] },
-          position: { margin: ["1", "1", "1", "1"] },
-        },
-        _id: 8,
-      },
-    ]
+  const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } }
 
-    const compiled = `.pos-1 {
-margin: 1px 1px 1px 1px;
-}
-.lay-1 {
-
-}
-.pos-2 {
-margin: 1px 1px 1px 1px;
-}
-.lay-2 {
-
-}
-.pos-3 {
-margin: 1px 1px 1px 1px;
-}
-.lay-3 {
-
-}
-.pos-4 {
-margin: 1px 1px 1px 1px;
-}
-.lay-4 {
-
-}
-.pos-5 {
-margin: 1px 1px 1px 1px;
-}
-.lay-5 {
-
-}
-.pos-6 {
-margin: 1px 1px 1px 1px;
-}
-.lay-6 {
-
-}
-.pos-7 {
-margin: 1px 1px 1px 1px;
-}
-.lay-7 {
-
-}
-.pos-8 {
-margin: 1px 1px 1px 1px;
-}
-.lay-8 {
-
-}`
-
-    expect(generate_screen_css(components)).toEqual(compiled)
+  test("Test generation of hover css styles", () => {
+    expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}")
   })
-})
+
+  const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } }
+  
+  test("Test generation of selection css styles", () => {
+    expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}")
+  }) 
+
+  const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } }
+
+  test.only("Testing handling of empty component styles", () => {
+    expect(generate_screen_css([emptyComponent])).toBe("")
+  }) 
+})
\ No newline at end of file