From e7af64f625f22a0b166fef298aab306b16b52b14 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 27 Apr 2020 11:26:34 +0100
Subject: [PATCH] Stylable option items and font family property

---
 .../userInterface/PropControl.svelte          |   1 +
 .../userInterface/StateBindingControl.svelte  |  11 ++-
 .../src/Card/index.js                         | Bin 364 -> 371 bytes
 packages/standard-components/components.json  |  67 ++++++++++++++++--
 .../standard-components/src/Button.svelte     |   2 +
 .../standard-components/src/Heading.svelte    |  16 +++--
 packages/standard-components/src/Link.svelte  |   6 ++
 packages/standard-components/src/Text.svelte  |   8 +--
 8 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte
index 62a0ba6103..33eac1f92d 100644
--- a/packages/builder/src/components/userInterface/PropControl.svelte
+++ b/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>
diff --git a/packages/builder/src/components/userInterface/StateBindingControl.svelte b/packages/builder/src/components/userInterface/StateBindingControl.svelte
index 6de53082e2..40f62b51f2 100644
--- a/packages/builder/src/components/userInterface/StateBindingControl.svelte
+++ b/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}
diff --git a/packages/materialdesign-components/src/Card/index.js b/packages/materialdesign-components/src/Card/index.js
index cc918b935fdf02b10e70dabc9ee4003668d8997e..94674547c2b1b4970a52e96ae7525a1a879e052c 100644
GIT binary patch
literal 371
NcmZQz7zK0=0RRDW00961

literal 364
zcmajYK?;O0429wSoFaIDdItwYPa(m^L1>9IaTpQrK2*U)6}!w&KHlgj4hn@SJJH3F
z80kfd7yb6Wf~5gxr+@-)3>G#R0{aN!Y2-^z>Hfb$8T$mC?NLTlv0ak2n6j>BRtkwc
VV%9c<_F|8iwXMewC9``w<sTrHeiQ%z

diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 888668877b..4c4df1e1fc 100644
--- a/packages/standard-components/components.json
+++ b/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": []
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 10f66d9311..3d50c22df5 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/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({
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index e3919b7f64..f2aa583749 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/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}
diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte
index 81934c09d8..0ac3d9f628 100644
--- a/packages/standard-components/src/Link.svelte
+++ b/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>
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index 646d9e53a7..b6d3c159e9 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/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>