fix: category bar and tests

src/components/CategoryBar/CategoryBar.tsx

@@ -1,4 +1,4 @@
-// Tremor CategoryBar [v0.0.2]
+// Tremor CategoryBar [v0.0.3]
 
 "use client"
 
@@ -67,6 +67,7 @@ const BarLabels = ({ values }: { values: number[] }) => {
         "text-gray-700 dark:text-gray-300",
       )}
     >
+      <div className="absolute bottom-0 left-0 flex items-center">0</div>
       {values.map((widthPercentage, index) => {
         prefixSum += widthPercentage
 
@@ -89,18 +90,16 @@ const BarLabels = ({ values }: { values: number[] }) => {
             className="flex items-center justify-end pr-0.5"
             style={{ width: `${widthPositionLeft}%` }}
           >
-            <span
-              className={cx(
-                showLabel ? "block" : "hidden",
-                "translate-x-1/2 text-sm tabular-nums",
-              )}
-            >
-              {formatNumber(prefixSum)}
-            </span>
+            {showLabel ? (
+              <span
+                className={cx("block translate-x-1/2 text-sm tabular-nums")}
+              >
+                {formatNumber(prefixSum)}
+              </span>
+            ) : null}
           </div>
         )
       })}
-      <div className="absolute bottom-0 left-0 flex items-center">0</div>
       <div className="absolute bottom-0 right-0 flex items-center">
         {formatNumber(sumValues)}
       </div>

src/components/CategoryBar/categorybar.spec.ts

@@ -0,0 +1,72 @@
+import { expect, test } from "@playwright/test"
+
+test.describe("CategoryBar Component", () => {
+  const STORY_URL =
+    "http://localhost:6006/?path=/story/visualization-categorybar--default"
+
+  test("renders the category bar component", async ({ page }) => {
+    await page.goto(STORY_URL)
+    const storyFrame = page.frameLocator(
+      'iframe[title="storybook-preview-iframe"]',
+    )
+
+    await expect(storyFrame.getByTestId("category-bar")).toBeVisible()
+  })
+
+  test("displays correct label values", async ({ page }) => {
+    await page.goto(STORY_URL)
+    const storyFrame = page.frameLocator(
+      'iframe[title="storybook-preview-iframe"]',
+    )
+    await expect(storyFrame.getByText("0").first()).toBeVisible()
+    await expect(storyFrame.getByText("70")).toBeVisible()
+    await expect(storyFrame.getByText("88")).toBeVisible()
+    await expect(storyFrame.getByText("100")).toBeVisible()
+  })
+
+  test("renders all category segments", async ({ page }) => {
+    await page.goto(STORY_URL)
+    const storyFrame = page.frameLocator(
+      'iframe[title="storybook-preview-iframe"]',
+    )
+    const categoryBar = storyFrame.getByTestId("category-bar")
+    const segments = categoryBar.locator("div.h-full[style*='width']")
+
+    await expect(segments).toHaveCount(3)
+  })
+
+  test("renders with marker when provided", async ({ page }) => {
+    await page.goto(
+      "http://localhost:6006/?path=/story/visualization-categorybar--with-marker",
+    )
+    const storyFrame = page.frameLocator(
+      'iframe[title="storybook-preview-iframe"]',
+    )
+
+    const marker = storyFrame.locator(".absolute.w-2.-translate-x-1\\/2")
+    await expect(marker).toBeVisible()
+  })
+
+  test("handles marker tooltip interaction", async ({ page }) => {
+    await page.goto(
+      "http://localhost:6006/?path=/story/visualization-categorybar--with-marker",
+    )
+    const storyFrame = page.frameLocator(
+      'iframe[title="storybook-preview-iframe"]',
+    )
+
+    const marker = storyFrame.locator(".absolute.w-2.-translate-x-1\\/2")
+    await marker.hover()
+  })
+
+  test("maintains accessibility attributes", async ({ page }) => {
+    await page.goto(STORY_URL)
+    const storyFrame = page.frameLocator(
+      'iframe[title="storybook-preview-iframe"]',
+    )
+    const categoryBar = storyFrame.getByTestId("category-bar")
+
+    await expect(categoryBar).toHaveAttribute("aria-label", "Category bar")
+    await expect(categoryBar).toHaveAttribute("tremor-id", "tremor-raw")
+  })
+})

src/components/CategoryBar/categorybar.stories.tsx

@@ -4,7 +4,7 @@ import { CategoryBar } from "./CategoryBar"
 
 const meta: Meta<typeof CategoryBar> = {
   title: "visualization/CategoryBar",
-  render: (args) => <CategoryBar {...args} data-testid="CategoryBar" />,
+  render: (args) => <CategoryBar {...args} data-testid="category-bar" />,
   component: CategoryBar,
 }
 
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof CategoryBar>
 
 export const Default: Story = {
   args: {
-    values: [70, 18, 11],
+    values: [70, 18, 12],
   },
 }
 

src/components/CategoryBar/changelog.md

@@ -1,5 +1,11 @@
 # Tremor Category Bar Changelog
 
+## 0.0.3
+
+### Changes
+
+- Fix: Hidden aria elements
+
 ## 0.0.2
 
 ### Changes