From bb781c3d208f520aba835e080c2c60ceee5f09df Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 20 Mar 2020 14:53:04 +0000
Subject: [PATCH] Completed Material Card Component

---
 .../materialdesign-components/components.json | 46 +++++++++++++++++++
 .../src/Card/Card.svelte                      |  8 +++-
 .../src/Card/CardBody.svelte                  |  4 +-
 .../src/Card/CardHeader.svelte                |  1 -
 .../src/Test/props.js                         | 17 +++----
 5 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index d017e54b11..9289f77652 100644
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@@ -111,6 +111,52 @@
     }, 
     "tags": []
   },
+  "Card": {
+    "name": "Card",
+    "description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
+    "props": {
+      "width": "string",
+      "height": "string",
+      "variant": {
+        "type": "options",
+        "options": ["standard", "outlined"],
+        "default": "standard"
+      }
+    }
+  },
+  "CardBody": {
+    "name": "CardBody",
+    "description": "A Material CardBody component. Contains the main content of a Material Card component",
+    "props": {
+      "onClick": "event"
+    }
+  },
+  "CardImage": {
+    "name": "CardImage",
+    "description": "An image component for the Material Card component",
+    "props": {
+      "displayHorizontal": "bool",
+      "url": "string",
+      "title": "string",
+      "subtitle": "string"
+    }
+  },
+  "CardHeader": {
+    "name": "CardHeader",
+    "description": "Displays a icon, title and subtitle above main body of the Material Card component",
+    "props": {
+      "title": "string",
+      "subtitle": "string",
+      "icon": "string"
+    }
+  },
+  "CardFooter": {
+    "name": "CardFooter",
+    "description": "Displays buttons / icon buttons as actions for the Material Card component",
+    "props": {
+      "padding": "string"
+    }
+  },
   "Checkbox": {
     "name": "Checkbox",
     "description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
diff --git a/packages/materialdesign-components/src/Card/Card.svelte b/packages/materialdesign-components/src/Card/Card.svelte
index d32f34f04f..6a67ceb92c 100644
--- a/packages/materialdesign-components/src/Card/Card.svelte
+++ b/packages/materialdesign-components/src/Card/Card.svelte
@@ -21,18 +21,22 @@
   $: props = { modifiers }
   $: cardClass = cb.build({ props })
 
+  $: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width
+  $: safeHeight =
+    height !== "auto" && !/px$/.test(height) ? `${width}px` : height
+
   $: card && _bb.attachChildren(card)
 </script>
 
 <div
   bind:this={card}
-  style={`width: ${width}; height: ${height}`}
+  style={`width: ${safeWidth}; height: ${safeHeight}`}
   class={cardClass} />
 
 <!-- <CardHeader title="Eyeoo" subtitle="efe wfew rregreg" />
   <CardBody isPrimaryAction>
     <CardImage url="https://picsum.photos/350/200" />
-    <H6 text="Body Header" horizontalMargin={10} />
+    <H6 text="Body Header" horizontalMargin={10} /> 
     <Body2 text="something something mc something" horizontalMargin={10} />
   </CardBody>
   <CardFooter>
diff --git a/packages/materialdesign-components/src/Card/CardBody.svelte b/packages/materialdesign-components/src/Card/CardBody.svelte
index eb37f0c33b..08cb549e06 100644
--- a/packages/materialdesign-components/src/Card/CardBody.svelte
+++ b/packages/materialdesign-components/src/Card/CardBody.svelte
@@ -1,12 +1,10 @@
 <script>
   export let _bb
-  export let isPrimaryAction = false
   export let onClick = () => {}
 
   let cardBody
-  let cls = isPrimaryAction ? "mdc-card__primary-action" : ""
 
   $: cardBody && _bb.attachChildren(cardBody)
 </script>
 
-<div bind:this={cardBody} class={cls} on:click={onClick} />
+<div bind:this={cardBody} class="mdc-card__primary-action" on:click={onClick} />
diff --git a/packages/materialdesign-components/src/Card/CardHeader.svelte b/packages/materialdesign-components/src/Card/CardHeader.svelte
index 7f9e80cd17..72f1bc4ace 100644
--- a/packages/materialdesign-components/src/Card/CardHeader.svelte
+++ b/packages/materialdesign-components/src/Card/CardHeader.svelte
@@ -7,7 +7,6 @@
   export let icon = ""
 
   $: useIcon = !!icon
-
   $: useSubtitle = !!subtitle
 </script>
 
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 28b834a808..a0a2c9b3ad 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -218,29 +218,24 @@ export const props = {
     icon: "calendar_today",
   },
   Card: {
+    _id: "card",
+    width: "400",
     _component: "@budibase/materialdesign-components/Card",
     _children: [
       {
+        _id: "cardbody",
         _component: "@budibase/materialdesign-components/CardBody",
+        onClick: () => alert`Hi`,
         _children: [
           {
+            _id: "cardimage1",
             _component: "@budibase/materialdesign-components/CardImage",
             _children: [],
-            displayHorizontal: false,
+            displayHorizontal: true,
             url: "https://picsum.photos/350",
             title: "Our New World",
             subtitle: "Out now in cinemas",
           },
-          {
-            _component: "@budibase/materialdesign-components/H6",
-            _children: [],
-            text: "Movie Of The Year",
-          },
-          {
-            _component: "@budibase/materialdesign-components/Body2",
-            _children: [],
-            text: "The most epic movie of the year has just arrived in cinemas",
-          },
         ],
       },
       {