refactor: merge CSidebarNavLabel into CSidebarNavLink

Author: woothu

src/components/Sidebar/CSidebarNavLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <li class="c-nav-item">
     <CLink
-      :class="['c-nav-link', addLinkClasses]"
+      :class="linkClasses"
       :exact="true"
       v-bind="linkProps"
       @click.native="click"
@@ -26,13 +26,15 @@ const props = Object.assign(linkProps, {
   name: String,
   icon: [String, Array, Object],
   badge: Object,
-  addLinkClasses: [String, Array, Object]
+  addLinkClasses: [String, Array, Object],
+  label: Boolean
 })
 
 export default {
   name: 'CSidebarNavLink',
   components: {
-    CLink, CBadge
+    CLink, 
+    CBadge
   },
   props,
   computed: {
@@ -41,6 +43,12 @@ export default {
         props[key] = this[key]
         return props
       }, {})
+    },
+    linkClasses () {
+      return [
+        this.label ? 'c-nav-label' : 'c-nav-link',
+        this.addLinkClasses
+      ]
     }
   },
   methods: {

src/components/Sidebar/CSidebarNavLink.vue

@@ -7,7 +7,6 @@ import CSidebarNav from './CSidebarNav'
 import CSidebarMinimizer from './CSidebarMinimizer'
 import CSidebarNavDivider from './CSidebarNavDivider'
 import CSidebarNavDropdown from './CSidebarNavDropdown'
-import CSidebarNavLabel from './CSidebarNavLabel'
 import CSidebarNavLink from './CSidebarNavLink'
 import CSidebarNavTitle from './CSidebarNavTitle'
 import CSidebarToggler from './CSidebarToggler'
@@ -22,7 +21,6 @@ export {
   CSidebarNav,
   CSidebarNavDivider,
   CSidebarNavDropdown,
-  CSidebarNavLabel,
   CSidebarNavLink,
   CSidebarNavTitle,
   CSidebarToggler

src/components/Sidebar/index.js

@@ -17,13 +17,32 @@ const wrapper = mount(Component, {
   }
 })
 
+const wrapperLabel = mount(Component, {
+  attachToDocument: true,
+  propsData: {
+    name: 'test link',
+    label: true,
+    icon: 'cui-settings',
+    badge: {
+      variant: 'success',
+      textHtml: 'NEW'
+    }
+  },
+  attrs: {
+    id: 'link'
+  }
+})
+
 describe(`${ComponentName}.vue`, () => {
   it('has a name', () => {
     expect(Component.name).toBe(ComponentName)
   })
   it('renders correctly', () => {
     expect(wrapper.element).toMatchSnapshot()
   })
+  it('renders correctly in label mode', () => {
+    expect(wrapperLabel.element).toMatchSnapshot()
+  })
   it('emits link-clicked event when clicked', () => {
     // cannot trigger native click
     // wrapper.find('a').trigger('click')

src/components/Sidebar/tests/CSidebarNavLabel.spec.js

@@ -24,3 +24,28 @@ exports[`CSidebarNavLink.vue renders correctly 1`] = `
   </a>
 </li>
 `;
+
+exports[`CSidebarNavLink.vue renders correctly in label mode 1`] = `
+<li
+  class="c-nav-item"
+  id="link"
+>
+  <a
+    class="c-nav-label"
+    href="#"
+    target="_self"
+  >
+    <i
+      class="c-nav-icon cui-settings"
+    />
+     
+      test link
+      
+    <span
+      class="badge badge-success"
+    >
+      NEW
+    </span>
+  </a>
+</li>
+`;