Feat/button ghost (#38)

* fist draft

* add whitespace nowrap

* udpate changelog

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw Button [v0.0.0]
+// Tremor Raw Button [v0.1.0]
 
 import React from "react"
 import { Slot } from "@radix-ui/react-slot"
@@ -11,7 +11,7 @@ import { focusRing } from "../../utils/focusRing"
 const buttonVariants = tv({
   base: [
     // base
-    "relative inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-center text-sm font-medium shadow-sm transition-all duration-100 ease-in-out",
+    "relative inline-flex items-center justify-center whitespace-nowrap rounded-md border px-3 py-1.5 text-center text-sm font-medium shadow-sm transition-all duration-100 ease-in-out",
     // disabled
     "disabled:pointer-events-none disabled:shadow-none",
     // focus
@@ -60,6 +60,19 @@ const buttonVariants = tv({
         "disabled:bg-gray-100 disabled:text-gray-400",
         "disabled:dark:bg-gray-800 disabled:dark:text-gray-600",
       ],
+      ghost: [
+        // base
+        "shadow-none",
+        // border
+        "border-transparent",
+        // text color
+        "text-gray-900 dark:text-gray-50",
+        // hover color
+        "bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800/80",
+        // disabled
+        "disabled:text-gray-400",
+        "disabled:dark:text-gray-600",
+      ],
       destructive: [
         // text color
         "text-white",

src/components/Button/button.spec.ts

@@ -25,6 +25,14 @@ test.describe("Expect button variant", () => {
         .getByRole("button", { name: "Light" }),
     ).toBeVisible()
   })
+  test("ghost to exist", async ({ page }) => {
+    await page.goto("http://localhost:6006/?path=/story/ui-button--ghost")
+    await expect(
+      page
+        .frameLocator('iframe[title="storybook-preview-iframe"]')
+        .getByRole("button", { name: "Ghost" }),
+    ).toBeVisible()
+  })
   test("destructive to exist", async ({ page }) => {
     await page.goto("http://localhost:6006/?path=/story/ui-button--destructive")
     await expect(

src/components/Button/button.stories.tsx

@@ -38,6 +38,13 @@ export const Light: Story = {
   },
 }
 
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost",
+  },
+}
+
 export const Destructive: Story = {
   args: {
     variant: "destructive",

src/components/Button/changelog.md

@@ -1,5 +1,7 @@
 # Tremor Raw Button Changelog
 
-## 0.0.0
+## 0.1.0
 
 ### Changes
+
+- Feat: Ghost variant