From 319b6d72d38de5762591f6b8db85c484c56c4a22 Mon Sep 17 00:00:00 2001
From: Petter Holt Juliussen <petter.juliussen@origo.oslo.kommune.no>
Date: Wed, 20 Dec 2023 12:02:22 +0100
Subject: [PATCH] Align button components with Punkt

---
 src/components/ApiClientCard.vue              |  8 +--
 src/components/drawers/EditItemDrawer.vue     |  4 +-
 src/components/drawers/EditKeyResult.vue      |  4 +-
 src/components/drawers/EditObjective.vue      |  4 +-
 src/components/drawers/KpiDrawer.vue          |  4 +-
 .../generic/form/buttons/BtnCancel.vue        | 10 +---
 .../generic/form/buttons/BtnDelete.vue        | 38 +++++--------
 .../generic/form/buttons/BtnSave.vue          | 57 +++++--------------
 src/views/Admin/CreateDepartment.vue          |  2 +-
 src/views/Admin/CreateOrganization.vue        |  2 +-
 src/views/Admin/CreateProduct.vue             |  2 +-
 src/views/Admin/components/AddUsers.vue       |  2 +-
 src/views/RequestAccess.vue                   |  2 +-
 13 files changed, 47 insertions(+), 92 deletions(-)

diff --git a/src/components/ApiClientCard.vue b/src/components/ApiClientCard.vue
index d7507bd7e..d46a5859a 100644
--- a/src/components/ApiClientCard.vue
+++ b/src/components/ApiClientCard.vue
@@ -24,7 +24,7 @@
               content: $t('integration.action.delete'),
             }"
             size="small"
-            :confirm-text="$t('integration.warning.delete')"
+            :confirm-help="$t('integration.warning.delete')"
             variant="icon-only"
             :disabled="loading"
             @click="$emit('delete', client)"
@@ -97,10 +97,10 @@
                   content: $t('integration.action.rotate'),
                 }"
                 size="small"
-                :confirm-label="$t('integration.action.confirmRotate')"
-                :confirm-text="$t('integration.warning.rotate')"
+                :confirm-text="$t('integration.action.confirmRotate')"
+                :confirm-help="$t('integration.warning.rotate')"
                 variant="icon-only"
-                icon="arrow-circle"
+                icon-name="arrow-circle"
                 :disabled="loading"
                 @click="$emit('rotate', client)"
               />
diff --git a/src/components/drawers/EditItemDrawer.vue b/src/components/drawers/EditItemDrawer.vue
index 7ced802b3..99cdd941e 100644
--- a/src/components/drawers/EditItemDrawer.vue
+++ b/src/components/drawers/EditItemDrawer.vue
@@ -119,7 +119,7 @@
           />
 
           <btn-save
-            :label="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
+            :text="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
             :disabled="submitDisabled || loading || thisItem?.archived"
             variant="label-only"
             @click="handleSubmit(save)"
@@ -144,7 +144,7 @@
         <div v-else class="button-row">
           <btn-delete
             :disabled="loading"
-            :label="$t('admin.item.delete', { name: item.name })"
+            :text="$t('admin.item.delete', { name: item.name })"
             @click="archive"
           />
         </div>
diff --git a/src/components/drawers/EditKeyResult.vue b/src/components/drawers/EditKeyResult.vue
index 2eae24337..b48adea16 100644
--- a/src/components/drawers/EditKeyResult.vue
+++ b/src/components/drawers/EditKeyResult.vue
@@ -111,7 +111,7 @@
           />
 
           <btn-save
-            :label="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
+            :text="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
             :disabled="submitDisabled || loading || thisKeyResult?.archived"
             variant="label-only"
             @click="handleSubmit(save)"
@@ -154,7 +154,7 @@
         <div v-else class="button-row">
           <btn-delete
             :disabled="loading"
-            :label="$t('admin.keyResult.delete')"
+            :text="$t('admin.keyResult.delete')"
             @click="archive"
           />
         </div>
diff --git a/src/components/drawers/EditObjective.vue b/src/components/drawers/EditObjective.vue
index cf125ef8c..e24adb9ee 100644
--- a/src/components/drawers/EditObjective.vue
+++ b/src/components/drawers/EditObjective.vue
@@ -83,7 +83,7 @@
         <template #actions="{ handleSubmit, submitDisabled }">
           <btn-cancel :disabled="loading" @click="close" />
           <btn-save
-            :label="editMode ? $t('btn.updateObjective') : $t('btn.createObjective')"
+            :text="editMode ? $t('btn.updateObjective') : $t('btn.createObjective')"
             variant="label-only"
             :disabled="submitDisabled || loading || thisObjective?.archived"
             @click="handleSubmit(save)"
@@ -124,7 +124,7 @@
         <div v-else class="button-row">
           <btn-delete
             :disabled="loading"
-            :label="$t('admin.objective.delete')"
+            :text="$t('admin.objective.delete')"
             @click="archive"
           />
         </div>
diff --git a/src/components/drawers/KpiDrawer.vue b/src/components/drawers/KpiDrawer.vue
index 8871a504c..cb172c11b 100644
--- a/src/components/drawers/KpiDrawer.vue
+++ b/src/components/drawers/KpiDrawer.vue
@@ -189,7 +189,7 @@
             @onClick="prev"
           />
           <btn-save
-            :label="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
+            :text="pageIndex === pageCount ? $t('btn.complete') : $t('btn.continue')"
             :disabled="submitDisabled || loading || thisKpi?.archived"
             variant="label-only"
             @click="handleSubmit(save)"
@@ -208,7 +208,7 @@
         <div v-else class="button-row">
           <btn-delete
             :disabled="loading"
-            :label="$t('admin.measurement.delete')"
+            :text="$t('admin.measurement.delete')"
             @click="archive"
           />
         </div>
diff --git a/src/components/generic/form/buttons/BtnCancel.vue b/src/components/generic/form/buttons/BtnCancel.vue
index 03ee7951c..2c89ebe25 100644
--- a/src/components/generic/form/buttons/BtnCancel.vue
+++ b/src/components/generic/form/buttons/BtnCancel.vue
@@ -1,10 +1,5 @@
 <template>
-  <pkt-button
-    :text="label"
-    :skin="skin"
-    type="button"
-    @onClick="$emit('click', $event)"
-  />
+  <pkt-button v-bind="$attrs" :text="text" :skin="skin" type="button" v-on="$listeners" />
 </template>
 <script>
 import { PktButton } from '@oslokommune/punkt-vue2';
@@ -15,10 +10,9 @@ export default {
   components: {
     PktButton,
   },
-  extends: PktButton,
 
   props: {
-    label: {
+    text: {
       type: String,
       required: false,
       default() {
diff --git a/src/components/generic/form/buttons/BtnDelete.vue b/src/components/generic/form/buttons/BtnDelete.vue
index 86ef92f6e..d8d261909 100644
--- a/src/components/generic/form/buttons/BtnDelete.vue
+++ b/src/components/generic/form/buttons/BtnDelete.vue
@@ -1,23 +1,21 @@
 <template>
-  <v-popover ref="popover" offset="0" placement="top" :disabled="disabled">
+  <v-popover ref="popover" offset="0" placement="top" :disabled="$attrs?.disabled">
     <pkt-button
-      type="button"
+      v-bind="$attrs"
       skin="tertiary"
-      :size="size"
-      :text="label"
+      :text="text"
       :variant="variant"
-      :icon-name="icon"
-      :disabled="disabled"
+      :icon-name="iconName"
     />
 
-    <template v-if="!disabled" slot="popover">
+    <template v-if="!$attrs?.disabled" slot="popover">
       <div data-mode="dark">
-        <p v-if="confirmText" class="mb-size-16">{{ confirmText }}</p>
+        <p v-if="confirmHelp" class="mb-size-16">{{ confirmHelp }}</p>
         <pkt-button
           type="button"
           skin="secondary"
-          :text="confirmLabel"
-          :size="size"
+          :size="$attrs?.size || 'medium'"
+          :text="confirmText"
           @onClick="confirm"
         />
       </div>
@@ -37,48 +35,38 @@ export default {
     VPopover,
   },
 
-  extends: PktButton,
+  inheritAttrs: false,
 
   props: {
-    label: {
+    text: {
       type: String,
       required: false,
       default() {
         return this.$t('btn.delete');
       },
     },
-    confirmLabel: {
+    confirmText: {
       type: String,
       required: false,
       default() {
         return this.$t('btn.confirmDelete');
       },
     },
-    confirmText: {
+    confirmHelp: {
       type: String,
       required: false,
       default: null,
     },
-    size: {
-      type: String,
-      required: false,
-      default: 'medium',
-    },
     variant: {
       type: String,
       required: false,
       default: 'icon-left',
     },
-    icon: {
+    iconName: {
       type: String,
       required: false,
       default: 'trash-can',
     },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
 
   methods: {
diff --git a/src/components/generic/form/buttons/BtnSave.vue b/src/components/generic/form/buttons/BtnSave.vue
index 1345a9244..ed363b666 100644
--- a/src/components/generic/form/buttons/BtnSave.vue
+++ b/src/components/generic/form/buttons/BtnSave.vue
@@ -1,35 +1,26 @@
-<!--
-  XXX: Should be reverted to use `PktButton` again once this issue is resolved:
-    https://github.com/oslokommune/punkt/issues/870
--->
-
 <template>
-  <button
-    :type="type"
-    class="pkt-btn"
-    :class="variantClass"
-    :disabled="disabled"
-    @click="onClick"
-  >
-    <pkt-icon v-if="variant !== 'label-only'" class="pkt-btn__icon" name="save">
-    </pkt-icon>
-    <span class="pkt-btn__text">
-      <slot>{{ label }}</slot>
-    </span>
-  </button>
+  <pkt-button
+    v-bind="$attrs"
+    skin="primary"
+    :text="text"
+    :variant="variant"
+    icon-name="save"
+    v-on="$listeners"
+  />
 </template>
 
 <script>
+import { PktButton } from '@oslokommune/punkt-vue2';
+
 export default {
   name: 'BtnSave',
 
+  components: {
+    PktButton,
+  },
+
   props: {
-    type: {
-      type: String,
-      required: false,
-      default: 'submit',
-    },
-    label: {
+    text: {
       type: String,
       required: false,
       default() {
@@ -41,24 +32,6 @@ export default {
       required: false,
       default: 'icon-left',
     },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-
-  computed: {
-    variantClass() {
-      return this.variant !== 'label-only' ? `pkt-btn--${this.variant}` : '';
-    },
-  },
-
-  methods: {
-    onClick(e) {
-      e.preventDefault();
-      this.$emit('click', e);
-    },
   },
 };
 </script>
diff --git a/src/views/Admin/CreateDepartment.vue b/src/views/Admin/CreateDepartment.vue
index 25aca35a0..6f21cd5ad 100644
--- a/src/views/Admin/CreateDepartment.vue
+++ b/src/views/Admin/CreateDepartment.vue
@@ -55,7 +55,7 @@
 
         <template #actions="{ handleSubmit, submitDisabled }">
           <btn-save
-            :label="$t('btn.create')"
+            :text="$t('btn.create')"
             :disabled="submitDisabled || loading"
             data-cy="btn-createDep"
             @click="handleSubmit(save)"
diff --git a/src/views/Admin/CreateOrganization.vue b/src/views/Admin/CreateOrganization.vue
index 5363e008d..c48c904ec 100644
--- a/src/views/Admin/CreateOrganization.vue
+++ b/src/views/Admin/CreateOrganization.vue
@@ -44,7 +44,7 @@
 
         <template #actions="{ handleSubmit, submitDisabled }">
           <btn-save
-            :label="$t('btn.create')"
+            :text="$t('btn.create')"
             :disabled="submitDisabled || loading"
             data-cy="btn-createOrg"
             @click="handleSubmit(save)"
diff --git a/src/views/Admin/CreateProduct.vue b/src/views/Admin/CreateProduct.vue
index 267354c78..481eaae53 100644
--- a/src/views/Admin/CreateProduct.vue
+++ b/src/views/Admin/CreateProduct.vue
@@ -52,7 +52,7 @@
 
         <template #actions="{ handleSubmit, submitDisabled }">
           <btn-save
-            :label="$t('btn.create')"
+            :text="$t('btn.create')"
             :disabled="submitDisabled || loading"
             @click="handleSubmit(save)"
           />
diff --git a/src/views/Admin/components/AddUsers.vue b/src/views/Admin/components/AddUsers.vue
index d636a4bee..7d7260403 100644
--- a/src/views/Admin/components/AddUsers.vue
+++ b/src/views/Admin/components/AddUsers.vue
@@ -14,7 +14,7 @@
       <template #actions="{ handleSubmit, submitDisabled }">
         <btn-save
           :disabled="submitDisabled || loading"
-          :label="$t('admin.users.registerUsersButton')"
+          :text="$t('admin.users.registerUsersButton')"
           @click="handleSubmit(save)"
         />
       </template>
diff --git a/src/views/RequestAccess.vue b/src/views/RequestAccess.vue
index 3a12acfd6..df6bb61cf 100644
--- a/src/views/RequestAccess.vue
+++ b/src/views/RequestAccess.vue
@@ -22,7 +22,7 @@
           <btn-save
             variant="label-only"
             :disabled="submitDisabled || loading"
-            :label="$t('login.requestButton')"
+            :text="$t('login.requestButton')"
             @click="handleSubmit(send)"
           />
         </template>