@arbor-education/design-system.components 0.0.1

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

@@ -0,0 +1,99 @@
+import type { Meta } from '@storybook/react-vite';
+import { Card } from './Card';
+import { fn } from 'storybook/test';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+};
+
+export const CardWithTitleAndParagraph = {
+  args: {
+    title: 'Title of Card',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+    disabled: false,
+    onClick: fn(),
+    onKeyDown: fn(),
+  },
+};
+
+export const CardWithTitleParagraphAndIcon = {
+  args: {
+    title: 'Title of Card',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+    icon: 'eye',
+    disabled: false,
+    onClick: fn(),
+    onKeyDown: fn(),
+  },
+};
+
+export const TheEverythingCard = {
+  args: {
+    title: 'Title of Card',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+    icon: 'eye',
+    disabled: false,
+    pillText: 'argle bargle',
+    pillColor: 'orange',
+    onClick: fn(),
+    onKeyDown: fn(),
+  },
+};
+
+export const CardWithTitleParagraphAndPill = {
+  args: {
+    title: 'Title of Card',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+    disabled: false,
+    pillText: 'argle bargle',
+    pillColor: 'orange',
+    onClick: fn(),
+    onKeyDown: fn(),
+  },
+};
+
+export const CardWithTitleAndIcon = {
+  args: {
+    title: 'Title of Card',
+    icon: 'eye',
+    disabled: false,
+    onClick: fn(),
+    onKeyDown: fn(),
+  },
+};
+
+export const CardWithParagraph = {
+  args: {
+    paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+    disabled: false,
+    onClick: fn(),
+    onKeyDown: fn(),
+  },
+};
+
+export const ClickableDisabledCard = {
+  args: {
+    title: 'Title of Card',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+    icon: 'eye',
+    disabled: true,
+    pillText: 'argle bargle',
+    pillColor: 'orange',
+    onClick: fn(),
+    onKeyDown: fn(),
+  },
+};
+
+export const UnclickableCard = {
+  args: {
+    title: 'Title of Card',
+    paragraph: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
+    icon: 'eye',
+    disabled: true,
+    pillText: 'argle bargle',
+    pillColor: 'orange',
+  },
+};
+
+export default meta;

package/src/components/card/Card.test.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import { expect, test, describe, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Card } from './Card';
+import '@testing-library/jest-dom/vitest';
+
+describe('Card Component', () => {
+  test('renders empty card without any props', () => {
+    render(<Card />);
+    const card = screen.getByRole('article');
+    expect(card).toBeInTheDocument();
+    expect(card).toHaveAttribute('aria-label', 'Card');
+  });
+
+  test('renders card with title', () => {
+    render(<Card title="Test Title" />);
+    expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Test Title');
+    expect(screen.getByText('Test Title')).toHaveClass('ds-card__title');
+  });
+
+  test('renders card with paragraph', () => {
+    render(<Card paragraph="Test paragraph content" />);
+    expect(screen.getByText('Test paragraph content')).toBeInTheDocument();
+    expect(screen.getByText('Test paragraph content')).toHaveClass('ds-card__paragraph');
+  });
+
+  test('renders card with both title and paragraph', () => {
+    render(<Card title="Test Title" paragraph="Test paragraph" />);
+    expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Test Title');
+    expect(screen.getByText('Test paragraph')).toBeInTheDocument();
+  });
+
+  test('renders card with icon', () => {
+    const { container } = render(<Card icon="eye" />);
+    expect(container.querySelector('.ds-icon-eye')).toBeInTheDocument();
+  });
+
+  test('renders card with pill', () => {
+    render(<Card pillText="Test Pill" pillColor="orange" />);
+    expect(screen.getByText('Test Pill')).toBeInTheDocument();
+  });
+
+  test('renders complete card with all props', () => {
+    const mockClick = vi.fn();
+    const mockKeyDown = vi.fn();
+
+    const { container } = render(
+      <Card
+        title="Complete Card"
+        paragraph="This is a complete card"
+        icon="eye"
+        iconColor="#blue"
+        pillText="Complete"
+        pillColor="green"
+        onClick={mockClick}
+        onKeyDown={mockKeyDown}
+      />,
+    );
+
+    expect(screen.getByText('Complete Card')).toBeInTheDocument();
+    expect(screen.getByText('This is a complete card')).toBeInTheDocument();
+    expect(container.querySelector('.ds-icon-eye')).toBeInTheDocument();
+    expect(screen.getByText('Complete')).toBeInTheDocument();
+  });
+
+  describe('Click interactions', () => {
+    test('calls onClick handler when card is clicked', () => {
+      const mockClick = vi.fn();
+      render(<Card title="Clickable Card" onClick={mockClick} />);
+
+      const card = screen.getByRole('article');
+      fireEvent.click(card);
+
+      expect(mockClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not call onClick when card is disabled', () => {
+      const mockClick = vi.fn();
+      render(<Card title="Disabled Card" onClick={mockClick} disabled />);
+
+      const card = screen.getByRole('article');
+      fireEvent.click(card);
+
+      expect(mockClick).not.toHaveBeenCalled();
+    });
+
+    test('shows click arrow icon when card is clickable', () => {
+      const mockClick = vi.fn();
+      const { container } = render(<Card title="Clickable Card" onClick={mockClick} />);
+
+      expect(container.querySelector('.ds-icon-chevron-right')).toBeInTheDocument();
+    });
+
+    test('does not show click arrow icon when card is not clickable', () => {
+      const { container } = render(<Card title="Non-clickable Card" />);
+
+      expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
+    });
+
+    test('does not show click arrow icon when card is disabled', () => {
+      const mockClick = vi.fn();
+      const { container } = render(<Card title="Disabled Card" onClick={mockClick} disabled />);
+
+      expect(container.querySelector('.ds-icon-chevron-right')).not.toBeInTheDocument();
+    });
+
+    test('uses arrow type when specified', () => {
+      const mockClick = vi.fn();
+      const { container } = render(<Card title="Clickable Card" onClick={mockClick} arrowType="arrow" />);
+      expect(container.querySelector('.ds-icon-arrow-right')).toBeInTheDocument();
+    });
+  });
+
+  describe('Keyboard interactions', () => {
+    test('calls onKeyDown handler when key is pressed on clickable card', () => {
+      const mockKeyDown = vi.fn();
+      render(<Card title="Keyboard Card" onClick={vi.fn()} onKeyDown={mockKeyDown} />);
+
+      const card = screen.getByRole('article');
+      fireEvent.keyDown(card, { key: 'Enter' });
+
+      expect(mockKeyDown).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not call onKeyDown when card is disabled', () => {
+      const mockKeyDown = vi.fn();
+      render(<Card title="Disabled Card" onClick={vi.fn()} onKeyDown={mockKeyDown} disabled />);
+
+      const card = screen.getByRole('article');
+      fireEvent.keyDown(card, { key: 'Enter' });
+
+      expect(mockKeyDown).not.toHaveBeenCalled();
+    });
+
+    test('does not call onKeyDown when card is not clickable', () => {
+      const mockKeyDown = vi.fn();
+      render(<Card title="Non-clickable Card" onKeyDown={mockKeyDown} />);
+
+      const card = screen.getByRole('article');
+      fireEvent.keyDown(card, { key: 'Enter' });
+
+      expect(mockKeyDown).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('CSS classes and accessibility', () => {
+    test('applies clickable class when onClick is provided and not disabled', () => {
+      const mockClick = vi.fn();
+      render(<Card onClick={mockClick} />);
+
+      const card = screen.getByRole('article');
+      expect(card).toHaveClass('ds-card__container--clickable');
+    });
+
+    test('applies disabled class when disabled', () => {
+      render(<Card disabled />);
+
+      const card = screen.getByRole('article');
+      expect(card).toHaveClass('ds-card__container--disabled');
+    });
+
+    test('does not apply clickable class when disabled', () => {
+      const mockClick = vi.fn();
+      render(<Card onClick={mockClick} disabled />);
+
+      const card = screen.getByRole('article');
+      expect(card).not.toHaveClass('ds-card__container--clickable');
+      expect(card).toHaveClass('ds-card__container--disabled');
+    });
+
+    test('sets correct tabIndex for clickable card', () => {
+      const mockClick = vi.fn();
+      render(<Card onClick={mockClick} />);
+
+      const card = screen.getByRole('article');
+      expect(card).toHaveAttribute('tabIndex', '0');
+    });
+
+    test('sets correct tabIndex for non-clickable card', () => {
+      render(<Card />);
+
+      const card = screen.getByRole('article');
+      expect(card).toHaveAttribute('tabIndex', '-1');
+    });
+
+    test('sets correct tabIndex for disabled card', () => {
+      const mockClick = vi.fn();
+      render(<Card onClick={mockClick} disabled />);
+
+      const card = screen.getByRole('article');
+      expect(card).toHaveAttribute('tabIndex', '-1');
+    });
+
+    test('has correct aria-label', () => {
+      render(<Card />);
+
+      const card = screen.getByRole('article');
+      expect(card).toHaveAttribute('aria-label', 'Card');
+    });
+  });
+
+  describe('Event handler edge cases', () => {
+    test('handles onClick without onKeyDown', () => {
+      const mockClick = vi.fn();
+      render(<Card title="Click only" onClick={mockClick} />);
+
+      const card = screen.getByRole('article');
+      fireEvent.click(card);
+
+      expect(mockClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('handles onKeyDown without onClick', () => {
+      const mockKeyDown = vi.fn();
+      render(<Card title="KeyDown only" onKeyDown={mockKeyDown} />);
+
+      const card = screen.getByRole('article');
+      fireEvent.keyDown(card, { key: 'Enter' });
+
+      // Should not be called because card is not clickable (no onClick)
+      expect(mockKeyDown).not.toHaveBeenCalled();
+    });
+
+    test('does not throw error when clicking card without handlers', () => {
+      render(<Card title="No handlers" />);
+
+      const card = screen.getByRole('article');
+      expect(() => fireEvent.click(card)).not.toThrow();
+    });
+  });
+});

package/src/components/card/Card.tsx

@@ -0,0 +1,96 @@
+import classNames from 'classnames';
+
+import { Icon } from '../icon/Icon';
+import { allowedIcons } from '../icon/allowedIcons';
+import { Pill, type PillColor } from '../pill/Pill';
+
+type CardProps = {
+  title?: string;
+  paragraph?: string;
+  icon?: keyof typeof allowedIcons;
+  iconColor?: string;
+  disabled?: boolean;
+  pillText?: string;
+  pillColor?: PillColor;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+  arrowType?: 'chevron' | 'arrow';
+  iconScreenReaderText?: string;
+};
+
+export const Card = ({
+  title,
+  paragraph,
+  icon,
+  iconColor,
+  iconScreenReaderText,
+  onClick,
+  onKeyDown,
+  disabled,
+  pillText,
+  pillColor,
+  arrowType = 'chevron',
+}: CardProps) => {
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  };
+
+  const isCardClickable = onClick && !disabled;
+
+  return (
+    <article
+      className={classNames('ds-card__container', {
+        'ds-card__container--clickable': isCardClickable,
+        'ds-card__container--disabled': disabled,
+      })}
+      onClick={(e) => {
+        if (isCardClickable) {
+          handleClick(e);
+        }
+      }}
+      onKeyDown={(e) => {
+        if (isCardClickable) {
+          handleKeyDown(e);
+        }
+      }}
+      aria-label="Card"
+      tabIndex={isCardClickable ? 0 : -1}
+    >
+      <div className="ds-card__content">
+        {icon && (
+          <Icon
+            name={icon}
+            className="ds-card__icon-left"
+            screenReaderText={iconScreenReaderText}
+            color={iconColor}
+            size={24}
+          />
+        )}
+        <div className="ds-card__text">
+          {title && (
+            <span className="ds-card__title-container">
+              {title && <h4 className="ds-card__title">{title}</h4>}
+            </span>
+          )}
+          {paragraph && <p className="ds-card__paragraph">{paragraph}</p>}
+          {pillText && <Pill text={pillText} color={pillColor} />}
+        </div>
+        {isCardClickable && (
+          <Icon
+            name={`${arrowType}-right`}
+            className="ds-card__icon-click"
+            size={24}
+          />
+        )}
+      </div>
+    </article>
+  );
+};

package/src/components/card/card.scss

@@ -0,0 +1,68 @@
+.ds-card__container {
+  display: flex;
+  width: 348px;
+  padding: var(--card-spacing-y, 24px) var(--card-spacing-x, 24px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--card-spacing-gap-y, 16px);
+  border-radius: var(--card-radius, 8px);
+  border: 1px solid var(--card-default-color-border, #efefef);
+  background: var(--card-default-color-background, #fff);
+  color: var(--card-default-color-text);
+  line-height: 1.5;
+
+  &:hover:not(.ds-card__container--disabled) {
+    border: 1px solid var(--card-hover-color-border, #efefef);
+    background: var(--card-hover-color-background, #fff);
+    box-shadow: 0 4px 12px 0 rgb(32 32 32 / 8%);
+  }
+
+  &:focus:not(.ds-card__container--disabled) {
+    border: 1px solid var(--card-focus-color-border, #efefef);
+    background: var(--card-focus-color-background, #fff);
+    box-shadow: 0 0 0 3px
+      var(--button-medium-primary-focus-color-focus, #3cad51);
+  }
+
+  &--clickable {
+    cursor: pointer;
+  }
+}
+
+.ds-card__content {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-large, 16px);
+  width: 100%;
+
+  .ds-card__icon-left {
+    flex-shrink: 0;
+  }
+
+  .ds-card__text {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: var(--card-spacing-gap-x);
+    flex-grow: 1;
+
+    .ds-card__title {
+      margin: 0;
+      font-family: var(--type-headings-h4-family);
+      font-size: var(--type-headings-h4-size);
+      font-weight: var(--type-headings-h4-weight);
+    }
+
+    .ds-card__paragraph {
+      margin: 0;
+      font-family: var(--type-body-p-family);
+      font-size: var(--type-body-p-size);
+      font-weight: var(--type-body-p-weight);
+    }
+  }
+
+  .ds-card__icon-click {
+    flex-shrink: 0;
+  }
+}

package/src/components/heading/Heading.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta } from '@storybook/react-vite';
+import { Heading } from './Heading';
+import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
+import { HeadingInnerContainer } from './HeadingInnerContainer';
+
+const meta: Meta<typeof Heading> = {
+  title: 'Components/Heading',
+  component: Heading,
+};
+
+export const Default = {
+  args: {
+    children: ['Heading Text'],
+    level: 1,
+  },
+};
+
+export const FloatingChildren = {
+  args: {
+    children: [<HeadingInnerContainer key={1}>Text floating left</HeadingInnerContainer>, <span key={2}>Text floating right</span>],
+    level: 1,
+  },
+};
+
+export const HeadingWithSingleButton = {
+  args: {
+    level: 1,
+    children: [
+      <HeadingInnerContainer key={1}>Heading</HeadingInnerContainer>,
+      <HeadingInnerContainer key={2}>
+        <Button>
+          <Icon name="info" />
+          Button Text
+        </Button>
+      </HeadingInnerContainer>,
+    ],
+  },
+};
+
+export const HeadingWithMultipleButtons = {
+  args: {
+    level: 1,
+    children: [
+      <HeadingInnerContainer key={1}>Heading</HeadingInnerContainer>,
+      <HeadingInnerContainer key={2} className="medium-spacing-gap">
+        <Button type="secondary">
+          <Icon name="info" />
+          Button Text
+        </Button>
+        <Button>
+          <Icon name="info" />
+          Button Text
+        </Button>
+      </HeadingInnerContainer>,
+    ],
+  },
+};
+
+export const HeadingWithButtonsBothSides = {
+  args: {
+    level: 1,
+    children: [
+      <HeadingInnerContainer key={1} className="medium-spacing-gap">
+        <Button type="tertiary">
+          <Icon name="chevron-left" />
+          Button Text
+        </Button>
+        Heading
+      </HeadingInnerContainer>,
+      <HeadingInnerContainer key={2} className="medium-spacing-gap">
+        <Button type="secondary">
+          <Icon name="info" />
+          Button Text
+        </Button>
+        <Button>
+          <Icon name="info" />
+          Button Text
+        </Button>
+      </HeadingInnerContainer>,
+    ],
+  },
+};
+
+export default meta;

package/src/components/heading/Heading.test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Heading } from './Heading';
+import '@testing-library/jest-dom/vitest';
+
+describe('Heading', () => {
+  test('Heading renders', () => {
+    render(
+      <Heading>
+        Hello, World!
+      </Heading>,
+    );
+    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
+  });
+
+  test('Heading renders an h1 tag by default', () => {
+    render(
+      <Heading>foobar</Heading>,
+    );
+
+    expect(screen.getByText('foobar').tagName).toBe('H1');
+  });
+
+  test('Heading respects level prop', () => {
+    render(<Heading level={2}>foobar</Heading>);
+
+    expect(screen.getByText('foobar').tagName).toBe('H2');
+  });
+});

package/src/components/heading/Heading.tsx

@@ -0,0 +1,17 @@
+import { createElement, type HTMLProps } from 'react';
+
+type HeadingProps = {
+  level?: 1 | 2 | 3 | 4;
+} & HTMLProps<HTMLHeadingElement>;
+
+export const Heading = (props: HeadingProps) => {
+  const { level = 1, children } = props;
+  const Component = {
+    1: 'h1',
+    2: 'h2',
+    3: 'h3',
+    4: 'h4',
+  }[level];
+
+  return createElement(Component, { className: 'ds-heading', ...props }, children);
+};

package/src/components/heading/HeadingInnerContainer.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+type HeadingSubContainerProps = HTMLAttributes<HTMLSpanElement>;
+
+export const HeadingInnerContainer = (props: HeadingSubContainerProps) => {
+  const { className, ...rest } = props;
+
+  return (
+    <span
+      className={classNames(
+        className,
+        'ds-heading__inner-container',
+      )}
+      {...rest}
+    />
+  );
+};

package/src/components/heading/heading.scss

@@ -0,0 +1,48 @@
+.ds-heading {
+  padding: var(--page-heading-spacing-gap);
+  color: var(--page-heading-color-text);
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  box-sizing: border-box;
+  align-items: center;
+
+  &__inner-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+h1 {
+  &.ds-heading {
+    font-family: var(--type-headings-h1-family);
+    font-size: var(--type-headings-h1-size);
+    font-weight: var(--type-headings-h1-weight);
+  }
+}
+
+h2 {
+  &.ds-heading {
+    font-family: var(--type-headings-h2-family);
+    font-size: var(--type-headings-h2-size);
+    font-weight: var(--type-headings-h2-weight);
+  }
+}
+
+h3 {
+  &.ds-heading {
+    font-family: var(--type-headings-h3-family);
+    font-size: var(--type-headings-h3-size);
+    font-weight: var(--type-headings-h3-weight);
+  }
+}
+
+h4 {
+  &.ds-heading {
+    font-family: var(--type-headings-h4-family);
+    font-size: var(--type-headings-h4-size);
+    font-weight: var(--type-headings-h4-weight);
+  }
+}