@fragments-sdk/ui 0.8.7 → 0.8.8

package/src/components/Drawer/Drawer.module.scss

@@ -0,0 +1,215 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+// Backdrop overlay
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--fui-backdrop, $fui-backdrop);
+  z-index: 50;
+
+  // Animation
+  opacity: 0;
+  transition: opacity var(--fui-transition-normal, $fui-transition-normal);
+
+  &[data-open] {
+    opacity: 1;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+// The popup panel
+.popup {
+  @include surface-elevated;
+  @include text-base;
+
+  position: fixed;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+  overflow-y: auto;
+
+  // Animation
+  transition:
+    opacity var(--fui-transition-normal, $fui-transition-normal),
+    transform var(--fui-transition-normal, $fui-transition-normal);
+  opacity: 0;
+
+  &[data-open] {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+// ============================================
+// Side positioning
+// ============================================
+
+.side-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateX(100%);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateX(100%);
+  }
+}
+
+.side-left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  transform: translateX(-100%);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateX(-100%);
+  }
+}
+
+.side-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(-100%);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateY(-100%);
+  }
+}
+
+.side-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateY(100%);
+  }
+}
+
+// ============================================
+// Size variants — width for left/right, height for top/bottom
+// ============================================
+
+// Left/Right: size maps to width
+.side-left,
+.side-right {
+  &.size-sm { width: 20rem; }
+  &.size-md { width: 24rem; }
+  &.size-lg { width: 32rem; }
+  &.size-xl { width: 48rem; }
+  &.size-full { width: 100vw; }
+}
+
+// Top/Bottom: size maps to height
+.side-top,
+.side-bottom {
+  &.size-sm { height: 25vh; }
+  &.size-md { height: 40vh; }
+  &.size-lg { height: 60vh; }
+  &.size-xl { height: 80vh; }
+  &.size-full { height: 100vh; }
+}
+
+// ============================================
+// Content sections (mirror Dialog)
+// ============================================
+
+// Header area
+.header {
+  padding: var(--fui-padding-container-sm, $fui-padding-container-sm) var(--fui-padding-container-md, $fui-padding-container-md);
+}
+
+// Title
+.title {
+  margin: 0;
+  font-size: var(--fui-font-size-lg, $fui-font-size-lg);
+  font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+  color: var(--fui-text-primary, $fui-text-primary);
+  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+}
+
+// Description
+.description {
+  margin: var(--fui-space-1, $fui-space-1) 0 0;
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+}
+
+// Body content
+.body {
+  flex: 1;
+  padding: 0 var(--fui-padding-container-md, $fui-padding-container-md) var(--fui-padding-container-sm, $fui-padding-container-sm);
+  overflow-y: auto;
+}
+
+// Footer for actions
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fui-space-1, $fui-space-1);
+  padding: var(--fui-padding-inline-sm, $fui-padding-inline-sm) var(--fui-padding-container-md, $fui-padding-container-md);
+  border-top: 1px solid var(--fui-border, $fui-border);
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+}
+
+// Close button (X in corner)
+.close {
+  @include button-reset;
+  @include interactive-base;
+
+  position: absolute;
+  top: var(--fui-space-3, $fui-space-3);
+  right: var(--fui-space-3, $fui-space-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  z-index: 1;
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+// ============================================
+// Accessibility: Reduced Motion
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .backdrop {
+    transition: none;
+  }
+
+  .popup {
+    transition: none;
+    transform: none;
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: none;
+    }
+  }
+}

package/src/components/Drawer/Drawer.test.tsx

@@ -0,0 +1,227 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
+import { Drawer } from './index';
+
+function renderDrawer(
+  props: Partial<React.ComponentProps<typeof Drawer>> = {},
+  contentProps: Partial<React.ComponentProps<typeof Drawer.Content>> = {},
+) {
+  return render(
+    <Drawer {...props}>
+      <Drawer.Trigger>Open Drawer</Drawer.Trigger>
+      <Drawer.Content {...contentProps}>
+        <Drawer.Header>
+          <Drawer.Title>Drawer Title</Drawer.Title>
+          <Drawer.Close />
+        </Drawer.Header>
+        <Drawer.Body>
+          <Drawer.Description>Drawer description text</Drawer.Description>
+          <p>Body content</p>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close asChild>
+            <button>Cancel</button>
+          </Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer>
+  );
+}
+
+describe('Drawer', () => {
+  it('opens when trigger is clicked', async () => {
+    const user = userEvent.setup();
+    renderDrawer();
+
+    expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /open drawer/i }));
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+    });
+  });
+
+  it('closes when close button is clicked', async () => {
+    const user = userEvent.setup();
+    renderDrawer({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+    });
+
+    const closeButton = screen.getByRole('button', { name: /close drawer/i });
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders title and description', async () => {
+    renderDrawer({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+      expect(screen.getByText('Drawer description text')).toBeInTheDocument();
+    });
+  });
+
+  it('renders compound sub-components (Header, Body, Footer)', async () => {
+    renderDrawer({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Body content')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    });
+  });
+
+  it('supports side prop', async () => {
+    renderDrawer({ defaultOpen: true }, { side: 'left' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+    });
+  });
+
+  it('supports size prop', async () => {
+    renderDrawer({ defaultOpen: true }, { size: 'lg' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+    });
+  });
+
+  it('has no accessibility violations when open', async () => {
+    const { container } = renderDrawer({ defaultOpen: true });
+
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+    });
+
+    await expectNoA11yViolations(container, {
+      // Base UI focus guard spans have role="button" without labels.
+      disabledRules: ['aria-command-name'],
+    });
+  });
+
+  describe('keyboard & focus', () => {
+    it('Escape closes drawer', async () => {
+      const user = userEvent.setup();
+      renderDrawer({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+      });
+
+      await user.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
+      });
+    });
+
+    it('focus moves into drawer on open', async () => {
+      const user = userEvent.setup();
+      renderDrawer();
+
+      await user.click(screen.getByRole('button', { name: /open drawer/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+      });
+
+      await waitFor(() => {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog.contains(document.activeElement)).toBe(true);
+      });
+    });
+
+    it('focus returns to trigger on close', async () => {
+      const user = userEvent.setup();
+      renderDrawer();
+
+      const trigger = screen.getByRole('button', { name: /open drawer/i });
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+      });
+
+      await user.keyboard('{Escape}');
+
+      await waitFor(() => {
+        expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
+      });
+
+      await waitFor(() => {
+        expect(trigger).toHaveFocus();
+      });
+    });
+
+    it('Tab cycles within drawer (focus trap)', async () => {
+      const user = userEvent.setup();
+      renderDrawer({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+      });
+
+      const dialog = screen.getByRole('dialog');
+
+      // Tab through focusable elements — focus should stay inside drawer
+      await user.tab();
+      await user.tab();
+      await user.tab();
+
+      await waitFor(() => {
+        expect(dialog.contains(document.activeElement)).toBe(true);
+      });
+    });
+
+    it('Shift+Tab cycles backward', async () => {
+      const user = userEvent.setup();
+      renderDrawer({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+      });
+
+      const dialog = screen.getByRole('dialog');
+
+      await user.keyboard('{Shift>}{Tab}{/Shift}');
+      await user.keyboard('{Shift>}{Tab}{/Shift}');
+      await user.keyboard('{Shift>}{Tab}{/Shift}');
+
+      await waitFor(() => {
+        expect(dialog.contains(document.activeElement)).toBe(true);
+      });
+    });
+
+    it('role="dialog" is present when open', async () => {
+      renderDrawer({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+      });
+    });
+
+    it('backdrop click closes drawer', async () => {
+      const user = userEvent.setup();
+      renderDrawer({ defaultOpen: true });
+
+      await waitFor(() => {
+        expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+      });
+
+      // Click the backdrop (outside the drawer content)
+      const backdrop = document.querySelector('[data-open]');
+      if (backdrop) {
+        await user.click(backdrop as HTMLElement);
+      }
+
+      await waitFor(() => {
+        expect(screen.queryByText('Drawer Title')).not.toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/components/Drawer/index.tsx

@@ -0,0 +1,239 @@
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import styles from './Drawer.module.scss';
+// Import globals to ensure CSS variables are defined
+import '../../styles/globals.scss';
+
+// ============================================
+// Types
+// ============================================
+
+export interface DrawerProps {
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+}
+
+export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  side?: 'left' | 'right' | 'top' | 'bottom';
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export interface DrawerTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+}
+
+export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export interface DrawerTitleProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface DrawerDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export interface DrawerCloseProps {
+  children?: React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+}
+
+// ============================================
+// Close Icon
+// ============================================
+
+function CloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+// ============================================
+// Components
+// ============================================
+
+function DrawerRoot({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = true,
+}: DrawerProps) {
+  return (
+    <BaseDialog.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      modal={modal}
+    >
+      {children}
+    </BaseDialog.Root>
+  );
+}
+
+function DrawerTrigger({
+  children,
+  asChild,
+  className,
+}: DrawerTriggerProps) {
+  if (asChild) {
+    return (
+      <BaseDialog.Trigger className={className} render={children as React.ReactElement}>
+        {null}
+      </BaseDialog.Trigger>
+    );
+  }
+
+  return (
+    <BaseDialog.Trigger className={className}>
+      {children}
+    </BaseDialog.Trigger>
+  );
+}
+
+function DrawerContent({
+  children,
+  side = 'right',
+  size = 'md',
+  className,
+  ...htmlProps
+}: DrawerContentProps) {
+  const popupClasses = [
+    styles.popup,
+    styles[`side-${side}`],
+    styles[`size-${size}`],
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop className={styles.backdrop} />
+      <BaseDialog.Popup initialFocus {...htmlProps} data-side={side} className={popupClasses}>
+        {children}
+      </BaseDialog.Popup>
+    </BaseDialog.Portal>
+  );
+}
+
+function DrawerHeader({ children, className, ...htmlProps }: DrawerHeaderProps) {
+  const classes = [styles.header, className].filter(Boolean).join(' ');
+  return <div {...htmlProps} className={classes}>{children}</div>;
+}
+
+function DrawerTitle({ children, className }: DrawerTitleProps) {
+  const classes = [styles.title, className].filter(Boolean).join(' ');
+  return <BaseDialog.Title className={classes}>{children}</BaseDialog.Title>;
+}
+
+function DrawerDescription({ children, className }: DrawerDescriptionProps) {
+  const classes = [styles.description, className].filter(Boolean).join(' ');
+  return (
+    <BaseDialog.Description className={classes}>
+      {children}
+    </BaseDialog.Description>
+  );
+}
+
+function DrawerBody({ children, className, ...htmlProps }: DrawerBodyProps) {
+  const classes = [styles.body, className].filter(Boolean).join(' ');
+  return <div {...htmlProps} className={classes}>{children}</div>;
+}
+
+function DrawerFooter({ children, className, ...htmlProps }: DrawerFooterProps) {
+  const classes = [styles.footer, className].filter(Boolean).join(' ');
+  return <div {...htmlProps} className={classes}>{children}</div>;
+}
+
+function DrawerClose({ children, asChild, className }: DrawerCloseProps) {
+  if (!children) {
+    return (
+      <BaseDialog.Close
+        data-drawer-close
+        aria-label="Close drawer"
+        className={[styles.close, className].filter(Boolean).join(' ')}
+      >
+        <CloseIcon />
+      </BaseDialog.Close>
+    );
+  }
+
+  if (asChild) {
+    return (
+      <BaseDialog.Close
+        data-drawer-close
+        className={className}
+        render={children as React.ReactElement}
+      >
+        {null}
+      </BaseDialog.Close>
+    );
+  }
+
+  return (
+    <BaseDialog.Close data-drawer-close className={className}>
+      {children}
+    </BaseDialog.Close>
+  );
+}
+
+// ============================================
+// Export compound component
+// ============================================
+
+export const Drawer = Object.assign(DrawerRoot, {
+  Trigger: DrawerTrigger,
+  Content: DrawerContent,
+  Header: DrawerHeader,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Body: DrawerBody,
+  Footer: DrawerFooter,
+  Close: DrawerClose,
+});
+
+// Re-export individual components for tree-shaking
+export {
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerBody,
+  DrawerFooter,
+  DrawerClose,
+};