feat(card): functional components for card (#827)

* [WIP] feat(card): functional components for card 🎴

* remove all block refs & use body

* refactor: remove inverse & add textVariant

* chore: add indent guide to eslint

* fix(card-group): remove excess function

* chore: add switch case indentation

* feat(card): add bordered props to header/footer

* fix(card): rm defunct tests

* feat(card): add header/footer text variant props

* refactor(card): rm .vue version of card

* [caqrd] update comment

* feat(card): new card-img FC

* refactor(card): show off feat in readme

* refactor: move examples to fixtures

Author: alexsasharegan

.eslintrc.js

@@ -85,7 +85,7 @@ module.exports = {
         'id-blacklist': 'error',
         'id-length': 'off',
         'id-match': 'error',
-        'indent': 'off',
+        'indent': ['warn', 4, { "SwitchCase": 1 }],
         'init-declarations': 'off',
         'jsx-quotes': 'off',
         'key-spacing': 'off',

docs/components/card/README.md

@@ -0,0 +1,53 @@
+<div id="app">
+    <!-- Simple -->
+    <b-card class="mb-2"
+            variant="success"
+            ref="simple_card">Simple Card</b-card>
+
+    <!-- Standard -->
+    <b-card :header="headerText"
+            class="mb-2"
+            title="Card title"
+            sub-title="Card subtitle"
+            ref="standard_card">
+        <small slot="footer"
+               class="text-muted">
+            Last updated 3 mins ago
+        </small>
+    </b-card>
+
+    <!-- Leave this example with a single child for testing -->
+    <b-card no-body
+            ref="no_body">
+        <div id="no_body_default_slot"
+             ref="no_body_default_slot">No body</div>
+    </b-card>
+
+    <!-- With image -->
+    <b-card :img="img0"
+            title="Skulls are nice"
+            class="mb-2"
+            ref="img_card">
+        This is my opinion :)
+    </b-card>
+
+    <!-- Overlay image -->
+    <b-card overlay
+            :img="img1"
+            class="mb-2"
+            ref="img_overlay_card">
+        Overlay cards are cute!
+    </b-card>
+
+    <b-card-group tag="section"
+                  ref="card_group">
+        <b-card tag="article"
+                title="Groupie"
+                title-tag="h1"
+                id="title-tag-test"></b-card>
+        <b-card tag="article"
+                sub-title="Groupie"
+                sub-title-tag="h2"
+                id="sub-title-tag-test"></b-card>
+    </b-card-group>
+</div>

examples/card/demo.html

@@ -0,0 +1,8 @@
+window.app = new Vue({
+    el: "#app",
+    data: {
+        headerText: "Card header text",
+        img0: "http://placeskull.com/200/200/ABABAB/-1/0",
+        img1: "http://placeskull.com/200/200/E8117F/-1/0",
+    }
+})

examples/tooltip/demo.js

@@ -0,0 +1,51 @@
+import { mergeData } from "../utils";
+
+export const props = {
+    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),
+                        [`text-${props.footerTextVariant}`]: Boolean(props.footerTextVariant)
+                    }
+                ]
+            }),
+            slots().default || [h("div", { domProps: { innerHTML: props.footer } })]
+        );
+    }
+};

examples/alert/demo.css fixtures/alert/demo.css

@@ -0,0 +1,32 @@
+import { mergeData } from "../utils";
+
+export const props = {
+    tag: {
+        type: String,
+        default: "div"
+    },
+    deck: {
+        type: Boolean,
+        default: false
+    },
+    columns: {
+        type: Boolean,
+        default: false
+    }
+};
+
+export default {
+    functional: true,
+    props,
+    render(h, { props, data, children }) {
+        let staticClass = "card-group";
+        if (props.columns) {
+            staticClass = "card-columns";
+        }
+        if (props.deck) {
+            staticClass = "card-deck";
+        }
+
+        return h(props.tag, mergeData(data, { staticClass }), children);
+    }
+};