refactor: merge CNavbarToggler and CSidebarToggler into CToggler

Author: woothu

src/components/Navbar/CNavbarToggler.vue

@@ -1,11 +1,9 @@
 import CNavbar from './CNavbar'
 import CNavbarNav from './CNavbarNav'
-import CNavbarToggler from './CNavbarToggler'
 import CNavbarBrand from './CNavbarBrand'
 
 export {
   CNavbar,
   CNavbarNav,
-  CNavbarToggler,
   CNavbarBrand
 }

src/components/Navbar/index.js

@@ -10,7 +10,6 @@ import CSidebarNavDivider from './CSidebarNavDivider'
 import CSidebarNavDropdown from './CSidebarNavDropdown'
 import CSidebarNavLink from './CSidebarNavLink'
 import CSidebarNavTitle from './CSidebarNavTitle'
-import CSidebarToggler from './CSidebarToggler'
 
 export {
   CSidebar,
@@ -24,6 +23,5 @@ export {
   CSidebarNavDivider,
   CSidebarNavDropdown,
   CSidebarNavLink,
-  CSidebarNavTitle,
-  CSidebarToggler
+  CSidebarNavTitle
 }

src/components/Navbar/tests/CNavbarToggler.spec.js

@@ -0,0 +1,32 @@
+<script>
+import { mergeData } from 'vue-functional-data-merge'
+export default {
+  name: 'CToggler',
+  functional: true,
+  props: {
+    tag: {
+      type: String,
+      default: 'button'
+    },
+    inHeader: Boolean,
+    inNavbar: Boolean
+  },
+  render (h, { data, props, slots }) {
+    const attrs = props.tag === 'button' ? { type: 'button' } : null
+    const type = props.inNavbar ? 'navbar' : props.inHeader ? 'header' : null 
+    const staticClass = type ? `${type}-toggler` : ''
+    const iconClass = type ? `${staticClass}-icon` : ''
+    return h(
+      props.tag,
+      mergeData({
+        staticClass,
+        attrs
+      }, data),
+      [ 
+        slots().default || 
+        h('span', { class: iconClass })
+      ]
+    )
+  }
+}
+</script>

src/components/Navbar/tests/__snapshots__/CNavbarToggler.spec.js.snap

@@ -0,0 +1,5 @@
+import CToggler from './CToggler'
+
+export {
+  CToggler
+}

src/components/Sidebar/CSidebarToggler.vue

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import Component from '../CToggler'
+
+const ComponentName = 'CToggler'
+const wrapper = mount(Component)
+
+const wrapperNavbar = mount(Component, {
+  propsData: {
+    inNavbar: true
+  },
+  slots: {
+    default: 'icon'
+  }
+})
+
+const wrapperHeader = mount(Component, {
+  propsData: {
+    inHeader: true,
+    tag: 'div'
+  }
+})
+
+describe(`${ComponentName} .vue`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('renders correctly inNavbar', () => {
+    expect(wrapperNavbar.element).toMatchSnapshot()
+  })
+  it('renders correctly inHeader', () => {
+    expect(wrapperHeader.element).toMatchSnapshot()
+  })
+})

src/components/Sidebar/index.js

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CToggler .vue renders correctly 1`] = `
+<button
+  type="button"
+>
+  <span
+    class=""
+  />
+</button>
+`;
+
+exports[`CToggler .vue renders correctly inHeader 1`] = `
+<div
+  class="header-toggler"
+>
+  <span
+    class="header-toggler-icon"
+  />
+</div>
+`;
+
+exports[`CToggler .vue renders correctly inNavbar 1`] = `
+<button
+  class="navbar-toggler"
+  type="button"
+>
+  icon
+</button>
+`;

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

@@ -417,10 +417,6 @@ export declare class CNavbarNav extends Vue {
   tag: string
 }
 
-export declare class CNavbarToggler extends Vue {
-  tag: string
-}
-
 export declare class CPagination extends Vue {
   activePage: number
   pages: number
@@ -607,6 +603,12 @@ export declare class CToaster extends ToastProps {
   reverse: boolean
 }
 
+export declare class CToggler extends Vue {
+  tag: string
+  inNavbar: boolean
+  inHeader: boolean
+}
+
 export declare class CTreeGenerator extends Vue {
   items: object
   components: object

src/components/Sidebar/tests/__snapshots__/CSidebarToggler.spec.js.snap

@@ -30,4 +30,5 @@ export * from './Switch'
 export * from './Table'
 export * from './Tabs'
 export * from './Toast'
+export * from './Toggler'
 export * from './Widgets'