Solving issue #19 feat: improve existing button components

README.md

@@ -64,19 +64,19 @@ 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>
 ```
 
 If you're using `unplugin-vue-components` in your project, you can import the components like this without having to import them in the script section:
 
 ```ts
 <template>
-  <HoppButtonPrimary label="Click me" />
+  <HoppButton label="Click me" />
 </template>
 
 <script lang="ts" setup>

package.json

@@ -118,5 +118,6 @@
       "types": "./dist/src/helpers/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "packageManager": "[email protected]+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5"
 }

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"

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

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

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"
 

src/components/smart/ConfirmModal.vue

@@ -14,27 +14,21 @@
     </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>
 </template>
 
 <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"
 

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"

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,

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"
 

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"

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>

src/stories/Link.story.vue

@@ -5,15 +5,15 @@
     </Variant>
     <Variant title="Button Link">
       <HoppSmartLink :to="link" :blank="true">
-        <HoppButtonPrimary label="Click here" />
+        <HoppButton label="Click here" />
       </HoppSmartLink>
     </Variant>
   </Story>
 </template>
 
 <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("/")

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