continue to replace ds-button with base-button (wip)

webapp/components/EnterNonce/EnterNonce.vue

@@ -1,30 +1,27 @@
 <template>
-  <ds-space margin-top="large" margin-bottom="xxx-small">
-    <ds-form
-      v-model="formData"
-      :schema="formSchema"
-      @submit="handleSubmitVerify"
-      @input="handleInput"
-      @input-valid="handleInputValid"
-    >
-      <ds-input
-        :placeholder="$t('components.enter-nonce.form.nonce')"
-        model="nonce"
-        name="nonce"
-        id="nonce"
-        icon="question-circle"
-      />
-      <ds-space margin-botton="large">
-        <ds-text>
-          {{ $t('components.enter-nonce.form.description') }}
-        </ds-text>
-      </ds-space>
-      <ds-button :disabled="disabled" primary fullwidth name="submit" type="submit">
-        {{ $t('components.enter-nonce.form.next') }}
-      </ds-button>
-    </ds-form>
+  <ds-form
+    class="enter-nonce"
+    v-model="formData"
+    :schema="formSchema"
+    @submit="handleSubmitVerify"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+  >
+    <ds-input
+      :placeholder="$t('components.enter-nonce.form.nonce')"
+      model="nonce"
+      name="nonce"
+      id="nonce"
+      icon="question-circle"
+    />
+    <ds-text>
+      {{ $t('components.enter-nonce.form.description') }}
+    </ds-text>
+    <base-button :disabled="disabled" primary name="submit" type="submit">
+      {{ $t('components.enter-nonce.form.next') }}
+    </base-button>
     <slot></slot>
-  </ds-space>
+  </ds-form>
 </template>
 
 <script>
@@ -64,3 +61,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.enter-nonce {
+  display: flex;
+  flex-direction: column;
+  margin: $space-large 0 $space-xxx-small 0;
+}
+</style>

webapp/components/FilterMenu/FilterMenu.vue

@@ -6,15 +6,16 @@
       </ds-flex-item>
       <ds-flex-item>
         <div class="filter-menu-buttons">
-          <ds-button
+          <base-button
+            name="clear-search-button"
+            icon="close"
+            circle
+            @click="clearSearch"
             v-tooltip="{
               content: this.$t('filter-menu.clearSearch'),
               placement: 'left',
               delay: { show: 500 },
             }"
-            name="clear-search-button"
-            icon="close"
-            @click="clearSearch"
           />
         </div>
       </ds-flex-item>

webapp/components/FilterPosts/CategoriesFilterMenuItems.vue

@@ -12,9 +12,10 @@
         <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
-            <ds-button
+            <base-button
+              circle
               icon="check"
-              @click.stop.prevent="resetCategories"
+              @click="resetCategories"
               :primary="!filteredCategoryIds.length"
             />
             <ds-flex-item>
@@ -37,10 +38,11 @@
         <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
           <ds-flex class="categories-menu">
             <ds-flex-item width="100%" class="categories-menu-item">
-              <ds-button
+              <base-button
+                circle
                 :icon="category.icon"
                 :primary="filteredCategoryIds.includes(category.id)"
-                @click.stop.prevent="toggleCategory(category.id)"
+                @click="toggleCategory(category.id)"
               />
               <ds-space margin-bottom="small" />
             </ds-flex-item>

webapp/components/FilterPosts/FilterPosts.spec.js

@@ -92,7 +92,7 @@ describe('FilterPosts.vue', () => {
     it('starts with all categories button active', () => {
       const wrapper = openFilterPosts()
       allCategoriesButton = wrapper.findAll('button').at(1)
-      expect(allCategoriesButton.attributes().class).toContain('ds-button-primary')
+      expect(allCategoriesButton.attributes().class).toContain('.base-button.--primary')
     })
 
     it('calls TOGGLE_CATEGORY when clicked', () => {
@@ -115,7 +115,7 @@ describe('FilterPosts.vue', () => {
       getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
       const wrapper = openFilterPosts()
       democracyAndPoliticsButton = wrapper.findAll('button').at(4)
-      expect(democracyAndPoliticsButton.attributes().class).toContain('ds-button-primary')
+      expect(democracyAndPoliticsButton.attributes().class).toContain('base-button.--primary')
     })
 
     it('sets language button attribute `primary` when corresponding language is filtered', () => {
@@ -124,14 +124,14 @@ describe('FilterPosts.vue', () => {
       spanishButton = wrapper
         .findAll('button.language-buttons')
         .at(languages.findIndex(l => l.code === 'es'))
-      expect(spanishButton.attributes().class).toContain('ds-button-primary')
+      expect(spanishButton.attributes().class).toContain('base-button.--primary')
     })
 
     it('sets "filter-by-followed-authors-only" button attribute `primary`', () => {
       getters['posts/filteredByUsersFollowed'] = jest.fn(() => true)
       const wrapper = openFilterPosts()
       expect(
-        wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('ds-button-primary'),
+        wrapper.find({ name: 'filter-by-followed-authors-only' }).classes('base-button.--primary'),
       ).toBe(true)
     })
 

webapp/components/FilterPosts/FilterPosts.vue

@@ -1,6 +1,6 @@
 <template>
   <dropdown ref="menu" :placement="placement" :offset="offset">
-    <ds-button
+    <base-button
       slot="default"
       icon="filter"
       :primary="filterActive"
@@ -9,7 +9,7 @@
       @click.prevent="toggleMenu()"
     >
       <base-icon class="dropdown-arrow" name="angle-down" />
-    </ds-button>
+    </base-button>
     <template slot="popover">
       <ds-container>
         <categories-filter-menu-items :chunk="chunk" />

webapp/components/FilterPosts/GeneralFilterMenuItems.vue

@@ -13,17 +13,18 @@
           <ds-flex-item width="10%" />
           <ds-space margin-bottom="xx-small" />
           <ds-flex-item width="100%">
-            <div class="follow-button">
-              <ds-button
+            <div class="follow-filter-button">
+              <base-button
+                name="filter-by-followed-authors-only"
+                icon="user-plus"
+                circle
+                :primary="filteredByUsersFollowed"
+                @click="toggleFilteredByFollowed(user.id)"
                 v-tooltip="{
                   content: this.$t('contribution.filterFollow'),
                   placement: 'left',
                   delay: { show: 500 },
                 }"
-                name="filter-by-followed-authors-only"
-                icon="user-plus"
-                :primary="filteredByUsersFollowed"
-                @click="toggleFilteredByFollowed(user.id)"
               />
               <ds-space margin-bottom="x-small" />
               <ds-flex-item>
@@ -36,14 +37,13 @@
       </ds-flex-item>
       <div v-for="emotion in emotionsArray" :key="emotion">
         <ds-flex-item :width="{ lg: '100%' }">
-          <ds-button
-            size="large"
-            ghost
+          <base-button
             @click="toogleFilteredByEmotions(emotion)"
             class="emotions-buttons"
+            circle
           >
             <img :src="iconPath(emotion)" width="40" />
-          </ds-button>
+          </base-button>
           <ds-space margin-bottom="x-small" />
           <ds-flex-item class="emotions-mobile-space text-center">
             <label class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</label>
@@ -99,7 +99,7 @@ export default {
   #filter-posts-header {
     text-align: center;
   }
-  .follow-button {
+  .follow-filter-button {
     float: left;
   }
 }

webapp/components/FilterPosts/LanguageFilterMenuItems.vue

@@ -12,10 +12,11 @@
         <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
-            <ds-button
+            <base-button
               icon="check"
-              @click.stop.prevent="resetLanguages"
+              circle
               :primary="!filteredLanguageCodes.length"
+              @click="resetLanguages"
             />
             <ds-flex-item>
               <label class="language-labels">{{ $t('filter-posts.language.all') }}</label>
@@ -32,13 +33,14 @@
       <ds-flex v-for="language in locales" :key="language.code" class="languages-menu">
         <ds-flex class="languages-menu">
           <ds-flex-item width="100%" class="language-menu-item">
-            <ds-button
+            <base-button
               class="language-buttons"
+              circle
               :primary="filteredLanguageCodes.includes(language.code)"
-              @click.stop.prevent="toggleLanguage(language.code)"
+              @click="toggleLanguage(language.code)"
             >
               {{ language.code.toUpperCase() }}
-            </ds-button>
+            </base-button>
             <ds-space margin-bottom="small" />
           </ds-flex-item>
           <ds-flex>

webapp/components/FollowButton.vue

@@ -1,17 +1,17 @@
 <template>
-  <ds-button
+  <base-button
+    class="follow-button"
     :disabled="disabled || !followId"
     :loading="loading"
     :icon="icon"
     :primary="isFollowed && !hovered"
     :danger="isFollowed && hovered"
-    fullwidth
     @mouseenter.native="onHover"
     @mouseleave.native="hovered = false"
     @click.prevent="toggle"
   >
     {{ label }}
-  </ds-button>
+  </base-button>
 </template>
 
 <script>
@@ -83,3 +83,10 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.follow-button {
+  display: block;
+  width: 100%;
+}
+</style>

webapp/components/features/ReportRow/ReportRow.spec.js

@@ -40,7 +40,7 @@ describe('ReportRow', () => {
       beforeEach(() => {
         propsData = { ...propsData, report: reports[1] }
         wrapper = Wrapper()
-        confirmButton = wrapper.find('.ds-button-danger')
+        confirmButton = wrapper.find('.base-button.--danger')
       })
 
       it('renders a confirm button', () => {

webapp/components/features/ReportRow/ReportRow.vue

@@ -11,9 +11,9 @@
         <span class="user-count">
           {{ $t('moderation.reports.numberOfUsers', { count: report.filed.length }) }}
         </span>
-        <ds-button size="small" @click="showFiledReports = !showFiledReports">
+        <base-button size="small" @click="showFiledReports = !showFiledReports">
           {{ $t('moderation.reports.moreDetails') }}
-        </ds-button>
+        </base-button>
       </td>
 
       <!-- Content Column -->
@@ -61,7 +61,7 @@
         <span v-if="report.closed" class="title">
           {{ $t('moderation.reports.decided') }}
         </span>
-        <ds-button
+        <base-button
           v-else
           danger
           data-test="confirm"
@@ -70,7 +70,7 @@
           @click="$emit('confirm-report')"
         >
           {{ $t('moderation.reports.decideButton') }}
-        </ds-button>
+        </base-button>
       </td>
     </tr>