From 7c7a800bc27f82bd690e802526d707c2a1d8a344 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Thu, 19 Dec 2019 00:50:27 +0530
Subject: [PATCH] replace ds-button with base-button (wip)

---
 .../CategoriesSelect/CategoriesSelect.vue     | 10 ++---
 webapp/components/CommentForm/CommentForm.vue | 44 ++++++++++---------
 .../ContentMenu/ContentMenu.spec.js           |  2 +-
 webapp/components/ContentMenu/ContentMenu.vue | 11 +++--
 .../ContributionForm/ContributionForm.spec.js |  2 +-
 .../ContributionForm/ContributionForm.vue     | 13 +++---
 .../DonationInfo/DonationInfo.spec.js         |  2 +-
 .../components/DonationInfo/DonationInfo.vue  |  2 +-
 webapp/components/Editor/MenuBarButton.vue    |  4 +-
 9 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 493256546..9ec8688c4 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -3,16 +3,16 @@
     <ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'xx-small' }">
       <div v-for="category in categories" :key="category.id">
         <ds-flex-item>
-          <ds-button
-            size="small"
+          <base-button
             :data-test="categoryButtonsId(category.id)"
-            @click.prevent="toggleCategory(category.id)"
+            @click="toggleCategory(category.id)"
             :primary="isActive(category.id)"
             :disabled="isDisabled(category.id)"
+            :icon="category.icon"
+            size="small"
           >
-            <base-icon :name="category.icon" />
             {{ $t(`contribution.category.name.${category.slug}`) }}
-          </ds-button>
+          </base-button>
         </ds-flex-item>
       </div>
     </ds-flex>
diff --git a/webapp/components/CommentForm/CommentForm.vue b/webapp/components/CommentForm/CommentForm.vue
index 6cdd08af3..88253065f 100644
--- a/webapp/components/CommentForm/CommentForm.vue
+++ b/webapp/components/CommentForm/CommentForm.vue
@@ -1,28 +1,17 @@
 <template>
-  <ds-form v-model="form" @submit="handleSubmit">
+  <ds-form v-model="form" @submit="handleSubmit" class="comment-form">
     <template slot-scope="{ errors }">
       <ds-card>
         <!-- with client-only the content is not shown -->
         <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
-        <ds-space />
-        <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
-          <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
-          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
-            <ds-button
-              :disabled="disabled && !update"
-              ghost
-              class="cancelBtn"
-              @click.prevent="handleCancel"
-            >
-              {{ $t('actions.cancel') }}
-            </ds-button>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
-            <ds-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
-              {{ $t('post.comment.submit') }}
-            </ds-button>
-          </ds-flex-item>
-        </ds-flex>
+        <div class="buttons">
+          <base-button :disabled="disabled && !update" @click="handleCancel">
+            {{ $t('actions.cancel') }}
+          </base-button>
+          <base-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
+            {{ $t('post.comment.submit') }}
+          </base-button>
+        </div>
       </ds-card>
     </template>
   </ds-form>
@@ -78,6 +67,7 @@ export default {
       this.$emit('showEditCommentMenu', false)
     },
     handleCancel() {
+      console.log('handle cancel')
       if (!this.update) {
         this.clear()
       } else {
@@ -146,3 +136,17 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.comment-form {
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    margin: $space-small 0;
+
+    > .base-button {
+      margin-left: $space-x-small;
+    }
+  }
+}
+</style>
diff --git a/webapp/components/ContentMenu/ContentMenu.spec.js b/webapp/components/ContentMenu/ContentMenu.spec.js
index 7894dea0e..77ca36e35 100644
--- a/webapp/components/ContentMenu/ContentMenu.spec.js
+++ b/webapp/components/ContentMenu/ContentMenu.spec.js
@@ -46,7 +46,7 @@ describe('ContentMenu.vue', () => {
         store,
         localVue,
       })
-      menuToggle = wrapper.find('.content-menu-trigger')
+      menuToggle = wrapper.find('[data-test="content-menu-button"]')
       menuToggle.trigger('click')
       return wrapper
     }
diff --git a/webapp/components/ContentMenu/ContentMenu.vue b/webapp/components/ContentMenu/ContentMenu.vue
index 25192c21e..b3c73c687 100644
--- a/webapp/components/ContentMenu/ContentMenu.vue
+++ b/webapp/components/ContentMenu/ContentMenu.vue
@@ -2,9 +2,14 @@
   <dropdown class="content-menu" :placement="placement" offset="5">
     <template slot="default" slot-scope="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
-        <ds-button class="content-menu-trigger" size="small" ghost @click.prevent="toggleMenu">
-          <base-icon name="ellipsis-v" />
-        </ds-button>
+        <base-button
+          data-test="content-menu-button"
+          icon="ellipsis-v"
+          size="small"
+          circle
+          ghost
+          @click="toggleMenu"
+        />
       </slot>
     </template>
     <div slot="popover" slot-scope="{ toggleMenu }" class="content-menu-popover">
diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 8c50f30b6..85ee286d0 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -257,7 +257,7 @@ describe('ContributionForm.vue', () => {
 
       describe('cancel', () => {
         it('calls $router.back() when cancel button clicked', () => {
-          cancelBtn = wrapper.find('.cancel-button')
+          cancelBtn = wrapper.find('[data-test="cancel-button"]')
           cancelBtn.trigger('click')
           expect(mocks.$router.back).toHaveBeenCalledTimes(1)
         })
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index eeba47b72..d67af69d9 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -82,17 +82,16 @@
         </ds-text>
         <ds-space />
         <div slot="footer" style="text-align: right">
-          <ds-button
-            class="cancel-button"
+          <base-button
+            data-test="cancel-button"
             :disabled="loading"
-            ghost
-            @click.prevent="$router.back()"
+            @click="$router.back()"
           >
             {{ $t('actions.cancel') }}
-          </ds-button>
-          <ds-button type="submit" icon="check" :loading="loading" :disabled="errors" primary>
+          </base-button>
+          <base-button type="submit" icon="check" :loading="loading" :disabled="errors" primary>
             {{ $t('actions.save') }}
-          </ds-button>
+          </base-button>
         </div>
         <ds-space margin-bottom="large" />
       </ds-card>
diff --git a/webapp/components/DonationInfo/DonationInfo.spec.js b/webapp/components/DonationInfo/DonationInfo.spec.js
index c308e2146..8687c73b0 100644
--- a/webapp/components/DonationInfo/DonationInfo.spec.js
+++ b/webapp/components/DonationInfo/DonationInfo.spec.js
@@ -32,7 +32,7 @@ describe('DonationInfo.vue', () => {
   it('displays a call to action button', () => {
     expect(
       Wrapper()
-        .find('.ds-button')
+        .find('.base-button')
         .text(),
     ).toBe('donations.donate-now')
   })
diff --git a/webapp/components/DonationInfo/DonationInfo.vue b/webapp/components/DonationInfo/DonationInfo.vue
index 10f42e880..1bf331b10 100644
--- a/webapp/components/DonationInfo/DonationInfo.vue
+++ b/webapp/components/DonationInfo/DonationInfo.vue
@@ -2,7 +2,7 @@
   <div class="donation-info">
     <progress-bar :title="title" :label="label" :goal="goal" :progress="progress" />
     <a target="_blank" href="https://human-connection.org/spenden/">
-      <ds-button primary>{{ $t('donations.donate-now') }}</ds-button>
+      <base-button primary>{{ $t('donations.donate-now') }}</base-button>
     </a>
   </div>
 </template>
diff --git a/webapp/components/Editor/MenuBarButton.vue b/webapp/components/Editor/MenuBarButton.vue
index 49e480ca5..2543352ca 100644
--- a/webapp/components/Editor/MenuBarButton.vue
+++ b/webapp/components/Editor/MenuBarButton.vue
@@ -1,7 +1,7 @@
 <template>
-  <ds-button size="small" :ghost="!isActive" @click.prevent="onClick" :icon="icon">
+  <base-button size="small" circle :ghost="!isActive" @click="onClick" :icon="icon">
     <span v-if="label">{{ label }}</span>
-  </ds-button>
+  </base-button>
 </template>
 
 <script>