fix(card): Fix classes, variants, borders [v4-beta]

docs/components/card/README.md

@@ -205,64 +205,88 @@ a fixed-width card.
 ### Inverted text
 By default, cards use dark text and assume a light background. You can reverse that by
 toggling the color of text within, as well as that of the card’s subcomponents,
-via the prop `inverse`. Then, specify a dark background-color and border-color to go with it.
+via the prop `inverse`. Then, specify a dark background variant.
 
 ```html
-<b-card inverse title="Card Title" style="background-color:#333; border-color:#333;">
+<b-card inverse title="Card Title" variant="dark"">
   <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
   <b-button href="#" variant="primary">Go somewhere</b-button>
 </b-card>
 
 <!-- card-inverse-1.vue -->
 ```
 
-### Background and outline variants
+### Background and Bordered variants
 Cards include their own variant style for quickly changing the background-color and
-border-color of a card via the `variant` prop. Darker solid variants my require setting the
+of a card via the `variant` prop. Darker solid variants my require setting the
 boolean prop `inverse` to adjust the text color.
 
-Note for non-`outline-*` variants, the `inverse` state is automatically applied.
-
+#### Solid:
 ```html
 <div>
-  <b-card variant="primary" class="mb-3 text-center">
+  <b-card variant="primary" inverse 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="success" class="mb-3 text-center">
+  <b-card variant="secondary" inverse 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="info" class="mb-3 text-center">
+  <b-card variant="success" inverse 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="warning" class="mb-3 text-center">
+  <b-card variant="info" inverse 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="danger" class="mb-3 text-center">
+  <b-card variant="warning" inverse 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="outline-primary" class="mb-3 text-center">
+  <b-card variant="danger" inverse 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="outline-success" class="mb-3 text-center">
+  <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="outline-info" class="mb-3 text-center">
+  <b-card variant="dark" header="Dark" inverse class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-  <b-card variant="outline-warning" class="mb-3 text-center">
+</div>
+
+<!-- card-variants-1.vue -->
+```
+
+#### Bordered:
+```html
+<div>
+  <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="outline-danger" class="mb-3 text-center">
+  <b-card variant="secondary" bordered header="Secondary" class="mb-3 text-center">
     <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </b-card>
-</div>
+  <b-card variant="success" bordered 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" bordered 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" 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">
+    <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">
+    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </b-card>
+  <b-card variant="dark" bordered header="Dark" class="mb-3 text-center">
+    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </b-card></div>
 
-<!-- card-variants-1.vue -->
+<!-- card-variants-2.vue -->
 ```
 
 #### Variant to class mapping:
 BootstrapVue `<b-card>` variants are directly mapped to Bootstrap V4 card classes by
-pre-pending `card-` to the above variant names.
+pre-pending `bg-` (for solid) or `border-` (for bordered) to the above variant names.
 
 #### Header and Footer variants:
 You can also apply the solid and outline variants individually to card headers and footers
@@ -421,7 +445,7 @@ isn’t a bulletproof solution yet.
       <small class="text-muted">Last updated 3 mins ago</small>
     </b-card>
 
-    <b-card variant="primary">
+    <b-card variant="primary" inverse>
       <blockquote class="card-blockquote" 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
         <footer>

examples/card/demo.html

@@ -1,6 +1,6 @@
 <div id="app">
     <!-- Simple -->
-    <b-card class="mb-2" variant="success" ref="simple_card">Simple Card</b-card>
+    <b-card class="mb-2" variant="success" inverse ref="simple_card">Simple Card</b-card>
 
     <!-- Standard -->
     <b-card header="Card header text"
@@ -28,8 +28,22 @@
     <b-card overlay
             img="http://placeskull.com/200/200/E8117F/-1/0"
             class="mb-2"
+            inverse
             ref="img_overlay_card"
     >
         Overlay cards are cute!
     </b-card>
+
+    <!-- Bordered -->
+    <b-card header="Card header text"
+            class="mb-2"
+            title="Card title"
+            variant="primary"
+            bordered
+            inverse
+            sub-title="Card subtitle"
+            ref="bordered_card"
+    ></b-card>
+
 </div>
+

lib/components/card.vue

@@ -45,21 +45,18 @@
             blockClass() {
                 return [
                     'card-body',
-                    this.overlay ? 'card-img-overlay' : null
+                    (this.overlay || this.imgOverlay) ? 'card-img-overlay' : null
                 ];
             },
             cardVariant() {
-                return this.variant ? `card-${this.variant}` : null;
+                if (this.bordered) {
+                    return this.variant ? `border-${this.variant}` : null;
+                } else {
+                    return this.variant ? `bg-${this.variant}` : null;
+                }
             },
             cardInverse() {
-                if (this.overlay || this.inverse) {
-                    return 'card-inverse';
-                }
-                // Auto inverse colored cards
-                if (this.inverse === null && this.variant && this.variant.length > 0 &&
-                    this.variant.indexOf('outline') === -1) {
-                    return 'card-inverse';
-                }
+                return this.inverse ? 'text-white' : ''
             },
             cardAlign() {
                 return this.align ? `text-${this.align}` : null;
@@ -72,13 +69,16 @@
             },
             inverse: {
                 type: Boolean,
-                // It should remain null for auto inverse
-                default: null
+                default: false
             },
             variant: {
                 type: String,
                 default: null
             },
+            bordered: {
+                type: Boolean,
+                default: false
+            },
             tag: {
                 type: String,
                 default: 'div'
@@ -151,6 +151,10 @@
                 type: String,
                 default: null
             },
+            imgOverlay: {
+                type: Boolean,
+                default: false
+            },
             overlay: {
                 type: Boolean,
                 default: false

lib/components/carousel.vue

@@ -107,7 +107,7 @@
             }
         }
         // fallback
-        rerturn 'transitionend';
+        return 'transitionend';
     }
 
     export default {
@@ -371,7 +371,7 @@
                     this.isSliding = false;
                     // Notify ourselves that we're done sliding (slid)
                     this.$nextTick(() => this.$emit('slid', val));
-                });
+                };
 
                 // Clear transition classes after transition ends
                 currentSlide.addEventListener(this.transitionEndEvent, onceTransEnd);

tests/components/card.spec.js

@@ -23,10 +23,10 @@ describe('card', async() => {
     it('should contain class names', async() => {
         const { app: { $refs, $el } } = window
 
-        expect($refs.simple_card).toHaveAllClasses(['card', 'card-success', 'card-inverse'])
+        expect($refs.simple_card).toHaveAllClasses(['card', 'bg-success', 'text-white'])
         expect($refs.standard_card).toHaveClass('card')
         expect($refs.img_card).toHaveClass('card')
-        expect($refs.img_overlay_card).toHaveAllClasses(['card', 'card-inverse'])
+        expect($refs.img_overlay_card).toHaveAllClasses(['card', 'text-white'])
 
         const bodyEl = [...$refs.img_overlay_card.$el.childNodes]
             .find(el => el.classList && el.classList.contains('card-body'))
@@ -80,4 +80,11 @@ describe('card', async() => {
             expect(imgEl.src).toEqual(src)
         })
     })
+
+    it('Bordered card should have classes', async() => {
+        // bordered_card
+        const { app: { $refs, $el } } = window
+
+        expect($refs.bordered_card).toHaveAllClasses(['card', 'border-primary'])
+    })
 })