Completed Material Card Component

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.",

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>

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} />

packages/materialdesign-components/src/Card/CardHeader.svelte

@@ -7,7 +7,6 @@
   export let icon = ""
 
   $: useIcon = !!icon
-
   $: useSubtitle = !!subtitle
 </script>
 

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",
-          },
         ],
       },
       {