@12-apps/ui 1.0.0 → 1.3.0

package/src/components/data-display/Badge/Badge.styles.ts

@@ -0,0 +1,261 @@
+import { alpha } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material/styles';
+
+import {
+  bounceAnimation,
+  fadeInScaleAnimation,
+  glowPulseAnimation,
+  pulseAnimation,
+  shimmerAnimation } from './Badge.animations';
+import { badgeVariantStyles } from './Badge.variants';
+import type { BadgeSize, BadgeVariant } from './Badge.types';
+
+export type BadgePalette = {
+  main: string;
+  light?: string;
+  dark?: string;
+  contrastText?: string;
+};
+export type BadgeSizeStyles = ReturnType<typeof getSizeStyles>;
+
+const getColorFromTheme = (theme: Theme, color: string) => {
+  const colorMap: Record<string, ReturnType<typeof theme.palette.augmentColor>> = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error,
+    info: theme.palette.info,
+    neutral: {
+      main: theme.palette.grey[600],
+      light: theme.palette.grey[400],
+      dark: theme.palette.grey[800],
+      contrastText: theme.palette.getContrastText(theme.palette.grey[600]) } };
+
+  return colorMap[color] || theme.palette.primary;
+};
+
+export const getSizeStyles = (size: BadgeSize) => {
+  const sizeMap: Record<
+    BadgeSize,
+    {
+      minWidth: number;
+      height: number;
+      fontSize: string;
+      padding: string;
+      dotSize: number;
+      iconSize: string;
+    }
+  > = {
+    xs: {
+      minWidth: 14,
+      height: 14,
+      fontSize: '0.5rem',
+      padding: '0 3px',
+      dotSize: 6,
+      iconSize: '0.625rem' },
+    sm: {
+      minWidth: 16,
+      height: 16,
+      fontSize: '0.625rem',
+      padding: '0 4px',
+      dotSize: 8,
+      iconSize: '0.75rem' },
+    md: {
+      minWidth: 20,
+      height: 20,
+      fontSize: '0.75rem',
+      padding: '0 6px',
+      dotSize: 10,
+      iconSize: '0.875rem' },
+    lg: {
+      minWidth: 24,
+      height: 24,
+      fontSize: '0.875rem',
+      padding: '0 8px',
+      dotSize: 12,
+      iconSize: '1rem' } };
+
+  return sizeMap[size] || sizeMap.md;
+};
+
+export const getAnchorOrigin = (position: string) => {
+  const positionMap: Record<string, { vertical: 'top' | 'bottom'; horizontal: 'left' | 'right' }> =
+    {
+      'top-right': { vertical: 'top', horizontal: 'right' },
+      'top-left': { vertical: 'top', horizontal: 'left' },
+      'bottom-right': { vertical: 'bottom', horizontal: 'right' },
+      'bottom-left': { vertical: 'bottom', horizontal: 'left' } };
+
+  return positionMap[position] || positionMap['top-right'];
+};
+
+// Exactly one variant applies, so a lookup replaces ten mutually exclusive
+// spreads inside the style object.
+// The glow effect needs the badge colour as bare RGB components for a CSS
+// variable, and the palette hands them over as hex or rgb().
+const rgbValuesOf = (color: string): string => {
+  if (color.startsWith('#')) {
+    const hex = color.slice(1);
+    const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
+    return `${r}, ${g}, ${b}`;
+  }
+
+  const match = color.match(/\d+/g);
+  if (match) return `${match[0]}, ${match[1]}, ${match[2]}`;
+  return '255, 255, 255';
+};
+
+// Glow and pulse combine into a third, distinct treatment rather than stacking.
+const badgeLightingStyles = ({
+  glow,
+  pulse,
+  colorPalette }: {
+  glow?: boolean;
+  pulse?: boolean;
+  colorPalette: BadgePalette;
+}): CSSObject => ({
+      // Glow effect
+      ...(glow &&
+        !pulse && {
+          boxShadow: `0 0 15px 3px ${alpha(colorPalette.main, 0.5)}`,
+          filter: 'brightness(1.1)',
+          '&:hover': {
+            boxShadow: `0 0 20px 4px ${alpha(colorPalette.main, 0.6)}` } }),
+
+      // Pulse animation
+      ...(pulse &&
+        !glow && {
+          animation: `${pulseAnimation} 2s ease-in-out infinite` }),
+
+      // Both glow and pulse
+      ...(glow &&
+        pulse && {
+          animation: `${glowPulseAnimation} 2s ease-in-out infinite, ${pulseAnimation} 2s ease-in-out infinite`,
+          filter: 'brightness(1.1)',
+        }),
+
+});
+
+const badgeAnimationStyles = ({
+  animate,
+  bounce,
+  shimmer,
+  glow: _glow,
+  pulse: _pulse,
+  customVariant,
+  colorPalette,
+  theme }: {
+  animate?: boolean;
+  bounce?: boolean;
+  shimmer?: boolean;
+  glow?: boolean;
+  pulse?: boolean;
+  customVariant?: BadgeVariant;
+  colorPalette: BadgePalette;
+  theme: Theme;
+}): CSSObject => ({
+      ...(animate &&
+        !bounce && {
+          animation: `${fadeInScaleAnimation} 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)` }),
+
+      // Bounce animation
+      ...(bounce && {
+        animation: `${bounceAnimation} 1s ease-in-out` }),
+
+      // Shimmer effect
+      ...(shimmer && {
+        background:
+          customVariant === 'gradient'
+            ? `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`
+            : colorPalette.main,
+        backgroundSize: shimmer ? '1000px 100%' : 'auto',
+        position: 'relative',
+        overflow: 'hidden',
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          background: `linear-gradient(
+            90deg,
+            transparent,
+            ${alpha(theme.palette.common.white, 0.4)},
+            transparent
+          )`,
+          animation: `${shimmerAnimation} 3s infinite` } }) });
+
+// The badge chip's own styling, lifted out so the styled() callback just
+// forwards its props.
+interface BadgeStyleArgs {
+  theme: Theme;
+  customVariant?: BadgeVariant;
+  customSize?: BadgeSize;
+  customColor?: string;
+  glow?: boolean;
+  pulse?: boolean;
+  animate?: boolean;
+  shimmer?: boolean;
+  bounce?: boolean;
+  hasIcon?: boolean;
+}
+
+export const badgeStyles = ({
+  theme,
+  customVariant,
+  customSize = 'md',
+  customColor = 'primary',
+  glow,
+  pulse,
+  animate,
+  shimmer,
+  bounce,
+  hasIcon }: BadgeStyleArgs): CSSObject => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const sizeStyles = getSizeStyles(customSize);
+
+  return {
+    '--glow-color': rgbValuesOf(colorPalette.main),
+    '& .MuiBadge-badge': {
+      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      fontWeight: 600,
+      border: `2px solid ${theme.palette.background.paper}`,
+      letterSpacing: '0.025em',
+      textTransform:
+        customVariant === 'gradient' || customVariant === 'glass' ? 'uppercase' : 'none',
+      willChange: 'transform, opacity',
+      backfaceVisibility: 'hidden',
+
+      // Outline variant
+
+      // Destructive variant
+
+      // Warning variant
+
+      // Adjust padding when icon is present
+      ...badgeVariantStyles(theme, colorPalette, sizeStyles, customVariant),
+      ...(hasIcon && {
+        paddingLeft: sizeStyles.padding.split(' ')[1],
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '2px',
+      }),
+
+      // Animation on mount
+      ...badgeAnimationStyles({
+        animate,
+        bounce,
+        shimmer,
+        glow,
+        pulse,
+        customVariant,
+        colorPalette,
+        theme }),
+      ...badgeLightingStyles({ glow, pulse, colorPalette }),
+
+      '&:not(.MuiBadge-dot):hover': {
+        transform: 'scale(1.1)',
+        zIndex: 1 } } };
+}

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

@@ -1,12 +1,10 @@
-import {
-  CheckCircle,
-  Mail,
-  Notifications,
-  Person,
-  Settings,
-  ShoppingCart,
-  Star,
-} from '@mui/icons-material';
+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';
@@ -95,8 +93,7 @@ export const CountVariantTest: Story = {
 
     await step('Zero count should be hidden when showZero is false', async () => {
       // Initially showZero is false and count is 0
-      const badge = canvas.queryByText('0');
-      await expect(badge).not.toBeInTheDocument();
+      await waitFor(() => expect(canvas.queryByText('0')).not.toBeInTheDocument());
     });
 
     await step('Toggle to show zero', async () => {
@@ -191,27 +188,30 @@ export const KeyboardNavigation: Story = {
       const firstButton = canvas.getByTestId('first-focusable');
       const secondButton = canvas.getByTestId('second-focusable');
 
-      // Focus first element
-      firstButton.focus();
-      await expect(firstButton).toHaveFocus();
+      // 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 expect(secondButton).toHaveFocus();
+      await waitFor(() => expect(secondButton).toHaveFocus());
     });
 
     await step('Tab navigation backward', async () => {
       await userEvent.tab({ shift: true });
       const firstButton = canvas.getByTestId('first-focusable');
-      await expect(firstButton).toHaveFocus();
+      await waitFor(() => expect(firstButton).toHaveFocus());
     });
 
     await step('Enter key activation on focused button', async () => {
       const button = canvas.getByTestId('first-focusable');
-      button.focus();
+      // Focus is already back on this button from the shift-tab above.
+      await waitFor(() => expect(button).toHaveFocus());
+
       await userEvent.keyboard('{Enter}');
-      // Verify button can be activated
-      await expect(button).toHaveFocus();
+      // Focus must survive activation rather than jump elsewhere.
+      await waitFor(() => expect(button).toHaveFocus());
     });
   },
 };
@@ -1007,15 +1007,15 @@ export const FocusManagementTest: Story = {
     });
 
     await step('Tab through focusable elements', async () => {
-      // Focus first item
+      // Tab in from the body to reach the first item.
       const firstItem = canvas.getByTestId('focus-item-0');
-      firstItem.focus();
-      await expect(firstItem).toHaveFocus();
+      await userEvent.tab();
+      await waitFor(() => expect(firstItem).toHaveFocus());
 
       // Tab to second item
       await userEvent.tab();
       const secondItem = canvas.getByTestId('focus-item-1');
-      await expect(secondItem).toHaveFocus();
+      await waitFor(() => expect(secondItem).toHaveFocus());
 
       const activeDisplay = canvas.getByTestId('active-index');
       await expect(activeDisplay).toHaveTextContent('Active: 1');
@@ -1023,7 +1023,7 @@ export const FocusManagementTest: Story = {
       // Tab to third item
       await userEvent.tab();
       const thirdItem = canvas.getByTestId('focus-item-2');
-      await expect(thirdItem).toHaveFocus();
+      await waitFor(() => expect(thirdItem).toHaveFocus());
 
       await expect(canvas.getByTestId('active-index')).toHaveTextContent('Active: 2');
     });
@@ -1031,7 +1031,7 @@ export const FocusManagementTest: Story = {
     await step('Reverse tab navigation', async () => {
       await userEvent.tab({ shift: true });
       const secondItem = canvas.getByTestId('focus-item-1');
-      await expect(secondItem).toHaveFocus();
+      await waitFor(() => expect(secondItem).toHaveFocus());
 
       const activeDisplay = canvas.getByTestId('active-index');
       await expect(activeDisplay).toHaveTextContent('Active: 1');
@@ -1103,9 +1103,9 @@ export const WCAGComplianceTest: Story = {
       const button = canvas.getByTestId('wcag-button');
       await expect(button).toHaveAttribute('aria-describedby', 'badge-description');
 
-      // Button should be focusable
-      button.focus();
-      await expect(button).toHaveFocus();
+      // 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 () => {
@@ -1122,15 +1122,16 @@ export const WCAGComplianceTest: Story = {
 
     await step('Keyboard activation', async () => {
       const button = canvas.getByTestId('wcag-button');
-      button.focus();
+      // 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 expect(button).toHaveFocus();
+      await waitFor(() => expect(button).toHaveFocus());
 
       // Should be activatable with Space
       await userEvent.keyboard(' ');
-      await expect(button).toHaveFocus();
+      await waitFor(() => expect(button).toHaveFocus());
     });
   },
 };