feat: allow to hide cancel button of confirmation modal (#1796)

ArkEcosystem · Mar 9, 2020 · d04ac63 · d04ac63
1 parent 99bc099
commit d04ac63
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/__tests__/unit/components/Modal/ModalConfirmation.spec.js b/__tests__/unit/components/Modal/ModalConfirmation.spec.js
@@ -14,6 +14,24 @@ describe('ModalConfirmation', () => {
     expect(wrapper.isVueInstance()).toBeTrue()
   })
 
+  it('should render buttons', () => {
+    expect(wrapper.findAll('button')).toHaveLength(2)
+    expect(wrapper.find('.ModalConfirmation__cancel-button').isVisible())
+    expect(wrapper.find('.ModalConfirmation__continue-button').isVisible())
+  })
+
+  it('should be possible to hide the cancel button', () => {
+    wrapper = shallowMount(ModalConfirmation, {
+      i18n,
+      propsData: {
+        showCancelButton: false
+      }
+    })
+    expect(wrapper.findAll('button')).toHaveLength(1)
+    expect(wrapper.find('.ModalConfirmation__cancel-button').exists()).toBe(false)
+    expect(wrapper.find('.ModalConfirmation__continue-button').isVisible())
+  })
+
   it('should default portal target to "modal"', () => {
     expect(wrapper.props('portalTarget')).toBe('modal')
   })

diff --git a/src/renderer/components/Modal/ModalConfirmation.vue b/src/renderer/components/Modal/ModalConfirmation.vue
@@ -28,14 +28,15 @@
 
       <div class="mt-4 flex flex-row">
         <button
-          class="blue-button"
+          v-if="showCancelButton"
+          class="ModalConfirmation__cancel-button blue-button"
           @click="emitCancel"
         >
           {{ cancelButton }}
         </button>
 
         <button
-          class="action-button px-8"
+          class="ModalConfirmation__continue-button action-button py-4 px-8"
           @click="emitContinue"
         >
           {{ continueButton }}
@@ -63,6 +64,11 @@ export default {
         return this.$t('MODAL_CONFIRMATION.CANCEL')
       }
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     containerClasses: {
       type: String,
       required: false,