From 855f55bb9caa600afb0c03f8661f5cc727fe9408 Mon Sep 17 00:00:00 2001
From: Guergana Tzatchkova <guergana.tzatchkova@wikimedia.de>
Date: Thu, 16 Nov 2023 16:25:31 +0100
Subject: [PATCH] Replace wikit button with codex button (#764)

* Replace wikit button with codex button

Bug: T346797
---
 resources/js/Components/MismatchRow.vue | 15 ++++----
 resources/js/Pages/Home.vue             | 49 +++++++++++++------------
 resources/js/Pages/Layout.vue           | 20 ++++++----
 resources/js/Pages/Results.vue          | 48 ++++++++++++------------
 resources/sass/app.scss                 |  6 +++
 5 files changed, 74 insertions(+), 64 deletions(-)

diff --git a/resources/js/Components/MismatchRow.vue b/resources/js/Components/MismatchRow.vue
index f7d30d54..c7c61033 100644
--- a/resources/js/Components/MismatchRow.vue
+++ b/resources/js/Components/MismatchRow.vue
@@ -68,15 +68,15 @@
                 <span class="upload-date">{{uploadDate}}</span>
                 <div class="description">
                   {{uploadInfoDescription}}
-                  <wikit-button
+                  <cdx-button
                       v-if="shouldTruncate"
                       class="full-description-button"
-                      variant="quiet"
-                      type="progressive"
-                      @click.native="showDialog"
+                      weight="quiet"
+                      action="progressive"
+                      @click="showDialog"
                   >
                       {{$i18n('results-full-description-button')}}
-                  </wikit-button>
+                  </cdx-button>
                 </div>
             </div>
             <cdx-dialog class="full-description-dialog"
@@ -111,10 +111,9 @@ import { formatISO } from 'date-fns';
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import {
-    Button as WikitButton,
     Link as WikitLink
 } from '@wmde/wikit-vue-components';
-import { CdxDialog, CdxSelect } from "@wikimedia/codex";
+import { CdxButton, CdxDialog, CdxSelect } from "@wikimedia/codex";
 import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
 
 import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
@@ -138,7 +137,7 @@ interface MismatchRowState {
 
 export default defineComponent({
     components: {
-    WikitButton,
+    CdxButton,
     WikitLink,
     CdxDialog,
     CdxSelect
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index e50f0966..e46bfb89 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -4,17 +4,15 @@
         <section id="description-section">
             <header class="description-header">
                 <h2 class="h4">{{ $i18n('about-mismatch-finder-title') }}</h2>
-                <wikit-button
+                <cdx-button
                     id="faq-button"
-                    variant="quiet"
-                    type="progressive"
-                    @click.native="faqDialog = true"
+                    weight="quiet"
+                    action="progressive"
+                    @click="faqDialog = true"
                 >
-                    <template #prefix>
-                        <icon type="info-outlined" size="medium" color="inherit"/>
-                    </template>
+                    <cdx-icon :icon="cdxIconInfo" />
                     {{ $i18n('faq-button') }}
-                </wikit-button>
+                </cdx-button>
             </header>
             <cdx-dialog id="faq-dialog"
                         v-model:open="faqDialog"
@@ -69,17 +67,15 @@
         <section id="querying-section">
             <div class="heading">
                 <h2 class="h5">{{ $i18n('item-form-title') }}</h2>
-                <wikit-button
+                <cdx-button
                     class="random-mismatches"
-                    type="neutral"
-                    @click.native="showRandom()"
+                    weight="normal"
+                    @click="showRandom()"
                     :disabled="loading"
                 >
-                    <template #prefix>
-                        <icon type="die" size="medium" color="inherit"/>
-                    </template>
+                    <cdx-icon :icon="cdxIconDie" />
                     {{ $i18n('random-mismatches') }}
-                </wikit-button>
+                </cdx-button>
             </div>
             <form id="items-form" @submit.prevent="send">
                 <text-area
@@ -91,15 +87,15 @@
                     v-model="form.itemsInput"
                 />
                 <div class="form-buttons">
-                    <wikit-button
+                    <cdx-button
                         class="submit-ids"
-                        variant="primary"
-                        type="progressive"
+                        weight="primary"
+                        action="progressive"
                         native-type="submit"
                         :disabled="loading"
                     >
                         {{ $i18n('item-form-submit') }}
-                    </wikit-button>
+                    </cdx-button>
                 </div>
             </form>
         </section>
@@ -111,12 +107,11 @@
     import { mapState } from 'pinia';
     import { useStore } from '../store';
     import {
-        Button as WikitButton,
-        Icon,
         Message,
         TextArea
     } from '@wmde/wikit-vue-components';
-    import { CdxDialog } from "@wikimedia/codex";
+    import { CdxDialog, CdxButton, CdxIcon } from "@wikimedia/codex";
+    import { cdxIconDie, cdxIconInfo } from '@wikimedia/codex-icons';
     import { defineComponent } from 'vue';
 
     interface HomeState {
@@ -143,11 +138,17 @@
     export default defineComponent({
         components: {
           CdxDialog,
+          CdxButton,
+          CdxIcon,
           InertiaHead,
-          Icon,
           Message,
           TextArea,
-          WikitButton
+        },
+        setup() {
+            return {
+                cdxIconDie,
+                cdxIconInfo
+            };
         },
         methods: {
             splitInput: function(): Array<string> {
diff --git a/resources/js/Pages/Layout.vue b/resources/js/Pages/Layout.vue
index 5cf3013e..1f9a3334 100644
--- a/resources/js/Pages/Layout.vue
+++ b/resources/js/Pages/Layout.vue
@@ -8,11 +8,9 @@
                 </InertiaLink>
                 <div class="userSection" ref="userSection">
                     <div v-detect-click-outside="onClickOutsideLanguageSelector" class="languageSelector">
-                        <LanguageSelectorButton type="neutral" :aria-label="$i18n('toggle-language-selector-button')"
-                            @click.native="onToggleLanguageSelector">
-                            <template #prefix>
-                                <Icon type="language-selector" />
-                            </template>
+                        <LanguageSelectorButton :aria-label="$i18n('toggle-language-selector-button')"
+                            @click="onToggleLanguageSelector">
+                            <cdx-icon :icon="cdxIconLanguage" />
                             {{ currentLanguageAutonym }}
                         </LanguageSelectorButton>
                         <LanguageSelector v-show="showLanguageSelector" ref="languageSelector"
@@ -70,7 +68,8 @@
 import { PropType } from 'vue';
 import { Link as InertiaLink } from '@inertiajs/inertia-vue3';
 import { Link as WikitLink } from '@wmde/wikit-vue-components';
-import { Button as LanguageSelectorButton, Icon } from '@wmde/wikit-vue-components';
+import { CdxButton as LanguageSelectorButton, CdxIcon } from "@wikimedia/codex";
+import { cdxIconLanguage } from '@wikimedia/codex-icons';
 import AuthWidget from '../Components/AuthWidget.vue';
 import LanguageSelector from '../Components/LanguageSelector.vue';
 import WikidataToolFooter from '../Components/WikidataToolFooter.vue';
@@ -85,12 +84,17 @@ export default defineComponent({
     components: {
         AuthWidget,
         LanguageSelectorButton,
-        Icon,
+        CdxIcon,
         InertiaLink,
         LanguageSelector,
         WikidataToolFooter,
         WikitLink
     },
+    setup() {
+        return {
+            cdxIconLanguage
+        };
+    },
     data() {
         return {
             showLanguageSelector: false,
@@ -177,7 +181,7 @@ export default defineComponent({
     },
     beforeUnmount () {
         this.resizeObserver.unobserve(this.$refs.contentWrap as Element)
-    },
+    }
 });
 </script>
 
diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
index 329a1e9f..ffdf07e3 100644
--- a/resources/js/Pages/Results.vue
+++ b/resources/js/Pages/Results.vue
@@ -2,26 +2,22 @@
     <div class="page-container results-page">
         <loading-overlay ref="overlay" />
         <inertia-head title="Mismatch Finder - Results" />
-        <wikit-button class="back-button" @click.native="() => $inertia.get('/', {})">
-            <template #prefix>
-                <icon type="arrowprevious" size="medium" color="inherit" :dir="pageDirection"/>
-            </template>
+        <cdx-button class="back-button" @click="() => $inertia.get('/', {})">
+            <cdx-icon :icon="cdxIconArrowPrevious" />
             {{ $i18n('results-back-button') }}
-        </wikit-button>
+        </cdx-button>
         <section id="description-section">
             <header class="description-header">
                 <h2 class="h4">{{ $i18n('results-page-title') }}</h2>
-                <wikit-button
+                <cdx-button
                     id="instructions-button"
-                    variant="quiet"
-                    type="progressive"
-                    @click.native="instructionsDialog = true"
+                    weight="quiet"
+                    action="progressive"
+                    @click="instructionsDialog = true"
                 >
-                    <template #prefix>
-                        <icon type="info-outlined" size="medium" color="inherit"/>
-                    </template>
+                    <cdx-icon :icon="cdxIconInfo" />
                     {{$i18n('results-instructions-button')}}
-                </wikit-button>
+                </cdx-button>
             </header>
 
             <cdx-dialog id="instructions-dialog"
@@ -96,14 +92,13 @@
                             </span>
                         </Message>
                         <div class="form-buttons">
-                            <wikit-button
+                            <cdx-button
                                 :disabled="!user"
-                                variant="primary"
-                                type="progressive"
-                                native-type="submit"
+                                weight="primary"
+                                action="progressive"
                             >
                                 {{ $i18n('result-form-submit') }}
-                            </wikit-button>
+                            </cdx-button>
                         </div>
                     </footer>
                 </form>
@@ -143,12 +138,11 @@
     import { Head as InertiaHead } from '@inertiajs/inertia-vue3';
     import {
         Link as WikitLink,
-        Button as WikitButton,
         Checkbox,
-        Icon,
         Message } from '@wmde/wikit-vue-components';
 
-    import { CdxDialog } from "@wikimedia/codex";
+    import { CdxButton, CdxIcon, CdxDialog } from "@wikimedia/codex";
+    import { cdxIconInfo, cdxIconArrowPrevious } from '@wikimedia/codex-icons';
 
     import LoadingOverlay from '../Components/LoadingOverlay.vue';
     import MismatchesTable from '../Components/MismatchesTable.vue';
@@ -195,14 +189,20 @@
     export default defineComponent({
         components: {
             InertiaHead,
-            Icon,
             LoadingOverlay,
             MismatchesTable,
             WikitLink,
-            WikitButton,
             Checkbox,
             Message,
-            CdxDialog
+            CdxDialog,
+            CdxButton,
+            CdxIcon
+        },
+        setup() {
+            return {
+                cdxIconInfo,
+                cdxIconArrowPrevious
+            };
         },
         props: {
             user: {
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 68b6d7be..aa37fdaa 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -423,3 +423,9 @@ dl.import-meta .download-csv {
         }
     }
 }
+
+// TODO: This is a temporary fix until issue https://phabricator.wikimedia.org/T326900
+// is marked as resolved.
+.cdx-button .cdx-icon {
+    vertical-align: text-top;
+}
\ No newline at end of file