Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/update tracker #39

Merged
merged 5 commits into from
Jun 19, 2024
Merged

Fix/update tracker #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f40e73
update hover prop
severinlandolt Jun 18, 2024
d5ea8dc
Update hover effect and changelog
severinlandolt Jun 18, 2024
1eabfd7
fix: display name assignment (#37)
pfrischmann Jun 19, 2024
8315cd6
update story
severinlandolt Jun 19, 2024
607a362
update tests
severinlandolt Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions src/components/Tracker/Tracker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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
Expand All @@ -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
Expand All @@ -59,6 +63,7 @@ const Block = ({
interface TrackerProps extends React.HTMLAttributes<HTMLDivElement> {
data: TrackerBlockProps[]
defaultBackgroundColor?: string
hoverEffect?: boolean
}

const Tracker = React.forwardRef<HTMLDivElement, TrackerProps>(
Expand All @@ -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}
/>
))}
Expand All @@ -92,6 +96,6 @@ const Tracker = React.forwardRef<HTMLDivElement, TrackerProps>(
},
)

Block.displayName = "Tracker"
Tracker.displayName = "Tracker"

export { Tracker, type TrackerBlockProps }
8 changes: 8 additions & 0 deletions src/components/Tracker/changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
7 changes: 4 additions & 3 deletions src/components/Tracker/tracker.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
Expand All @@ -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(
Expand Down
174 changes: 91 additions & 83 deletions src/components/Tracker/tracker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> = {
Expand All @@ -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: () => (
<>
Expand Down