From fdd62941527dc186c6a60c4b1b7e2d394b190706 Mon Sep 17 00:00:00 2001
From: Arpit Singh <arpitsingh@Arpits-Air-3.mshome.net>
Date: Fri, 26 Jul 2024 10:12:05 +0530
Subject: [PATCH 1/2] Combined primary and secondary button into a single
 component and edited their all instances in the code to fit the new use case,
 also edited the readme for the new button component

---
 README.md                                     |  6 +-
 package.json                                  |  3 +-
 .../button/{Primary.vue => Button.vue}        |  0
 src/components/button/Secondary.vue           | 99 -------------------
 src/components/button/index.ts                |  3 +-
 src/components/modal/Heading.vue              |  4 +-
 src/components/modal/examples/InputDialog.vue | 10 +-
 .../modal/examples/NestedDialog.vue           |  8 +-
 src/components/smart/ConfirmModal.vue         | 10 +-
 src/components/smart/Expand.vue               |  4 +-
 src/components/smart/Modal.vue                |  4 +-
 src/components/smart/SlideOver.vue            |  4 +-
 src/components/smart/Windows.vue              |  6 +-
 src/stories/Button.story.vue                  |  9 +-
 src/stories/Link.story.vue                    |  4 +-
 src/stories/NewModal.story.vue                |  8 +-
 src/stories/Table.story.vue                   |  4 +-
 17 files changed, 35 insertions(+), 151 deletions(-)
 rename src/components/button/{Primary.vue => Button.vue} (100%)
 delete mode 100644 src/components/button/Secondary.vue

diff --git a/README.md b/README.md
index f39121f..f07c3c6 100644
--- a/README.md
+++ b/README.md
@@ -64,11 +64,11 @@ You can use the components in your Vue templates like this:
 
 ```ts
 <template>
-  <HoppButtonPrimary label="Click me" />
+  <HoppButton label="Click me" />
 </template>
 
 <script lang="ts" setup>
-import { HoppButtonPrimary } from "@hoppscotch/ui"
+import { HoppButton } from "@hoppscotch/ui"
 </script>
 ```
 
@@ -76,7 +76,7 @@ If you're using `unplugin-vue-components` in your project, you can import the co
 
 ```ts
 <template>
-  <HoppButtonPrimary label="Click me" />
+  <HoppButton label="Click me" />
 </template>
 
 <script lang="ts" setup>
diff --git a/package.json b/package.json
index 5774565..8a2c360 100644
--- a/package.json
+++ b/package.json
@@ -118,5 +118,6 @@
       "types": "./dist/src/helpers/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5"
 }
diff --git a/src/components/button/Primary.vue b/src/components/button/Button.vue
similarity index 100%
rename from src/components/button/Primary.vue
rename to src/components/button/Button.vue
diff --git a/src/components/button/Secondary.vue b/src/components/button/Secondary.vue
deleted file mode 100644
index 3b73975..0000000
--- a/src/components/button/Secondary.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <HoppSmartLink
-    :to="to"
-    :exact="exact"
-    :blank="blank"
-    class="inline-flex items-center justify-center font-semibold transition whitespace-nowrap focus:outline-none"
-    :class="[
-      color
-        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
-        : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
-      { 'pointer-events-none': loading },
-      label ? 'rounded px-4 py-2' : 'p-2',
-      { 'rounded-full': rounded },
-      { 'opacity-75 cursor-not-allowed': disabled },
-      { 'flex-row-reverse': reverse },
-      { 'px-6 py-4 text-lg': large },
-      {
-        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
-          outline,
-      },
-      {
-        'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
-          filled,
-      },
-    ]"
-    :disabled="disabled"
-    :tabindex="loading ? '-1' : '0'"
-    role="button"
-  >
-    <span
-      v-if="!loading"
-      class="inline-flex items-center justify-center whitespace-nowrap"
-      :class="{ 'flex-row-reverse': reverse }"
-    >
-      <component
-        :is="icon"
-        v-if="icon"
-        class="svg-icons"
-        :class="[
-          { '!text-2xl': large },
-          label ? (reverse ? 'ml-2' : 'mr-2') : '',
-        ]"
-      />
-      <div class="truncate max-w-[16rem]">
-        {{ label }}
-      </div>
-      <div v-if="shortcut.length" class="<sm:hidden">
-        <kbd
-          v-for="(key, index) in shortcut"
-          :key="`key-${index}`"
-          class="shortcut-key !bg-inherit"
-        >
-          {{ key }}
-        </kbd>
-      </div>
-    </span>
-    <HoppSmartSpinner v-else />
-  </HoppSmartLink>
-</template>
-
-<script setup lang="ts">
-import { HoppSmartLink, HoppSmartSpinner } from "../smart"
-import type { Component } from "vue"
-
-interface Props {
-  to?: string
-  exact?: boolean
-  blank?: boolean
-  label?: string
-  icon?: object | null | Component // It is a component!
-  svg?: object | null | Component // It is a component!
-  color?: string
-  disabled?: boolean
-  loading?: boolean
-  reverse?: boolean
-  rounded?: boolean
-  large?: boolean
-  outline?: boolean
-  shortcut?: string[]
-  filled?: boolean
-}
-withDefaults(defineProps<Props>(), {
-  to: "",
-  exact: true,
-  blank: false,
-  label: "",
-  icon: null,
-  svg: null,
-  color: "",
-  disabled: false,
-  loading: false,
-  reverse: false,
-  rounded: false,
-  large: false,
-  outline: false,
-  shortcut: () => [],
-  filled: false,
-})
-</script>
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 5da4712..e372044 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -1,2 +1 @@
-export { default as HoppButtonPrimary } from "./Primary.vue"
-export { default as HoppButtonSecondary } from "./Secondary.vue"
+export { default as HoppButton } from "./Button.vue"
diff --git a/src/components/modal/Heading.vue b/src/components/modal/Heading.vue
index 2114a3a..9f689d4 100644
--- a/src/components/modal/Heading.vue
+++ b/src/components/modal/Heading.vue
@@ -12,7 +12,7 @@
       </h3>
     </div>
     <div class="flex flex-1 items-center justify-end">
-      <HoppButtonSecondary
+      <HoppButton
         v-if="showCloseIcon"
         v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
         :title="closeText ?? t?.('action.close') ?? 'Close'"
@@ -27,7 +27,7 @@
 import { inject } from "vue"
 import { HOPP_UI_OPTIONS, HoppUIPluginOptions } from "./../../plugin"
 import IconX from "~icons/lucide/x"
-import { HoppButtonSecondary } from "./../button"
+import { HoppButton } from "./../button"
 
 const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
diff --git a/src/components/modal/examples/InputDialog.vue b/src/components/modal/examples/InputDialog.vue
index 46420b3..3b5528d 100644
--- a/src/components/modal/examples/InputDialog.vue
+++ b/src/components/modal/examples/InputDialog.vue
@@ -12,15 +12,10 @@
       />
     </template>
     <template #footer>
-      <HoppButtonPrimary
+      <HoppButton
         label="Submit"
         @click="emit('modal-resolve', { text })"
       />
-      <HoppButtonSecondary
-        filled
-        label="Cancel"
-        @click="emit('modal-reject')"
-      />
     </template>
   </HoppModal>
 </template>
@@ -30,8 +25,7 @@ import { ref } from "vue"
 import { HoppModal } from "./../"
 import {
   HoppSmartInput,
-  HoppButtonSecondary,
-  HoppButtonPrimary,
+  HoppButton,
 } from "./../../index"
 
 const text = ref<string>("")
diff --git a/src/components/modal/examples/NestedDialog.vue b/src/components/modal/examples/NestedDialog.vue
index 80fe2fc..e6fdffe 100644
--- a/src/components/modal/examples/NestedDialog.vue
+++ b/src/components/modal/examples/NestedDialog.vue
@@ -2,7 +2,7 @@
   <HoppModal title="Dialog with Input field" @close="emit('modal-reject')">
     <template #body>
       <div>
-        <HoppButtonSecondary
+        <HoppButton
           label="Open Nested Dialog with Input"
           @click="openNestedInputDialog"
         />
@@ -16,11 +16,10 @@
       </div>
     </template>
     <template #footer>
-      <HoppButtonPrimary
+      <HoppButton
         label="Submit from Parent"
         @click="emit('modal-resolve', { text })"
       />
-      <HoppButtonSecondary label="Cancel" @click="emit('modal-reject')" />
     </template>
   </HoppModal>
 </template>
@@ -29,8 +28,7 @@
 import { ref } from "vue"
 import { HoppModal } from "./../"
 import {
-  HoppButtonPrimary,
-  HoppButtonSecondary,
+  HoppButton,
   HoppSmartInput,
 } from "./../../index"
 
diff --git a/src/components/smart/ConfirmModal.vue b/src/components/smart/ConfirmModal.vue
index 7dadf74..68f239b 100644
--- a/src/components/smart/ConfirmModal.vue
+++ b/src/components/smart/ConfirmModal.vue
@@ -14,19 +14,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <HoppButtonPrimary
+        <HoppButton
           v-focus
           :label="yes ?? t?.('action.yes') ?? 'Yes'"
           :loading="!!loadingState"
           outline
           @click="resolve"
         />
-        <HoppButtonSecondary
-          :label="no ?? t?.('action.no') ?? 'No'"
-          filled
-          outline
-          @click="hideModal"
-        />
       </span>
     </template>
   </HoppSmartModal>
@@ -34,7 +28,7 @@
 
 <script setup lang="ts">
 import { inject } from "vue"
-import { HoppButtonPrimary, HoppButtonSecondary } from "../button"
+import { HoppButton } from "../button"
 import { HoppSmartModal } from "."
 import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../plugin"
 
diff --git a/src/components/smart/Expand.vue b/src/components/smart/Expand.vue
index 1ed6343..03dd64f 100644
--- a/src/components/smart/Expand.vue
+++ b/src/components/smart/Expand.vue
@@ -7,7 +7,7 @@
     <div
       class="sticky inset-x-0 bottom-0 flex items-center justify-center flex-shrink-0 overflow-x-auto"
     >
-      <HoppButtonSecondary
+      <HoppButton
         :icon="expand ? IconChevronUp : IconChevronDown"
         :label="
           expand
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { HoppButtonSecondary } from "../button"
+import { HoppButton } from "../button"
 import IconChevronUp from "~icons/lucide/chevron-up"
 import IconChevronDown from "~icons/lucide/chevron-down"
 import { inject, ref } from "vue"
diff --git a/src/components/smart/Modal.vue b/src/components/smart/Modal.vue
index 3b4e8e4..194ea60 100644
--- a/src/components/smart/Modal.vue
+++ b/src/components/smart/Modal.vue
@@ -48,7 +48,7 @@
                 </h3>
               </div>
               <div class="flex items-center justify-end flex-1">
-                <HoppButtonSecondary
+                <HoppButton
                   v-if="dimissible"
                   v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
                   :title="closeText ?? t?.('action.close') ?? 'Close'"
@@ -95,7 +95,7 @@ const stack = (() => {
 </script>
 
 <script setup lang="ts">
-import { HoppButtonSecondary } from "../button"
+import { HoppButton } from "../button"
 import IconX from "~icons/lucide/x"
 import {
   ref,
diff --git a/src/components/smart/SlideOver.vue b/src/components/smart/SlideOver.vue
index 6a0c1fb..4250fcf 100644
--- a/src/components/smart/SlideOver.vue
+++ b/src/components/smart/SlideOver.vue
@@ -23,7 +23,7 @@
         >
           <h3 class="ml-4 heading">{{ title }}</h3>
           <span class="flex items-center">
-            <HoppButtonSecondary :icon="IconX" @click="close()" />
+            <HoppButton :icon="IconX" @click="close()" />
           </span>
         </div>
         <slot name="content"></slot>
@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { HoppButtonSecondary } from "../button"
+import { HoppButton } from "../button"
 import { onMounted, watch } from "vue"
 import IconX from "~icons/lucide/x"
 
diff --git a/src/components/smart/Windows.vue b/src/components/smart/Windows.vue
index a957ff3..54dc518 100644
--- a/src/components/smart/Windows.vue
+++ b/src/components/smart/Windows.vue
@@ -58,7 +58,7 @@
                     <component :is="tabMeta.suffix" />
                   </div>
 
-                  <HoppButtonSecondary
+                  <HoppButton
                     v-if="tabMeta.isRemovable"
                     v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
                     :icon="IconX"
@@ -87,7 +87,7 @@
               v-if="canAddNewTab"
               class="z-[8] flex h-full items-center justify-center bg-primaryLight px-3"
             >
-              <HoppButtonSecondary
+              <HoppButton
                 v-tippy="{ theme: 'tooltip' }"
                 :title="newText ?? t?.('action.new') ?? 'New'"
                 :icon="IconPlus"
@@ -129,7 +129,7 @@
 </template>
 
 <script setup lang="ts">
-import { HoppButtonSecondary } from "../button"
+import { HoppButton } from "../button"
 import IconPlus from "~icons/lucide/plus"
 import IconX from "~icons/lucide/x"
 import { pipe } from "fp-ts/function"
diff --git a/src/stories/Button.story.vue b/src/stories/Button.story.vue
index e1dbead..587acbb 100644
--- a/src/stories/Button.story.vue
+++ b/src/stories/Button.story.vue
@@ -1,14 +1,11 @@
 <template>
   <Story title="Button">
-    <Variant title="Primary">
-      <HoppButtonPrimary label="Button" />
-    </Variant>
-    <Variant title="Secondary">
-      <HoppButtonSecondary label="Button" />
+    <Variant title="Single">
+      <HoppButton label="Button" />
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
-import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
+import { HoppButton } from "../components/button"
 </script>
diff --git a/src/stories/Link.story.vue b/src/stories/Link.story.vue
index e83d6fe..36f2b40 100644
--- a/src/stories/Link.story.vue
+++ b/src/stories/Link.story.vue
@@ -5,7 +5,7 @@
     </Variant>
     <Variant title="Button Link">
       <HoppSmartLink :to="link" :blank="true">
-        <HoppButtonPrimary label="Click here" />
+        <HoppButton label="Click here" />
       </HoppSmartLink>
     </Variant>
   </Story>
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { HoppSmartLink } from "../components/smart"
-import { HoppButtonPrimary } from "../components/button"
+import { HoppButton } from "../components/button"
 import { ref } from "vue"
 
 const link = ref("/")
diff --git a/src/stories/NewModal.story.vue b/src/stories/NewModal.story.vue
index 7f37f63..131dc16 100644
--- a/src/stories/NewModal.story.vue
+++ b/src/stories/NewModal.story.vue
@@ -1,7 +1,7 @@
 <template>
   <Story title="New Modal (HoppModal) [Beta]">
     <Variant title="Simple Dialog with Close Button">
-      <HoppButtonPrimary @click="openTestModal" label="Open Simple Dialog" />
+      <HoppButton @click="openTestModal" label="Open Simple Dialog" />
     </Variant>
     <Variant title="Dialog with Input">
       <div class="mb-3">
@@ -23,7 +23,7 @@
         </span>
       </div>
 
-      <HoppButtonPrimary
+      <HoppButton
         @click="openInputDialog"
         label="Open Dialog with Input"
       />
@@ -48,7 +48,7 @@
         </span>
       </div>
 
-      <HoppButtonPrimary
+      <HoppButton
         @click="openNestedInputDialog"
         label="Open Dialog with Input"
       />
@@ -63,7 +63,7 @@ import {
   GreetingsModal,
   NestedDialog,
 } from "../components/modal/examples"
-import { HoppButtonPrimary, useModals } from ".."
+import { HoppButton, useModals } from ".."
 
 const { openModal } = useModals()
 
diff --git a/src/stories/Table.story.vue b/src/stories/Table.story.vue
index 5cc2b86..e643f06 100644
--- a/src/stories/Table.story.vue
+++ b/src/stories/Table.story.vue
@@ -69,7 +69,7 @@
                 placeholder="Search.."
               />
             </div>
-            <HoppButtonPrimary
+            <HoppButton
               :icon="IconArrowUpDown"
               label="Sort"
               class="rounded-none"
@@ -86,7 +86,7 @@
 import { computed, onMounted, ref, Ref } from "vue"
 import { CellHeading, Direction } from "~/components/smart/Table.vue"
 import IconArrowUpDown from "~icons/lucide/arrow-up-down"
-import { HoppButtonPrimary, HoppSmartInput } from ".."
+import { HoppButton, HoppSmartInput } from ".."
 import { HoppSmartSpinner, HoppSmartTable } from "../components/smart"
 
 type List = {

From d6f88d0d5b433faadc15828ffc2121f1e9f02728 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Mon, 19 Aug 2024 10:02:55 +0600
Subject: [PATCH 2/2] feat: button component improved

---
 src/components/button/Button.vue | 21 +++++++++++++++++----
 src/stories/Button.story.vue     |  7 +++++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index 7ca3b98..bff9e5e 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -1,13 +1,24 @@
 <template>
   <HoppSmartLink
     :to="to"
-    :blank="blank"
-    class="relative inline-flex items-center justify-center py-2 font-semibold whitespace-nowrap transition focus:outline-none focus-visible:bg-accentDark"
     :exact="exact"
+    :blank="blank"
+    class="relative inline-flex items-center justify-center whitespace-nowrap py-2 font-semibold transition focus:outline-none focus-visible:bg-accentDark"
     :class="[
-      color
+      color && type === 'primary'
         ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
-        : `bg-accent text-accentContrast hover:bg-accentDark focus-visible:bg-accentDark`,
+        : '',
+      color && type === 'secondary'
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
+        : '',
+      {
+        'bg-accent text-accentContrast hover:bg-accentDark focus-visible:bg-accentDark':
+          type === 'primary' && !color,
+      },
+      {
+        'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark':
+          type === 'secondary' && !color,
+      },
       label ? 'px-4 py-2' : 'p-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'cursor-not-allowed opacity-75': disabled },
@@ -83,6 +94,7 @@ interface Props {
   gradient?: boolean
   outline?: boolean
   shortcut?: string[]
+  type?: "primary" | "secondary"
 }
 
 withDefaults(defineProps<Props>(), {
@@ -102,5 +114,6 @@ withDefaults(defineProps<Props>(), {
   gradient: false,
   outline: false,
   shortcut: () => [],
+  type: "primary",
 })
 </script>
diff --git a/src/stories/Button.story.vue b/src/stories/Button.story.vue
index 587acbb..f2a560d 100644
--- a/src/stories/Button.story.vue
+++ b/src/stories/Button.story.vue
@@ -1,7 +1,10 @@
 <template>
   <Story title="Button">
-    <Variant title="Single">
-      <HoppButton label="Button" />
+    <Variant title="Primary">
+      <HoppButton label="Primary Button" />
+    </Variant>
+    <Variant title="Secondary">
+      <HoppButton type="secondary" :outline="true" label="Secondary Button" />
     </Variant>
   </Story>
 </template>