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

.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

@@ -31,7 +31,7 @@ Change the default `div` root tag to any other HTML element by specifying via th
 ```
 
 ### Content types
-Cards support a wide variety of content, including images, text, list groups, 
+Cards support a wide variety of content, including images, text, list groups,
 links and more. Below are examples of what’s supported.
 
 #### Card Body:
@@ -176,11 +176,11 @@ a fixed-width card.
 
 ```html
 <div>
-  <b-card no-body style="max-width: 20rem;" img="https://placekitten.com/380/200" img-alt="Image">
+  <b-card no-body style="max-width: 20rem;" img="https://placekitten.com/380/200" img-alt="Image" img-top>
     <h4 slot="header">Hello World</h4>
     <div class="card-body">
       <p class="card-text">
-        Some quick example text to build on the card 
+        Some quick example text to build on the card
         title and make up the bulk of the card's content.
       </p>
     </div>
@@ -225,28 +225,28 @@ boolean prop `inverse` to adjust the text color.
 #### Solid:
 ```html
 <div>
-  <b-card variant="primary" inverse header="Primary" class="mb-3 text-center">
+  <b-card variant="primary" text-variant="white" header="Primary" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="secondary" inverse header="Secondary" class="mb-3 text-center">
+  <b-card variant="secondary" text-variant="white" header="Secondary" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="success" inverse header="Success" class="mb-3 text-center">
+  <b-card variant="success" text-variant="white" header="Success" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="info" inverse header="Info" class="mb-3 text-center">
+  <b-card variant="info" text-variant="white" header="Info" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="warning" inverse header="Warning" class="mb-3 text-center">
+  <b-card variant="warning" text-variant="white" header="Warning" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="danger" inverse header="Danger" class="mb-3 text-center">
+  <b-card variant="danger" text-variant="white" header="Danger" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
   <b-card variant="light" header="Light" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="dark" header="Dark" inverse class="mb-3 text-center">
+  <b-card variant="dark" header="Dark" text-variant="white" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
 </div>
@@ -260,7 +260,7 @@ boolean prop `inverse` to adjust the text color.
   <b-card variant="primary" bordered header="Primary" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="secondary" bordered header="Secondary" class="mb-3 text-center">
+  <b-card variant="secondary" bordered header="Secondary" header-bordered header-variant="secondary" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
   <b-card variant="success" bordered header="Success" class="mb-3 text-center">
@@ -272,7 +272,7 @@ boolean prop `inverse` to adjust the text color.
   <b-card variant="warning" bordered header="Warning" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="danger" bordered header="Danger" class="mb-3 text-center">
+  <b-card variant="danger" bordered header="Danger" header-bordered header-variant="danger" header-text-variant="danger" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
   <b-card variant="light" bordered header="Light" class="mb-3 text-center">
@@ -296,6 +296,7 @@ via the `header-variant` and `footer-variant` props respectively.
 ```html
 <div>
   <b-card header="Card Header"
+          header-text-variant="white"
           header-tag="header"
           footer="Card Footer"
           footer-tag="footer"
@@ -369,7 +370,7 @@ card footers in decks will automatically line up.
 ```html
 <div>
   <b-card-group deck>
-    <b-card title="Title" img="https://lorempixel.com/300/300/" img-alt="Img">
+    <b-card title="Title" img="https://lorempixel.com/300/300/" img-alt="Img" img-top>
       <p class="card-text">
         This is a wider card with supporting text below as a natural lead-in to
         additional content. This content is a little bit longer.
@@ -378,15 +379,15 @@ card footers in decks will automatically line up.
         <small class="text-muted">Last updated 3 mins ago</small>
       </div>
     </b-card>
-    <b-card title="Title" img="https://lorempixel.com/300/300/" img-alt="Img">
+    <b-card title="Title" img="https://lorempixel.com/300/300/" img-alt="Img" img-top>
       <p class="card-text">
         This card has supporting text below as a natural lead-in to additional content.
       </p>
       <div slot="footer">
         <small class="text-muted">Last updated 3 mins ago</small>
       </div>
     </b-card>
-    <b-card title="Title" img="https://lorempixel.com/300/300/" img-alt="Img">
+    <b-card title="Title" img="https://lorempixel.com/300/300/" img-alt="Img" img-top>
       <p class="card-text">
         This is a wider card with supporting text below as a natural lead-in to additional
         content. This card has even longer content than the first to show that equal height action.
@@ -419,6 +420,7 @@ isn’t a bulletproof solution yet.
             img="https://placekitten.com/g/400/450"
             img-fluid
             img-alt="image"
+            img-top
     >
       <p class="card-text">
         This is a wider card with supporting text below as a natural lead-in to
@@ -439,6 +441,7 @@ isn’t a bulletproof solution yet.
             img="https://placekitten.com/500/350"
             img-fluid
             img-alt="image"
+            img-top
     >
       <p class="card-text">
         This card has supporting text below as a natural lead-in to additional content.
@@ -447,7 +450,7 @@ isn’t a bulletproof solution yet.
     </b-card>
 
     <b-card variant="primary" inverse>
-      <blockquote class="card-blockquote" 
+      <blockquote class="card-blockquote"
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
         <footer>
           <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
@@ -465,7 +468,7 @@ isn’t a bulletproof solution yet.
     <b-card img="https://lorempixel.com/400/400/" img-fuid img-alt="image" overlay>
     </b-card>
 
-    <b-card img="https://lorempixel.com/400/200/" img-fluid img-alt="image">
+    <b-card img="https://lorempixel.com/400/200/" img-fluid img-alt="image" img-top>
       <p class="card-text">
         This is a wider card with supporting text below as a natural lead-in to additional
         content. This card has even longer content than the first.

fixtures/card/demo.html

@@ -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>

fixtures/card/demo.js

@@ -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",
+    }
+})

lib/components/card-footer.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 } })]
+        );
+    }
+};

lib/components/card-group.js

@@ -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);
+    }
+};