@jordan-mace/chaser-design-system 1.2.1 → 1.2.3

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,102 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  breadcrumb,
+  breadcrumbList,
+  breadcrumbItem,
+  breadcrumbLink,
+  breadcrumbSeparator,
+  breadcrumbCurrent,
+} from './styles.css';
+import Box from '../Box';
+
+type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  current?: boolean;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItem[];
+  className?: string;
+  separator?: string;
+};
+
+const Breadcrumb = ({
+  items,
+  className,
+  separator = '/',
+}: BreadcrumbProps) => {
+  return (
+    <Box
+      as="nav"
+      aria-label="Breadcrumb"
+      className={clsx(breadcrumb, className)}
+      display="flex"
+      alignItems="center"
+      gap="small"
+      fontSize="14px"
+    >
+      <Box
+        as="ol"
+        className={breadcrumbList}
+        display="flex"
+        alignItems="center"
+        style={{ listStyle: 'none' }}
+        margin="none"
+        padding="none"
+        gap="small"
+      >
+        {items.map((item, index) => (
+          <Box
+            as="li"
+            key={index}
+            className={breadcrumbItem}
+            display="flex"
+            alignItems="center"
+          >
+            {item.href && !item.current ? (
+              <Box
+                as="a"
+                href={item.href}
+                className={breadcrumbLink}
+                display="inline"
+                alignItems="center"
+                color="c5-600"
+                fontSize="14px"
+                textDecoration="none"
+              >
+                {item.label}
+              </Box>
+            ) : (
+              <Box
+                as="span"
+                className={breadcrumbCurrent}
+                display="inline"
+                alignItems="center"
+                color="c5-700"
+                fontSize="14px"
+                fontWeight="500"
+              >
+                {item.label}
+              </Box>
+            )}
+            {index < items.length - 1 && (
+              <Box
+                as="span"
+                className={breadcrumbSeparator}
+                color="c5-500"
+                fontSize="12px"
+                style={{ userSelect: 'none' }}
+              >
+                {separator}
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default Breadcrumb;

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

@@ -0,0 +1,56 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const breadcrumb = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  fontFamily: vars.fontFamily.body,
+  fontSize: '14px',
+});
+
+export const breadcrumbList = style({
+  display: 'flex',
+  alignItems: 'center',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  gap: '4px',
+});
+
+export const breadcrumbItem = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const breadcrumbLink = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  color: vars.colors.textSecondary,
+  textDecoration: 'none',
+  fontSize: '14px',
+  ':hover': {
+    color: vars.colors.buttonBackgroundPrimary,
+    textDecoration: 'underline',
+  },
+  ':focus-visible': {
+    outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    outlineOffset: '2px',
+    borderRadius: '4px',
+  },
+});
+
+export const breadcrumbSeparator = style({
+  color: vars.colors.textDisabled,
+  fontSize: '12px',
+  userSelect: 'none',
+});
+
+export const breadcrumbCurrent = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  color: vars.colors.textPrimary,
+  fontSize: '14px',
+  fontWeight: '500',
+});

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+
+import { Button } from '.';
+import React from 'react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  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'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {
+  //   backgroundColor: { control: 'color' },
+  // },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100vw',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+  render: (args) => (
+    <Button {...args}>Button</Button>
+  ),
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+  },
+  render: (args) => (
+    <Button {...args}>Button</Button>
+  ),
+};

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Button from './Button';
+import React from 'react';
+
+describe('Button', () => {
+  it('renders primary button correctly', async () => {
+    const { container } = await render(
+      <Button variant={'primary'} label={'Hello'} />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('handles onClick', async () => {
+    let clicked = false;
+    const handleClick = () => {
+      clicked = true;
+    };
+    const { getByText } = await render(
+      <Button variant={'primary'} label={'Click me'} onClick={handleClick} />,
+    );
+    const button = getByText('Click me');
+    await button.click();
+    expect(clicked).toBe(true);
+  });
+});

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/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/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;