@boostdev/design-system-components 0.1.1

package/src/components/layout/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,59 @@
+@layer component {
+  .buttonGroup {
+    container-type: inline-size;
+    container-name: button-group;
+    grid-column: var(--grid_span-100);
+  }
+
+  .buttonGroup .container {
+    position: relative;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--space_l);
+    align-items: center;
+  }
+
+  .buttonGroup.--variant__card .container {
+    align-items: stretch;
+  }
+
+  .buttonGroup.--variant__flow .container,
+  .buttonGroup.--variant__modal .container {
+    align-items: center;
+  }
+
+  .buttonGroup.--variant__content .container {
+    align-items: flex-start;
+  }
+
+  @supports (contain: inline-size) {
+    @container button-group (min-width: 30rem) {
+      .buttonGroup .container {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .buttonGroup.--variant__modal .container > :first-child:last-child,
+      .buttonGroup.--variant__flow .container > :first-child:last-child {
+        margin-inline-start: auto;
+      }
+
+      .buttonGroup.--variant__card .container {
+        justify-content: center;
+      }
+
+      .buttonGroup.--variant__modal .container {
+        justify-content: flex-end;
+      }
+
+      .buttonGroup.--variant__content .container {
+        justify-content: flex-start;
+        align-items: center;
+      }
+
+      .buttonGroup.--variant__grid .container {
+        justify-content: center;
+      }
+    }
+  }
+}

package/src/components/layout/ButtonGroup/ButtonGroup.spec.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import { ButtonGroup } from './ButtonGroup';
+
+describe('ButtonGroup', () => {
+  it('renders children', () => {
+    render(
+      <ButtonGroup>
+        <button>A</button>
+        <button>B</button>
+      </ButtonGroup>,
+    );
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('B')).toBeInTheDocument();
+  });
+
+  it('accepts a custom className', () => {
+    const { container } = render(<ButtonGroup className="custom"><button>X</button></ButtonGroup>);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonGroup } from './ButtonGroup';
+import { Button } from '../../interaction/Button/Button';
+
+const meta = {
+  title: 'Layout/ButtonGroup',
+  component: ButtonGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['flow', 'card', 'modal', 'content', undefined] },
+  },
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const TwoButtons = () => (
+  <>
+    <Button variant="secondary">Cancel</Button>
+    <Button variant="primary">Confirm</Button>
+  </>
+);
+
+export const Default: Story = { render: () => <ButtonGroup><TwoButtons /></ButtonGroup> };
+export const Flow: Story = { render: () => <ButtonGroup variant="flow"><TwoButtons /></ButtonGroup> };
+export const Card: Story = { render: () => <ButtonGroup variant="card"><TwoButtons /></ButtonGroup> };
+export const Modal: Story = { render: () => <ButtonGroup variant="modal"><TwoButtons /></ButtonGroup> };
+export const Content: Story = { render: () => <ButtonGroup variant="content"><TwoButtons /></ButtonGroup> };

package/src/components/layout/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import css from './ButtonGroup.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface ButtonGroupProps {
+  children: ReactNode;
+  className?: string;
+  variant?: 'flow' | 'card' | 'modal' | 'content';
+}
+
+export function ButtonGroup({ children, className, variant }: ButtonGroupProps) {
+  return (
+    <div className={cn(css.buttonGroup, className, variant && css[`--variant__${variant}`])}>
+      <div className={css.container}>{children}</div>
+    </div>
+  );
+}

package/src/components/layout/ButtonGroup/index.ts

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

package/src/components/layout/Card/Card.module.css

@@ -0,0 +1,72 @@
+@layer component {
+  .card {
+    background-color: var(--color_bg);
+    border-radius: var(--border_radius--m);
+    transition: all 0.3s ease;
+    position: relative;
+  }
+
+  .card.--default {
+    box-shadow: var(--shadow_s);
+  }
+
+  .card.--elevated {
+    box-shadow: var(--shadow_m);
+  }
+
+  .card.--outlined {
+    border: 1px solid var(--color_border);
+    box-shadow: var(--shadow_s);
+  }
+
+  .card.--clickable {
+    cursor: pointer;
+  }
+
+  .card.--padding-none {
+    padding: 0;
+  }
+
+  .card.--padding-small {
+    padding: var(--space_s);
+  }
+
+  .card.--padding-medium {
+    padding: var(--space_m);
+  }
+
+  .card.--padding-large {
+    padding: var(--space_l);
+  }
+
+  .card.--text-start {
+    text-align: left;
+  }
+
+  .card.--text-center {
+    text-align: center;
+  }
+
+  .card.--text-end {
+    text-align: right;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .card.--clickable:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow_xl);
+    }
+
+    .card.--default:hover {
+      box-shadow: var(--shadow_m);
+    }
+
+    .card.--elevated:hover {
+      box-shadow: var(--shadow_2xl);
+    }
+
+    .card.--outlined:hover {
+      box-shadow: var(--shadow_s);
+    }
+  }
+}

package/src/components/layout/Card/Card.spec.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Card } from './Card';
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(<Card>Card content</Card>);
+    expect(screen.getByText('Card content')).toBeInTheDocument();
+  });
+
+  it('renders as a div by default', () => {
+    const { container } = render(<Card>Content</Card>);
+    expect(container.firstChild?.nodeName).toBe('DIV');
+  });
+
+  it('renders as a button when onClick is provided', () => {
+    render(<Card onClick={() => {}}>Clickable</Card>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<Card onClick={onClick}>Click</Card>);
+    await user.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('accepts a custom className', () => {
+    const { container } = render(<Card className="custom">Content</Card>);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

package/src/components/layout/Card/Card.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from './Card';
+
+const meta = {
+  title: 'Layout/Card',
+  component: Card,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'elevated', 'outlined'] },
+    padding: { control: 'select', options: ['none', 'small', 'medium', 'large'] },
+    textAlign: { control: 'select', options: ['start', 'center', 'end'] },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { children: 'Card content', variant: 'default', padding: 'medium' } };
+export const Elevated: Story = { args: { children: 'Elevated card', variant: 'elevated' } };
+export const Outlined: Story = { args: { children: 'Outlined card', variant: 'outlined' } };
+export const Clickable: Story = { args: { children: 'Click me', onClick: () => alert('clicked') } };
+export const Centered: Story = { args: { children: 'Centered', textAlign: 'center' } };
+export const AllVariants: Story = {
+  args: { children: '' },
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
+      {(['default', 'elevated', 'outlined'] as const).map(v => (
+        <Card key={v} variant={v} style={{ width: '200px' }}>{v}</Card>
+      ))}
+    </div>
+  ),
+};

package/src/components/layout/Card/Card.tsx

@@ -0,0 +1,45 @@
+import { CSSProperties, ReactNode } from 'react';
+import css from './Card.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  variant?: 'default' | 'elevated' | 'outlined';
+  padding?: 'none' | 'small' | 'medium' | 'large';
+  textAlign?: 'start' | 'center' | 'end';
+  style?: CSSProperties;
+  onClick?: () => void;
+}
+
+export function Card({
+  children,
+  className,
+  variant = 'default',
+  padding = 'medium',
+  textAlign = 'start',
+  style,
+  onClick,
+}: CardProps) {
+  const classNames = cn(
+    css.card,
+    css[`--${variant}`],
+    css[`--padding-${padding}`],
+    css[`--text-${textAlign}`],
+    onClick && css['--clickable'],
+    className,
+  );
+
+  const Component = onClick ? 'button' : 'div';
+
+  return (
+    <Component
+      className={classNames}
+      onClick={onClick}
+      style={style}
+      {...(onClick && { type: 'button' as const })}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/components/layout/Card/index.ts

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

package/src/components/layout/IconWrapper/IconWrapper.module.css

@@ -0,0 +1,24 @@
+@layer component {
+  .wrapper {
+    --icon-wrapper-color: var(--color_bg);
+    --color_on-icon-wrapper-color: var(--color_on-bg);
+
+    width: 2em;
+    height: 2em;
+    font-size: 3em;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: var(--space_l) auto var(--space_m);
+    background: var(--icon-wrapper-color);
+    color: var(--color_on-icon-wrapper-color);
+    fill: var(--color_on-icon-wrapper-color);
+    position: relative;
+    transition: var(--animation_transition);
+  }
+
+  .wrapper svg {
+    fill: currentcolor;
+  }
+}

package/src/components/layout/IconWrapper/IconWrapper.spec.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { IconWrapper } from './IconWrapper';
+
+describe('IconWrapper', () => {
+  it('renders children', () => {
+    render(<IconWrapper><span data-testid="icon">★</span></IconWrapper>);
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders as a div', () => {
+    const { container } = render(<IconWrapper><span>★</span></IconWrapper>);
+    expect(container.firstChild?.nodeName).toBe('DIV');
+  });
+
+  it('accepts a custom className', () => {
+    const { container } = render(<IconWrapper className="custom"><span>★</span></IconWrapper>);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

package/src/components/layout/IconWrapper/IconWrapper.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconWrapper } from './IconWrapper';
+
+const meta = {
+  title: 'Layout/IconWrapper',
+  component: IconWrapper,
+  tags: ['autodocs'],
+} satisfies Meta<typeof IconWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em">
+        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+      </svg>
+    ),
+  },
+};
+

package/src/components/layout/IconWrapper/IconWrapper.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import css from './IconWrapper.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+export function IconWrapper({ children, className }: Props) {
+  return (
+    <div className={cn(className, css.wrapper)}>{children}</div>
+  );
+}

package/src/components/layout/IconWrapper/index.ts

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

package/src/components/layout/SectionHeader/SectionHeader.module.css

@@ -0,0 +1,75 @@
+@layer component {
+  .sectionHeader {
+    --sectionHeader-title-color: var(--color_on-bg);
+    --sectionHeader_subtitle-color: var(--color_grey--strong);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space_m);
+    grid-column: var(--grid_span-100);
+    margin-block-end: var(--space_xl);
+  }
+
+  .title {
+    color: var(--sectionHeader-title-color);
+    margin: 0;
+    font-family: var(--font_family--body);
+  }
+
+  .subtitle {
+    color: var(--sectionHeader_subtitle-color);
+    margin: 0;
+    font-family: var(--font_family--body);
+    font-weight: var(--font_weight--medium);
+  }
+
+  .sectionHeader.--start {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .sectionHeader.--center {
+    align-items: center;
+    text-align: center;
+  }
+
+  .sectionHeader.--end {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+  .sectionHeader.--small .title {
+    font-size: var(--font_size--heading-1);
+    line-height: var(--font_line-height--heading);
+    font-weight: var(--font_weight--bold);
+  }
+
+  .sectionHeader.--small .subtitle {
+    font-size: var(--font_size--body);
+    line-height: 1.4;
+  }
+
+  .sectionHeader.--medium .title {
+    font-size: var(--font_size--display);
+    line-height: var(--font_line-height--display);
+    font-weight: var(--font_weight--bold);
+  }
+
+  .sectionHeader.--medium .subtitle {
+    font-size: var(--font_size--heading-3);
+    line-height: 1.3;
+  }
+
+  .sectionHeader.--large .title {
+    font-size: var(--font_size--display);
+    line-height: var(--font_line-height--display);
+    font-weight: var(--font_weight--bold);
+    letter-spacing: var(--font_tracking--tight);
+  }
+
+  .sectionHeader.--large .subtitle {
+    font-size: var(--font_size--heading-2);
+    line-height: 1.3;
+    font-weight: var(--font_weight--medium);
+  }
+}

package/src/components/layout/SectionHeader/SectionHeader.spec.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import { SectionHeader } from './SectionHeader';
+
+describe('SectionHeader', () => {
+  it('renders the title', () => {
+    render(<SectionHeader title="My Title" />);
+    expect(screen.getByText('My Title')).toBeInTheDocument();
+  });
+
+  it('renders the subtitle when provided', () => {
+    render(<SectionHeader title="Title" subtitle="Subtitle text" />);
+    expect(screen.getByText('Subtitle text')).toBeInTheDocument();
+  });
+
+  it('does not render subtitle when not provided', () => {
+    render(<SectionHeader title="Title" />);
+    expect(screen.queryByText('Subtitle text')).not.toBeInTheDocument();
+  });
+
+  it('renders inside a header element', () => {
+    render(<SectionHeader title="Title" />);
+    const heading = screen.getByRole('heading', { level: 2 });
+    expect(heading).toBeInTheDocument();
+    expect(heading.closest('header')).toBeInTheDocument();
+  });
+
+  it('accepts a custom className', () => {
+    const { container } = render(<SectionHeader title="Title" className="custom" />);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

package/src/components/layout/SectionHeader/SectionHeader.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SectionHeader } from './SectionHeader';
+
+const meta = {
+  title: 'Layout/SectionHeader',
+  component: SectionHeader,
+  tags: ['autodocs'],
+  argTypes: {
+    alignment: { control: 'select', options: ['start', 'center', 'end'] },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+  },
+} satisfies Meta<typeof SectionHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { title: 'Section Title', subtitle: 'A descriptive subtitle.' } };
+export const WithoutSubtitle: Story = { args: { title: 'Title Only' } };
+export const Centered: Story = { args: { title: 'Centered Title', subtitle: 'Centered subtitle.', alignment: 'center' } };
+export const Small: Story = { args: { title: 'Small Header', subtitle: 'Small size.', size: 'small' } };
+export const Large: Story = { args: { title: 'Large Header', subtitle: 'Large size.', size: 'large' } };

package/src/components/layout/SectionHeader/SectionHeader.tsx

@@ -0,0 +1,32 @@
+import css from './SectionHeader.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+import {JSX} from "react/jsx-runtime";
+type IntrinsicElements = JSX.IntrinsicElements;
+
+type IntrinsicElement = keyof IntrinsicElements
+
+type SectionHeaderProps = {
+  title: string;
+  subtitle?: string;
+  className?: string;
+  alignment?: 'start' | 'center' | 'end';
+  size?: 'small' | 'medium' | 'large';
+  titleAs?: IntrinsicElement;
+};
+
+export function SectionHeader({
+  title,
+  subtitle,
+  className,
+  alignment = 'start',
+  size = 'medium',
+  titleAs = 'h2'
+}: Readonly<SectionHeaderProps>) {
+  const Title = titleAs;
+  return (
+    <header className={cn(css.sectionHeader, css[`--${alignment}`], css[`--${size}`], className)}>
+      <Title className={css.title}>{title}</Title>
+      {subtitle && <p className={css.subtitle}>{subtitle}</p>}
+    </header>
+  );
+}

package/src/components/layout/SectionHeader/index.ts

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

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

@@ -0,0 +1,87 @@
+@layer component {
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--color_bg--subtle);
+    border-radius: var(--border_radius--s);
+    overflow: hidden;
+  }
+
+  .item {
+    border-bottom: 1px solid var(--color_bg--subtle);
+  }
+
+  .item:last-child {
+    border-bottom: none;
+  }
+
+  .heading {
+    margin: 0;
+  }
+
+  .trigger {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--space_m);
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    font-weight: var(--font_weight--semibold);
+    color: var(--color_on-bg);
+    cursor: pointer;
+    transition: var(--animation_transition);
+    box-sizing: border-box;
+  }
+
+  .trigger:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .trigger:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: calc(var(--outline_offset) * -1);
+    border-radius: var(--border_radius--xs);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .trigger:not(:disabled):hover {
+      background-color: var(--color_bg--subtle);
+    }
+  }
+
+  .triggerLabel {
+    flex: 1;
+    text-align: start;
+  }
+
+  .chevron {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    transition: transform var(--animation_transition-duration) var(--animation_easing);
+  }
+
+  .item.--open .chevron {
+    transform: rotate(180deg);
+  }
+
+  .panel {
+    overflow: hidden;
+  }
+
+  .panelContent {
+    padding: 0 var(--space_m) var(--space_m);
+    color: var(--color_on-bg);
+    font-size: var(--font_size--body);
+    line-height: var(--font_line-height--body);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chevron {
+      transition: none;
+    }
+  }
+}