refactor: rename variant props

- rename variant props to color,
- rename borderColor props to borderColor,
- rename textVariant props to textColor

Author: woothu

src/components/Alert/CAlert.vue

@@ -22,7 +22,7 @@ export default {
   name: 'CAlert',
   components: { CButtonClose },
   props: {
-    variant: String,
+    color: String,
     closeButton: Boolean,
     show: {
       type: [Boolean, Number],
@@ -42,7 +42,7 @@ export default {
         'alert',
         {
           'alert-dismissible': this.closeButton,
-          [`alert-${this.variant}`]: this.variant
+          [`alert-${this.color}`]: this.color
         }
       ]
     }

src/components/Alert/tests/CAlert.spec.js

@@ -21,7 +21,7 @@ const customWrapper = mount(Component, {
     show: true,
     fade: true,
     closeButton: true,
-    variant: 'success'
+    color: 'success'
   },
   slots: {
     default: 'Dismissible Alert!'

src/components/Badge/CBadge.vue

@@ -7,7 +7,7 @@ const props = Object.assign(linkProps, {
     type: String,
     default: 'span'
   },
-  variant: String,
+  color: String,
   pill: Boolean,
   textHtml: String
 })
@@ -22,7 +22,7 @@ export default {
     const componentData = {
       staticClass: 'badge',
       class: {
-        [`badge-${props.variant}`]: props.variant,
+        [`badge-${props.color}`]: props.color,
         'badge-pill': props.pill,
         'active': props.active,
         'disabled': props.disabled

src/components/Badge/tests/CBadge.spec.js

@@ -6,7 +6,7 @@ const wrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
     textHtml: 'Badge text',
-    variant: 'success',
+    color: 'success',
     active: true,
     pill: true,
     disabled: true,

src/components/Button/CButton.vue

@@ -13,7 +13,7 @@ const btnProps = {
     type: String,
     validator: value => ['', 'sm', 'lg'].includes(value)
   },
-  variant: String,
+  color: String,
   type: {
     type: String,
     default: 'button'
@@ -36,9 +36,9 @@ function isToggle (props) {
 
 function computeClasses (props) {
   return {
-    [`btn-${props.outline ? 'outline-' : ''}${props.variant}`]: props.variant,
+    [`btn-${props.outline ? 'outline-' : ''}${props.color}`]: props.color,
     [`btn-${props.size}`]: Boolean(props.size),
-    [`btn-ghost-${props.variant}`]: props.ghost,
+    [`btn-ghost-${props.color}`]: props.ghost,
     'btn-block': props.block,
     'btn-pill': props.pill,
     'btn-square': props.square && !props.pill,

src/components/Button/tests/CButton.spec.js

@@ -11,7 +11,7 @@ const toggleWrapper = mount(Component, {
       pressed: true,
       type: 'input',
       size: 'lg',
-      variant: 'info',
+      color: 'info',
       outline: true,
       ghost: true,
       block: true,
@@ -31,7 +31,7 @@ const routerLinkWrapper = mount(Component, {
     props: {
       to: '/dashboard',
       size: 'sm',
-      variant: 'success',
+      color: 'success',
       ghost: true,
       pill: true
     }

src/components/Callout/CCallout.vue

@@ -1,5 +1,5 @@
 <template functional>
-  <div :class="`callout ${props.variant ? 'callout-' + props.variant : ''}`">
+  <div :class="`callout ${props.color ? 'callout-' + props.color : ''}`">
     <slot></slot>
   </div>
 </template>
@@ -8,7 +8,7 @@
 export default {
   name: 'CCallout',
   props: {
-    variant: String
+    color: String
   }
 }
 </script>

src/components/Callout/tests/CCallout.spec.js

@@ -5,7 +5,7 @@ const ComponentName = 'CCallout'
 const defaultWrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
-    variant: 'success',
+    color: 'success',
   },
   slots: {
     default: 'Callout'

src/components/Card/CCard.vue

@@ -43,9 +43,9 @@ export default {
         staticClass: 'card',
         class: {
           [`text-${props.align}`]: Boolean(props.align),
-          [`bg-${props.variant}`]: Boolean(props.variant),
-          [`border-${props.borderVariant}`]: Boolean(props.borderVariant),
-          [`text-${props.textVariant}`]: Boolean(props.textVariant)
+          [`bg-${props.color}`]: Boolean(props.color),
+          [`border-${props.borderColor}`]: Boolean(props.borderColor),
+          [`text-${props.textColor}`]: Boolean(props.textColor)
         }
       }),
       [ header, main, footer ]

src/components/Card/CCardBody.vue

@@ -13,9 +13,9 @@ export default {
         staticClass: 'card-body',
         class: [
           {
-            [`bg-${props.variant}`]: Boolean(props.variant),
-            [`border-${props.borderVariant}`]: Boolean(props.borderVariant),
-            [`text-${props.textVariant}`]: Boolean(props.textVariant),
+            [`bg-${props.color}`]: Boolean(props.color),
+            [`border-${props.borderColor}`]: Boolean(props.borderColor),
+            [`text-${props.textColor}`]: Boolean(props.textColor),
             [`text-${props.align}`]: Boolean(props.align)
           }
         ]