@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/Status.tsx

@@ -0,0 +1,79 @@
+import { forwardRef, HTMLAttributes, ReactNode, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import clock from '../assets/img/clock.svg';
+import check from '../assets/img/check.svg';
+import close from '../assets/img/close2.svg';
+
+interface VariantType {
+  variant?: string;
+  classes?: string;
+  imgDivClasses?: string;
+  childClasses?: string;
+}
+
+const variants: VariantType[]  = [
+
+  {
+    variant: 'available',
+    classes: 'h-[45px] px-4 py-3 bg-green-50 rounded-[100px] border border-green-700 justify-center items-center gap-2 inline-flex',
+    imgDivClasses: 'w-5 h-5 relative overflow-hidden',
+    childClasses: 'text-green-900 text-lg font-normal font-[Arial]',
+  },
+  {
+    variant: 'inProgress',
+    classes: 'h-[45px] px-4 py-3 bg-yellow-50 rounded-[100px] border border-yellow-600 justify-center items-center gap-2 inline-flex',
+    imgDivClasses: 'w-5 h-5 relative overflow-hidden',
+    childClasses: 'text-yellow-900 text-lg font-normal font-[Arial]',
+  },
+  {
+    variant: 'notAvailable',
+    classes: 'h-[45px] px-4 py-3 bg-red-50 rounded-[100px] border border-red-600 justify-center items-center gap-2 inline-flex',
+    imgDivClasses: 'w-5 h-5 relative overflow-hidden',
+    childClasses: 'text-red-900 text-lg font-normal font-[Arial]',
+  },
+]
+
+  export interface StatusProps extends HTMLAttributes<HTMLDivElement>  {
+    variant?: string;
+    className?: string;
+    classNameChild?: string;
+    image?: ReactNode;
+    classNameImage?: string;
+    children?: ReactNode;
+  }
+
+  export const Status = forwardRef<HTMLDivElement, StatusProps>(
+    ({ variant = 'available', className, image, classNameChild,
+    classNameImage, children, ...props }, ref) => {
+
+    const [classValue, setClassValue] = useState<string>();
+    const [imgDivClasses, setImgDivClasses] = useState<string>();
+    const [childDivClasses, setChildDivClasses] = useState<string>();
+
+    useEffect(() => {
+
+      setClassValue(twMerge(
+        variants.find((v) => v.variant === variant)?.classes, className));
+
+      setChildDivClasses(twMerge(
+        variants.find((v) => v.variant === variant)?.childClasses, classNameChild));
+
+      setImgDivClasses(twMerge(
+        variants.find((v) => v.variant === variant)?.imgDivClasses, classNameImage));
+
+    }, [variant, className, classNameChild, classNameImage])
+
+    return (
+      <div className={classValue} ref={ref}>
+        <div className={imgDivClasses}>
+          { image ? image : // if we have an image prop - display
+            variant === 'available' ?   // else if we are variant 'available' ...
+            <img src={check} alt="check mark" /> :
+            variant === 'inProgress' ? <img src={clock} alt="clock" /> : // else we are variant 'inProgress' ...
+              <img src={close} alt="close" /> // else we are non of the above, i.e. 'notAvailable'
+          }</div>
+          <div className={childDivClasses}>{children}</div>
+      </div>
+    );
+  });

package/src/lib/Tabs--Tabs.stories.tsx

@@ -0,0 +1,294 @@
+import type { Meta, StoryContext, StoryObj } from '@storybook/react';
+import { expect, userEvent, within, waitFor } from 'storybook/test';
+import { Tabs, IconPosition } from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  title: 'Components/Tabs',
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'outline', 'filled'],
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+// 🧪 Primary Story
+export const Primary = {
+  args: {
+    variant: 'default',
+    tabs: [
+      { id: 'tab1', label: 'Tab 1', content: <p>Content for Tab 1</p> },
+      { id: 'tab2', label: 'Tab 2', content: <p>Content for Tab 2</p> },
+      { id: 'tab3', label: 'Tab 3', content: <p>Content for Tab 3</p> },
+    ],
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+
+    // Check if the first tab is active by default
+    const tab1 = canvas.getByRole('tab', { name: 'Tab 1' });
+    expect(tab1).toHaveAttribute('aria-selected', 'true');
+
+    // Click on the second tab and verify its content is displayed
+    const tab2 = canvas.getByRole('tab', { name: 'Tab 2' });
+    await userEvent.click(tab2);
+    expect(tab2).toHaveAttribute('aria-selected', 'true');
+    expect(canvas.getByText('Content for Tab 2')).toBeVisible();
+
+    // Check that the first tab content is now hidden
+    expect(canvas.queryByText('Content for Tab 1')).not.toBeVisible();
+  },
+};
+
+const tabsData = [
+  { id: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
+  { id: 'tab2', label: 'Tab 2', content: <div>Content 2</div> },
+  { id: 'tab3', label: 'Tab 3', content: <div>Content 3</div> },
+];
+
+export const KeyboardNavigation = {
+  args: {
+    variant: 'default',
+    tabs: tabsData,
+  },
+  play:async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+  const tabButtons = canvas.getAllByRole('tab');
+
+  // Focus the first tab and verify it has focus.
+  tabButtons[0].focus();
+  expect(tabButtons[0]).toHaveFocus();
+
+  // Press the "End" key to move focus to the last tab.
+  // This triggers the End key block setting the last tab as active.
+  await userEvent.keyboard('{End}');
+  const lastTab = tabButtons[tabButtons.length - 1];
+  expect(lastTab).toHaveFocus();
+  expect(lastTab.getAttribute('aria-selected')).toBe('true');
+
+  // Press the "Home" key to move focus back to the first tab.
+  // This triggers the Home key block setting the first tab as active.
+  await userEvent.keyboard('{Home}');
+  expect(tabButtons[0]).toHaveFocus();
+  expect(tabButtons[0].getAttribute('aria-selected')).toBe('true');
+  }
+}
+
+// 🧪 Blank Variant Story
+export const BlankVariant = {
+  args: {
+    variant: '',
+    tabs: [
+      { id: 'tab1', label: 'Tab 1', content: <p>Content for Tab 1</p> },
+      { id: 'tab2', label: 'Tab 2', content: <p>Content for Tab 2</p> },
+      { id: 'tab3', label: 'Tab 3', content: <p>Content for Tab 3</p> },
+    ],
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+
+    // Verify all tabs are rendered
+    expect(canvas.getByRole('tab', { name: 'Tab 1' })).toBeInTheDocument();
+    expect(canvas.getByRole('tab', { name: 'Tab 2' })).toBeInTheDocument();
+    expect(canvas.getByRole('tab', { name: 'Tab 3' })).toBeInTheDocument();
+
+    // Navigate through tabs using keyboard (ArrowRight and ArrowLeft)
+    const tab1 = canvas.getByRole('tab', { name: 'Tab 1' });
+    await userEvent.type(tab1, '{arrowright}');
+    expect(canvas.getByRole('tab', { name: 'Tab 2' })).toHaveFocus();
+
+    const tab2 = canvas.getByRole('tab', { name: 'Tab 2' });
+    await userEvent.type(tab2, '{arrowleft}');
+    expect(canvas.getByRole('tab', { name: 'Tab 1' })).toHaveFocus();
+  },
+};
+
+// 🧪 No Variant Story
+export const NoVariant = {
+  args: {
+    tabs: [
+      { id: 'tab1', label: 'Tab 1', content: <p>Content for Tab 1</p> },
+      { id: 'tab2', label: 'Tab 2', content: <p>Content for Tab 2</p> },
+      { id: 'tab3', label: 'Tab 3', content: <p>Content for Tab 3</p> },
+    ],
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+
+    // Ensure the first tab content is visible by default
+    expect(canvas.getByText('Content for Tab 1')).toBeVisible();
+
+    // Click the third tab and verify its content is displayed
+    const tab3 = canvas.getByRole('tab', { name: 'Tab 3' });
+    await userEvent.click(tab3);
+    expect(tab3).toHaveAttribute('aria-selected', 'true');
+    expect(canvas.getByText('Content for Tab 3')).toBeVisible();
+  },
+};
+
+// 🧪 Mismatched Content Story
+export const MismatchedContent = {
+  args: {
+    tabs: [
+      { id: 'tab1', label: 'Tab 1', content: <p>Content for Tab 1</p> },
+      { id: 'tab2', label: 'Tab 2', content: (
+        <>
+          <p>Content for Tab 2</p>
+          <p>Lorem ipsum dolor sit amet...</p>
+        </>
+      )},
+      { id: 'tab3', label: 'Tab 3', content: <p>Content for Tab 3</p> },
+    ],
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+
+    // Check that tab 2 content has multiple paragraphs
+    const tab2 = canvas.getByRole('tab', { name: 'Tab 2' });
+    await userEvent.click(tab2);
+
+    expect(canvas.getByText(/Content for Tab 2/)).toBeVisible();
+    expect(canvas.getByText(/Lorem ipsum dolor sit amet/)).toBeVisible();
+  },
+};
+
+export const HoverIconTest: Story = {
+  args: {
+    variant: 'outline',
+    tabs: [
+      {
+        id: 'tab1',
+        label: 'Left Icon',
+        content: <p>Left Content</p>,
+        activeIcon: <span data-testid="active-left">Active Left</span>,
+        inactiveIcon: <span data-testid="inactive-left">Inactive Left</span>,
+        iconPosition: IconPosition.Left,
+      },
+      // You can add additional tabs if needed
+    ],
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+
+    // Get all tab buttons and select the first one.
+    const tabButtons = canvas.getAllByRole('tab');
+    const firstTab = tabButtons[0];
+
+    // Verify that initially the active icon is displayed.
+    expect(canvas.getByTestId('active-left')).toBeInTheDocument();
+
+    // Hover over the first tab to trigger onMouseEnter.
+    await userEvent.hover(firstTab);
+    // With hover active, the inactive icon should now appear.
+    expect(canvas.getByTestId('inactive-left')).toBeInTheDocument();
+
+    // Unhover the tab to trigger onMouseLeave (this is the line we want to cover).
+    await userEvent.unhover(firstTab);
+    // After unhovering, the active icon should be rendered again.
+    expect(canvas.getByTestId('active-left')).toBeInTheDocument();
+  },
+};
+
+export const IconPositionsAndOutline: Story = {
+  args: {
+    variant: 'outline',
+    tabs: [
+      {
+        id: 'tab1',
+        label: 'Left Icon',
+        content: <p>Left Content</p>,
+        activeIcon: <span data-testid="active-left">Active Left</span>,
+        inactiveIcon: <span data-testid="inactive-left">Inactive Left</span>,
+        iconPosition: IconPosition.Left,
+      },
+      {
+        id: 'tab2',
+        label: 'Icon Only',
+        content: <p>Icon Only Content</p>,
+        activeIcon: <span data-testid="active-icononly">Active IconOnly</span>,
+        inactiveIcon: <span data-testid="inactive-icononly">Inactive IconOnly</span>,
+        iconPosition: "iconOnly",
+      },
+      {
+        id: 'tab3',
+        label: 'Right Icon',
+        content: <p>Right Content</p>,
+        activeIcon: <span data-testid="active-right">Active Right</span>,
+        inactiveIcon: <span data-testid="inactive-right">Inactive Right</span>,
+        iconPosition: "right",
+      },
+      {
+        id: 'tab4',
+        label: 'No Icon',
+        content: <p>No Icon Content</p>,
+      },
+    ],
+  },
+  play: async ({ canvasElement }: StoryContext) => {
+    const canvas = within(canvasElement);
+    const tabButtons = canvas.getAllByRole('tab');
+
+    // ─── Verify Outline Variant Button Classes ──────────────────────────────
+    // First tab should have left border classes.
+    expect(tabButtons[0].className).toContain('border-l-2');
+    expect(tabButtons[0].className).toContain('rounded-l-md');
+
+    // Last tab should have right border classes.
+    expect(tabButtons[3].className).toContain('border-r-2');
+    expect(tabButtons[3].className).toContain('rounded-r-md');
+
+    // A middle tab should have top and bottom border classes (and not left/right-specific).
+    expect(tabButtons[1].className).toContain('border-t-2');
+    expect(tabButtons[1].className).toContain('border-b-2');
+    expect(tabButtons[1].className).not.toContain('border-l-2');
+    expect(tabButtons[1].className).not.toContain('border-r-2');
+
+    // ─── Verify Icon Rendering Based on Icon Position and Active State ──────
+    // Initially, the first tab (index 0) is active.
+    expect(canvas.getByTestId('active-left')).toBeInTheDocument();
+
+    // For tab2 (Icon Only): since it's inactive, it should display the inactive icon.
+    expect(canvas.getByTestId('inactive-icononly')).toBeInTheDocument();
+
+    // For tab3 (Right Icon): inactive initially, so it should display the inactive icon.
+    expect(canvas.getByTestId('inactive-right')).toBeInTheDocument();
+
+    // For tab4 (No Icon): should display its label.
+    expect(canvas.getByText('No Icon')).toBeInTheDocument();
+
+    // ─── Simulate Tab Clicks to Check Active/Inactive Icon Updates ─────────
+
+    // Click on tab2 (Icon Only) so it becomes active.
+    await userEvent.click(tabButtons[1]);
+    // Simulate moving the mouse off the tab to clear the hover state.
+    await userEvent.unhover(tabButtons[1]);
+    expect(tabButtons[1]).toHaveAttribute('aria-selected', 'true');
+
+    // Now, tab2 should display its active icon.
+    // Using waitFor to ensure the component has updated.
+    await waitFor(() => {
+      expect(canvas.getByTestId('active-icononly')).toBeInTheDocument();
+    });
+
+    // And tab1 should now display its inactive icon.
+    expect(canvas.getByTestId('inactive-left')).toBeInTheDocument();
+
+    // Click on tab3 (Right Icon) so it becomes active.
+    await userEvent.click(tabButtons[2]);
+    await userEvent.unhover(tabButtons[2]);
+    expect(tabButtons[2]).toHaveAttribute('aria-selected', 'true');
+    await waitFor(() => {
+      expect(canvas.getByTestId('active-right')).toBeInTheDocument();
+    });
+
+    // Click on tab4 (No Icon) so it becomes active.
+    await userEvent.click(tabButtons[3]);
+    await userEvent.unhover(tabButtons[3]);
+    expect(tabButtons[3]).toHaveAttribute('aria-selected', 'true');
+    expect(canvas.getByText('No Icon')).toBeInTheDocument();
+  },
+};

package/src/lib/Tabs.spec.tsx

@@ -0,0 +1,249 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { axe } from "vitest-axe";
+import { IconPosition, Tabs } from "./Tabs";
+
+describe("Tabs Component", () => {
+  const tabs = [
+    { id: "tab1", label: "Tab 1", content: <p>Content for Tab 1</p> },
+    { id: "tab2", label: "Tab 2", content: <p>Content for Tab 2</p> },
+    { id: "tab3", label: "Tab 3", content: <p>Content for Tab 3</p> },
+  ];
+
+  it("renders tabs and panels", () => {
+    render(<Tabs variant={''} tabs={tabs} />);
+
+    expect(screen.getByText("Tab 1")).toBeInTheDocument();
+    expect(screen.getByText("Content for Tab 1")).toBeVisible();
+    expect(screen.queryByText("Content for Tab 2")).not.toBeVisible();
+  });
+
+  it("switches tabs on click", () => {
+    render(<Tabs variant={''} tabs={tabs} />);
+    fireEvent.click(screen.getByText("Tab 2"));
+
+    expect(screen.getByText("Content for Tab 2")).toBeVisible();
+    expect(screen.queryByText("Content for Tab 1")).not.toBeVisible();
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Tabs variant={''} tabs={tabs} />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+
+  // it("navigates tabs with Arrow keys", () => {
+  //   render(<Tabs variant={''} tabs={tabs} />);
+  //   const tab1 = screen.getByText("Tab 1");
+  //   const tab2 = screen.getByText("Tab 2");
+
+  //   tab1.focus();
+  //   fireEvent.keyDown(tab1, { key: "ArrowRight" });
+  //   expect(tab2).toHaveFocus();
+  // });
+
+  // it("navigates to the first and last tabs using Home and End keys", () => {
+  //   render(<Tabs variant={''} tabs={tabs} />);
+  //   const tab2 = screen.getByText("Tab 2");
+  //   const tab1 = screen.getByText("Tab 1");
+  //   const tab3 = screen.getByText("Tab 3");
+
+  //   tab2.focus();
+  //   fireEvent.keyDown(tab2, { key: "Home" });
+  //   expect(tab1).toHaveFocus();
+
+  //   fireEvent.keyDown(tab2, { key: "End" });
+  //   expect(tab3).toHaveFocus();
+  // });
+
+  // it("activates a tab with Enter or Space key", () => {
+  //   render(<Tabs variant={''} tabs={tabs} />);
+  //   const tab2 = screen.getByText("Tab 2");
+
+  //   tab2.focus();
+  //   fireEvent.keyDown(tab2, { key: "Enter" });
+  //   expect(screen.getByText("Content for Tab 2")).toBeVisible();
+
+  //   tab2.focus();
+  //   fireEvent.keyDown(tab2, { key: " " }); // Space key
+  //   expect(screen.getByText("Content for Tab 2")).toBeVisible();
+  // });
+
+  it("sets correct ARIA attributes for tabs and panels", () => {
+    render(<Tabs variant={''} tabs={tabs} />);
+
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const panel1 = screen.getByRole("tabpanel", { name: "Tab 1" });
+
+    expect(tab1).toHaveAttribute("aria-selected", "true");
+    expect(panel1).not.toHaveAttribute("hidden");
+
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+    expect(tab2).toHaveAttribute("aria-selected", "false");
+  });
+
+
+  // it("focuses content inside the active tab panel", () => {
+  //   render(
+  //     <Tabs
+  //       variant={''}
+  //       tabs={[
+  //         { id: "tab1", label: "Tab 1", content: <button>Focus Button</button> },
+  //         { id: "tab2", label: "Tab 2", content: <p>Content for Tab 2</p> },
+  //       ]}
+  //     />
+  //   );
+
+  //   const button = screen.getByText("Focus Button");
+  //   expect(button).toBeFocusable();
+  // });
+
+  it("renders correctly with no tabs", () => {
+    render(<Tabs variant={''} tabs={[]} />);
+    expect(screen.queryByRole("tab")).not.toBeInTheDocument();
+  });
+
+  it("sets the previous tab as active and focuses it when ArrowLeft is pressed", () => {
+    render(<Tabs variant="default" tabs={tabs} />);
+
+    // Get references to the tab elements
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+
+    // Focus the second tab and press ArrowLeft
+    tab2.focus();
+    fireEvent.keyDown(tab2, { key: "ArrowLeft" });
+
+    // Verify that Tab 1 is now active and focused
+    expect(tab1).toHaveAttribute("aria-selected", "true");
+    expect(tab1).toHaveFocus();
+  });
+
+  it("applies default variant when empty variant prop is provided", () => {
+    render(<Tabs variant="" tabs={tabs} />);
+    // The default container style should be applied:
+    // "flex border-b border-gray-200" from the default variant
+    const tabList = screen.getByRole("tablist");
+    expect(tabList.className).toMatch(/flex/);
+    expect(tabList.className).toMatch(/border-b/);
+    expect(tabList.className).toMatch(/border-gray-200/);
+  });
+
+  it("navigates tabs with ArrowRight key", () => {
+    render(<Tabs variant="default" tabs={tabs} />);
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+    tab1.focus();
+    fireEvent.keyDown(tab1, { key: "ArrowRight" });
+    expect(tab2).toHaveFocus();
+    expect(tab2).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("navigates to the first tab using Home key", () => {
+    render(<Tabs variant="default" tabs={tabs} />);
+    const tab1 = screen.getByRole("tab", { name: "Tab 1" });
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+    tab2.focus();
+    fireEvent.keyDown(tab2, { key: "Home" });
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("navigates to the last tab using End key", () => {
+    render(<Tabs variant="default" tabs={tabs} />);
+    const tab2 = screen.getByRole("tab", { name: "Tab 2" });
+    const tab3 = screen.getByRole("tab", { name: "Tab 3" });
+    tab2.focus();
+    fireEvent.keyDown(tab2, { key: "End" });
+    expect(tab3).toHaveFocus();
+    expect(tab3).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("renders outline variant tabs with proper border classes", () => {
+    render(<Tabs variant="outline" tabs={tabs} />);
+    const tabButtons = screen.getAllByRole("tab");
+    // For the outline variant, the first tab should have a left border class (rounded-l-md)
+    expect(tabButtons[0].className).toMatch(/rounded-l-md/);
+    // The last tab should have a right border class (rounded-r-md)
+    expect(tabButtons[tabButtons.length - 1].className).toMatch(/rounded-r-md/);
+  });
+
+  it("renders iconOnly tab with icon instead of label", () => {
+    const iconOnlyTabs = [
+      {
+        id: "iconTab",
+        label: "Should not show",
+        content: <p>Icon Only Content</p>,
+        activeIcon: <span data-testid="active-icon-iconOnly">ActiveIcon</span>,
+        inactiveIcon: <span data-testid="inactive-icon-iconOnly">InactiveIcon</span>,
+        iconPosition: IconPosition.IconOnly,
+      },
+    ];
+    render(<Tabs variant="default" tabs={iconOnlyTabs} />);
+    // By default, the first (and only) tab is active so it should display the activeIcon
+    expect(screen.getByTestId("active-icon-iconOnly")).toBeInTheDocument();
+    // The label should not be rendered because iconOnly is true
+    expect(screen.queryByText("Should not show")).not.toBeInTheDocument();
+    // Simulate hover to trigger icon toggle
+    const tabButton = screen.getByRole("tab");
+    fireEvent.mouseEnter(tabButton);
+    // When hovered, the active tab should display the inactiveIcon per the component logic
+    expect(screen.getByTestId("inactive-icon-iconOnly")).toBeInTheDocument();
+  });
+  it("renders tab with left icon and toggles icon on hover", () => {
+    const leftIconTabs = [
+      {
+        id: "leftTab",
+        label: "Left Icon Tab",
+        content: <p>Left Icon Content</p>,
+        activeIcon: <span data-testid="active-icon-left">ActiveIcon</span>,
+        inactiveIcon: <span data-testid="inactive-icon-left">InactiveIcon</span>,
+        iconPosition: IconPosition.Left,
+      },
+    ];
+    render(<Tabs variant="default" tabs={leftIconTabs} />);
+    // Use a regex that matches a part of the accessible name (which includes the icon text)
+    const tabButton = screen.getByRole("tab", { name: /Left Icon Tab/ });
+    // When active and not hovered, it should show the active icon.
+    expect(screen.getByTestId("active-icon-left")).toBeInTheDocument();
+    // Simulate mouse enter (hover)
+    fireEvent.mouseEnter(tabButton);
+    expect(screen.getByTestId("inactive-icon-left")).toBeInTheDocument();
+    // Simulate mouse leave so that hover resets.
+    fireEvent.mouseLeave(tabButton);
+    expect(screen.getByTestId("active-icon-left")).toBeInTheDocument();
+  });
+
+  it("renders tab with right icon and toggles icon on hover", () => {
+    const rightIconTabs = [
+      {
+        id: "rightTab",
+        label: "Right Icon Tab",
+        content: <p>Right Icon Content</p>,
+        activeIcon: <span data-testid="active-icon-right">ActiveIcon</span>,
+        inactiveIcon: <span data-testid="inactive-icon-right">InactiveIcon</span>,
+        iconPosition: IconPosition.Right,
+      },
+    ];
+    render(<Tabs variant="default" tabs={rightIconTabs} />);
+    // Use a regex that matches a part of the accessible name (which includes both the label and icon text)
+    const tabButton = screen.getByRole("tab", { name: /Right Icon Tab/ });
+    // When active and not hovered, it should show the active icon.
+    expect(screen.getByTestId("active-icon-right")).toBeInTheDocument();
+    // Simulate mouse enter (hover)
+    fireEvent.mouseEnter(tabButton);
+    expect(screen.getByTestId("inactive-icon-right")).toBeInTheDocument();
+    // Simulate mouse leave so that hover resets.
+    fireEvent.mouseLeave(tabButton);
+    expect(screen.getByTestId("active-icon-right")).toBeInTheDocument();
+  });
+
+  it("renders tab panels with correct aria-labelledby attributes", () => {
+    render(<Tabs variant="default" tabs={tabs} />);
+    const panels = screen.getAllByRole("tabpanel");
+    panels.forEach((panel, index) => {
+      expect(panel).toHaveAttribute("aria-labelledby", `tab-${tabs[index].id}`);
+    });
+  });
+});