feat(card): add card-body functional component & card-img fixes (#843)

* feat(card-img): add img-fluid class and img-bottom ability

* fix(card-img): reduce repetitive code

* fix(card): keep img from rendering when no img

* refactor(card): remove difficult ternaries

* feat(card): add body tag, remove img slot

* feat(card-body): add card-body FC

* fix: add card-body to lib export and fix some docs

* [meta.json] removed unused slot names

* fix(card): update to bg-variant & border-variant

* fix(card): doc fixes for new props

* chore(docs): better markup formatting

* fix(docs): bad syntax + better formatting

* fix(docs): card doc fmt

* fix(docs): more fmt

* fix(docs): blockquote ex on card

* Card-body custom class assignment test

* fix(test): use helpers and ref on card test

docs/components/card/meta.json

@@ -14,14 +14,6 @@
     {
       "name": "footer",
       "description": "For custom rendering of footer content"
-    },
-    {
-      "name": "body",
-      "description": "Optional body section"
-    },
-    {
-      "name": "no-body",
-      "description": "Optional section without card-body wrapper"
     }
   ]
 }

lib/components/card-body.js

@@ -0,0 +1,65 @@
+import { mergeData, prefixPropName, copyProps } from "../utils";
+import { assign } from "../utils/object";
+import { cardMixin } from "../mixins";
+
+export const props = assign({}, copyProps(cardMixin.props, prefixPropName.bind(null, "body")), {
+    title: {
+        type: String,
+        default: null
+    },
+    titleTag: {
+        type: String,
+        default: "h4"
+    },
+    subTitle: {
+        type: String,
+        default: null
+    },
+    subTitleTag: {
+        type: String,
+        default: "h6"
+    },
+    overlay: {
+        type: Boolean,
+        default: false
+    }
+});
+
+export default {
+    functional: true,
+    props,
+    render(h, { props, data, slots }) {
+        let cardBodyChildren = [];
+        if (props.title) {
+            cardBodyChildren.push(
+                h(props.titleTag, {
+                    staticClass: "card-title",
+                    domProps: { innerHTML: props.title }
+                })
+            );
+        }
+        if (props.subTitle) {
+            cardBodyChildren.push(
+                h(props.subTitleTag, {
+                    staticClass: "card-subtitle mb-2 text-muted",
+                    domProps: { innerHTML: props.subTitle }
+                })
+            );
+        }
+        cardBodyChildren.push(slots().default);
+
+        return h(
+            props.bodyTag,
+            mergeData(data, {
+                staticClass: "card-body",
+                class: {
+                    "card-img-overlay": props.overlay,
+                    [`bg-${props.bodyBgVariant}`]: Boolean(props.bodyBgVariant),
+                    [`border-${props.bodyBorderVariant}`]: Boolean(props.bodyBorderVariant),
+                    [`text-${props.bodyTextVariant}`]: Boolean(props.bodyTextVariant)
+                }
+            }),
+            cardBodyChildren
+        );
+    }
+};

lib/components/card-footer.js

@@ -1,46 +1,31 @@
-import { mergeData } from "../utils";
+import { mergeData, prefixPropName, copyProps } from "../utils";
+import { assign } from "../utils/object";
+import { cardMixin } from "../mixins";
 
-export const props = {
+export const props = assign({}, copyProps(cardMixin.props, prefixPropName.bind(null, "footer")), {
     footer: {
         type: String,
         default: null
     },
-    footerBordered: {
-        type: Boolean,
-        default: false
-    },
-    footerVariant: {
-        type: String,
-        default: null
-    },
-    footerTextVariant: {
-        type: String,
-        default: null
-    },
     footerClass: {
         type: [String, Object, Array],
         default: null
-    },
-    footerTag: {
-        type: String,
-        default: "div"
     }
-};
+});
 
 export default {
     functional: true,
     props,
     render(h, { props, data, slots }) {
-        const variantPrefix = props.footerBordered ? "border-" : "bg-";
-
         return h(
             props.footerTag,
             mergeData(data, {
                 staticClass: "card-footer",
                 class: [
                     props.footerClass,
                     {
-                        [variantPrefix + props.footerVariant]: Boolean(props.footerVariant),
+                        [`bg-${props.footerBgVariant}`]: Boolean(props.footerBgVariant),
+                        [`border-${props.footerBorderVariant}`]: Boolean(props.footerBorderVariant),
                         [`text-${props.footerTextVariant}`]: Boolean(props.footerTextVariant)
                     }
                 ]

lib/components/card-header.js

@@ -1,46 +1,31 @@
-import { mergeData } from "../utils";
+import { mergeData, prefixPropName, copyProps } from "../utils";
+import { assign } from "../utils/object";
+import { cardMixin } from "../mixins";
 
-export const props = {
+export const props = assign({}, copyProps(cardMixin.props, prefixPropName.bind(null, "header")), {
     header: {
         type: String,
         default: null
     },
-    headerBordered: {
-        type: Boolean,
-        default: false
-    },
-    headerVariant: {
-        type: String,
-        default: null
-    },
-    headerTextVariant: {
-        type: String,
-        default: null
-    },
     headerClass: {
         type: [String, Object, Array],
         default: null
-    },
-    headerTag: {
-        type: String,
-        default: "div"
     }
-};
+});
 
 export default {
     functional: true,
     props,
     render(h, { props, data, slots }) {
-        const variantPrefix = props.headerBordered ? "border-" : "bg-";
-
         return h(
             props.headerTag,
             mergeData(data, {
                 staticClass: "card-header",
                 class: [
                     props.headerClass,
                     {
-                        [variantPrefix + props.headerVariant]: Boolean(props.headerVariant),
+                        [`bg-${props.headerBgVariant}`]: Boolean(props.headerBgVariant),
+                        [`border-${props.headerBorderVariant}`]: Boolean(props.headerBorderVariant),
                         [`text-${props.headerTextVariant}`]: Boolean(props.headerTextVariant)
                     }
                 ]

lib/components/card-img.js

@@ -1,13 +1,26 @@
 import { mergeData } from "../utils";
 
 export const props = {
+    src: {
+        type: String,
+        default: null,
+        required: true
+    },
+    alt: {
+        type: String,
+        default: null
+    },
     top: {
         type: Boolean,
         default: false
     },
     bottom: {
         type: Boolean,
         default: false
+    },
+    fluid: {
+        type: Boolean,
+        default: false
     }
 };
 
@@ -17,11 +30,18 @@ export default {
     render(h, { props, data, slots }) {
         let staticClass = "card-img";
         if (props.top) {
-            staticClass = "card-img-top";
+            staticClass += "-top";
         } else if (props.bottom) {
-            staticClass = "card-img-bottom";
+            staticClass += "-bottom";
         }
 
-        return h("img", mergeData(data, { staticClass }));
+        return h(
+            "img",
+            mergeData(data, {
+                staticClass,
+                class: { "img-fluid": props.fluid },
+                attrs: { src: props.src, alt: props.alt }
+            })
+        );
     }
 };