Fix/update tracker (#39)

* update hover prop * Update hover effect and changelog * fix: display name assignment (#37) * update story * update tests --------- Co-authored-by: Patrick Frischmann <[email protected]>
tremorlabs · Jun 19, 2024 · 1f15a5d · 1f15a5d
1 parent fc5b74a
commit 1f15a5d
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 101 deletions.
diff --git a/src/components/Tracker/Tracker.tsx b/src/components/Tracker/Tracker.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw Tracker [v0.0.1]
+// Tremor Raw Tracker [v0.1.0]
 
 import React from "react"
 import * as HoverCardPrimitives from "@radix-ui/react-hover-card"
@@ -9,15 +9,16 @@ interface TrackerBlockProps {
   key?: string | number
   color?: string
   tooltip?: string
+  hoverEffect?: boolean
+  defaultBackgroundColor?: string
 }
 
 const Block = ({
   color,
   tooltip,
   defaultBackgroundColor,
-}: TrackerBlockProps & {
-  defaultBackgroundColor?: string
-}) => {
+  hoverEffect,
+}: TrackerBlockProps) => {
   const [open, setOpen] = React.useState(false)
   return (
     <HoverCardPrimitives.Root
@@ -27,12 +28,15 @@ const Block = ({
       closeDelay={0}
     >
       <HoverCardPrimitives.Trigger onClick={() => setOpen(true)} asChild>
-        <div
-          className={cx(
-            "h-full w-full rounded-[1px] first:rounded-l-[4px] last:rounded-r-[4px]",
-            color || defaultBackgroundColor,
-          )}
-        />
+        <div className="size-full overflow-hidden px-[0.5px] transition first:rounded-l-[4px] first:pl-0 last:rounded-r-[4px] last:pr-0 sm:px-px">
+          <div
+            className={cx(
+              "size-full rounded-[1px]",
+              color || defaultBackgroundColor,
+              hoverEffect ? "hover:opacity-50" : "",
+            )}
+          />
+        </div>
       </HoverCardPrimitives.Trigger>
       <HoverCardPrimitives.Portal>
         <HoverCardPrimitives.Content
@@ -59,6 +63,7 @@ const Block = ({
 interface TrackerProps extends React.HTMLAttributes<HTMLDivElement> {
   data: TrackerBlockProps[]
   defaultBackgroundColor?: string
+  hoverEffect?: boolean
 }
 
 const Tracker = React.forwardRef<HTMLDivElement, TrackerProps>(
@@ -67,23 +72,22 @@ const Tracker = React.forwardRef<HTMLDivElement, TrackerProps>(
       data = [],
       defaultBackgroundColor = "bg-gray-400 dark:bg-gray-400",
       className,
+      hoverEffect,
       ...props
     },
     forwardedRef,
   ) => {
     return (
       <div
         ref={forwardedRef}
-        className={cx(
-          "flex h-10 w-full items-center gap-px sm:gap-0.5",
-          className,
-        )}
+        className={cx("items-cente group flex h-8 w-full", className)}
         {...props}
       >
         {data.map((props, index) => (
           <Block
             key={props.key ?? index}
             defaultBackgroundColor={defaultBackgroundColor}
+            hoverEffect={hoverEffect}
             {...props}
           />
         ))}
@@ -92,6 +96,6 @@ const Tracker = React.forwardRef<HTMLDivElement, TrackerProps>(
   },
 )
 
-Block.displayName = "Tracker"
+Tracker.displayName = "Tracker"
 
 export { Tracker, type TrackerBlockProps }
diff --git a/src/components/Tracker/changelog.md b/src/components/Tracker/changelog.md
@@ -1,5 +1,13 @@
 # Tremor Raw Tracker Changelog
 
+## 0.1.0
+
+### Changes
+
+- Feat: Hover effect prop
+- Fix: Smooth transition between hover cards
+- Fix: Switched padding between bars from gap to px.
+
 ## 0.0.1
 
 ### Changes

diff --git a/src/components/Tracker/tracker.spec.ts b/src/components/Tracker/tracker.spec.ts
@@ -23,7 +23,7 @@ test.describe("Expect tracker default", () => {
     await expect(
       page
         .frameLocator('iframe[title="storybook-preview-iframe"]')
-        .locator(".h-full")
+        .locator(".size-full > .size-full")
         .first(),
     ).toBeVisible()
   })
@@ -39,12 +39,13 @@ test.describe("Expect tracker default", () => {
     await expect(
       page
         .frameLocator('iframe[title="storybook-preview-iframe"]')
-        .locator(".h-full")
+        .locator(".size-full > .size-full")
         .first(),
     ).toBeVisible()
+    page
     page
       .frameLocator('iframe[title="storybook-preview-iframe"]')
-      .locator(".h-full")
+      .locator(".size-full > .size-full")
       .first()
       .hover()
     await expect(

diff --git a/src/components/Tracker/tracker.stories.tsx b/src/components/Tracker/tracker.stories.tsx
@@ -3,96 +3,96 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { Tracker, TrackerBlockProps } from "./Tracker"
 
 const data: TrackerBlockProps[] = [
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-red-600", tooltip: "Error" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-red-600", tooltip: "Error" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-yellow-600", tooltip: "Warn" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-red-600 dark:bg-red-500", tooltip: "Error" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-red-600 dark:bg-red-500", tooltip: "Error" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-yellow-600 dark:bg-yellow-500", tooltip: "Warn" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
   { tooltip: "Tracker Info" },
   { tooltip: "Tracker Info" },
   { tooltip: "Tracker Info" },
   { tooltip: "Tracker Info" },
   { tooltip: "Tracker Info" },
   { tooltip: "Tracker Info" },
   { tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-yellow-600", tooltip: "Warn" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-red-600", tooltip: "Error" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
-  { color: "bg-emerald-600", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-yellow-600 dark:bg-yellow-500", tooltip: "Warn" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-red-600 dark:bg-red-500", tooltip: "Error" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
+  { color: "bg-emerald-600 dark:bg-emerald-500", tooltip: "Tracker Info" },
 ]
 
 const meta: Meta<typeof Tracker> = {
@@ -111,6 +111,14 @@ type Story = StoryObj<typeof Tracker>
 
 export const Default: Story = {}
 
+export const WithHoverEffect: Story = {
+  args: {
+    hoverEffect: true,
+    className: "mt-56",
+    data: data.slice(0, 40),
+  },
+}
+
 export const Breakpoints: Story = {
   render: () => (
     <>