@boostdev/design-system-components 0.1.1

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

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { Progress } from './Progress';
+
+describe('Progress', () => {
+  it('renders a progressbar', () => {
+    render(<Progress value={50} label="Loading" />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('sets aria-valuenow', () => {
+    render(<Progress value={60} label="Loading" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '60');
+  });
+
+  it('sets aria-valuemin to 0', () => {
+    render(<Progress value={60} label="Loading" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuemin', '0');
+  });
+
+  it('sets aria-valuemax to 100 by default', () => {
+    render(<Progress value={60} label="Loading" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuemax', '100');
+  });
+
+  it('sets aria-valuemax to custom max', () => {
+    render(<Progress value={3} max={10} label="Steps" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuemax', '10');
+  });
+
+  it('sets aria-label', () => {
+    render(<Progress value={50} label="Uploading file" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-label', 'Uploading file');
+  });
+
+  it('shows label and percentage when showLabel is true', () => {
+    render(<Progress value={75} label="Progress" showLabel />);
+    expect(screen.getByText('Progress')).toBeInTheDocument();
+    expect(screen.getByText('75%')).toBeInTheDocument();
+  });
+
+  it('does not show label text when showLabel is false', () => {
+    render(<Progress value={75} label="Progress" />);
+    expect(screen.queryByText('Progress')).not.toBeInTheDocument();
+  });
+
+  it('clamps value above max to 100%', () => {
+    render(<Progress value={150} label="Overloaded" showLabel />);
+    expect(screen.getByText('100%')).toBeInTheDocument();
+  });
+
+  it('clamps negative value to 0%', () => {
+    render(<Progress value={-10} label="Empty" showLabel />);
+    expect(screen.getByText('0%')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Progress } from './Progress';
+
+const meta = {
+  title: 'UI/Progress',
+  component: Progress,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['small', 'medium', 'large'] },
+    value: { control: { type: 'range', min: 0, max: 100 } },
+  },
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 60, label: 'Loading' } };
+export const WithLabel: Story = { args: { value: 60, label: 'Uploading file', showLabel: true } };
+export const Empty: Story = { args: { value: 0, label: 'Not started', showLabel: true } };
+export const Complete: Story = { args: { value: 100, label: 'Complete', showLabel: true } };
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+      <Progress value={60} label="Small" size="small" showLabel />
+      <Progress value={60} label="Medium" size="medium" showLabel />
+      <Progress value={60} label="Large" size="large" showLabel />
+    </div>
+  ),
+};

package/src/components/ui/Progress/Progress.tsx

@@ -0,0 +1,43 @@
+import css from './Progress.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface ProgressProps {
+  value: number;
+  max?: number;
+  label: string;
+  showLabel?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  className?: string;
+}
+
+export function Progress({
+  value,
+  max = 100,
+  label,
+  showLabel = false,
+  size = 'medium',
+  className,
+}: Readonly<ProgressProps>) {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+  return (
+    <div className={cn(css.container, className)}>
+      {showLabel && (
+        <div className={css.labelRow}>
+          <span className={css.label}>{label}</span>
+          <span className={css.value}>{Math.round(percentage)}%</span>
+        </div>
+      )}
+      <div
+        role="progressbar"
+        aria-label={label}
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        className={cn(css.track, css[`--size_${size}`])}
+      >
+        <div className={css.fill} style={{ width: `${percentage}%` }} />
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,40 @@
+@layer component {
+  .wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .svg {
+    display: block;
+  }
+
+  .track {
+    stroke: var(--color_bg--subtle);
+  }
+
+  .fill {
+    stroke: var(--color_green);
+    transition: stroke-dashoffset var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  .value {
+    position: absolute;
+    font-size: var(--font_size--body--s);
+    font-weight: var(--font_weight--semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--color_on-bg);
+    line-height: 1;
+  }
+
+  .--size_small .value  { font-size: 0.5rem; }
+  .--size_medium .value { font-size: var(--font_size--body--s); }
+  .--size_large .value  { font-size: var(--font_size--body); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fill {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { ProgressCircle } from './ProgressCircle';
+
+describe('ProgressCircle', () => {
+  it('renders a progressbar', () => {
+    render(<ProgressCircle value={50} label="Loading" />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('sets aria-label from label prop', () => {
+    render(<ProgressCircle value={50} label="Upload progress" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-label', 'Upload progress');
+  });
+
+  it('sets aria-valuenow', () => {
+    render(<ProgressCircle value={75} label="Progress" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '75');
+  });
+
+  it('clamps values above max', () => {
+    render(<ProgressCircle value={150} label="Progress" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '150');
+  });
+
+  it('shows percentage value when showValue is true', () => {
+    render(<ProgressCircle value={50} label="Progress" showValue />);
+    expect(screen.getByText('50%')).toBeInTheDocument();
+  });
+
+  it('does not show value by default', () => {
+    render(<ProgressCircle value={50} label="Progress" />);
+    expect(screen.queryByText('50%')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressCircle } from './ProgressCircle';
+
+const meta = {
+  title: 'UI/ProgressCircle',
+  component: ProgressCircle,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ProgressCircle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 65, label: 'Upload progress' } };
+export const WithValue: Story = { args: { value: 65, label: 'Upload progress', showValue: true } };
+export const Small: Story = { args: { value: 40, label: 'Progress', size: 'small', showValue: true } };
+export const Large: Story = { args: { value: 80, label: 'Progress', size: 'large', showValue: true } };
+export const Complete: Story = { args: { value: 100, label: 'Complete', showValue: true } };
+export const Empty: Story = { args: { value: 0, label: 'Not started', showValue: true } };

package/src/components/ui/ProgressCircle/ProgressCircle.tsx

@@ -0,0 +1,75 @@
+import css from './ProgressCircle.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface ProgressCircleProps {
+  value: number;
+  max?: number;
+  label: string;
+  showValue?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  className?: string;
+}
+
+const SIZE_PX = { small: 40, medium: 64, large: 96 };
+const STROKE_WIDTH = 4;
+
+export function ProgressCircle({
+  value,
+  max = 100,
+  label,
+  showValue = false,
+  size = 'medium',
+  className,
+}: Readonly<ProgressCircleProps>) {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+  const px = SIZE_PX[size];
+  const radius = (px - STROKE_WIDTH * 2) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (percentage / 100) * circumference;
+  const cx = px / 2;
+
+  return (
+    <div
+      role="progressbar"
+      aria-label={label}
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      className={cn(css.wrapper, css[`--size_${size}`], className)}
+    >
+      <svg
+        width={px}
+        height={px}
+        viewBox={`0 0 ${px} ${px}`}
+        aria-hidden="true"
+        className={css.svg}
+      >
+        <circle
+          className={css.track}
+          cx={cx}
+          cy={cx}
+          r={radius}
+          strokeWidth={STROKE_WIDTH}
+          fill="none"
+        />
+        <circle
+          className={css.fill}
+          cx={cx}
+          cy={cx}
+          r={radius}
+          strokeWidth={STROKE_WIDTH}
+          fill="none"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${cx} ${cx})`}
+        />
+      </svg>
+      {showValue && (
+        <span className={css.value} aria-hidden="true">
+          {Math.round(percentage)}%
+        </span>
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,23 @@
+@layer component {
+  .separator {
+    --separator_color:     var(--color_border);
+    --separator_thickness: 1px;
+
+    border: none;
+    background-color: var(--separator_color);
+  }
+
+  .separator.--horizontal {
+    display: block;
+    width: 100%;
+    height: var(--separator_thickness);
+    margin-block: var(--space_m);
+  }
+
+  .separator.--vertical {
+    display: inline-block;
+    width: var(--separator_thickness);
+    align-self: stretch;
+    margin-inline: var(--space_m);
+  }
+}

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

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { Separator } from './Separator';
+
+describe('Separator', () => {
+  it('renders as an hr element by default', () => {
+    const { container } = render(<Separator />);
+    expect(container.querySelector('hr')).toBeInTheDocument();
+  });
+
+  it('renders as a hr for horizontal orientation', () => {
+    const { container } = render(<Separator orientation="horizontal" />);
+    expect(container.querySelector('hr')).toBeInTheDocument();
+  });
+
+  it('renders as a div with role="separator" for vertical orientation', () => {
+    render(<Separator orientation="vertical" />);
+    const separator = screen.getByRole('separator');
+    expect(separator.tagName).toBe('DIV');
+  });
+
+  it('sets aria-orientation="vertical" on the vertical separator', () => {
+    render(<Separator orientation="vertical" />);
+    expect(screen.getByRole('separator')).toHaveAttribute('aria-orientation', 'vertical');
+  });
+
+  it('accepts a custom className', () => {
+    const { container } = render(<Separator className="custom" />);
+    expect(container.querySelector('hr')).toHaveClass('custom');
+  });
+});

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Separator } from './Separator';
+
+const meta = {
+  title: 'UI/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: { control: 'radio', options: ['horizontal', 'vertical'] },
+  },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: { orientation: 'horizontal' },
+  decorators: [
+    Story => (
+      <div>
+        <p>Content above</p>
+        <Story />
+        <p>Content below</p>
+      </div>
+    ),
+  ],
+};
+
+export const Vertical: Story = {
+  args: { orientation: 'vertical' },
+  decorators: [
+    Story => (
+      <div style={{ display: 'flex', alignItems: 'center', height: '2rem' }}>
+        <span>Left</span>
+        <Story />
+        <span>Right</span>
+      </div>
+    ),
+  ],
+};

package/src/components/ui/Separator/Separator.tsx

@@ -0,0 +1,21 @@
+import css from './Separator.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface SeparatorProps {
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+}
+
+export function Separator({ orientation = 'horizontal', className }: Readonly<SeparatorProps>) {
+  if (orientation === 'vertical') {
+    return (
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        className={cn(css.separator, css['--vertical'], className)}
+      />
+    );
+  }
+
+  return <hr className={cn(css.separator, css['--horizontal'], className)} />;
+}

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

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

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

@@ -0,0 +1,24 @@
+@layer component {
+  .skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--color_grey--subtle) 25%,
+      var(--color_bg) 50%,
+      var(--color_grey--subtle) 75%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: var(--border_radius--xs);
+    min-height: var(--space_m);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import { Skeleton } from './Skeleton';
+
+describe('Skeleton', () => {
+  it('renders with aria-hidden', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders a div', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild?.nodeName).toBe('DIV');
+  });
+
+  it('accepts a custom className', () => {
+    const { container } = render(<Skeleton className="custom" />);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+
+const meta = {
+  title: 'UI/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: {} };
+export const TextLine: Story = {
+  render: () => <Skeleton className="skeleton-text" />,
+};
+export const Card: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '300px' }}>
+      <Skeleton className="skeleton-image" />
+      <Skeleton className="skeleton-title" />
+      <Skeleton className="skeleton-subtitle" />
+    </div>
+  ),
+};

package/src/components/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@boostdev/design-system-foundation';
+import css from './Skeleton.module.css';
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div aria-hidden="true" className={cn(css.skeleton, className)} />
+  );
+}

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

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

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

@@ -0,0 +1,30 @@
+@layer component {
+  .skipLink {
+    position: absolute;
+    inset-block-start: var(--space_s);
+    inset-inline-start: var(--space_s);
+    z-index: var(--z_overlay);
+    padding: var(--space_xs) var(--space_m);
+    background-color: var(--color_bg);
+    color: var(--color_on-bg);
+    font-size: var(--font_size--body);
+    font-weight: var(--font_weight--semibold);
+    border-radius: var(--border_radius--s);
+    border: 2px solid var(--color_focus);
+    text-decoration: none;
+    transform: translateY(-200%);
+    transition: transform var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  .skipLink:focus-visible {
+    transform: translateY(0);
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skipLink {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { SkipLink } from './SkipLink';
+
+describe('SkipLink', () => {
+  it('renders a link with default text', () => {
+    render(<SkipLink />);
+    expect(screen.getByRole('link', { name: 'Skip to main content' })).toBeInTheDocument();
+  });
+
+  it('renders with custom text', () => {
+    render(<SkipLink>Skip to navigation</SkipLink>);
+    expect(screen.getByRole('link', { name: 'Skip to navigation' })).toBeInTheDocument();
+  });
+
+  it('links to #main by default', () => {
+    render(<SkipLink />);
+    expect(screen.getByRole('link')).toHaveAttribute('href', '#main');
+  });
+
+  it('links to custom href', () => {
+    render(<SkipLink href="#content" />);
+    expect(screen.getByRole('link')).toHaveAttribute('href', '#content');
+  });
+});

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SkipLink } from './SkipLink';
+
+const meta = {
+  title: 'UI/SkipLink',
+  component: SkipLink,
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div style={{ minHeight: '4rem', position: 'relative' }}>
+        <p style={{ fontSize: '0.75rem', color: 'gray', marginBottom: '0.5rem' }}>
+          Tab into the preview to reveal the skip link.
+        </p>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SkipLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const CustomTarget: Story = { args: { href: '#content', children: 'Skip to content' } };

package/src/components/ui/SkipLink/SkipLink.tsx

@@ -0,0 +1,14 @@
+import css from './SkipLink.module.css';
+
+interface SkipLinkProps {
+  href?: string;
+  children?: string;
+}
+
+export function SkipLink({ href = '#main', children = 'Skip to main content' }: SkipLinkProps) {
+  return (
+    <a href={href} className={css.skipLink}>
+      {children}
+    </a>
+  );
+}

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

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