replace ds-button with base-button (wip)

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>

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"
-            >
+        <div class="buttons">
+          <base-button :disabled="disabled && !update" @click="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>
+          </base-button>
+          <base-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
             {{ $t('post.comment.submit') }}
-            </ds-button>
-          </ds-flex-item>
-        </ds-flex>
+          </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>

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
     }

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">

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)
         })

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>

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')
   })

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>

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>