Merge pull request #218 from Budibase/components/font-family-options-prop

Stylable option items and font family property

packages/builder/src/components/userInterface/PropControl.svelte

@@ -22,6 +22,7 @@
       value={prop_value}
       type={prop_definition.type}
       options={prop_definition.options}
+      styleBindingProperty={prop_definition.styleBindingProperty}
       onChanged={v => setProp(prop_name, v)} />
   {/if}
 </div>

packages/builder/src/components/userInterface/StateBindingControl.svelte

@@ -8,6 +8,9 @@
   export let onChanged = () => {}
   export let type = ""
   export let options = []
+  export let styleBindingProperty = ""
+
+  $: bindOptionToStyle = !!styleBindingProperty
 </script>
 
 <div class="unbound-container">
@@ -24,7 +27,13 @@
       {value}
       on:change={ev => onChanged(ev.target.value)}>
       {#each options || [] as option}
-        <option value={option}>{option}</option>
+        {#if bindOptionToStyle}
+          <option style={`${styleBindingProperty}: ${option};`} value={option}>
+            {option}
+          </option>
+        {:else}
+          <option value={option}>{option}</option>
+        {/if}
       {/each}
     </select>
   {:else}

packages/standard-components/components.json

@@ -36,7 +36,22 @@
 			"padding": "string",
 			"hoverColor": "string",
 			"hoverBackground": "string",
-			"hoverBorder": "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"
+				]
+			}
 		},
 		"tags": [
 			"layout"
@@ -152,7 +167,21 @@
 		"children": false,
 		"props": {
 			"text": "string",
-			"font": "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",
 			"color": "string",
 			"textAlign": {
@@ -241,7 +270,22 @@
 			"color": "string",
 			"hoverColor": "string",
 			"underline": "bool",
-			"fontSize": "string"
+			"fontSize": "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"
+				]
+			}
 		}
 	},
 	"image": {
@@ -312,7 +356,7 @@
 		"props": {
 			"className": "string",
 			"text": "string",
-			"type": {
+		"type": {
 				"type": "options",
 				"default": "h1",
 				"options": [
@@ -323,6 +367,21 @@
 					"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": []

packages/standard-components/src/Button.svelte

@@ -12,6 +12,7 @@
   export let hoverColor
   export let hoverBackground
   export let hoverBorder
+  export let fontFamily
 
   export let _bb
   let theButton
@@ -39,6 +40,7 @@
 
     buttonStyles = buildStyle({
       padding,
+      "font-family": fontFamily,
     })
 
     customClasses = createClasses({

packages/standard-components/src/Heading.svelte

@@ -1,23 +1,27 @@
 <script>
+  import { buildStyle } from "./buildStyle.js"
   export let className = ""
   export let type
   export let _bb
   export let text = ""
+  export let fontFamily = ""
+
   let containerElement
 
   $: containerElement && !text && _bb.attachChildren(containerElement)
+  $: style = buildStyle({ "font-family": fontFamily })
 </script>
 
 {#if type === 'h1'}
-  <h1 class={className} bind:this={containerElement}>{text}</h1>
+  <h1 class={className} {style} bind:this={containerElement}>{text}</h1>
 {:else if type === 'h2'}
-  <h2 class={className} bind:this={containerElement}>{text}</h2>
+  <h2 class={className} {style} bind:this={containerElement}>{text}</h2>
 {:else if type === 'h3'}
-  <h3 class={className} bind:this={containerElement}>{text}</h3>
+  <h3 class={className} {style} bind:this={containerElement}>{text}</h3>
 {:else if type === 'h4'}
-  <h4 class={className} bind:this={containerElement}>{text}</h4>
+  <h4 class={className} {style} bind:this={containerElement}>{text}</h4>
 {:else if type === 'h5'}
-  <h5 class={className} bind:this={containerElement}>{text}</h5>
+  <h5 class={className} {style} bind:this={containerElement}>{text}</h5>
 {:else if type === 'h6'}
-  <h6 class={className} bind:this={containerElement}>{text}</h6>
+  <h6 class={className} {style} bind:this={containerElement}>{text}</h6>
 {/if}

packages/standard-components/src/Link.svelte

@@ -7,6 +7,7 @@
   export let color
   export let hoverColor
   export let underline = false
+  export let fontFamily
   export let fontSize
 
   export let _bb
@@ -20,6 +21,7 @@
     color,
     textDecoration: underline ? "underline" : "none",
     fontSize,
+    fontFamily,
   }
   $: classes = createClasses(cssVariables)
 </script>
@@ -49,4 +51,8 @@
   .fontSize {
     font-size: var(--fontSize);
   }
+
+  .fontFamily {
+    font-family: var(--fontFamily);
+  }
 </style>

packages/standard-components/src/Text.svelte

@@ -6,7 +6,7 @@
 
   export let formattingTag = ""
 
-  export let font = ""
+  export let fontFamily = ""
   export let fontSize = "1em"
   export let textAlign = ""
   export let verticalAlign = ""
@@ -17,11 +17,9 @@
   const isTag = tag => (formattingTag || "").indexOf(tag) > -1
 
   $: style = buildStyle({
-    font: `${fontSize} ${font}`,
-    verticalAlign,
+    "font-size": fontSize,
+    "font-family": fontFamily,
     color,
-    "text-align": textAlign,
-    "vertical-align": verticalAlign,
   })
 </script>