components changes

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",

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"]

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>

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>
+

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",

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

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)
 

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