refactor: rename CNavbarToggle to CNavbarToggler

- add tag prop,
- enable type change

Author: woothu

src/components/Navbar/CNavbarToggle.vue renamed to src/components/Navbar/CNavbarToggler.vue

@@ -1,18 +1,20 @@
 <script>
 import { mergeData } from 'vue-functional-data-merge'
-//todo animation to x
 export default {
-  name: 'CNavbarToggle',
+  name: 'CNavbarToggler',
   functional: true,
-  render (h, {data, slots}) {
+  props: {
+    tag: String
+  },
+  render (h, { data, props, slots }) {
     return h(
-      'button',
-      mergeData(data, {
-        class: [ 'navbar-toggler' ],
+      props.tag || 'button',
+      mergeData({
+        class: 'navbar-toggler',
         attrs: {
           type: 'button',
         }
-      }),
+      }, data),
       [ slots().default || h('span', { class: ['navbar-toggler-icon'] })]
     )
   }

src/components/Navbar/index.js

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

src/components/Navbar/tests/CNavbarToggle.spec.js renamed to src/components/Navbar/tests/CNavbarToggler.spec.js

@@ -1,14 +1,14 @@
 import { mount } from '@vue/test-utils'
-import Component from '../CNavbarToggle'
+import Component from '../CNavbarToggler'
 
-const ComponentName = 'CNavbar'
+const ComponentName = 'CNavbarToggler'
 const defaultWrapper = mount(Component)
 const customWrapper = mount(Component, {
-  propsData: {
-    fill: true,
-    justified: true,
-    pills: true,
-    vertical: true
+  props: {
+    tag: 'div'
+  },
+  attrs: {
+    type: 'submit'
   },
   slots: {
     default: 'CNavbar items'
@@ -17,7 +17,7 @@ const customWrapper = mount(Component, {
 
 describe(ComponentName, () => {
   it('has a name', () => {
-    expect(Component.name).toMatch(ComponentName)
+    expect(Component.name).toBe(ComponentName)
   })
   it('renders correctly', () => {
     expect(defaultWrapper.element).toMatchSnapshot()

src/components/Navbar/tests/__snapshots__/CNavbarToggle.spec.js.snap renamed to src/components/Navbar/tests/__snapshots__/CNavbarToggler.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CNavbar renders correctly 1`] = `
+exports[`CNavbarToggler renders correctly 1`] = `
 <button
   class="navbar-toggler"
   type="button"
@@ -11,14 +11,10 @@ exports[`CNavbar renders correctly 1`] = `
 </button>
 `;
 
-exports[`CNavbar renders correctly 2`] = `
+exports[`CNavbarToggler renders correctly 2`] = `
 <button
   class="navbar-toggler"
-  fill="true"
-  justified="true"
-  pills="true"
-  type="button"
-  vertical="true"
+  type="submit"
 >
   CNavbar items
 </button>

src/components/index.d.ts

@@ -414,7 +414,9 @@ export declare class CNavbarNav extends Vue {
   tag: string
 }
 
-export declare class CNavbarToggle extends Vue {}
+export declare class CNavbarToggler extends Vue {
+  tag: string
+}
 
 export declare class CPagination extends Vue {
   activePage: number