feat: CCard: add accentColor prop

Author: woothu

src/components/card/CCard.vue

@@ -11,7 +11,8 @@ const props = Object.assign(
     headerHtml: String,
     bodyHtml: String,
     footerHtml: String,
-    bodyWrapper: Boolean
+    bodyWrapper: Boolean,
+    accentColor: String
   }
 )
 export default {
@@ -42,10 +43,11 @@ export default {
       mergeData(data, {
         staticClass: 'card',
         class: {
-          [`text-${props.align}`]: Boolean(props.align),
-          [`bg-${props.color}`]: Boolean(props.color),
-          [`border-${props.borderColor}`]: Boolean(props.borderColor),
-          [`text-${props.textColor}`]: Boolean(props.textColor)
+          [`card-accent-${props.accentColor}`]: props.accentColor,
+          [`text-${props.align}`]: props.align,
+          [`bg-${props.color}`]: props.color,
+          [`border-${props.borderColor}`]: props.borderColor,
+          [`text-${props.textColor}`]: props.textColor
         }
       }),
       [ header, main, footer ]

src/components/card/tests/CCard.spec.js

@@ -22,6 +22,7 @@ const slotWrapper = mount(Component, {
       color: 'success',
       textColor: 'white',
       borderColor: 'solid',
+      accentColor: 'primary',
       bodyWrapper: true
     }
   },
@@ -49,7 +50,7 @@ describe(ComponentName, () => {
   it('renders correctly with slots', () => {
     expect(slotWrapper.element).toMatchSnapshot()
   })
-  it('renders correctly with slots', () => {
+  it('renders correctly without body', () => {
     expect(noBodyCard.element).toMatchSnapshot()
   })
 });

src/components/card/tests/__snapshots__/CCard.spec.js.snap

@@ -24,7 +24,7 @@ exports[`CCard renders correctly 1`] = `
 
 exports[`CCard renders correctly with slots 1`] = `
 <div
-  class="card text-left bg-success border-solid text-white"
+  class="card card-accent-primary text-left bg-success border-solid text-white"
 >
   <!---->
   <div
@@ -36,7 +36,7 @@ exports[`CCard renders correctly with slots 1`] = `
 </div>
 `;
 
-exports[`CCard renders correctly with slots 2`] = `
+exports[`CCard renders correctly without body 1`] = `
 <div
   class="card"
 >

src/components/index.d.ts

@@ -66,6 +66,7 @@ export declare class CCard extends CardSharedClasses {
   bodyHtml: string
   footerHtml: string
   bodyWrapper: boolean
+  accentColor: string
 }
 
 export declare class CCardBody extends CardSharedClasses {}