From 95dab526196d87f642e0464ad53a2e2143257138 Mon Sep 17 00:00:00 2001
From: Michael Shanks <mike@budibase.com>
Date: Fri, 21 Feb 2020 11:43:21 +0000
Subject: [PATCH] components changes

---
 .../materialdesign-components/components.json |  1 +
 packages/standard-components/components.json  | 26 +++++-
 .../standard-components/src/Container.svelte  | 93 +++++++++++++------
 packages/standard-components/src/Link.svelte  | 40 +++++++-
 .../standard-components/src/Test/props.js     |  5 +
 .../src/Test/testComponents.js                |  4 +-
 .../standard-components/src/button.svelte     | 12 +--
 packages/standard-components/src/cssVars.js   | 14 ++-
 8 files changed, 152 insertions(+), 43 deletions(-)

diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index c0e79c511c..e62d30f5ef 100644
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@@ -24,6 +24,7 @@
   },
   "Button": {
     "name": "Button",
+    "children": false,
     "description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.",
     "props": {
       "onClick": "event",
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index d5e8320b93..3a50ed2470 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -142,7 +142,11 @@
 		"props": {
 			"url": "string",
 			"openInNewTab": "bool",
-			"text": "string"
+			"text": "string",
+			"color": "string",
+			"hoverColor": "string",
+			"underline": "bool",
+			"fontSize": "string"
 		}
 	},
 	"image": {
@@ -179,7 +183,27 @@
 					"summary"
 				],
 				"default": "div"
+			},
+			"backgroundColor": "string",
+			"color": "string",
+			"borderWidth": "string",
+			"borderColor": "string",
+			"borderStyle": {
+				"type":"options",
+				"options": [
+					"none",
+					"solid",
+					"dotted",
+					"dashed",
+					"double",
+					"groove",
+					"ridge",
+					"inset",
+					"outset"
+				],
+				"default": "none"
 			}
+
 		},
 		"container": true,
 		"tags": ["div", "container", "layout"]
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 0951a03d65..9b9d47d3c0 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -1,49 +1,88 @@
 <script>
-  export let className = ""
-  export let onLoad
-  export let type
-  export let _bb
+import { cssVars, createClasses } from "./cssVars"
 
-  let containerElement
-  let hasLoaded;
-  let currentChildren;
+export let className = ""
+export let onLoad
+export let type
+export let backgroundColor
+export let color
+export let borderWidth
+export let borderColor
+export let borderStyle
+export let _bb
 
-  $: {
-    if(containerElement) {
-       _bb.attachChildren(containerElement)
-       if (!hasLoaded) {
-         _bb.call(onLoad)
-         hasLoaded = true
-       }
+let containerElement
+let hasLoaded;
+let currentChildren;
+
+$: cssVariables = {
+  backgroundColor, color,
+  borderWidth, borderColor,
+  borderStyle
+}
+$: classes = `${createClasses(cssVariables)} ${className}`
+
+$: {
+  if(containerElement) {
+    _bb.attachChildren(containerElement)
+    if (!hasLoaded) {
+      _bb.call(onLoad)
+      hasLoaded = true
     }
   }
+}
 
 </script>
 
 {#if type === "div"}
-<div class={className} bind:this={containerElement} />
+<div class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "header"}
-<header class={className} bind:this={containerElement} />
+<header class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "main"}
-<main class={className} bind:this={containerElement} />
+<main class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "footer"}
-<footer class={className} bind:this={containerElement} />
+<footer class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "aside"}
-<aside class={className} bind:this={containerElement} />
+<aside class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "summary"}
-<summary class={className} bind:this={containerElement} />
+<summary class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "details"}
-<details class={className} bind:this={containerElement} />
+<details class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "article"}
-<article class={className} bind:this={containerElement} />
+<article class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "nav"}
-<nav class={className} bind:this={containerElement} />
+<nav class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "mark"}
-<mark class={className} bind:this={containerElement} />
+<mark class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "figure"}
-<figure class={className} bind:this={containerElement} />
+<figure class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "figcaption"}
-<figcaption class={className} bind:this={containerElement} />
+<figcaption class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {:else if type === "paragraph"}
-<p class={className} bind:this={containerElement} />
+<p class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
 {/if}
+
+
+<style>
+
+.backgroundColor {
+  background-color: var(--backgroundColor)
+}
+
+.color {
+  color: var(--color)
+}
+
+.borderColor {
+  border-color: var(--borderColor)
+}
+
+.borderWidth {
+  border-width: var(--borderWidth)
+}
+
+.borderStyle {
+  border-style: var(--borderStyle)
+}
+
+</style>
diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte
index 9c48d1c302..c408f5d1c0 100644
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@@ -1,8 +1,14 @@
 <script>
 
+import { cssVars, createClasses } from "./cssVars"
+
 export let url = ""
 export let text = ""
 export let openInNewTab = false
+export let color
+export let hoverColor
+export let underline = false
+export let fontSize
 
 export let _bb
 
@@ -10,9 +16,41 @@ let anchorElement
 
 $: anchorElement && !text && _bb.attachChildren(anchorElement)
 $: target = openInNewTab ? "_blank" : "_self"
+$: cssVariables = {
+      hoverColor,
+      color,
+      textDecoration: underline ? "underline" : "none",
+      fontSize
+  }
+$: classes = createClasses(cssVariables)
 
 </script>
 
-<a href={url} bind:this={anchorElement} target={target}>{text}</a>
+<a 
+  href={url} 
+  bind:this={anchorElement} 
+  class={classes}
+  target={target}
+  use:cssVars={cssVariables}>{text}</a>
 
 
+<style>
+
+.color {
+  color: var(--color)
+}
+
+.hoverColor:hover {
+  color: var(--color)
+}
+
+.textDecoration {
+  text-decoration: var(--textDecoration)
+}
+
+.fontSize {
+  font-size: var(--fontSize)
+}
+
+</style>
+
diff --git a/packages/standard-components/src/Test/props.js b/packages/standard-components/src/Test/props.js
index e492e6221b..b3cdeb0d08 100644
--- a/packages/standard-components/src/Test/props.js
+++ b/packages/standard-components/src/Test/props.js
@@ -21,6 +21,11 @@ export const form = {
     {
       _component: "@budibase/standard-components/container",
       type: "paragraph",
+      backgroundColor: "red",
+      color: "white",
+      borderStyle: "solid",
+      borderWidth: "3px",
+      borderColor: "blue",
       _children: [
         {
           _component: "@budibase/standard-components/text",
diff --git a/packages/standard-components/src/Test/testComponents.js b/packages/standard-components/src/Test/testComponents.js
index 641e95ecac..d6352ad3f3 100644
--- a/packages/standard-components/src/Test/testComponents.js
+++ b/packages/standard-components/src/Test/testComponents.js
@@ -1,3 +1,3 @@
-import { container, text, heading, input, select, option, button, login, nav, table  } from "../index"
+import * as components from "../index"
 
-export default { container, text, heading, input, select, option, button, login, nav, table  }
+export default components
diff --git a/packages/standard-components/src/button.svelte b/packages/standard-components/src/button.svelte
index 18572b91fc..2a23f82f0c 100644
--- a/packages/standard-components/src/button.svelte
+++ b/packages/standard-components/src/button.svelte
@@ -1,5 +1,5 @@
 <script>
-  import cssVars from "./cssVars"
+  import { cssVars, createClasses } from "./cssVars"
   import { buildStyle } from "./buildStyle"
   export let className = "default"
   export let disabled = false
@@ -24,16 +24,6 @@
 
   let customClasses = ""
 
-  const createClasses = classes => {
-    let all = ""
-    for (let cls in classes) {
-      if (classes[cls]) {
-        all = all + " " + cls
-      }
-    }
-    return all
-  }
-
   $: if(_bb.props._children && _bb.props._children.length > 0) 
     theButton && _bb.attachChildren(theButton)
 
diff --git a/packages/standard-components/src/cssVars.js b/packages/standard-components/src/cssVars.js
index 610cdc8f0a..7d1371436e 100644
--- a/packages/standard-components/src/cssVars.js
+++ b/packages/standard-components/src/cssVars.js
@@ -1,6 +1,6 @@
 // https://github.com/kaisermann/svelte-css-vars
 
-export default (node, props) => {
+export const cssVars = (node, props) => {
   Object.entries(props).forEach(([key, value]) => {
     node.style.setProperty(`--${key}`, value)
   })
@@ -17,3 +17,15 @@ export default (node, props) => {
     },
   }
 }
+
+export const createClasses = classes => {
+  let all = ""
+  for (let cls in classes) {
+    if (classes[cls]) {
+      all = all + " " + cls
+    }
+  }
+  return all
+}
+
+export default cssVars