@boostdev/design-system-components 0.1.1

package/src/components/ui/Accordion/Accordion.spec.tsx

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Accordion } from './Accordion';
+
+const items = [
+  { id: 'a', title: 'First question', content: <p>First answer</p> },
+  { id: 'b', title: 'Second question', content: <p>Second answer</p> },
+  { id: 'c', title: 'Third question', content: <p>Third answer</p>, disabled: true },
+];
+
+describe('Accordion', () => {
+  it('renders all trigger buttons', () => {
+    render(<Accordion items={items} />);
+    expect(screen.getAllByRole('button')).toHaveLength(3);
+  });
+
+  it('renders all panels hidden by default', () => {
+    render(<Accordion items={items} />);
+    expect(screen.getByText('First answer').closest('[role="region"]')).not.toBeVisible();
+  });
+
+  it('opens a panel when its trigger is clicked', async () => {
+    const user = userEvent.setup();
+    render(<Accordion items={items} />);
+    await user.click(screen.getByRole('button', { name: 'First question' }));
+    expect(screen.getByText('First answer')).toBeVisible();
+  });
+
+  it('sets aria-expanded to true on the active trigger', async () => {
+    const user = userEvent.setup();
+    render(<Accordion items={items} />);
+    const trigger = screen.getByRole('button', { name: 'First question' });
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('closes an open panel when its trigger is clicked again', async () => {
+    const user = userEvent.setup();
+    render(<Accordion items={items} defaultOpen={['a']} />);
+    await user.click(screen.getByRole('button', { name: 'First question' }));
+    expect(screen.getByText('First answer').closest('[role="region"]')).not.toBeVisible();
+  });
+
+  it('closes the previous panel when allowMultiple is false', async () => {
+    const user = userEvent.setup();
+    render(<Accordion items={items} />);
+    await user.click(screen.getByRole('button', { name: 'First question' }));
+    await user.click(screen.getByRole('button', { name: 'Second question' }));
+    expect(screen.getByText('First answer').closest('[role="region"]')).not.toBeVisible();
+    expect(screen.getByText('Second answer')).toBeVisible();
+  });
+
+  it('keeps multiple panels open when allowMultiple is true', async () => {
+    const user = userEvent.setup();
+    render(<Accordion items={items} allowMultiple />);
+    await user.click(screen.getByRole('button', { name: 'First question' }));
+    await user.click(screen.getByRole('button', { name: 'Second question' }));
+    expect(screen.getByText('First answer')).toBeVisible();
+    expect(screen.getByText('Second answer')).toBeVisible();
+  });
+
+  it('opens defaultOpen panels on mount', () => {
+    render(<Accordion items={items} defaultOpen={['b']} />);
+    expect(screen.getByText('Second answer')).toBeVisible();
+  });
+
+  it('disables a trigger when disabled is set', () => {
+    render(<Accordion items={items} />);
+    expect(screen.getByRole('button', { name: 'Third question' })).toBeDisabled();
+  });
+
+  it('links trigger to panel via aria-controls', () => {
+    render(<Accordion items={items} />);
+    const trigger = screen.getByRole('button', { name: 'First question' });
+    const panelId = trigger.getAttribute('aria-controls');
+    expect(document.getElementById(panelId!)).toBeInTheDocument();
+  });
+});

package/src/components/ui/Accordion/Accordion.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from './Accordion';
+
+const meta = {
+  title: 'UI/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultItems = [
+  { id: 'q1', title: 'What is your return policy?', content: 'You can return any item within 30 days of purchase for a full refund.' },
+  { id: 'q2', title: 'Do you offer free shipping?', content: 'Free shipping is available on all orders over €50.' },
+  { id: 'q3', title: 'How do I track my order?', content: 'Once your order ships, you will receive an email with a tracking link.' },
+];
+
+export const Default: Story = { args: { items: defaultItems } };
+
+export const WithDefaultOpen: Story = { args: { items: defaultItems, defaultOpen: ['q1'] } };
+
+export const AllowMultiple: Story = {
+  args: { items: defaultItems, allowMultiple: true, defaultOpen: ['q1', 'q2'] },
+};
+
+export const WithDisabledItem: Story = {
+  args: {
+    items: [
+      ...defaultItems,
+      { id: 'q4', title: 'Unavailable section', content: 'This content is not available.', disabled: true },
+    ],
+  },
+};

package/src/components/ui/Accordion/Accordion.tsx

@@ -0,0 +1,82 @@
+import { ReactNode, useId, useState } from 'react';
+import css from './Accordion.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface AccordionItem {
+  id: string;
+  title: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+interface AccordionProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  defaultOpen?: string[];
+  className?: string;
+}
+
+export function Accordion({
+  items,
+  allowMultiple = false,
+  defaultOpen = [],
+  className,
+}: Readonly<AccordionProps>) {
+  const baseId = useId();
+  const [openIds, setOpenIds] = useState<string[]>(defaultOpen);
+
+  const toggle = (id: string) => {
+    setOpenIds(prev => {
+      const isOpen = prev.includes(id);
+      if (isOpen) return prev.filter(i => i !== id);
+      return allowMultiple ? [...prev, id] : [id];
+    });
+  };
+
+  return (
+    <div className={cn(css.accordion, className)}>
+      {items.map(item => {
+        const isOpen = openIds.includes(item.id);
+        const triggerId = `${baseId}-trigger-${item.id}`;
+        const panelId = `${baseId}-panel-${item.id}`;
+
+        return (
+          <div key={item.id} className={cn(css.item, isOpen ? css['--open'] : undefined)}>
+            <h3 className={css.heading}>
+              <button
+                type="button"
+                id={triggerId}
+                aria-expanded={isOpen}
+                aria-controls={panelId}
+                disabled={item.disabled}
+                className={css.trigger}
+                onClick={() => toggle(item.id)}
+              >
+                <span className={css.triggerLabel}>{item.title}</span>
+                <svg
+                  aria-hidden="true"
+                  className={css.chevron}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
+                </svg>
+              </button>
+            </h3>
+            <div
+              id={panelId}
+              role="region"
+              aria-labelledby={triggerId}
+              hidden={!isOpen}
+              className={css.panel}
+            >
+              <div className={css.panelContent}>{item.content}</div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/Accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion } from './Accordion';

package/src/components/ui/Alert/Alert.module.css

@@ -0,0 +1,91 @@
+@layer component {
+    .alert {
+        --alert_bg: var(--color_blue--subtle);
+        --alert_text: var(--color_on-blue--subtle);
+        --alert_border: var(--color_blue);
+
+        display: flex;
+        align-items: flex-start;
+        gap: var(--space_s);
+        padding: var(--space_m);
+        border-radius: var(--border_radius--s);
+        border-inline-start: var(--space_s) solid var(--alert_border);
+        background-color: var(--alert_bg);
+        color: var(--alert_text);
+        font-size: var(--font_size--body);
+        line-height: var(--font_line-height--body);
+    }
+
+    .--variant_info {
+        --alert_bg: var(--color_blue--subtle);
+        --alert_text: var(--color_on-blue--subtle);
+        --alert_border: var(--color_blue);
+    }
+
+    .--variant_success {
+        --alert_bg: var(--color_green--subtle);
+        --alert_text: var(--color_on-green--subtle);
+        --alert_border: var(--color_green);
+    }
+
+    .--variant_warning {
+        --alert_bg: var(--color_orange--subtle);
+        --alert_text: var(--color_on-orange--subtle);
+        --alert_border: var(--color_warning);
+    }
+
+    .--variant_error {
+        --alert_bg: rgb(from var(--color_error) r g b / 12%);
+        --alert_text: var(--color_on-bg);
+        --alert_border: var(--color_error);
+    }
+
+    .icon {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-block-start: 0.1em;
+    }
+
+    .content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space_xxs);
+    }
+
+    .title {
+        font-weight: var(--font_weight--semibold);
+        font-size: var(--font_size--body);
+    }
+
+    .dismiss {
+        all: unset;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        cursor: pointer;
+        color: currentcolor;
+        transition: var(--animation_transition);
+        border: 1px solid currentcolor;
+        border-radius: 50%;
+
+    }
+
+    .dismiss svg {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .dismiss:focus-visible {
+        outline: var(--outline_default);
+        outline-offset: var(--outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        .dismiss:hover {
+            opacity: 0.7;
+        }
+    }
+}

package/src/components/ui/Alert/Alert.spec.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Alert } from './Alert';
+
+describe('Alert', () => {
+  it('renders children', () => {
+    render(<Alert>Something went wrong</Alert>);
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('renders with role="status" for info variant by default', () => {
+    render(<Alert>Info message</Alert>);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders with role="alert" for error variant', () => {
+    render(<Alert variant="error">Error message</Alert>);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('renders with role="alert" for warning variant', () => {
+    render(<Alert variant="warning">Warning message</Alert>);
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('renders with role="status" for success variant', () => {
+    render(<Alert variant="success">Success message</Alert>);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('renders a title when provided', () => {
+    render(<Alert title="Heads up">Something happened</Alert>);
+    expect(screen.getByText('Heads up')).toBeInTheDocument();
+  });
+
+  it('renders an icon when provided', () => {
+    render(<Alert icon={<svg data-testid="icon" />}>Message</Alert>);
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders a dismiss button when onDismiss is provided', () => {
+    render(<Alert onDismiss={() => {}}>Message</Alert>);
+    expect(screen.getByRole('button', { name: 'Dismiss alert' })).toBeInTheDocument();
+  });
+
+  it('does not render a dismiss button without onDismiss', () => {
+    render(<Alert>Message</Alert>);
+    expect(screen.queryByRole('button', { name: 'Dismiss alert' })).not.toBeInTheDocument();
+  });
+
+  it('calls onDismiss when dismiss button is clicked', async () => {
+    const user = userEvent.setup();
+    const onDismiss = vi.fn();
+    render(<Alert onDismiss={onDismiss}>Message</Alert>);
+    await user.click(screen.getByRole('button', { name: 'Dismiss alert' }));
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+
+  it('accepts a custom className', () => {
+    render(<Alert className="custom">Message</Alert>);
+    expect(screen.getByRole('status')).toHaveClass('custom');
+  });
+});

package/src/components/ui/Alert/Alert.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Alert } from './Alert';
+
+const meta = {
+  title: 'UI/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = { args: { variant: 'info', children: 'Your session will expire in 10 minutes.' } };
+export const Success: Story = { args: { variant: 'success', children: 'Your changes have been saved.' } };
+export const Warning: Story = { args: { variant: 'warning', children: 'This action cannot be undone.' } };
+export const Error: Story = { args: { variant: 'error', children: 'Something went wrong. Please try again.' } };
+
+export const WithTitle: Story = {
+  args: {
+    variant: 'error',
+    title: 'Payment failed',
+    children: 'Your card was declined. Please check your details and try again.',
+  },
+};
+
+export const Dismissible: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+    return visible ? (
+      <Alert variant="info" onDismiss={() => setVisible(false)}>
+        This alert can be dismissed.
+      </Alert>
+    ) : (
+      <p>Alert dismissed.</p>
+    );
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      {(['info', 'success', 'warning', 'error'] as const).map(v => (
+        <Alert key={v} variant={v} title={v.charAt(0).toUpperCase() + v.slice(1)}>
+          This is a {v} alert message.
+        </Alert>
+      ))}
+    </div>
+  ),
+};

package/src/components/ui/Alert/Alert.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import css from './Alert.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface AlertProps {
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  icon?: ReactNode;
+  title?: string;
+  children: ReactNode;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+export function Alert({
+  variant = 'info',
+  icon,
+  title,
+  children,
+  onDismiss,
+  className,
+}: Readonly<AlertProps>) {
+  const isUrgent = variant === 'error' || variant === 'warning';
+
+  return (
+    <div
+      role={isUrgent ? 'alert' : 'status'}
+      aria-live={isUrgent ? 'assertive' : 'polite'}
+      aria-atomic="true"
+      className={cn(css.alert, css[`--variant_${variant}`], className)}
+    >
+      {icon && (
+        <span className={css.icon} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      <div className={css.content}>
+        {title && <strong className={css.title}>{title}</strong>}
+        <div className={css.body}>{children}</div>
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          className={css.dismiss}
+          onClick={onDismiss}
+          aria-label="Dismiss alert"
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/ui/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './Alert';

package/src/components/ui/Avatar/Avatar.module.css

@@ -0,0 +1,42 @@
+@layer component {
+  .avatar {
+    --avatar_size:   3em;
+    --avatar_bg:     var(--color_blue);
+    --avatar_text:   var(--color_on-blue);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--avatar_size);
+    height: var(--avatar_size);
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .avatar.--fallback {
+    background-color: var(--avatar_bg);
+    color: var(--avatar_text);
+    font-weight: var(--font_weight--semibold);
+  }
+
+  .avatar.--size_small  { --avatar_size: 2em; }
+  .avatar.--size_medium { --avatar_size: 3em; }
+  .avatar.--size_large  { --avatar_size: 4.5em; }
+
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .initials {
+    line-height: 1;
+    user-select: none;
+    font-size: var(--font_size--body);
+  }
+
+  .avatar.--size_small  .initials { font-size: var(--font_size--body--s); }
+  .avatar.--size_large  .initials { font-size: var(--font_size--heading-3); }
+}

package/src/components/ui/Avatar/Avatar.spec.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { Avatar } from './Avatar';
+
+describe('Avatar', () => {
+  it('renders an image when src is provided', () => {
+    render(<Avatar src="https://example.com/photo.jpg" name="Jane Doe" />);
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+
+  it('uses name as alt text on the image', () => {
+    render(<Avatar src="https://example.com/photo.jpg" name="Jane Doe" />);
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Jane Doe');
+  });
+
+  it('uses explicit alt prop over name for the image', () => {
+    render(<Avatar src="https://example.com/photo.jpg" name="Jane Doe" alt="Profile photo" />);
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Profile photo');
+  });
+
+  it('renders initials fallback when no src is provided', () => {
+    render(<Avatar name="Jane Doe" />);
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+
+  it('renders at most 2 initials', () => {
+    render(<Avatar name="Jane Marie Doe" />);
+    expect(screen.getByText('JM')).toBeInTheDocument();
+  });
+
+  it('has role="img" on the fallback element', () => {
+    render(<Avatar name="Jane Doe" />);
+    expect(screen.getByRole('img')).toBeInTheDocument();
+  });
+
+  it('uses name as aria-label on the fallback', () => {
+    render(<Avatar name="Jane Doe" />);
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'Jane Doe');
+  });
+
+  it('falls back to "User avatar" aria-label when no name is given', () => {
+    render(<Avatar />);
+    expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'User avatar');
+  });
+
+  it('accepts a custom className', () => {
+    render(<Avatar name="Jane Doe" className="custom" />);
+    expect(screen.getByRole('img')).toHaveClass('custom');
+  });
+});

package/src/components/ui/Avatar/Avatar.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+
+const meta = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['small', 'medium', 'large'] },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithImage: Story = {
+  args: {
+    src: 'https://i.pravatar.cc/150?img=3',
+    name: 'Jane Doe',
+    size: 'medium',
+  },
+};
+
+export const WithInitials: Story = {
+  args: { name: 'Jane Doe', size: 'medium' },
+};
+
+export const SingleName: Story = {
+  args: { name: 'Bjorn', size: 'medium' },
+};
+
+export const NoName: Story = {
+  args: { size: 'medium' },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <Avatar name="Jane Doe" size="small" />
+      <Avatar name="Jane Doe" size="medium" />
+      <Avatar name="Jane Doe" size="large" />
+    </div>
+  ),
+};

package/src/components/ui/Avatar/Avatar.tsx

@@ -0,0 +1,45 @@
+import css from './Avatar.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface AvatarProps {
+  src?: string;
+  alt?: string;
+  name?: string;
+  size?: 'small' | 'medium' | 'large';
+  className?: string;
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(word => word[0].toUpperCase())
+    .join('');
+}
+
+export function Avatar({ src, alt, name, size = 'medium', className }: Readonly<AvatarProps>) {
+  const sizeClass = css[`--size_${size}`];
+
+  if (src) {
+    return (
+      <span className={cn(css.avatar, sizeClass, className)}>
+        <img src={src} alt={alt ?? name ?? ''} className={css.image} />
+      </span>
+    );
+  }
+
+  const initials = name ? getInitials(name) : '';
+
+  return (
+    <span
+      role="img"
+      aria-label={name ?? 'User avatar'}
+      className={cn(css.avatar, css['--fallback'], sizeClass, className)}
+    >
+      <span className={css.initials} aria-hidden="true">
+        {initials}
+      </span>
+    </span>
+  );
+}

package/src/components/ui/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';