@12-apps/ui 1.0.0 → 1.3.1

package/src/components/navigation/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,17 +1,15 @@
-import {
-  AccountTree,
-  Analytics,
-  Article,
-  Category,
-  CloudUpload,
-  Code,
-  Dashboard,
-  Folder,
-  Home,
-  Security,
-  Settings,
-  Storage,
-} from '@mui/icons-material';
+import AccountTree from '@mui/icons-material/AccountTree';
+import Analytics from '@mui/icons-material/Analytics';
+import Article from '@mui/icons-material/Article';
+import Category from '@mui/icons-material/Category';
+import CloudUpload from '@mui/icons-material/CloudUpload';
+import Code from '@mui/icons-material/Code';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Folder from '@mui/icons-material/Folder';
+import Home from '@mui/icons-material/Home';
+import Security from '@mui/icons-material/Security';
+import Settings from '@mui/icons-material/Settings';
+import Storage from '@mui/icons-material/Storage';
 import { Box, createTheme, CssBaseline, Paper, Stack,ThemeProvider } from '@mui/material';
 import { Button, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';

package/src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx

@@ -0,0 +1,212 @@
+import { alpha, keyframes } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material/styles';
+
+export const slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+
+export const pulse = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+  }
+`;
+
+const BAR_VARIANTS: Record<string, (theme: Theme, elevation: number) => CSSObject> = {
+  glass: (theme, elevation) => ({
+      background:
+        theme.palette.mode === 'dark' ? 'rgba(17, 24, 39, 0.7)' : 'rgba(255, 255, 255, 0.7)',
+      backdropFilter: 'blur(10px)',
+      WebkitBackdropFilter: 'blur(10px)',
+      border: `1px solid ${
+        theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+      }`,
+      boxShadow:
+        theme.palette.mode === 'dark'
+          ? `0 ${elevation * 4}px ${elevation * 8}px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)`
+          : `0 ${elevation * 4}px ${elevation * 8}px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)` }),
+  elevated: (theme, elevation) => ({
+      background: theme.palette.background.paper,
+      boxShadow: theme.shadows[elevation] || theme.shadows[1],
+      borderRadius: theme.spacing(1.5) }),
+  outlined: (theme, _elevation) => ({
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: theme.spacing(1) }) };
+
+// Spacing and colour for the separator glyphs between crumbs.
+const separatorStyles = (
+  theme: Theme,
+  size: string | undefined,
+  color: string | undefined,
+  _visualStyle: string | undefined,
+): CSSObject => ({
+  '& .MuiBreadcrumbs-separator': {
+      marginLeft: theme.spacing(size === 'sm' ? 0.5 : size === 'lg' ? 1.5 : 1),
+      marginRight: theme.spacing(size === 'sm' ? 0.5 : size === 'lg' ? 1.5 : 1),
+      opacity: 0.6,
+      transition: 'all 0.2s ease',
+      ...(color === 'primary' && {
+        color: theme.palette.primary.main }),
+      ...(color === 'secondary' && {
+        color: theme.palette.secondary.main }) } });
+
+// Only one visual style applies at a time, so a lookup replaces three mutually
+// exclusive spreads.
+const barVariantStyles = (theme: Theme, visualStyle: string | undefined, elevation: number): CSSObject =>
+  visualStyle ? (BAR_VARIANTS[visualStyle]?.(theme, elevation) ?? {}) : {};
+
+// The bar's own styling, lifted out so the styled() callback is a single spread
+// rather than seventy lines of conditionals.
+export const breadcrumbsBarStyles = ({
+  theme,
+  size,
+  color,
+  visualStyle,
+  elevation = 0 }: {
+  theme: Theme;
+  size?: string;
+  color?: string;
+  visualStyle?: string;
+  elevation?: number;
+}): CSSObject => ({
+    padding: theme.spacing(size === 'sm' ? 0.75 : size === 'lg' ? 1.5 : 1, 2),
+    borderRadius: theme.spacing(visualStyle === 'glass' ? 2 : 1),
+  ...barVariantStyles(theme, visualStyle, elevation),
+    animation: `${slideIn} 0.3s ease-out`,
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    position: 'relative',
+
+    // Glass morphism effect
+
+
+    // Elevated variant
+
+
+    // Outlined variant
+
+
+    '& .MuiBreadcrumbs-ol': {
+      alignItems: 'center',
+      flexWrap: 'nowrap',
+      [theme.breakpoints.down('sm')]: {
+        flexWrap: 'wrap',
+        gap: theme.spacing(0.5) } },
+
+    ...separatorStyles(theme, size, color, visualStyle),
+
+
+    '&:hover': {
+      ...(visualStyle === 'glass' && {
+        background:
+          theme.palette.mode === 'dark' ? 'rgba(17, 24, 39, 0.85)' : 'rgba(255, 255, 255, 0.85)',
+        boxShadow:
+          theme.palette.mode === 'dark'
+            ? `0 ${elevation * 6}px ${elevation * 12}px rgba(0, 0, 0, 0.4)`
+            : `0 ${elevation * 6}px ${elevation * 12}px rgba(0, 0, 0, 0.12)` }) } });
+
+// The idle glass treatment and the active-crumb treatment are mutually
+// exclusive; keeping them as named pieces takes both branches out of the main
+// style function.
+const linkGlassIdleStyles = (theme: Theme): CSSObject => ({
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+          opacity: 0,
+          transition: 'opacity 0.3s ease',
+          borderRadius: 'inherit' } });
+
+const linkActiveStyles = (theme: Theme, visualStyle?: string): CSSObject => ({
+      pointerEvents: 'none',
+      cursor: 'default',
+      color: theme.palette.primary.main,
+      fontWeight: 600,
+
+      ...(visualStyle === 'glass' && {
+        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+        animation: `${pulse} 2s infinite` }) });
+
+// Hover treatment. The tint is a touch stronger on the glass variant so it still
+// reads against the translucent bar.
+const linkHoverStyles = (theme: Theme, visualStyle?: string): CSSObject => ({
+  '&:hover, &[data-hover="true"]': {
+      color: theme.palette.primary.main,
+      backgroundColor: alpha(theme.palette.primary.main, visualStyle === 'glass' ? 0.1 : 0.08),
+      transform: 'translateY(-1px)',
+
+      '&::before': {
+        opacity: 1 },
+
+      '& .breadcrumb-icon': {
+        transform: 'scale(1.1)' } } });
+
+export const breadcrumbLinkStyles = ({
+  theme,
+  size,
+  active,
+  visualStyle }: {
+  theme: Theme;
+  size?: string;
+  active?: boolean;
+  visualStyle?: string;
+}): CSSObject => ({
+  ...(visualStyle === 'glass' && !active ? linkGlassIdleStyles(theme) : {}),
+  ...(active ? linkActiveStyles(theme, visualStyle) : {}),
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+    textDecoration: 'none',
+    fontSize: size === 'sm' ? '0.875rem' : size === 'lg' ? '1.125rem' : '1rem',
+    fontWeight: active ? 600 : 400,
+    color: active ? theme.palette.text.primary : theme.palette.text.secondary,
+    padding: theme.spacing(0.5, 0.75),
+    borderRadius: theme.spacing(0.75),
+    position: 'relative',
+    overflow: 'hidden',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+
+    // Add subtle background for glass variant
+
+
+  ...linkHoverStyles(theme, visualStyle),
+
+
+    '&:active': {
+      transform: 'translateY(0)',
+      backgroundColor: alpha(theme.palette.primary.main, 0.12) },
+
+    '&:focus-visible': {
+      outline: `2px solid ${theme.palette.primary.main}`,
+      outlineOffset: 2,
+      backgroundColor: alpha(theme.palette.primary.main, 0.04) },
+
+
+
+    '& .breadcrumb-icon': {
+      transition: 'transform 0.2s ease' },
+
+    // Mobile responsiveness
+    [theme.breakpoints.down('sm')]: {
+      fontSize: size === 'lg' ? '1rem' : size === 'sm' ? '0.75rem' : '0.875rem',
+      padding: theme.spacing(0.375, 0.5) } });
+
+export const sizeIconMap = {
+  sm: 'small' as const,
+  md: 'small' as const,
+  lg: 'medium' as const };

package/src/components/navigation/Breadcrumbs/Breadcrumbs.test.stories.tsx

@@ -1,4 +1,10 @@
-import { AccountTree, Article, Code,Dashboard, Folder, Home, Settings } from '@mui/icons-material';
+import AccountTree from '@mui/icons-material/AccountTree';
+import Article from '@mui/icons-material/Article';
+import Code from '@mui/icons-material/Code';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Folder from '@mui/icons-material/Folder';
+import Home from '@mui/icons-material/Home';
+import Settings from '@mui/icons-material/Settings';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { expect, fn,userEvent, waitFor, within } from 'storybook/test';
 
@@ -228,43 +234,38 @@ export const KeyboardNavigation: Story = {
     await step('Tab navigation forward', async () => {
       const links = canvas.getAllByRole('link');
 
-      // Ensure we have links to test
-      await expect(links.length).toBeGreaterThan(0);
+      // This story renders a fixed trail, so assert the shape up front and then
+      // walk it unconditionally. The old version guarded every assertion behind
+      // a length check, so a breadcrumb that rendered one link would have passed
+      // the whole step without testing any navigation.
+      await expect(links.length).toBeGreaterThanOrEqual(3);
 
-      // Focus first link
-      if (links[0]) {
-        links[0].focus();
-        await expect(links[0]).toHaveFocus();
-      }
+      await userEvent.tab();
+      await waitFor(() => expect(links[0]).toHaveFocus());
 
-      // Tab to next link if available
-      if (links.length > 1) {
-        await userEvent.tab();
-        await expect(links[1]).toHaveFocus();
-      }
+      await userEvent.tab();
+      await waitFor(() => expect(links[1]).toHaveFocus());
 
-      // Tab to third link if available
-      if (links.length > 2) {
-        await userEvent.tab();
-        await expect(links[2]).toHaveFocus();
-      }
+      await userEvent.tab();
+      await waitFor(() => expect(links[2]).toHaveFocus());
     });
 
     await step('Tab navigation backward', async () => {
       const links = canvas.getAllByRole('link');
 
-      // Only test backward navigation if we have multiple links
-      if (links.length > 1) {
-        await userEvent.tab({ shift: true });
-        // The focused element should move backward
-        const focusedIndex = links.findIndex((link) => link === document.activeElement);
-        await expect(focusedIndex).toBeGreaterThanOrEqual(0);
-      }
+      // Focus is on the third link from the previous step; shift-tab steps back
+      // to the second one.
+      await userEvent.tab({ shift: true });
+      await waitFor(() => expect(links[1]).toHaveFocus());
     });
 
     await step('Enter key activation', async () => {
       const homeLink = canvas.getByRole('link', { name: /home/i });
-      homeLink.focus();
+
+      // Shift-tab back to the first link rather than calling .focus() on it.
+      await userEvent.tab({ shift: true });
+      await waitFor(() => expect(homeLink).toHaveFocus());
+
       await userEvent.keyboard('{Enter}');
       // Verify navigation was prevented
       await expect(window.location.pathname).not.toContain('home');
@@ -272,7 +273,8 @@ export const KeyboardNavigation: Story = {
 
     await step('Focus visible on keyboard navigation', async () => {
       const link = canvas.getAllByRole('link')[0];
-      link.focus();
+      // Focus is already on the first link from the previous step.
+      await waitFor(() => expect(link).toHaveFocus());
 
       const computedStyle = window.getComputedStyle(link);
       // Check for focus outline
@@ -379,18 +381,18 @@ export const FocusManagement: Story = {
 
     await step('Focus trap prevention', async () => {
       const links = canvas.getAllByRole('link');
-      if (links.length >= 3) {
-        const firstLink = links[0];
-        const lastLink = links[links.length - 1];
-
-        if (lastLink) {
-          lastLink.focus();
-          await userEvent.tab();
+      await expect(links.length).toBeGreaterThanOrEqual(3);
+      const lastLink = links[links.length - 1];
 
-          // Focus should move outside the breadcrumb
-          await expect(document.activeElement).not.toBe(firstLink);
-        }
+      // Tab through every link to reach the last one, then once more: focus must
+      // leave the breadcrumb rather than wrap back to the start.
+      for (let i = 0; i < links.length; i++) {
+        await userEvent.tab();
       }
+      await waitFor(() => expect(lastLink).toHaveFocus());
+
+      await userEvent.tab();
+      await waitFor(() => expect(lastLink).not.toHaveFocus());
     });
 
     await step('Focus restoration after interaction', async () => {
@@ -398,15 +400,12 @@ export const FocusManagement: Story = {
       // Find a link with "products" or use the first available link
       const link = links.find((l) => l.textContent?.toLowerCase().includes('products')) || links[0];
 
-      if (link) {
-        link.focus();
-        const initialFocused = document.activeElement;
-
-        await userEvent.click(link);
+      await expect(link).toBeInTheDocument();
 
-        // Focus should remain on the clicked element
-        await expect(document.activeElement).toBe(initialFocused);
-      }
+      // Clicking a link focuses it, so the pre-focus this step used to do only
+      // asserted that focus() works. Click, then check focus landed and stayed.
+      await userEvent.click(link);
+      await waitFor(() => expect(link).toHaveFocus());
     });
   },
 };
@@ -476,28 +475,30 @@ export const ResponsiveDesign: Story = {
       const nav = canvas.getByRole('navigation');
       const items = within(nav).getAllByRole('listitem');
 
-      // Check if items are properly sized for mobile
-      if (window.innerWidth <= 768) {
-        const firstItem = items[0];
-        const computedStyle = window.getComputedStyle(firstItem);
-
-        // Font size should be appropriate for mobile
-        const fontSize = parseFloat(computedStyle.fontSize);
-        await expect(fontSize).toBeGreaterThanOrEqual(14);
-      }
+      // Font size should be legible regardless of the runner's window size. The
+      // old `window.innerWidth <= 768` guard meant this assertion simply did not
+      // run on a wider viewport, so the story silently tested nothing there.
+      const computedStyle = window.getComputedStyle(items[0]);
+      const fontSize = parseFloat(computedStyle.fontSize);
+      await expect(fontSize).toBeGreaterThanOrEqual(14);
     });
 
     await step('Verify touch target sizes', async () => {
       const links = canvas.getAllByRole('link');
 
-      links.forEach(async (link) => {
+      // for...of rather than forEach(async …): the old callbacks returned
+      // promises nobody awaited, so a failed assertion surfaced as an unhandled
+      // rejection instead of a failing step.
+      //
+      // The assertion is that each link renders with a real box. The previous
+      // 20px touch-target check ran only when the runner's window happened to be
+      // ≤768px wide, and its own comment notes MUI's breadcrumb targets can be
+      // smaller than that — so making it unconditional would have asserted
+      // something the component does not actually promise.
+      for (const link of links) {
         const rect = link.getBoundingClientRect();
-        // Touch targets should be at least 20px on mobile (adjusted for actual MUI Breadcrumbs rendering)
-        // MUI Breadcrumbs may have smaller touch targets but are still usable
-        if (window.innerWidth <= 768) {
-          await expect(rect.height).toBeGreaterThanOrEqual(20);
-        }
-      });
+        await expect(rect.height).toBeGreaterThan(0);
+      }
     });
   },
 };