@12-apps/ui 1.4.1 → 1.5.1

package/src/components/data-display/Badge/Badge.test.stories.tsx

@@ -1,1194 +0,0 @@
-import CheckCircle from '@mui/icons-material/CheckCircle';
-import Mail from '@mui/icons-material/Mail';
-import Notifications from '@mui/icons-material/Notifications';
-import Person from '@mui/icons-material/Person';
-import Settings from '@mui/icons-material/Settings';
-import ShoppingCart from '@mui/icons-material/ShoppingCart';
-import Star from '@mui/icons-material/Star';
-import { Box, Button, IconButton } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-
-import { Badge } from './Badge';
-
-const meta: Meta<typeof Badge> = {
-  title: 'DataDisplay/Badge/Tests',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Badge'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Interaction Tests
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  args: {
-    badgeContent: 5,
-    onClick: fn(),
-    children: (
-      <IconButton data-testid="badge-button">
-        <Mail />
-      </IconButton>
-    ),
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial render verification', async () => {
-      const badge = canvas.getByText('5');
-      await expect(badge).toBeInTheDocument();
-    });
-
-    await step('Click interaction on child element', async () => {
-      const button = canvas.getByTestId('badge-button');
-      await userEvent.click(button);
-      await expect(args.onClick).toHaveBeenCalledTimes(1);
-    });
-
-    await step('Hover interaction', async () => {
-      const badge = canvas.getByText('5');
-      await userEvent.hover(badge);
-      // Badge should maintain visibility on hover
-      await expect(badge).toBeInTheDocument();
-    });
-  },
-};
-
-// Create a test component that demonstrates showZero behavior
-const CountVariantTestComponent = () => {
-  const [count, setCount] = useState(0);
-  const [showZero, setShowZero] = useState(false);
-
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-      <Badge variant="count" badgeContent={count} showZero={showZero} max={99}>
-        <ShoppingCart data-testid="cart-icon" />
-      </Badge>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-        <Button data-testid="toggle-show-zero" size="small" onClick={() => setShowZero(!showZero)}>
-          Toggle Show Zero
-        </Button>
-        <Button data-testid="set-count-150" size="small" onClick={() => setCount(150)}>
-          Set Count to 150
-        </Button>
-        <Button data-testid="reset-count" size="small" onClick={() => setCount(0)}>
-          Reset Count
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
-export const CountVariantTest: Story = {
-  name: '📊 Count Variant Test',
-  render: () => <CountVariantTestComponent />,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Zero count should be hidden when showZero is false', async () => {
-      // Initially showZero is false and count is 0
-      await waitFor(() => expect(canvas.queryByText('0')).not.toBeInTheDocument());
-    });
-
-    await step('Toggle to show zero', async () => {
-      const toggleButton = canvas.getByTestId('toggle-show-zero');
-      await userEvent.click(toggleButton);
-
-      // Now badge should show '0'
-      const badge = await canvas.findByText('0');
-      await expect(badge).toBeInTheDocument();
-    });
-
-    await step('Test max count formatting', async () => {
-      const setCountButton = canvas.getByTestId('set-count-150');
-      await userEvent.click(setCountButton);
-
-      // Should show '99+' because 150 > 99
-      const badge = await canvas.findByText('99+');
-      await expect(badge).toBeInTheDocument();
-    });
-  },
-};
-
-export const DotVariantTest: Story = {
-  name: '🔴 Dot Variant Test',
-  args: {
-    variant: 'dot',
-    color: 'success',
-    pulse: false,
-    children: <Notifications data-testid="notification-icon" />,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify dot variant rendering', async () => {
-      // Dot variant shouldn't show any text content
-      const badges = canvas.queryAllByText(/\d+/);
-      await expect(badges).toHaveLength(0);
-
-      // Should have the notification icon
-      const icon = canvas.getByTestId('notification-icon');
-      await expect(icon).toBeInTheDocument();
-    });
-
-    await step('Verify dot badge is rendered', async () => {
-      const badge = canvasElement.querySelector('.MuiBadge-dot');
-      await expect(badge).toBeInTheDocument();
-      // Dot badge should have the success color applied
-      if (badge) {
-        const badgeStyle = window.getComputedStyle(badge);
-        // Check that it has some background color (not transparent)
-        await expect(badgeStyle.backgroundColor).not.toBe('transparent');
-      }
-    });
-  },
-};
-
-// Accessibility Tests
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  args: {
-    badgeContent: 'NEW',
-    color: 'primary',
-    children: (
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <IconButton data-testid="first-focusable" aria-label="First button with badge">
-          <Mail />
-        </IconButton>
-        <IconButton data-testid="second-focusable" aria-label="Second button with badge">
-          <Notifications />
-        </IconButton>
-      </Box>
-    ),
-  },
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'aria-required-attr', enabled: true },
-          { id: 'aria-roles', enabled: true },
-          { id: 'aria-valid-attr-value', enabled: true },
-          { id: 'button-name', enabled: true },
-        ],
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Tab navigation forward', async () => {
-      const firstButton = canvas.getByTestId('first-focusable');
-      const secondButton = canvas.getByTestId('second-focusable');
-
-      // Tab in from the body — the old .focus() call plus assertion only proved
-      // the DOM honours focus(), not that this button is the first tab stop.
-      await userEvent.tab();
-      await waitFor(() => expect(firstButton).toHaveFocus());
-
-      // Tab to next element
-      await userEvent.tab();
-      await waitFor(() => expect(secondButton).toHaveFocus());
-    });
-
-    await step('Tab navigation backward', async () => {
-      await userEvent.tab({ shift: true });
-      const firstButton = canvas.getByTestId('first-focusable');
-      await waitFor(() => expect(firstButton).toHaveFocus());
-    });
-
-    await step('Enter key activation on focused button', async () => {
-      const button = canvas.getByTestId('first-focusable');
-      // Focus is already back on this button from the shift-tab above.
-      await waitFor(() => expect(button).toHaveFocus());
-
-      await userEvent.keyboard('{Enter}');
-      // Focus must survive activation rather than jump elsewhere.
-      await waitFor(() => expect(button).toHaveFocus());
-    });
-  },
-};
-
-export const ScreenReaderTest: Story = {
-  name: '🔊 Screen Reader Test',
-  args: {
-    badgeContent: 12,
-    color: 'error',
-    'aria-label': '12 new notifications',
-    children: (
-      <IconButton aria-label="Notifications">
-        <Notifications />
-      </IconButton>
-    ),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify ARIA labels on button', async () => {
-      const button = canvas.getByLabelText('Notifications');
-      await expect(button).toBeInTheDocument();
-    });
-
-    await step('Verify badge content is readable', async () => {
-      const badge = canvas.getByText('12');
-      await expect(badge).toBeInTheDocument();
-    });
-
-    await step('Verify role attributes', async () => {
-      const button = canvas.getByRole('button');
-      await expect(button).toBeInTheDocument();
-    });
-  },
-};
-
-// Visual Tests
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  args: {
-    badgeContent: 99,
-    size: 'md',
-    children: <Mail data-testid="responsive-icon" />,
-  },
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: { width: '375px', height: '667px' },
-          type: 'mobile',
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: { width: '768px', height: '1024px' },
-          type: 'tablet',
-        },
-        desktop: {
-          name: 'Desktop',
-          styles: { width: '1920px', height: '1080px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'mobile',
-    },
-    chromatic: {
-      viewports: [375, 768, 1920],
-      delay: 300,
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify badge scales appropriately', async () => {
-      const badge = canvas.getByText('99');
-      await expect(badge).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(badge);
-      const fontSize = parseFloat(computedStyle.fontSize);
-
-      // Font size should be reasonable for the viewport
-      await expect(fontSize).toBeGreaterThan(8);
-      await expect(fontSize).toBeLessThan(20);
-    });
-  },
-};
-
-export const ThemeVariations: Story = {
-  name: '🎨 Theme Variations Test',
-  args: {
-    badgeContent: 'HOT',
-    color: 'error',
-    variant: 'gradient',
-    glow: true,
-    children: <ShoppingCart />,
-  },
-  parameters: {
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#1a1a1a' },
-      ],
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify theme colors', async () => {
-      const badgeText = canvas.getByText('HOT');
-      // Get the parent badge element that has the gradient
-      const badgeElement = badgeText.closest('.MuiBadge-badge');
-
-      if (badgeElement) {
-        const computedStyle = window.getComputedStyle(badgeElement);
-        // Check if gradient is applied
-        const background = computedStyle.background || computedStyle.backgroundImage;
-        await expect(background).toMatch(/gradient|linear/i);
-      }
-    });
-
-    await step('Verify glow effect', async () => {
-      const badgeText = canvas.getByText('HOT');
-      const badgeElement = badgeText.closest('.MuiBadge-badge');
-
-      if (badgeElement) {
-        const computedStyle = window.getComputedStyle(badgeElement);
-        // Check for box shadow (glow effect)
-        await expect(computedStyle.boxShadow).not.toBe('none');
-      }
-    });
-  },
-};
-
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  args: {
-    badgeContent: 5,
-    color: 'primary',
-    children: (
-      <Box sx={{ display: 'flex', gap: 3 }}>
-        <IconButton data-testid="normal-button">
-          <Badge badgeContent={5}>
-            <Mail />
-          </Badge>
-        </IconButton>
-        <IconButton data-testid="disabled-button" disabled>
-          <Badge badgeContent={5}>
-            <Mail />
-          </Badge>
-        </IconButton>
-      </Box>
-    ),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Default state', async () => {
-      const normalButton = canvas.getByTestId('normal-button');
-      await expect(normalButton).not.toBeDisabled();
-      await expect(normalButton).toHaveStyle({ opacity: '1' });
-    });
-
-    await step('Hover state', async () => {
-      const normalButton = canvas.getByTestId('normal-button');
-      await userEvent.hover(normalButton);
-      // Button should respond to hover
-      await expect(normalButton).toBeInTheDocument();
-    });
-
-    await step('Disabled state', async () => {
-      const disabledButton = canvas.getByTestId('disabled-button');
-      await expect(disabledButton).toBeDisabled();
-      const computedStyle = window.getComputedStyle(disabledButton);
-      const opacity = parseFloat(computedStyle.opacity);
-      // Disabled buttons should have reduced opacity or be 1 (theme dependent)
-      await expect(opacity).toBeLessThanOrEqual(1);
-    });
-  },
-};
-
-// Performance Tests
-export const PerformanceTest: Story = {
-  name: '⚡ Performance Test',
-  args: {
-    children: (
-      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }} data-testid="badge-container">
-        {Array.from({ length: 20 }, (_, i) => (
-          <Box key={i} data-testid={`badge-wrapper-${i}`}>
-            <Badge badgeContent={i + 1}>
-              <Mail />
-            </Badge>
-          </Box>
-        ))}
-      </Box>
-    ),
-  },
-  parameters: {
-    chromatic: { disableSnapshot: false, delay: 500 },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify all badges render', async () => {
-      const container = canvas.getByTestId('badge-container');
-      await expect(container).toBeInTheDocument();
-
-      // Count wrapper elements to ensure correct number of badges
-      const wrappers = container.querySelectorAll('[data-testid^="badge-wrapper-"]');
-      expect(wrappers.length).toBe(20);
-    });
-
-    await step('Verify badge content integrity', async () => {
-      // Check that badge content renders correctly
-      for (let i = 0; i < 5; i++) {
-        const wrapper = canvas.getByTestId(`badge-wrapper-${i}`);
-        await expect(wrapper).toBeInTheDocument();
-        // Verify the badge content exists
-        const badgeContent = canvas.getByText(String(i + 1));
-        await expect(badgeContent).toBeInTheDocument();
-      }
-    });
-
-    await step('Verify container is visible', async () => {
-      const container = canvas.getByTestId('badge-container');
-      await expect(container).toBeVisible();
-    });
-  },
-};
-
-// Edge Cases Tests
-export const EdgeCases: Story = {
-  name: '🔧 Edge Cases Test',
-  args: {
-    badgeContent: '',
-    children: <Mail data-testid="mail-icon" />,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Empty content handling', async () => {
-      // Badge with empty content should not crash
-      const icon = canvas.getByTestId('mail-icon');
-      await expect(icon).toBeInTheDocument();
-    });
-
-    await step('Long text overflow', async () => {
-      // We can't modify args mid-test. Instead check the current badge renders
-      const icon = canvas.getByTestId('mail-icon');
-      await expect(icon).toBeInTheDocument();
-      // The badge has empty content from args, so it won't have visible badge element
-    });
-
-    await step('Special characters handling', async () => {
-      // We need to find a way to test special characters without modifying args mid-test
-      // Instead, let's check if the component can render without errors
-      const icon = canvas.getByTestId('mail-icon');
-      await expect(icon).toBeInTheDocument();
-      // The test needs to be structured to render the special chars in the args from the start
-    });
-
-    await step('Maximum number handling', async () => {
-      // Like the previous step, we can't modify args mid-test
-      // Let's just check that the component renders properly
-      const icon = canvas.getByTestId('mail-icon');
-      await expect(icon).toBeInTheDocument();
-    });
-  },
-};
-
-// Animation Tests
-export const AnimationTest: Story = {
-  name: '🎬 Animation Test',
-  args: {
-    variant: 'dot',
-    color: 'success',
-    pulse: true,
-    glow: false,
-    children: <Notifications data-testid="animated-icon" />,
-  },
-  play: async ({ canvasElement, step }) => {
-    within(canvasElement);
-
-    await step('Verify pulse animation', async () => {
-      const badge = canvasElement.querySelector('.MuiBadge-dot');
-      await expect(badge).not.toBeNull();
-      await expect(badge).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(badge as Element);
-      // Check if animation is applied
-      await expect(computedStyle.animationName).not.toBe('none');
-      await expect(computedStyle.animationDuration).toBe('2s');
-    });
-
-    await step('Check initial pulse styling', async () => {
-      // Since glow is false in args, we only have pulse animation
-      const badge = canvasElement.querySelector('.MuiBadge-dot');
-      if (badge) {
-        const computedStyle = window.getComputedStyle(badge);
-        // Check if some styling is applied (pulse animation should be active)
-        await expect(computedStyle.animationName).not.toBe('none');
-      }
-    });
-  },
-};
-
-// Special Characters Test (as separate story)
-export const SpecialCharactersTest: Story = {
-  name: '🔤 Special Characters Test',
-  args: {
-    badgeContent: '!@#$%',
-    children: <Mail data-testid="special-chars-icon" />,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify special characters render', async () => {
-      const badge = canvas.getByText('!@#$%');
-      await expect(badge).toBeInTheDocument();
-    });
-
-    await step('Verify icon is present', async () => {
-      const icon = canvas.getByTestId('special-chars-icon');
-      await expect(icon).toBeInTheDocument();
-    });
-  },
-};
-
-// Long Text Test (as separate story)
-export const LongTextTest: Story = {
-  name: '📝 Long Text Test',
-  args: {
-    badgeContent: 'VERYLONGTEXTCONTENT',
-    children: <Mail data-testid="long-text-icon" />,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify long text renders', async () => {
-      const badge = canvas.getByText('VERYLONGTEXTCONTENT');
-      await expect(badge).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(badge);
-      // Badge should handle long text appropriately - width should be at least 20px
-      expect(parseFloat(computedStyle.width)).toBeGreaterThanOrEqual(20);
-    });
-  },
-};
-
-// Max Number Test (as separate story)
-export const MaxNumberTest: Story = {
-  name: '🔢 Max Number Test',
-  args: {
-    badgeContent: 9999,
-    max: 999,
-    variant: 'count',
-    children: <Mail data-testid="max-number-icon" />,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify max number format', async () => {
-      const badge = canvas.getByText('999+');
-      await expect(badge).toBeInTheDocument();
-    });
-  },
-};
-
-// Position Tests
-export const PositionTest: Story = {
-  name: '📍 Position Test',
-  args: {
-    badgeContent: 1,
-    position: 'top-right',
-    children: (
-      <Box
-        sx={{ width: 60, height: 60, bgcolor: 'grey.300', borderRadius: 1 }}
-        data-testid="position-box"
-      />
-    ),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Test initial position renders correctly', async () => {
-      const badge = canvas.getByText('1');
-      await expect(badge).toBeInTheDocument();
-
-      const box = canvas.getByTestId('position-box');
-      await expect(box).toBeInTheDocument();
-
-      // Badge should be positioned relative to the box
-      const badgeRect = badge.getBoundingClientRect();
-      const boxRect = box.getBoundingClientRect();
-
-      // For top-right position, badge should be positioned relative to the box
-      // Allow for edge cases where positions might be equal due to styling
-      expect(badgeRect.left).toBeGreaterThanOrEqual(boxRect.left);
-      expect(badgeRect.top).toBeLessThanOrEqual(boxRect.bottom);
-    });
-  },
-};
-
-// Integration Test
-export const IntegrationTest: Story = {
-  name: '🔗 Integration Test',
-  render: (args) => (
-    <Box sx={{ display: 'flex', gap: 3, alignItems: 'center' }}>
-      <Badge {...args} badgeContent={3} color="primary">
-        <IconButton data-testid="primary-button">
-          <Mail />
-        </IconButton>
-      </Badge>
-      <Badge {...args} variant="dot" color="success">
-        <IconButton data-testid="success-button">
-          <Notifications />
-        </IconButton>
-      </Badge>
-      <Badge {...args} badgeContent={99} color="error" max={99}>
-        <IconButton data-testid="error-button">
-          <ShoppingCart />
-        </IconButton>
-      </Badge>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify multiple badges render correctly', async () => {
-      const primaryBadge = canvas.getByText('3');
-      const errorBadge = canvas.getByText('99');
-
-      await expect(primaryBadge).toBeInTheDocument();
-      await expect(errorBadge).toBeInTheDocument();
-    });
-
-    await step('Interact with different badged buttons', async () => {
-      const buttons = ['primary-button', 'success-button', 'error-button'];
-
-      for (const buttonId of buttons) {
-        const button = canvas.getByTestId(buttonId);
-        await userEvent.click(button);
-        await expect(button).toBeInTheDocument();
-      }
-    });
-  },
-};
-
-// Test for new variants
-export const NewVariantsTest: Story = {
-  name: '🎨 New Variants Test',
-  render: () => (
-    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      <Badge variant="outline" badgeContent="Outline" color="primary">
-        <Box sx={{ p: 2, bgcolor: 'grey.100' }}>Outline</Box>
-      </Badge>
-      <Badge variant="secondary" badgeContent="Secondary" color="secondary">
-        <Box sx={{ p: 2, bgcolor: 'grey.100' }}>Secondary</Box>
-      </Badge>
-      <Badge variant="destructive" badgeContent="!" color="error">
-        <Box sx={{ p: 2, bgcolor: 'grey.100' }}>Destructive</Box>
-      </Badge>
-      <Badge variant="success" badgeContent="✓" color="success">
-        <Box sx={{ p: 2, bgcolor: 'grey.100' }}>Success</Box>
-      </Badge>
-      <Badge variant="warning" badgeContent="⚠" color="warning">
-        <Box sx={{ p: 2, bgcolor: 'grey.100' }}>Warning</Box>
-      </Badge>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify all new variants render correctly', async () => {
-      // Use more specific selectors to avoid ambiguity
-      const badges = canvasElement.querySelectorAll('.MuiBadge-badge');
-
-      // Check that we have the expected number of badges
-      expect(badges).toHaveLength(5);
-
-      // Check specific variant content by finding within badge elements
-      const outlineBadge = Array.from(badges).find((badge) => badge.textContent === 'Outline');
-      const secondaryBadge = Array.from(badges).find((badge) => badge.textContent === 'Secondary');
-      const destructiveBadge = canvas.getByText('!');
-      const successBadge = canvas.getByText('✓');
-      const warningBadge = canvas.getByText('⚠');
-
-      await expect(outlineBadge).toBeTruthy();
-      await expect(secondaryBadge).toBeTruthy();
-      await expect(destructiveBadge).toBeInTheDocument();
-      await expect(successBadge).toBeInTheDocument();
-      await expect(warningBadge).toBeInTheDocument();
-    });
-  },
-};
-
-// Test closable badges
-export const ClosableBadgeTest: Story = {
-  name: '❌ Closable Badge Test',
-  args: {
-    badgeContent: 'Close Me',
-    closable: true,
-    onClose: fn(),
-    color: 'primary',
-    variant: 'secondary',
-    children: <Box sx={{ p: 2, bgcolor: 'grey.200' }}>Content</Box>,
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify closable badge renders with close button', async () => {
-      const badge = canvas.getByText('Close Me');
-      await expect(badge).toBeInTheDocument();
-
-      // Check for close button
-      const closeButtons = canvasElement.querySelectorAll('button');
-      const closeButton = Array.from(closeButtons).find((btn) =>
-        btn.querySelector('svg[data-testid="CloseIcon"]'),
-      );
-      await expect(closeButton).toBeTruthy();
-    });
-
-    await step('Click close button', async () => {
-      const closeButtons = canvasElement.querySelectorAll('button');
-      const closeButton = Array.from(closeButtons).find((btn) =>
-        btn.querySelector('svg[data-testid="CloseIcon"]'),
-      ) as HTMLButtonElement | undefined;
-
-      if (closeButton) {
-        await userEvent.click(closeButton);
-        // Wait for fade out animation
-        await waitFor(
-          () => {
-            expect(args.onClose).toHaveBeenCalledTimes(1);
-          },
-          { timeout: 500 },
-        );
-      }
-    });
-  },
-};
-
-// Test badges with icons
-export const BadgeWithIconTest: Story = {
-  name: '🎯 Badge with Icon Test',
-  args: {
-    icon: <CheckCircle sx={{ fontSize: 'inherit' }} />,
-    badgeContent: 'Success',
-    color: 'success',
-    variant: 'success',
-    children: <Box sx={{ p: 2, bgcolor: 'grey.100' }}>Task</Box>,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify badge renders with icon and text', async () => {
-      const badge = canvas.getByText('Success');
-      await expect(badge).toBeInTheDocument();
-
-      // Check for icon presence
-      const icon = canvasElement.querySelector('svg[data-testid="CheckCircleIcon"]');
-      await expect(icon).toBeTruthy();
-    });
-  },
-};
-
-// Test shimmer effect
-export const ShimmerEffectTest: Story = {
-  name: '✨ Shimmer Effect Test',
-  args: {
-    badgeContent: 'PREMIUM',
-    shimmer: true,
-    variant: 'gradient',
-    color: 'primary',
-    children: <Star data-testid="star-icon" />,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify shimmer effect is applied', async () => {
-      const badge = canvas.getByText('PREMIUM');
-      await expect(badge).toBeInTheDocument();
-
-      // Check for shimmer animation (pseudo-element will have animation)
-      const badgeElement = badge.closest('.MuiBadge-badge');
-      await expect(badgeElement).toBeTruthy();
-    });
-  },
-};
-
-// Test bounce animation
-export const BounceAnimationTest: Story = {
-  name: '🏀 Bounce Animation Test',
-  args: {
-    badgeContent: 'NEW',
-    bounce: true,
-    color: 'success',
-    children: <Box sx={{ p: 2, bgcolor: 'grey.100' }}>Item</Box>,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify bounce animation is applied', async () => {
-      const badge = canvas.getByText('NEW');
-      await expect(badge).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(badge);
-      // Check if animation is applied
-      await expect(computedStyle.animationName).toBeTruthy();
-    });
-  },
-};
-
-// Test extra small size
-export const ExtraSmallSizeTest: Story = {
-  name: '🔬 Extra Small Size Test',
-  args: {
-    size: 'xs',
-    badgeContent: 2,
-    color: 'primary',
-    children: <Mail data-testid="mail-icon" />,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify extra small size renders correctly', async () => {
-      const badge = canvas.getByText('2');
-      await expect(badge).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(badge);
-      const fontSize = parseFloat(computedStyle.fontSize);
-
-      // Extra small should have smallest font size
-      await expect(fontSize).toBeLessThan(10);
-    });
-  },
-};
-
-// State Management Test
-const StateManagementComponent = () => {
-  const [count, setCount] = useState(0);
-  const [isVisible, setIsVisible] = useState(true);
-
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center' }}>
-      <Box sx={{ display: 'flex', gap: 2 }}>
-        <Button onClick={() => setCount((c) => c + 1)} data-testid="increment-button">
-          Increment ({count})
-        </Button>
-        <Button onClick={() => setCount((c) => Math.max(0, c - 1))} data-testid="decrement-button">
-          Decrement
-        </Button>
-        <Button onClick={() => setIsVisible((v) => !v)} data-testid="toggle-visibility">
-          Toggle Visibility
-        </Button>
-      </Box>
-      <Badge
-        badgeContent={count}
-        color="primary"
-        invisible={!isVisible}
-        showZero
-        data-testid="dynamic-badge"
-      >
-        <Mail data-testid="mail-with-badge" />
-      </Badge>
-      <Box data-testid="count-display">Count: {count}</Box>
-      <Box data-testid="visibility-display">Visible: {isVisible.toString()}</Box>
-    </Box>
-  );
-};
-
-export const StateManagementTest: Story = {
-  name: '🔄 State Management Test',
-  render: () => <StateManagementComponent />,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial state verification', async () => {
-      const countDisplay = canvas.getByTestId('count-display');
-      const visibilityDisplay = canvas.getByTestId('visibility-display');
-
-      await expect(countDisplay).toHaveTextContent('Count: 0');
-      await expect(visibilityDisplay).toHaveTextContent('Visible: true');
-    });
-
-    await step('Increment count updates badge', async () => {
-      const incrementButton = canvas.getByTestId('increment-button');
-      await userEvent.click(incrementButton);
-
-      const badge = canvas.getByText('1');
-      await expect(badge).toBeInTheDocument();
-
-      const countDisplay = canvas.getByTestId('count-display');
-      await expect(countDisplay).toHaveTextContent('Count: 1');
-    });
-
-    await step('Multiple increments', async () => {
-      const incrementButton = canvas.getByTestId('increment-button');
-      await userEvent.click(incrementButton);
-      await userEvent.click(incrementButton);
-      await userEvent.click(incrementButton);
-
-      const badge = canvas.getByText('4');
-      await expect(badge).toBeInTheDocument();
-    });
-
-    await step('Decrement count', async () => {
-      const decrementButton = canvas.getByTestId('decrement-button');
-      await userEvent.click(decrementButton);
-      await userEvent.click(decrementButton);
-
-      const badge = canvas.getByText('2');
-      await expect(badge).toBeInTheDocument();
-    });
-
-    await step('Toggle visibility', async () => {
-      const toggleButton = canvas.getByTestId('toggle-visibility');
-      await userEvent.click(toggleButton);
-
-      const visibilityDisplay = canvas.getByTestId('visibility-display');
-      await expect(visibilityDisplay).toHaveTextContent('Visible: false');
-
-      // Badge should be hidden - just verify the visibility state is updated
-      await waitFor(
-        () => {
-          const visibilityDisplay = canvas.getByTestId('visibility-display');
-          expect(visibilityDisplay).toHaveTextContent('Visible: false');
-        },
-        { timeout: 1000 },
-      );
-    });
-
-    await step('Toggle visibility back', async () => {
-      const toggleButton = canvas.getByTestId('toggle-visibility');
-      await userEvent.click(toggleButton);
-
-      const badge = canvas.getByText('2');
-      await expect(badge).toBeInTheDocument();
-    });
-  },
-};
-
-// Focus Management Enhanced Test
-const FocusManagementComponent = () => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const items = [
-    { label: 'Messages', icon: <Mail />, count: 5 },
-    { label: 'Notifications', icon: <Notifications />, count: 12 },
-    { label: 'Settings', icon: <Settings />, count: 3 },
-    { label: 'Profile', icon: <Person />, count: 0 },
-  ];
-
-  return (
-    <Box sx={{ display: 'flex', gap: 2 }} role="tablist">
-      {items.map((item, index) => (
-        <Badge
-          key={item.label}
-          badgeContent={item.count}
-          color="primary"
-          showZero={index === 3} // Show zero for profile
-        >
-          <Button
-            data-testid={`focus-item-${index}`}
-            onFocus={() => setActiveIndex(index)}
-            sx={{
-              minWidth: 80,
-              border: activeIndex === index ? 2 : 1,
-              borderColor: activeIndex === index ? 'primary.main' : 'grey.300',
-              borderStyle: 'solid',
-            }}
-            aria-label={`${item.label}, ${item.count} notifications`}
-          >
-            {item.icon}
-          </Button>
-        </Badge>
-      ))}
-      <Box data-testid="active-index" aria-live="polite">
-        Active: {activeIndex}
-      </Box>
-    </Box>
-  );
-};
-
-export const FocusManagementTest: Story = {
-  name: '🔍 Focus Management Test',
-  render: () => <FocusManagementComponent />,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial focus state', async () => {
-      const activeDisplay = canvas.getByTestId('active-index');
-      await expect(activeDisplay).toHaveTextContent('Active: 0');
-    });
-
-    await step('Tab through focusable elements', async () => {
-      // Tab in from the body to reach the first item.
-      const firstItem = canvas.getByTestId('focus-item-0');
-      await userEvent.tab();
-      await waitFor(() => expect(firstItem).toHaveFocus());
-
-      // Tab to second item
-      await userEvent.tab();
-      const secondItem = canvas.getByTestId('focus-item-1');
-      await waitFor(() => expect(secondItem).toHaveFocus());
-
-      const activeDisplay = canvas.getByTestId('active-index');
-      await expect(activeDisplay).toHaveTextContent('Active: 1');
-
-      // Tab to third item
-      await userEvent.tab();
-      const thirdItem = canvas.getByTestId('focus-item-2');
-      await waitFor(() => expect(thirdItem).toHaveFocus());
-
-      await expect(canvas.getByTestId('active-index')).toHaveTextContent('Active: 2');
-    });
-
-    await step('Reverse tab navigation', async () => {
-      await userEvent.tab({ shift: true });
-      const secondItem = canvas.getByTestId('focus-item-1');
-      await waitFor(() => expect(secondItem).toHaveFocus());
-
-      const activeDisplay = canvas.getByTestId('active-index');
-      await expect(activeDisplay).toHaveTextContent('Active: 1');
-    });
-
-    await step('Verify badge content accessibility', async () => {
-      const button = canvas.getByLabelText(/Messages, 5 notifications/);
-      await expect(button).toBeInTheDocument();
-
-      const profileButton = canvas.getByLabelText(/Profile, 0 notifications/);
-      await expect(profileButton).toBeInTheDocument();
-    });
-  },
-};
-
-// WCAG Compliance Test
-export const WCAGComplianceTest: Story = {
-  name: '♿ WCAG Compliance Test',
-  args: {
-    badgeContent: 'Alert',
-    color: 'error',
-    'aria-label': 'Error alert notification',
-    'aria-live': 'assertive',
-    'aria-atomic': true,
-    children: (
-      <Button aria-describedby="badge-description" data-testid="wcag-button">
-        System Status
-      </Button>
-    ),
-  },
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'aria-required-attr', enabled: true },
-          { id: 'aria-roles', enabled: true },
-          { id: 'aria-valid-attr-value', enabled: true },
-          { id: 'button-name', enabled: true },
-          { id: 'link-name', enabled: true },
-          { id: 'label', enabled: true },
-        ],
-      },
-    },
-  },
-  render: (args) => (
-    <Box>
-      <Badge {...args} />
-      <div id="badge-description" style={{ position: 'absolute', left: '-10000px' }}>
-        This badge indicates system status alerts
-      </div>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify ARIA attributes', async () => {
-      const badge = canvas.getByText('Alert');
-      await expect(badge).toBeInTheDocument();
-
-      // Check that badge has proper ARIA live region
-      const badgeElement = badge.closest('[aria-live]');
-      await expect(badgeElement).toHaveAttribute('aria-live', 'assertive');
-      await expect(badgeElement).toHaveAttribute('aria-atomic', 'true');
-    });
-
-    await step('Verify button accessibility', async () => {
-      const button = canvas.getByTestId('wcag-button');
-      await expect(button).toHaveAttribute('aria-describedby', 'badge-description');
-
-      // Button should be focusable — reached by keyboard, not by calling focus().
-      await userEvent.tab();
-      await waitFor(() => expect(button).toHaveFocus());
-    });
-
-    await step('Color contrast verification', async () => {
-      const badge = canvas.getByText('Alert');
-      const computedStyle = window.getComputedStyle(badge);
-
-      // Error color should provide good contrast
-      const backgroundColor = computedStyle.backgroundColor;
-      const color = computedStyle.color;
-
-      await expect(backgroundColor).toBeTruthy();
-      await expect(color).toBeTruthy();
-    });
-
-    await step('Keyboard activation', async () => {
-      const button = canvas.getByTestId('wcag-button');
-      // Focus is already on the button from the previous step.
-      await waitFor(() => expect(button).toHaveFocus());
-
-      // Should be activatable with Enter
-      await userEvent.keyboard('{Enter}');
-      await waitFor(() => expect(button).toHaveFocus());
-
-      // Should be activatable with Space
-      await userEvent.keyboard(' ');
-      await waitFor(() => expect(button).toHaveFocus());
-    });
-  },
-};
-
-// Cross Browser Compatibility Test
-export const CrossBrowserTest: Story = {
-  name: '🌐 Cross Browser Test',
-  args: {
-    variant: 'glass',
-    badgeContent: 'BETA',
-    color: 'primary',
-    glow: true,
-    shimmer: true,
-    children: <Box sx={{ p: 3, bgcolor: 'grey.100', borderRadius: 1 }}>Feature</Box>,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify backdrop-filter support fallback', async () => {
-      const badge = canvas.getByText('BETA');
-      const computedStyle = window.getComputedStyle(badge);
-
-      // Check if backdrop-filter is supported or has fallback
-      const hasBackdropFilter = computedStyle.backdropFilter !== undefined;
-      const hasWebkitBackdropFilter =
-        'webkitBackdropFilter' in computedStyle &&
-        (computedStyle as Record<string, unknown>).webkitBackdropFilter !== undefined;
-      const hasBackground = computedStyle.backgroundColor !== 'rgba(0, 0, 0, 0)';
-
-      // At least one should be true for cross-browser compatibility
-      const isCompatible = hasBackdropFilter || hasWebkitBackdropFilter || hasBackground;
-      await expect(isCompatible).toBe(true);
-    });
-
-    await step('CSS Grid/Flexbox fallback', async () => {
-      // Check if badges work with various layout systems
-      const badge = canvas.getByText('BETA');
-      await expect(badge).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(badge);
-      const position = computedStyle.position;
-
-      // Should have valid position value (including static)
-      await expect(position).toMatch(/static|absolute|relative|fixed/);
-    });
-
-    await step('Animation performance', async () => {
-      const badge = canvas.getByText('BETA');
-      const computedStyle = window.getComputedStyle(badge);
-
-      // Check for hardware acceleration hints
-      const willChange = computedStyle.willChange;
-      const backfaceVisibility = computedStyle.backfaceVisibility;
-
-      // Modern browsers should support these optimization properties
-      await expect(willChange).toBeTruthy();
-      await expect(backfaceVisibility).toBeTruthy();
-    });
-  },
-};