feat: CListGroup: add accent functionality

Author: woothu

src/components/index.d.ts

@@ -374,14 +374,18 @@ export declare class CListGroup extends Vue {
   tag?: string
   flush?: boolean
   horizontal?: string | boolean
+  accent?: boolean
 }
 
 export declare class CListGroupItem extends CLink {
   tag?: string
   action?: boolean
   color?: string
+  accent?: string
 }
 
+export declare class CListGroupItemDivider extends Vue {}
+
 export declare class CMedia extends Vue {
   addAsideMargin?: boolean
   addAsideClasses?: string | Array<any> | object

src/components/list-group/CListGroup.vue

@@ -10,7 +10,8 @@ export default {
       default: 'ul'
     },
     flush: Boolean,
-    horizontal: [Boolean, String]
+    horizontal: [Boolean, String],
+    accent: Boolean
   },
   render (h, { props, data, children }) {
     const hor = props.horizontal
@@ -19,7 +20,8 @@ export default {
       staticClass: 'list-group',
       class: { 
         'list-group-flush': !hor && props.flush,
-        [`list-group-horizontal${horizontalClassSuffix}`]: hor
+        [`list-group-horizontal${horizontalClassSuffix}`]: hor,
+        'list-group-accent': props.accent
       },
       attrs: {
         role: data.attrs ? data.attrs.role || 'list-items' : 'list-items'

src/components/list-group/CListGroupItem.vue

@@ -10,7 +10,8 @@ const props = Object.assign(
       default: 'li'
     },
     action: Boolean,
-    color: String
+    color: String,
+    accent: String
   },
   linkPropsFactory()
 )
@@ -45,6 +46,7 @@ export default {
       staticClass: 'list-group-item',
       class: {
         [`list-group-item-${props.color}`]: props.color,
+        [`list-group-item-accent-${props.accent}`]: props.accent,
         'list-group-item-action': isAction,
         'active': props.active,
         'disabled': props.disabled

src/components/list-group/tests/CListGroup.spec.js

@@ -10,7 +10,8 @@ const wrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    flush: true
+    flush: true,
+    accent: true
   },
   slots: {
     default: 'CListGroup content'

src/components/list-group/tests/CListGroupItem.spec.js

@@ -7,7 +7,8 @@ const customWrapper = mount(Component, {
   propsData: {
     tag: 'button',
     action: true,
-    color: 'success'
+    color: 'success',
+    accent: 'success'
   },
   slots: {
     default: 'CListGroupItem content'

src/components/list-group/tests/__snapshots__/CListGroup.spec.js.snap

@@ -9,7 +9,7 @@ exports[`CListGroup renders correctly 1`] = `
 
 exports[`CListGroup renders correctly with flush option 1`] = `
 <ul
-  class="list-group list-group-flush"
+  class="list-group list-group-flush list-group-accent"
   role="list-items"
 >
   <template>

src/components/list-group/tests/__snapshots__/CListGroupItem.spec.js.snap

@@ -8,7 +8,7 @@ exports[`CListGroupItem renders correctly 1`] = `
 
 exports[`CListGroupItem renders correctly 2`] = `
 <button
-  class="list-group-item list-group-item-success list-group-item-action"
+  class="list-group-item list-group-item-success list-group-item-accent-success list-group-item-action"
   type="button"
 >
   <template>