@discourser/design-system 0.19.0 → 0.20.1

package/src/components/__tests__/Breadcrumb.test.tsx

@@ -1,9 +1,9 @@
 /* global describe, it, expect */
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import * as Breadcrumb from '../Breadcrumb'
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import * as Breadcrumb from '../Breadcrumb';
 
-type BreadcrumbVariant = 'plain' | 'underline' | 'discourser'
+type BreadcrumbVariant = 'plain' | 'underline' | 'discourser';
 
 function renderBreadcrumb(variant?: BreadcrumbVariant) {
   return render(
@@ -22,73 +22,206 @@ function renderBreadcrumb(variant?: BreadcrumbVariant) {
         </Breadcrumb.Item>
       </Breadcrumb.List>
     </Breadcrumb.Root>,
-  )
+  );
 }
 
 describe('Breadcrumb', () => {
   describe('Rendering', () => {
     it('renders breadcrumb navigation with correct aria-label', () => {
-      renderBreadcrumb()
-      expect(screen.getByRole('navigation', { name: 'breadcrumb' })).toBeDefined()
-    })
+      renderBreadcrumb();
+      expect(
+        screen.getByRole('navigation', { name: 'breadcrumb' }),
+      ).toBeDefined();
+    });
 
     it('renders all breadcrumb items', () => {
-      renderBreadcrumb()
-      expect(screen.getByText('Home')).toBeDefined()
-      expect(screen.getByText('Docs')).toBeDefined()
-      expect(screen.getByText('Components')).toBeDefined()
-    })
+      renderBreadcrumb();
+      expect(screen.getByText('Home')).toBeDefined();
+      expect(screen.getByText('Docs')).toBeDefined();
+      expect(screen.getByText('Components')).toBeDefined();
+    });
 
     it('renders separator between items', () => {
-      const { container } = renderBreadcrumb()
+      const { container } = renderBreadcrumb();
       // Separators are aria-hidden li elements with svg children
-      const separators = container.querySelectorAll('[aria-hidden="true"]')
-      expect(separators.length).toBeGreaterThan(0)
-    })
+      const separators = container.querySelectorAll('[aria-hidden="true"]');
+      expect(separators.length).toBeGreaterThan(0);
+    });
 
     it('marks the last item as current page with aria-current', () => {
-      renderBreadcrumb()
-      const current = screen.getByText('Components')
-      expect(current.closest('[aria-current="page"]')).toBeDefined()
-    })
-  })
+      renderBreadcrumb();
+      const current = screen.getByText('Components');
+      expect(current.closest('[aria-current="page"]')).toBeDefined();
+    });
+  });
 
   describe('Discourser Variant', () => {
     it('renders with discourser variant class when variant="discourser"', () => {
-      const { container } = renderBreadcrumb('discourser')
+      const { container } = renderBreadcrumb('discourser');
       // The root nav element should exist with the breadcrumb class
-      const nav = container.querySelector('nav')
-      expect(nav).toBeDefined()
-    })
+      const nav = container.querySelector('nav');
+      expect(nav).toBeDefined();
+    });
 
     it('CurrentLink renders as span, not anchor', () => {
-      renderBreadcrumb()
-      const current = screen.getByText('Components')
-      expect(current.tagName).toBe('SPAN')
-    })
+      renderBreadcrumb();
+      const current = screen.getByText('Components');
+      expect(current.tagName).toBe('SPAN');
+    });
 
     it('CurrentLink has aria-current="page" by default', () => {
-      renderBreadcrumb()
-      const current = screen.getByText('Components')
-      expect(current.getAttribute('aria-current')).toBe('page')
-    })
-  })
+      renderBreadcrumb();
+      const current = screen.getByText('Components');
+      expect(current.getAttribute('aria-current')).toBe('page');
+    });
+  });
 
   describe('Accessibility', () => {
     it('has role navigation on root element', () => {
-      renderBreadcrumb()
-      expect(screen.getByRole('navigation')).toBeDefined()
-    })
+      renderBreadcrumb();
+      expect(screen.getByRole('navigation')).toBeDefined();
+    });
 
     it('renders ordered list for semantic structure', () => {
-      const { container } = renderBreadcrumb()
-      expect(container.querySelector('ol')).toBeDefined()
-    })
+      const { container } = renderBreadcrumb();
+      expect(container.querySelector('ol')).toBeDefined();
+    });
 
     it('separators are aria-hidden', () => {
-      const { container } = renderBreadcrumb()
-      const hiddenElements = container.querySelectorAll('[aria-hidden="true"]')
-      expect(hiddenElements.length).toBeGreaterThan(0)
-    })
-  })
-})
+      const { container } = renderBreadcrumb();
+      const hiddenElements = container.querySelectorAll('[aria-hidden="true"]');
+      expect(hiddenElements.length).toBeGreaterThan(0);
+    });
+  });
+});
+
+describe('Breadcrumb.Link disabled state', () => {
+  it('renders as span when disabled', () => {
+    const { container } = render(
+      <Breadcrumb.Root variant="discourser">
+        <Breadcrumb.List>
+          <Breadcrumb.Item>
+            <Breadcrumb.Link disabled>Lobby</Breadcrumb.Link>
+          </Breadcrumb.Item>
+        </Breadcrumb.List>
+      </Breadcrumb.Root>,
+    );
+    const span = container.querySelector('span[data-disabled]');
+    expect(span).toBeDefined();
+  });
+
+  it('does not render an anchor when disabled', () => {
+    const { container } = render(
+      <Breadcrumb.Root variant="discourser">
+        <Breadcrumb.List>
+          <Breadcrumb.Item>
+            <Breadcrumb.Link disabled>Lobby</Breadcrumb.Link>
+          </Breadcrumb.Item>
+        </Breadcrumb.List>
+      </Breadcrumb.Root>,
+    );
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  it('renders as anchor when not disabled', () => {
+    const { container } = render(
+      <Breadcrumb.Root variant="discourser">
+        <Breadcrumb.List>
+          <Breadcrumb.Item>
+            <Breadcrumb.Link href="/scenarios">Scenarios</Breadcrumb.Link>
+          </Breadcrumb.Item>
+        </Breadcrumb.List>
+      </Breadcrumb.Root>,
+    );
+    expect(container.querySelector('a')).toBeDefined();
+  });
+
+  it('disabled link has data-disabled attribute', () => {
+    const { container } = render(
+      <Breadcrumb.Root variant="discourser">
+        <Breadcrumb.List>
+          <Breadcrumb.Item>
+            <Breadcrumb.Link disabled>Lobby</Breadcrumb.Link>
+          </Breadcrumb.Item>
+        </Breadcrumb.List>
+      </Breadcrumb.Root>,
+    );
+    expect(container.querySelector('[data-disabled]')).toBeDefined();
+  });
+});
+
+describe('ParentItem flexibility', () => {
+  it('renders as span by default (no href)', () => {
+    const { container } = render(
+      <Breadcrumb.TwoRowRoot>
+        <Breadcrumb.ParentRow show={true}>
+          <Breadcrumb.ParentItem>Scenarios</Breadcrumb.ParentItem>
+        </Breadcrumb.ParentRow>
+      </Breadcrumb.TwoRowRoot>,
+    );
+    expect(container.querySelector('span')).toBeDefined();
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  it('renders as anchor when href is provided', () => {
+    const { container } = render(
+      <Breadcrumb.TwoRowRoot>
+        <Breadcrumb.ParentRow show={true}>
+          <Breadcrumb.ParentItem href="/scenarios">
+            Scenarios
+          </Breadcrumb.ParentItem>
+        </Breadcrumb.ParentRow>
+      </Breadcrumb.TwoRowRoot>,
+    );
+    expect(container.querySelector('a[href="/scenarios"]')).toBeDefined();
+  });
+});
+
+describe('TwoRowRoot + ParentRow', () => {
+  it('renders ParentRow children when show=true', () => {
+    render(
+      <Breadcrumb.TwoRowRoot>
+        <Breadcrumb.ParentRow show={true}>
+          <Breadcrumb.ParentItem>Scenarios</Breadcrumb.ParentItem>
+          <Breadcrumb.ParentSeparator />
+        </Breadcrumb.ParentRow>
+      </Breadcrumb.TwoRowRoot>,
+    );
+    expect(screen.getByText('Scenarios')).toBeDefined();
+  });
+
+  it('renders nothing for ParentRow when show=false', () => {
+    render(
+      <Breadcrumb.TwoRowRoot>
+        <Breadcrumb.ParentRow show={false}>
+          <Breadcrumb.ParentItem>Scenarios</Breadcrumb.ParentItem>
+        </Breadcrumb.ParentRow>
+      </Breadcrumb.TwoRowRoot>,
+    );
+    expect(screen.queryByText('Scenarios')).toBeNull();
+  });
+
+  it('ParentRow is aria-hidden when visible', () => {
+    const { container } = render(
+      <Breadcrumb.TwoRowRoot>
+        <Breadcrumb.ParentRow show={true}>
+          <Breadcrumb.ParentItem>Scenarios</Breadcrumb.ParentItem>
+        </Breadcrumb.ParentRow>
+      </Breadcrumb.TwoRowRoot>,
+    );
+    const parentDiv = container.querySelector('[aria-hidden="true"]');
+    expect(parentDiv).toBeDefined();
+  });
+
+  it('TwoRowRoot renders a nav element with correct aria-label', () => {
+    const { container } = render(
+      <Breadcrumb.TwoRowRoot aria-label="page navigation">
+        <Breadcrumb.ParentRow show={false}>
+          <Breadcrumb.ParentItem>Home</Breadcrumb.ParentItem>
+        </Breadcrumb.ParentRow>
+      </Breadcrumb.TwoRowRoot>,
+    );
+    const nav = container.querySelector('nav[aria-label="page navigation"]');
+    expect(nav).toBeDefined();
+  });
+});

package/src/preset/recipes/breadcrumb.ts

@@ -102,6 +102,28 @@ export const breadcrumb = defineSlotRecipe({
     },
   },
 
+  compoundVariants: [
+    {
+      variant: 'discourser',
+      css: {
+        link: {
+          '&[data-disabled]': {
+            color: 'fg.subtle',
+            opacity: 0.45,
+            pointerEvents: 'none',
+            cursor: 'default',
+            _hover: { color: 'fg.subtle' },
+          },
+        },
+        item: {
+          '&[data-disabled]': {
+            opacity: 0.45,
+          },
+        },
+      },
+    },
+  ],
+
   defaultVariants: {
     variant: 'plain',
     size: 'md',