refactor: add CIcon component to sidebar components, update snapshots

woothu · woothu · commit 79096805b480 · 2019-10-21T11:35:40.000+02:00
diff --git a/src/components/Sidebar/CSidebarNavDropdown.vue b/src/components/Sidebar/CSidebarNavDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <li :class="dropdownClasses">
     <a class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle" @click="handleClick">
-      <i v-if="icon" :class="classIcon"></i>
+      <CIcon v-if="icon" v-bind="computedIcon"/>
       {{name}}
     </a>
     <ul class="c-sidebar-nav-dropdown-items" @click="itemClicked">
@@ -11,15 +11,20 @@
 </template>
 
 <script>
+// import CIcon from '@coreui/icons/vue'
+
 export default {
   name:'CSidebarNavDropdown',
+  // components: {
+  //   CIcon
+  // },
   props: {
     name: String,
     route: {
       type: String,
       validator: val => val.length > 0
     },
-    icon: String,
+    icon: [String, Object],
     show: Boolean
   },
   data () {
@@ -62,6 +67,16 @@ export default {
         'c-sidebar-nav-item c-sidebar-nav-dropdown',
         { 'c-show': this.open }
       ]
+    },
+    computedIcon () {
+      if (typeof this.icon === 'object') {
+        return Object.assign(
+          { customClasses: 'c-sidebar-nav-icon' },
+          this.icon
+        )
+      } else {
+        return { customClasses: [this.icon, 'c-sidebar-nav-icon']}
+      }
     }
   },
   methods: {
diff --git a/src/components/Sidebar/CSidebarNavLink.vue b/src/components/Sidebar/CSidebarNavLink.vue
@@ -6,7 +6,7 @@
       @click.native="click"
     >
       <slot>
-        <i :class="['c-sidebar-nav-icon', icon]"></i> 
+        <CIcon v-if="icon" v-bind="computedIcon"/>
         {{name}}
         <CBadge
           v-if="badge"
@@ -22,10 +22,11 @@
 <script>
 import CLink, { props as linkProps } from '../Link/CLink'
 import CBadge from '../Badge/CBadge'
+// import CIcon from '@coreui/icons/vue'
 
 const props = Object.assign(linkProps, {
   name: String,
-  icon: [String, Array, Object],
+  icon: [String, Object],
   badge: Object,
   addLinkClasses: [String, Array, Object],
   label: Boolean
@@ -35,7 +36,8 @@ export default {
   name: 'CSidebarNavLink',
   components: {
     CLink, 
-    CBadge
+    CBadge,
+    // CIcon
   },
   props,
   computed: {
@@ -56,6 +58,16 @@ export default {
         this.label ? 'c-sidebar-nav-label' : 'c-sidebar-nav-link',
         this.addLinkClasses
       ]
+    },
+    computedIcon () {
+      if (typeof this.icon === 'object') {
+        return Object.assign(
+          { customClasses: 'c-sidebar-nav-icon' },
+          this.icon
+        )
+      } else {
+        return { customClasses: [this.icon, 'c-sidebar-nav-icon']}
+      }
     }
   },
   methods: {
diff --git a/src/components/Sidebar/tests/__snapshots__/CSidebarNavDropdown.spec.js.snap b/src/components/Sidebar/tests/__snapshots__/CSidebarNavDropdown.spec.js.snap
@@ -7,8 +7,8 @@ exports[`CSidebarNavDropdown renders correctly 1`] = `
   <a
     class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle"
   >
-    <i
-      class="c-sidebar-nav-icon cui-settings"
+    <cicon
+      customclasses="cui-settings,c-sidebar-nav-icon"
     />
     
     
diff --git a/src/components/Sidebar/tests/__snapshots__/CSidebarNavLink.spec.js.snap b/src/components/Sidebar/tests/__snapshots__/CSidebarNavLink.spec.js.snap
@@ -10,10 +10,10 @@ exports[`CSidebarNavLink.vue renders correctly 1`] = `
     href="#"
     target="_self"
   >
-    <i
-      class="c-sidebar-nav-icon cui-settings"
+    <cicon
+      customclasses="cui-settings,c-sidebar-nav-icon"
     />
-     
+    
       test link
       
     <span
@@ -37,10 +37,10 @@ exports[`CSidebarNavLink.vue renders correctly in label mode 1`] = `
     href="#"
     target="_self"
   >
-    <i
-      class="c-sidebar-nav-icon cui-settings"
+    <cicon
+      customclasses="cui-settings,c-sidebar-nav-icon"
     />
-     
+    
       test link
       
     <span
diff --git a/src/components/Table/tests/__snapshots__/CTable.spec.js.snap b/src/components/Table/tests/__snapshots__/CTable.spec.js.snap
@@ -34,8 +34,7 @@ exports[`CTable renders correctly 1`] = `
                 No items
                   
                 <svg
-                  class="text-danger mb-2 c-icon"
-                  style="fill: currentColor;"
+                  class="text-danger mb-2 c-icon c-icon-custom-size"
                   viewBox="0 0 24 24"
                   width="30"
                   xmlns="http://www.w3.org/2000/svg"
@@ -175,8 +174,7 @@ exports[`CTable renders correctly 2`] = `
             </div>
              
             <svg
-              class="c-icon icon-transition position-absolute arrow-position rotate-icon"
-              style="fill: currentColor;"
+              class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position rotate-icon"
               viewBox="0 0 24 24"
               width="18"
               xmlns="http://www.w3.org/2000/svg"
@@ -208,8 +206,7 @@ exports[`CTable renders correctly 2`] = `
             </div>
              
             <svg
-              class="c-icon icon-transition position-absolute arrow-position transparent"
-              style="fill: currentColor;"
+              class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               viewBox="0 0 24 24"
               width="18"
               xmlns="http://www.w3.org/2000/svg"
@@ -241,8 +238,7 @@ exports[`CTable renders correctly 2`] = `
             </div>
              
             <svg
-              class="c-icon icon-transition position-absolute arrow-position transparent"
-              style="fill: currentColor;"
+              class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               viewBox="0 0 24 24"
               width="18"
               xmlns="http://www.w3.org/2000/svg"
@@ -274,8 +270,7 @@ exports[`CTable renders correctly 2`] = `
             </div>
              
             <svg
-              class="c-icon icon-transition position-absolute arrow-position transparent"
-              style="fill: currentColor;"
+              class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               viewBox="0 0 24 24"
               width="18"
               xmlns="http://www.w3.org/2000/svg"
@@ -602,8 +597,7 @@ exports[`CTable renders correctly 2`] = `
             </div>
              
             <svg
-              class="c-icon icon-transition position-absolute arrow-position rotate-icon"
-              style="fill: currentColor;"
+              class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position rotate-icon"
               viewBox="0 0 24 24"
               width="18"
               xmlns="http://www.w3.org/2000/svg"
@@ -635,8 +629,7 @@ exports[`CTable renders correctly 2`] = `
             </div>
              
             <svg
-              class="c-icon icon-transition position-absolute arrow-position transparent"
-              style="fill: currentColor;"
+              class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               viewBox="0 0 24 24"
               width="18"
               xmlns="http://www.w3.org/2000/svg"
@@ -668,8 +661,7 @@ exports[`CTable renders correctly 2`] = `
             </div>
              
             <svg
-              class="c-icon icon-transition position-absolute arrow-position transparent"
-              style="fill: currentColor;"
+              class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               viewBox="0 0 24 24"
               width="18"
               xmlns="http://www.w3.org/2000/svg"
@@ -701,8 +693,7 @@ exports[`CTable renders correctly 2`] = `
             </div>
              
             <svg
-              class="c-icon icon-transition position-absolute arrow-position transparent"
-              style="fill: currentColor;"
+              class="c-icon c-icon-custom-size icon-transition position-absolute arrow-position transparent"
               viewBox="0 0 24 24"
               width="18"
               xmlns="http://www.w3.org/2000/svg"

Original file line number	Diff line number	Diff line change
@@ -7,8 +7,8 @@ exports[`CSidebarNavDropdown renders correctly 1`] = `
`7`	`7`	`<a`
`8`	`8`	`class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle"`
`9`	`9`	`>`
`10`		`- <i`
`11`		`- class="c-sidebar-nav-icon cui-settings"`
	`10`	`+ <cicon`
	`11`	`+ customclasses="cui-settings,c-sidebar-nav-icon"`
`12`	`12`	`/>`
`13`	`13`
`14`	`14`