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/Primary.vue → 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>

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,14 @@
 <template>
  <Story title="Button">
  <Variant title="Primary">
- <HoppButtonPrimary label="Button" />
+ <HoppButton label="Primary Button" />
  </Variant>
  <Variant title="Secondary">
- <HoppButtonSecondary label="Button" />
+ <HoppButton type="secondary" :outline="true" label="Secondary Button" />
  </Variant>
  </Story>
 </template>
 
 <script setup lang="ts">
-import { HoppButtonPrimary, HoppButtonSecondary } from "../components/button"
+import { HoppButton } from "../components/button"
 </script>