refactor: small refactors:

- CToast: change reverse prop default value to true,
- Add CButtonClose to CModal,
- update snapshots

Author: woothu

src/components/modal/CModal.vue

@@ -14,14 +14,7 @@
                 <h5 class="modal-title">
                   {{title}}
                 </h5>
-                <button
-                  type="button"
-                  class="close"
-                  aria-label="Close"
-                  @click="hide($event)"
-                >
-                  <span>&times;</span>
-                </button>
+                <CButtonClose @click="hide($event)"/>
               </slot>
             </header>
           </slot>
@@ -62,8 +55,13 @@
 </template>
 
 <script>
+import CButtonClose from '../button/CButtonClose'
+
 export default {
   name: 'CModal',
+  components: {
+    CButtonClose
+  },
   props: {
     show: Boolean,
     centered: Boolean,

src/components/modal/tests/CModal.spec.js

@@ -36,11 +36,11 @@ describe(ComponentName, () => {
   it('hides on backdrop click when closeOnBackdrop prop is true', () => {
     const click = () => customWrapper.find('.modal').trigger('click')
     click()
-    expect(customWrapper.emitted().hide).not.toBeTruthy()
+    expect(customWrapper.emitted()['update:show']).not.toBeTruthy()
 
     customWrapper.setProps({ closeOnBackdrop: true })
     click()
-    expect(customWrapper.emitted().hide).toBeTruthy()
+    expect(customWrapper.emitted()['update:show']).toBeTruthy()
   })
   it('doesnt animate when fade prop is set to false', () => {
     defaultWrapper.setProps({ fade: false })

src/components/modal/tests/__snapshots__/CModal.spec.js.snap

@@ -30,9 +30,7 @@ exports[`CModal renders correctly 1`] = `
             class="close"
             type="button"
           >
-            <span>
-              ×
-            </span>
+            ×
           </button>
         </header>
          
@@ -99,9 +97,7 @@ exports[`CModal renders correctly 2`] = `
             class="close"
             type="button"
           >
-            <span>
-              ×
-            </span>
+            ×
           </button>
         </header>
          

src/components/pagination/tests/__snapshots__/CPagination.spec.js.snap

@@ -5,7 +5,7 @@ exports[`CPagination renders correctly 1`] = `
   aria-label="pagination"
 >
   <ul
-    class="pagination pagination-md justify-content-start"
+    class="pagination  justify-content-start"
   >
     <li
       class="page-item disabled"

src/components/toast/CToast.vue

@@ -36,14 +36,14 @@ import CButtonClose from '../button/CButtonClose'
 export default {
   name: 'CToast',
   mixins: [ toastMixin ],
+  components: {
+    CButtonClose
+  },
   props: {
     show: Boolean,
     headerHtml: String,
     bodyHtml: String
   },
-  components: {
-    CButtonClose
-  },
   inject: {
     toaster: {
       default: false

src/components/toast/CToaster.vue

@@ -21,7 +21,10 @@ export default {
   },
   mixins: [ toastMixin ],
   props: {
-    reverse: Boolean
+    reverse: {
+      type: Boolean,
+      default: true
+    }
   },
   computed: {
     toasterClasses () {

src/components/toast/tests/__snapshots__/CToaster.spec.js.snap

@@ -2,14 +2,14 @@
 
 exports[`CToaster renders correctly 1`] = `
 <div
-  class="toaster"
+  class="toaster d-flex flex-column-reverse"
   style="z-index: 1100; min-width: 350px; position: fixed; top: 0px; right: 0px;"
 />
 `;
 
 exports[`CToaster renders correctly custom wrapper 1`] = `
 <div
-  class="toaster"
+  class="toaster d-flex flex-column-reverse"
   style="z-index: 1100; min-width: 350px; position: fixed; top: 0px; left: 0px;"
 >
   <div