refactor: delete html props from small components

- Remove textHtml prop from CBadge, CLink and CButton,
- refactor CSidebarNavLink, CBreadcrumb and CBreadcrumbRouter,
- update tests and typings

Author: woothu

src/components/Badge/CBadge.vue

@@ -8,8 +8,7 @@ const props = Object.assign(linkProps, {
     default: 'span'
   },
   color: String,
-  pill: Boolean,
-  textHtml: String
+  pill: Boolean
 })
 
 export default {
@@ -18,7 +17,6 @@ export default {
   props,
   render (h, { props, data, children }) {
     const tag = !props.href && !props.to ? props.tag : CLink
-    const domProps = props.textHtml ? { innerHTML: props.textHtml } : null
     const componentData = {
       staticClass: 'badge',
       class: {
@@ -27,7 +25,6 @@ export default {
         'active': props.active,
         'disabled': props.disabled
       },
-      domProps,
       props
     }
     return h(tag, mergeData(data, componentData), children)

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

@@ -5,12 +5,14 @@ const ComponentName = 'CBadge'
 const wrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
-    textHtml: 'Badge text',
     color: 'success',
     active: true,
     pill: true,
     disabled: true,
     href: 'someLink'
+  },
+  slots: {
+    default: 'Badge text'
   }
 })
 
@@ -21,7 +23,7 @@ describe(`${ComponentName} .vue`, () => {
   it('renders correctly', () => {
     expect(wrapper.element).toMatchSnapshot()
   })
-  it('renders correctly from textHtml prop', () => {
+  it('renders correctly with slot', () => {
     expect(customWrapper.element).toMatchSnapshot()
   })
 });

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

@@ -17,3 +17,17 @@ exports[`CBadge .vue renders correctly from textHtml prop 1`] = `
   Badge text
 </a>
 `;
+
+exports[`CBadge .vue renders correctly with slot 1`] = `
+<a
+  aria-disabled="true"
+  class="badge disabled active badge-success badge-pill active disabled"
+  href="someLink"
+  tabindex="-1"
+  target="_self"
+>
+  <template>
+    Badge text
+  </template>
+</a>
+`;

src/components/Breadcrumb/CBreadcrumb.vue

@@ -6,17 +6,16 @@
       :class="[item.addClasses, sharedClasses, addLinkClasses]"
       role="presentation"
     >
-      <component 
-        :is="'CLink'" 
-        v-bind="Object.assign({}, item, { addClasses: null })"
-      />
+      <CLink v-bind="Object.assign({}, item, { addClasses: null, text: null })">
+        {{item.text}}
+      </CLink>
     </li>
     <li 
       :class="['active', lastItem.addClasses, sharedClasses, addLastItemClasses]"
       role="presentation"
     >
      <!-- span added to enable text styling through classes -->
-     <span v-text="lastItem.textHtml"></span>
+     <span v-text="lastItem.text"></span>
     </li>
     <slot></slot>
   </ol>

src/components/Breadcrumb/CBreadcrumbRouter.vue

@@ -26,7 +26,7 @@ export default {
         const meta = route.meta || {}
         return {
           to: route,
-          textHtml: meta.label || route.name
+          text: meta.label || route.name
         }
       })
     },

src/components/Breadcrumb/tests/__snapshots__/CBreadcrumb.spec.js.snap

@@ -12,8 +12,11 @@ exports[`CBreadcrumb renders correctly 1`] = `
       class=""
       href="#"
       target="_self"
-      text="Admin"
-    />
+    >
+      
+      Admin
+    
+    </a>
   </li>
   <li
     class="additional-class breadcrumb-item additional-link-class"
@@ -23,15 +26,20 @@ exports[`CBreadcrumb renders correctly 1`] = `
       class=""
       href="#"
       target="_self"
-      text="Manage"
-    />
+    >
+      
+      Manage
+    
+    </a>
   </li>
    
   <li
     class="active additional-class breadcrumb-item additional-last-item-class"
     role="presentation"
   >
-    <span />
+    <span>
+      Library
+    </span>
   </li>
    
 </ol>

src/components/Breadcrumb/tests/__snapshots__/CBreadcrumbRouter.spec.js.snap

@@ -13,7 +13,9 @@ exports[`CBreadcrumbRouter renders correctly 1`] = `
       href="#"
       target="_self"
     >
+      
       Home
+    
     </a>
   </li>
   <li
@@ -25,7 +27,9 @@ exports[`CBreadcrumbRouter renders correctly 1`] = `
       href="#"
       target="_self"
     >
+      
       Menu
+    
     </a>
   </li>
    

src/components/Button/CButton.vue

@@ -21,8 +21,7 @@ const btnProps = {
   pressed: {
     type: Boolean,
     default: null
-  },
-  textHtml: String
+  }
 }
 export const props = Object.assign(linkPropsFactory(), btnProps)
 
@@ -81,13 +80,11 @@ export default {
         }
       }
     }
-    const domProps = children ? '' : { innerHTML: props.textHtml }
     const componentData = {
       staticClass: 'btn',
       class: computeClasses(props),
       props: computePassedProps(props),
       attrs: computeAttrs(props, data, isButton, toggle),
-      domProps,
       on
     }
     return h(

src/components/Link/CLink.vue

@@ -4,7 +4,6 @@ import { mergeData } from 'vue-functional-data-merge'
 export function propsFactory () {
   return {
     href: String,
-    textHtml: String,
     rel: String,
     target: {
       type: String,
@@ -80,8 +79,6 @@ export default {
 
     const tabindex = data.attrs ? data.attrs.tabindex : null
 
-    const domProps = props.textHtml ? { innerHTML: props.textHtml } : null
-
     const componentData = mergeData(data, {
       class: {
         'disabled': props.disabled,
@@ -94,7 +91,6 @@ export default {
         tabindex: props.disabled ? '-1' : tabindex,
         'aria-disabled': tag === 'a' && props.disabled ? 'true' : null
       },
-      domProps,
       props: Object.assign(props, { tag: props.routerTag })
     })
 

src/components/Link/tests/CLink.spec.js

@@ -22,8 +22,6 @@ const App = localVue.extend({
       h('CLink', { props: { to: '/a' }, nativeOn: { click } }, ['to-path-a']),
       // regular link
       h('CLink', { props: { href: '/a' }, on: { click } }, ['href-a']),
-      // regular link with textHtml prop
-      h('CLink', { props: { href: '/a', textHtml: 'href-a' } }),
       // disabled link
       h('CLink', { props: { disabled: true, href: '/a' }, on: { click } }, ['href-a'])
     ])
@@ -46,7 +44,6 @@ describe(`${ComponentName} .vue`, () => {
     const links = customWrapper.findAll('a')
 
     links.at(2).trigger('click')  
-    links.at(3).trigger('click')
     expect(triggerLink).not.toBeCalled()
 
     links.at(0).trigger('click')

src/components/Link/tests/__snapshots__/CLink.spec.js.snap

@@ -24,13 +24,6 @@ exports[`CLink .vue renders correctly 2`] = `
   >
     href-a
   </a>
-  <a
-    class=""
-    href="/a"
-    target="_self"
-  >
-    href-a
-  </a>
   <a
     aria-disabled="true"
     class="disabled"

src/components/Sidebar/CSidebarNavLink.vue

@@ -10,8 +10,10 @@
         {{name}}
         <CBadge
           v-if="badge"
-          v-bind="badge"
-        />
+          v-bind="Object.assign({}, badge, { text: null })"
+        >
+          {{badge.text}}
+        </CBadge>
       </slot>
     </CLink>
   </li>

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

@@ -9,7 +9,7 @@ const wrapper = mount(Component, {
     icon: 'cui-settings',
     badge: {
       color: 'success',
-      textHtml: 'NEW'
+      text: 'NEW'
     }
   },
   attrs: {
@@ -25,7 +25,7 @@ const wrapperLabel = mount(Component, {
     icon: 'cui-settings',
     badge: {
       color: 'success',
-      textHtml: 'NEW'
+      text: 'NEW'
     }
   },
   attrs: {

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

@@ -19,7 +19,9 @@ exports[`CSidebarNavLink.vue renders correctly 1`] = `
     <span
       class="badge badge-success"
     >
-      NEW
+      
+        NEW
+      
     </span>
   </a>
 </li>
@@ -44,7 +46,9 @@ exports[`CSidebarNavLink.vue renders correctly in label mode 1`] = `
     <span
       class="badge badge-success"
     >
-      NEW
+      
+        NEW
+      
     </span>
   </a>
 </li>

src/components/Toggler/tests/__snapshots__/CToggler.spec.js.snap

@@ -12,10 +12,10 @@ exports[`CToggler .vue renders correctly 1`] = `
 
 exports[`CToggler .vue renders correctly inHeader 1`] = `
 <div
-  class="header-toggler"
+  class="c-header-toggler"
 >
   <span
-    class="header-toggler-icon"
+    class="c-header-toggler-icon"
   />
 </div>
 `;

src/components/index.d.ts

@@ -10,7 +10,6 @@ export declare class CBadge extends CLink {
   tag: string
   color: string
   pill: boolean
-  textHtml: string
 }
 
 export declare class CBreadcrumb extends Vue {
@@ -36,7 +35,6 @@ export declare class CButton extends CLink {
   color: string
   type: string
   pressed: boolean
-  textHtml: string
 }
 
 export declare class CButtonClose extends Vue {
@@ -337,7 +335,6 @@ export declare class CJumbotron extends Vue {
 
 export declare class CLink extends Vue {
   href: string
-  textHtml: string
   rel: string
   target: string
   disabled: boolean