From 5cfc6a6edaafb565889ef21daade6c1a3f56863d Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Sat, 28 Nov 2020 16:35:42 +0000
Subject: [PATCH 1/3] Stat card

During lab day, I created a stat card. This card allows the user to display a single value, with an optional title and label. This is a popular component that will save our users time - expecially when creating dashboards.
---
 .../userInterface/temporaryPanelStructure.js  | 43 +++++++++++++++
 packages/standard-components/components.json  | 10 ++++
 .../standard-components/src/CardStat.svelte   | 52 +++++++++++++++++++
 packages/standard-components/src/index.js     |  1 +
 4 files changed, 106 insertions(+)
 create mode 100644 packages/standard-components/src/CardStat.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index e18ca6014f..092f4eafdd 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -427,6 +427,49 @@ export default {
             ],
           },
         },
+        {
+          _component: "@budibase/standard-components/cardstat",
+          name: "Stat",
+          description:
+            "A card component for displaying numbers.",
+          icon: "ri-dual-sim-2-line",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Title",
+                key: "title",
+                control: Input,
+                placeholder: "Total Revenue",
+              },
+              {
+                label: "Value",
+                key: "value",
+                control: Input,
+                placeholder: "$1,981,983",
+              },
+              {
+                label: "Label",
+                key: "label",
+                control: Input,
+                placeholder: "Stripe",
+              },
+              {
+                label: "Value Color",
+                key: "color",
+                control: Input,
+                placeholder: "Blue",
+              },
+              {
+                label: "Border Color",
+                key: "bordercolor",
+                control: Input,
+                placeholder: "lightgrey",
+              },
+            ],
+          },
+        },
       ],
     },
     {
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index a766d3084c..0843a17ffe 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -359,6 +359,16 @@
 			}
 		}
 	},
+	"cardstat": {
+		"name": "Stat Card",
+		"props": {
+			"title": "string",
+			"value": "string",
+			"label": "string",
+			"color": "string",
+			"bordercolor": "string"
+		}
+	},
 	"cardhorizontal": {
 		"name": "Horizontal Card",
 		"props": {
diff --git a/packages/standard-components/src/CardStat.svelte b/packages/standard-components/src/CardStat.svelte
new file mode 100644
index 0000000000..cb58bdfb5a
--- /dev/null
+++ b/packages/standard-components/src/CardStat.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { cssVars, createClasses } from "./cssVars"
+
+  export const className = ""
+  export let title = ""
+  export let value = ""
+  export let label = ""
+  export let bordercolor = ""
+  export let color
+
+  $: cssVariables = {
+    bordercolor,
+    color,
+  }
+</script>
+
+<div use:cssVars={cssVariables} class="container">
+  <p class="title">{title}</p>
+  <h3 class="value">{value}</h3>
+  <p class="label">{label}</p>
+</div>
+
+<style>
+  .container {
+    min-width: 260px;
+    width: max-content;
+    max-height: 170px;
+    border: 1px solid var(--bordercolor);
+    border-radius: 0.3rem;
+  }
+
+  .title {
+    font-size: 0.85rem;
+    color: #9e9e9e;
+    font-weight: 500;
+    margin: 1rem 1.5rem 0.5rem 1.5rem;
+  }
+
+  .value {
+    font-size: 2rem;
+    font-weight: 500;
+    color: var(--color);
+    margin: 0rem 1.5rem 1.5rem 1.5rem;
+  }
+
+  .label {
+    font-size: 0.85rem;
+    font-weight: 400;
+    color: #9e9e9e;
+    margin: 1rem 1.5rem;
+  }
+</style>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index 3dec13e27b..89189a287b 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -23,6 +23,7 @@ export { default as embed } from "./Embed.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
 export { default as cardhorizontal } from "./CardHorizontal.svelte"
+export { default as cardstat } from "./CardStat.svelte"
 export { default as rowdetail } from "./RowDetail.svelte"
 export { default as newrow } from "./NewRow.svelte"
 export { default as datepicker } from "./DatePicker.svelte"

From 3231be4b8c2b4fe00308dedaf673535a325be73b Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Sat, 28 Nov 2020 16:44:07 +0000
Subject: [PATCH 2/3] Formatting and linting

---
 .../src/components/userInterface/temporaryPanelStructure.js    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 092f4eafdd..2465e938d3 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -430,8 +430,7 @@ export default {
         {
           _component: "@budibase/standard-components/cardstat",
           name: "Stat",
-          description:
-            "A card component for displaying numbers.",
+          description: "A card component for displaying numbers.",
           icon: "ri-dual-sim-2-line",
           children: [],
           properties: {

From 3b57ef3b0ff6eb69fe964374f259bb43ed786aac Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 4 Dec 2020 09:13:38 +0000
Subject: [PATCH 3/3] Update stat card to use new component SDK

---
 .../userInterface/temporaryPanelStructure.js  | 12 -----------
 packages/standard-components/components.json  |  4 +---
 .../standard-components/src/CardStat.svelte   | 21 ++++++++-----------
 3 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 9e9ede545d..81b73d3204 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -454,18 +454,6 @@ export default {
                 control: Input,
                 placeholder: "Stripe",
               },
-              {
-                label: "Value Color",
-                key: "color",
-                control: Input,
-                placeholder: "Blue",
-              },
-              {
-                label: "Border Color",
-                key: "bordercolor",
-                control: Input,
-                placeholder: "lightgrey",
-              },
             ],
           },
         },
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 179ec1acbe..7504c15b40 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -262,9 +262,7 @@
 		"props": {
 			"title": "string",
 			"value": "string",
-			"label": "string",
-			"color": "string",
-			"bordercolor": "string"
+			"label": "string"
 		}
 	},
 	"cardhorizontal": {
diff --git a/packages/standard-components/src/CardStat.svelte b/packages/standard-components/src/CardStat.svelte
index cb58bdfb5a..e5e40ad862 100644
--- a/packages/standard-components/src/CardStat.svelte
+++ b/packages/standard-components/src/CardStat.svelte
@@ -1,20 +1,16 @@
 <script>
-  import { cssVars, createClasses } from "./cssVars"
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
 
   export const className = ""
   export let title = ""
   export let value = ""
   export let label = ""
-  export let bordercolor = ""
-  export let color
-
-  $: cssVariables = {
-    bordercolor,
-    color,
-  }
 </script>
 
-<div use:cssVars={cssVariables} class="container">
+<div use:styleable={$component.styles} class="container">
   <p class="title">{title}</p>
   <h3 class="value">{value}</h3>
   <p class="label">{label}</p>
@@ -25,8 +21,9 @@
     min-width: 260px;
     width: max-content;
     max-height: 170px;
-    border: 1px solid var(--bordercolor);
+    border: 1px solid var(--grey-3);
     border-radius: 0.3rem;
+    color: var(--blue);
   }
 
   .title {
@@ -39,8 +36,8 @@
   .value {
     font-size: 2rem;
     font-weight: 500;
-    color: var(--color);
-    margin: 0rem 1.5rem 1.5rem 1.5rem;
+    margin: 0 1.5rem 1.5rem 1.5rem;
+    color: inherit;
   }
 
   .label {