Merge pull request #883 from Budibase/stat-card

Stat card

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -427,6 +427,36 @@ 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",
+              },
+            ],
+          },
+        },
       ],
     },
     {

packages/standard-components/components.json

@@ -257,6 +257,14 @@
 			}
 		}
 	},
+	"cardstat": {
+		"name": "Stat Card",
+		"props": {
+			"title": "string",
+			"value": "string",
+			"label": "string"
+		}
+	},
 	"cardhorizontal": {
 		"name": "Horizontal Card",
 		"props": {

packages/standard-components/src/CardStat.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  export const className = ""
+  export let title = ""
+  export let value = ""
+  export let label = ""
+</script>
+
+<div use:styleable={$component.styles} 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(--grey-3);
+    border-radius: 0.3rem;
+    color: var(--blue);
+  }
+
+  .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;
+    margin: 0 1.5rem 1.5rem 1.5rem;
+    color: inherit;
+  }
+
+  .label {
+    font-size: 0.85rem;
+    font-weight: 400;
+    color: #9e9e9e;
+    margin: 1rem 1.5rem;
+  }
+</style>

packages/standard-components/src/index.js

@@ -19,6 +19,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"