@jordan-mace/chaser-design-system 1.2.2 → 1.2.4

package/src/components/Button/Button.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import { button, buttonVariants } from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant: 'primary' | 'secondary';
+  children?: React.ReactNode;
+  label?: string;
+  fullWidth?: boolean;
+};
+
+const Button = ({ label, ...props }: ButtonProps) => {
+  return (
+    <Box
+      as="button"
+      borderRadius="large"
+      width={props.fullWidth ? '100%' : undefined}
+      className={clsx(
+        buttonVariants[props.variant],
+        button,
+        props.className,
+      )}
+      {...props}
+    >
+      {props.children || label}
+    </Box>
+  );
+};
+
+export default Button;

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button';

package/src/components/Button/styles.css.ts

@@ -0,0 +1,32 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const buttonVariants = styleVariants({
+  primary: {
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+    color: vars.colors.buttonTextPrimary,
+    ':focus-visible': {
+      backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+    },
+    ':hover': {
+      backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+    },
+  },
+  secondary: {
+    backgroundColor: vars.colors.buttonBackgroundSecondary,
+    color: vars.colors.buttonTextSecondary,
+    ':focus-visible': {
+      backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
+    },
+    ':hover': {
+      backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
+    },
+  },
+});
+
+export const button = styleWithLayer({
+  padding: '1rem',
+  borderRadius: '1rem',
+  border: 0,
+});

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

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Card } from '.';
+import React from 'react';
+import { P } from '../Text';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Card',
+  component: Card,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100vw',
+          maxWidth: '400px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Elevated: Story = {
+  args: {
+    variant: 'elevated',
+    children: (
+      <>
+        <P>This is an elevated card with a shadow effect.</P>
+        <P>It stands out from the background nicely.</P>
+      </>
+    ),
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    variant: 'outlined',
+    children: (
+      <>
+        <P>This is an outlined card with a border.</P>
+        <P>It has a clean, minimal appearance.</P>
+      </>
+    ),
+  },
+};
+
+export const Filled: Story = {
+  args: {
+    variant: 'filled',
+    children: (
+      <>
+        <P>This is a filled card with background color.</P>
+        <P>It provides subtle visual separation.</P>
+      </>
+    ),
+  },
+};
+
+export const NoPadding: Story = {
+  args: {
+    variant: 'elevated',
+    padding: 'none',
+    children: (
+      <div style={{ padding: '1rem' }}>
+        <P>This card has no built-in padding.</P>
+        <P>Useful when you need full control over spacing.</P>
+      </div>
+    ),
+  },
+};

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

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Card from './Card';
+import React from 'react';
+import { P } from '../Text';
+
+describe('Card', () => {
+  it('renders elevated card correctly', async () => {
+    const { container } = await render(
+      <Card variant="elevated">
+        <P>Card content</P>
+      </Card>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders outlined card correctly', async () => {
+    const { container } = await render(
+      <Card variant="outlined">
+        <P>Card content</P>
+      </Card>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders filled card correctly', async () => {
+    const { container } = await render(
+      <Card variant="filled">
+        <P>Card content</P>
+      </Card>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with no padding', async () => {
+    const { container } = await render(
+      <Card variant="elevated" padding="none">
+        <P>Card content</P>
+      </Card>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+import { card, cardVariants } from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: 'elevated' | 'outlined' | 'filled';
+  children?: React.ReactNode;
+  padding?: 'none' | 'small' | 'medium' | 'large';
+};
+
+const Card = ({
+  variant = 'elevated',
+  padding = 'medium',
+  ...props
+}: CardProps) => {
+  return (
+    <Box
+      as="div"
+      borderRadius="large"
+      padding={padding !== 'none' ? padding : undefined}
+      className={clsx(
+        cardVariants[variant],
+        card,
+        props.className,
+      )}
+      {...props}
+    >
+      {props.children}
+    </Box>
+  );
+};
+
+export default Card;

package/src/components/Card/index.ts

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

package/src/components/Card/styles.css.ts

@@ -0,0 +1,27 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const cardVariants = styleVariants({
+  elevated: {
+    backgroundColor: vars.colors.backgroundDefault,
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    border: 'none',
+  },
+  outlined: {
+    backgroundColor: vars.colors.backgroundDefault,
+    border: `1px solid ${vars.colors.borderDefault}`,
+    boxShadow: 'none',
+  },
+  filled: {
+    backgroundColor: vars.colors.backgroundMuted,
+    border: 'none',
+    boxShadow: 'none',
+  },
+});
+
+export const card = styleWithLayer({
+  display: 'block',
+  position: 'relative',
+  transition: 'all 0.2s ease-in-out',
+});

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { Checkbox } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Accept terms and conditions',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: 'Selected option',
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled checkbox',
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    label: 'Disabled checked',
+    disabled: true,
+    checked: true,
+  },
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Checkbox label="Option 1" />
+      <Checkbox label="Option 2" defaultChecked />
+      <Checkbox label="Option 3" />
+      <Checkbox label="Option 4 (disabled)" disabled />
+    </div>
+  ),
+};

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Checkbox from './Checkbox';
+import React from 'react';
+
+describe('Checkbox', () => {
+  it('renders unchecked checkbox correctly', async () => {
+    const { container } = await render(<Checkbox />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders checked checkbox correctly', async () => {
+    const { container } = await render(<Checkbox checked readOnly />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders checkbox with label correctly', async () => {
+    const { container } = await render(<Checkbox label="Accept terms" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders disabled checkbox correctly', async () => {
+    const { container } = await render(<Checkbox disabled label="Disabled option" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders as checked after click', async () => {
+    const { container } = await render(<Checkbox />);
+    const checkbox = container.querySelector('input[type="checkbox"]');
+    await checkbox?.click();
+    // After clicking, checkbox should be checked
+    expect(checkbox?.checked).toBe(true);
+  });
+
+  it('is accessible with proper role', async () => {
+    const { getByRole } = await render(<Checkbox label="Test checkbox" />);
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toBeDefined();
+  });
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,58 @@
+import clsx from 'clsx';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { checkboxContainer, checkboxInput, checkboxLabel } from './styles.css';
+import Box from '../Box';
+
+type CheckboxProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> & {
+  label?: string;
+  indeterminate?: boolean;
+};
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ label, className, indeterminate, ...props }, ref) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const combinedRef = (node: HTMLInputElement) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+      inputRef.current = node;
+    };
+
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = !!indeterminate;
+      }
+    }, [indeterminate]);
+
+    return (
+      <Box
+        as="label"
+        className={clsx(checkboxContainer, className)}
+        display="flex"
+        alignItems="center"
+        gap="small"
+        cursor="pointer"
+        style={{ userSelect: 'none' }}
+      >
+        <Box
+          as="input"
+          type="checkbox"
+          ref={combinedRef}
+          className={checkboxInput}
+          style={{ width: '18px', height: '18px' }}
+          {...props}
+        />
+        {label && <Box as="span" className={checkboxLabel}>{label}</Box>}
+      </Box>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;

package/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox';

package/src/components/Checkbox/styles.css.ts

@@ -0,0 +1,34 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const checkboxContainer = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  cursor: 'pointer',
+  userSelect: 'none',
+});
+
+export const checkboxInput = style({
+  width: '18px',
+  height: '18px',
+  border: `2px solid ${vars.colors.borderDefault}`,
+  borderRadius: '4px',
+  cursor: 'pointer',
+  accentColor: vars.colors.buttonBackgroundPrimary,
+  ':focus-visible': {
+    outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    outlineOffset: '2px',
+  },
+  ':disabled': {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
+});
+
+export const checkboxLabel = styleWithLayer({
+  fontFamily: vars.fontFamily.body,
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+});

package/src/components/Collapse/Collapse.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { Collapse } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/Collapse',
+  component: Collapse,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Collapse>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Open: Story = {
+  args: {
+    isOpen: true,
+    children: (
+      <Box padding="medium" background="c1-100">
+        This content is visible and can be collapsed.
+      </Box>
+    ),
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+    children: (
+      <Box padding="medium" background="c1-100">
+        This content is hidden when collapsed.
+      </Box>
+    ),
+  },
+};
+
+export const HeightOnly: Story = {
+  args: {
+    isOpen: true,
+    animation: 'height',
+    children: (
+      <Box padding="medium" background="c2-100">
+        Height-only animation
+      </Box>
+    ),
+  },
+};
+
+export const OpacityOnly: Story = {
+  args: {
+    isOpen: true,
+    animation: 'opacity',
+    children: (
+      <Box padding="medium" background="c3-100">
+        Opacity-only animation
+      </Box>
+    ),
+  },
+};

package/src/components/Collapse/Collapse.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Collapse from './Collapse';
+import React from 'react';
+
+describe('Collapse', () => {
+  it('renders when open', async () => {
+    const { container } = await render(
+      <Collapse isOpen={true}>
+        <div>Collapsed content</div>
+      </Collapse>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders when closed', async () => {
+    const { container } = await render(
+      <Collapse isOpen={false}>
+        <div>Hidden content</div>
+      </Collapse>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,97 @@
+import clsx from 'clsx';
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  collapseContainer,
+  collapseContent,
+  collapseAnimation,
+} from './styles.css';
+import Box from '../Box';
+
+export type CollapseAnimation = 'height' | 'opacity' | 'both';
+
+export interface CollapseProps {
+  isOpen: boolean;
+  children: React.ReactNode;
+  animation?: CollapseAnimation;
+  duration?: number;
+  className?: string;
+  onAnimationEnd?: () => void;
+}
+
+const Collapse = ({
+  isOpen,
+  children,
+  animation = 'both',
+  duration = 300,
+  className,
+  onAnimationEnd,
+}: CollapseProps) => {
+  const [height, setHeight] = useState<number | undefined>(isOpen ? undefined : 0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsAnimating(true);
+      if (contentRef.current) {
+        setHeight(contentRef.current.scrollHeight);
+      }
+    } else {
+      setIsAnimating(true);
+      setHeight(0);
+    }
+  }, [isOpen]);
+
+  const handleTransitionEnd = () => {
+    setIsAnimating(false);
+    if (isOpen) {
+      setHeight(undefined);
+    }
+    onAnimationEnd?.();
+  };
+
+  const getAnimationStyles = (): React.CSSProperties => {
+    const baseStyles: React.CSSProperties = {
+      transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
+      height: height !== undefined ? `${height}px` : undefined,
+      opacity: isOpen || isAnimating ? 1 : 0,
+    };
+
+    if (animation === 'height') {
+      return {
+        ...baseStyles,
+        transition: `height ${duration}ms ease-out`,
+        opacity: 1,
+      };
+    }
+
+    if (animation === 'opacity') {
+      return {
+        ...baseStyles,
+        transition: `opacity ${duration}ms ease-out`,
+        height: undefined,
+      };
+    }
+
+    return baseStyles;
+  };
+
+  if (!isOpen && !isAnimating && animation !== 'opacity') {
+    return null;
+  }
+
+  return (
+    <Box
+      className={clsx(collapseContainer, className)}
+      style={getAnimationStyles()}
+      onTransitionEnd={handleTransitionEnd}
+      aria-hidden={!isOpen}
+    >
+      <Box ref={contentRef} className={collapseContent}>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export default Collapse;

package/src/components/Collapse/index.ts

@@ -0,0 +1,2 @@
+export { default as Collapse } from './Collapse';
+export type { CollapseProps, CollapseAnimation } from './Collapse';