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

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Badge from './Badge';
+import React from 'react';
+
+describe('Badge', () => {
+  it('renders default badge correctly', async () => {
+    const { container } = await render(<Badge>Default Badge</Badge>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders success badge correctly', async () => {
+    const { container } = await render(<Badge variant="success">Success</Badge>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders warning badge correctly', async () => {
+    const { container } = await render(<Badge variant="warning">Warning</Badge>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders error badge correctly', async () => {
+    const { container } = await render(<Badge variant="error">Error</Badge>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders info badge correctly', async () => {
+    const { container } = await render(<Badge variant="info">Info</Badge>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders small badge correctly', async () => {
+    const { container } = await render(<Badge size="small">Small</Badge>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders medium badge correctly', async () => {
+    const { container } = await render(<Badge size="medium">Medium</Badge>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders large badge correctly', async () => {
+    const { container } = await render(<Badge size="large">Large</Badge>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders dot badge correctly', async () => {
+    const { container } = await render(<Badge dot />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders dot with variant correctly', async () => {
+    const { container } = await render(<Badge variant="success" dot />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders dot with size correctly', async () => {
+    const { container } = await render(<Badge dot size="large" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders span element with proper attributes', async () => {
+    const { container } = await render(<Badge>Test Badge</Badge>);
+    const badge = container.querySelector('span');
+    expect(badge).toBeInTheDocument();
+    expect(badge?.tagName).toBe('SPAN');
+    expect(badge).toHaveTextContent('Test Badge');
+  });
+
+  it('does not render children when dot is true', async () => {
+    const { container } = await render(<Badge dot>Hidden Text</Badge>);
+    expect(container).toHaveTextContent('');
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import {
+  badge,
+  badgeVariants,
+  badgeSizes,
+  badgeDot,
+  badgeDotSizes,
+} from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'small' | 'medium' | 'large';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  dot?: boolean;
+  children?: React.ReactNode;
+}
+
+const Badge = ({
+  variant = 'default',
+  size = 'medium',
+  dot = false,
+  children,
+  ...props
+}: BadgeProps) => {
+  return (
+    <Box
+      as="span"
+      className={clsx(
+        badge,
+        badgeVariants[variant],
+        dot ? badgeDot : badgeSizes[size],
+        dot && badgeDotSizes[size],
+        props.className,
+      )}
+      {...props}
+    >
+      {dot ? null : children}
+    </Box>
+  );
+};
+
+export default Badge;

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

@@ -0,0 +1,82 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const badgeVariants = styleVariants({
+  default: {
+    backgroundColor: vars.colors.borderDefault,
+    color: vars.colors.textPrimary,
+  },
+  success: {
+    backgroundColor: vars.colors.alertSuccessBackground,
+    color: vars.colors.alertSuccessText,
+    border: `1px solid ${vars.colors.alertSuccessBorder}`,
+  },
+  warning: {
+    backgroundColor: vars.colors.alertWarningBackground,
+    color: vars.colors.alertWarningText,
+    border: `1px solid ${vars.colors.alertWarningBorder}`,
+  },
+  error: {
+    backgroundColor: vars.colors.alertErrorBackground,
+    color: vars.colors.alertErrorText,
+    border: `1px solid ${vars.colors.alertErrorBorder}`,
+  },
+  info: {
+    backgroundColor: vars.colors.alertInfoBackground,
+    color: vars.colors.alertInfoText,
+    border: `1px solid ${vars.colors.alertInfoBorder}`,
+  },
+});
+
+export const badgeSizes = styleVariants({
+  small: {
+    fontSize: '0.7rem',
+    padding: '0.125rem 0.375rem',
+    borderRadius: '0.25rem',
+  },
+  medium: {
+    fontSize: '0.75rem',
+    padding: '0.25rem 0.5rem',
+    borderRadius: '0.375rem',
+  },
+  large: {
+    fontSize: '0.875rem',
+    padding: '0.375rem 0.625rem',
+    borderRadius: '0.5rem',
+  },
+});
+
+export const badge = styleWithLayer({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontWeight: '500',
+  whiteSpace: 'nowrap',
+  fontFamily: vars.fontFamily.body,
+  transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out',
+});
+
+export const badgeDot = styleWithLayer({
+  width: '0.5rem',
+  height: '0.5rem',
+  borderRadius: '50%',
+  display: 'inline-block',
+  padding: 0,
+  minWidth: 'auto',
+});
+
+export const badgeDotSizes = styleVariants({
+  small: {
+    width: '0.375rem',
+    height: '0.375rem',
+  },
+  medium: {
+    width: '0.5rem',
+    height: '0.5rem',
+  },
+  large: {
+    width: '0.625rem',
+    height: '0.625rem',
+  },
+});

package/src/components/Box/Box.stories.tsx

@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import Box from './Box';
+
+const meta: Meta<typeof Box> = {
+  title: 'Components/Box',
+  component: Box,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    as: {
+      control: 'select',
+      options: ['div', 'span', 'section', 'article', 'header', 'footer', 'main', 'aside', 'nav', 'button', 'a'],
+      description: 'HTML element to render as',
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    paddingX: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    paddingY: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    margin: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    marginX: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    marginY: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    display: {
+      control: 'select',
+      options: ['none', 'flex', 'block', 'inline'],
+    },
+    flexDirection: {
+      control: 'select',
+      options: ['row', 'column'],
+    },
+    justifyContent: {
+      control: 'select',
+      options: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],
+    },
+    alignItems: {
+      control: 'select',
+      options: ['stretch', 'flex-start', 'center', 'flex-end'],
+    },
+    gap: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    background: {
+      control: 'select',
+      options: [
+        'c1-50', 'c1-100', 'c1-200', 'c1-300', 'c1-400', 'c1-500', 'c1-600', 'c1-700', 'c1-800', 'c1-900',
+        'c2-50', 'c2-100', 'c2-200', 'c2-300', 'c2-400', 'c2-500', 'c2-600', 'c2-700', 'c2-800', 'c2-900',
+        'c3-50', 'c3-100', 'c3-200', 'c3-300', 'c3-400', 'c3-500', 'c3-600', 'c3-700', 'c3-800', 'c3-900',
+        'c4-50', 'c4-100', 'c4-200', 'c4-300', 'c4-400', 'c4-500', 'c4-600', 'c4-700', 'c4-800', 'c4-900',
+        'c5-50', 'c5-100', 'c5-200', 'c5-300', 'c5-400', 'c5-500', 'c5-600', 'c5-700', 'c5-800', 'c5-900',
+      ],
+    },
+    color: {
+      control: 'select',
+      options: [
+        'c1-50', 'c1-100', 'c1-200', 'c1-300', 'c1-400', 'c1-500', 'c1-600', 'c1-700', 'c1-800', 'c1-900',
+        'c2-50', 'c2-100', 'c2-200', 'c2-300', 'c2-400', 'c2-500', 'c2-600', 'c2-700', 'c2-800', 'c2-900',
+        'c3-50', 'c3-100', 'c3-200', 'c3-300', 'c3-400', 'c3-500', 'c3-600', 'c3-700', 'c3-800', 'c3-900',
+        'c4-50', 'c4-100', 'c4-200', 'c4-300', 'c4-400', 'c4-500', 'c4-600', 'c4-700', 'c4-800', 'c4-900',
+        'c5-50', 'c5-100', 'c5-200', 'c5-300', 'c5-400', 'c5-500', 'c5-600', 'c5-700', 'c5-800', 'c5-900',
+      ],
+    },
+    borderRadius: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    width: {
+      control: 'select',
+      options: ['auto', '100%', '50%', '25%'],
+    },
+    height: {
+      control: 'select',
+      options: ['auto', '100%', '50%', '25%'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Hello, I am a Box!',
+    padding: 'medium',
+    background: 'c1-100',
+  },
+};
+
+export const Polymorphic: Story = {
+  args: {
+    as: 'button',
+    children: 'I render as a button',
+    padding: 'medium',
+    background: 'c1-500',
+    color: 'c5-50',
+    borderRadius: 'medium',
+  },
+};
+
+export const FlexContainer: Story = {
+  args: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 'medium',
+    padding: 'large',
+    background: 'c2-100',
+    children: (
+      <>
+        <Box padding="medium" background="c1-200">Item 1</Box>
+        <Box padding="medium" background="c1-200">Item 2</Box>
+        <Box padding="medium" background="c1-200">Item 3</Box>
+      </>
+    ),
+  },
+};
+
+export const ResponsivePadding: Story = {
+  args: {
+    children: 'Responsive padding example',
+    padding: ['small', 'medium', 'large'],
+    background: 'c3-100',
+  },
+};
+
+export const SemanticElements: Story = {
+  args: {
+    as: 'article',
+    children: 'This is an article element',
+    padding: 'large',
+    background: 'c4-100',
+    borderRadius: 'large',
+  },
+};
+
+export const NestedBoxes: Story = {
+  render: () => (
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="medium"
+      padding="large"
+      background="c5-100"
+      borderRadius="large"
+    >
+      <Box padding="medium" background="c1-200" borderRadius="medium">
+        Nested Box 1
+      </Box>
+      <Box padding="medium" background="c2-200" borderRadius="medium">
+        Nested Box 2
+      </Box>
+      <Box
+        display="flex"
+        gap="small"
+        padding="medium"
+        background="c3-200"
+        borderRadius="medium"
+      >
+        <Box padding="small" background="c1-300">A</Box>
+        <Box padding="small" background="c1-300">B</Box>
+        <Box padding="small" background="c1-300">C</Box>
+      </Box>
+    </Box>
+  ),
+};

package/src/components/Box/Box.test.tsx

@@ -0,0 +1,63 @@
+import { render } from 'vitest-browser-react';
+import { describe, expect, it, vi } from 'vitest';
+import Box from './Box';
+
+describe('Box', () => {
+  it('renders as a div by default', async () => {
+    const { container } = await render(<Box data-testid="box">Content</Box>);
+    const box = container.querySelector('[data-testid="box"]');
+    expect(box?.tagName).toBe('DIV');
+    expect(box).toHaveTextContent('Content');
+  });
+
+  it('renders with different elements via as prop', async () => {
+    const { container, rerender } = await render(<Box as="span" data-testid="box">Span content</Box>);
+    expect(container.querySelector('[data-testid="box"]')?.tagName).toBe('SPAN');
+
+    await rerender(<Box as="section" data-testid="box">Section content</Box>);
+    expect(container.querySelector('[data-testid="box"]')?.tagName).toBe('SECTION');
+
+    await rerender(<Box as="button" data-testid="box">Button content</Box>);
+    expect(container.querySelector('[data-testid="box"]')?.tagName).toBe('BUTTON');
+  });
+
+  it('applies custom className', async () => {
+    const { container } = await render(<Box className="custom-class" data-testid="box">Content</Box>);
+    const box = container.querySelector('[data-testid="box"]');
+    expect(box?.className).toContain('custom-class');
+  });
+
+  it('passes through data attributes', async () => {
+    const { container } = await render(<Box data-testid="my-box" aria-label="test box">Content</Box>);
+    const box = container.querySelector('[data-testid="my-box"]');
+    expect(box).toHaveAttribute('aria-label', 'test box');
+  });
+
+  it('forwards click events', async () => {
+    const handleClick = vi.fn();
+    const { container } = await render(<Box onClick={handleClick} data-testid="box">Click me</Box>);
+    const box = container.querySelector('[data-testid="box"]');
+    box?.click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders children correctly', async () => {
+    const { container } = await render(
+      <Box data-testid="box">
+        <span data-testid="child">Child element</span>
+      </Box>
+    );
+    expect(container.querySelector('[data-testid="child"]')).toBeInTheDocument();
+  });
+
+  it('renders as anchor element with href', async () => {
+    const { container } = await render(
+      <Box as="a" href="https://example.com" data-testid="link">
+        Link text
+      </Box>
+    );
+    const link = container.querySelector('[data-testid="link"]');
+    expect(link?.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+});

package/src/components/Box/Box.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { reset } from './reset.css';
+import React, { forwardRef } from 'react';
+
+type BoxProps = Sprinkles & {
+  as?: React.ElementType;
+  children?: React.ReactNode;
+  className?: string;
+  [key: string]: unknown;
+};
+
+const Box = forwardRef<HTMLElement, BoxProps>((props, ref) => {
+  const { as: Component = 'div', className, children, ...rest } = props;
+
+  const sprinkleProps: Sprinkles = {};
+  const otherProps: Record<string, unknown> = { ref };
+
+  const sprinkleKeys = new Set([
+    'display',
+    'width',
+    'height',
+    'flexDirection',
+    'justifyContent',
+    'alignItems',
+    'paddingTop',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingRight',
+    'marginLeft',
+    'marginRight',
+    'marginTop',
+    'marginBottom',
+    'borderLeft',
+    'borderRight',
+    'borderTop',
+    'borderBottom',
+    'borderRadius',
+    'gap',
+    'padding',
+    'border',
+    'paddingX',
+    'paddingY',
+    'marginX',
+    'marginY',
+    'placeItems',
+    'color',
+    'background',
+  ]);
+
+  Object.entries(rest).forEach(([key, value]) => {
+    if (sprinkleKeys.has(key)) {
+      (sprinkleProps as Record<string, unknown>)[key] = value;
+    } else {
+      otherProps[key] = value;
+    }
+  });
+
+  return React.createElement(
+    Component as React.ElementType,
+    {
+      className: clsx(reset, sprinkles(sprinkleProps), className as string),
+      ...otherProps,
+    },
+    children as React.ReactNode,
+  );
+});
+
+Box.displayName = 'Box';
+
+export default Box;
+export type { BoxProps };

package/src/components/Box/reset.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+import { componentsLayer } from '../../styles/layers.css';
+
+export const reset = style({
+  '@layer': {
+    [componentsLayer]: {
+      margin: 0,
+      padding: 0,
+      border: 0,
+      boxSizing: 'border-box',
+      fontSize: '100%',
+      font: 'inherit',
+      verticalAlign: 'baseline',
+    },
+  },
+});

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Breadcrumb } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Category', href: '/products/category' },
+  { label: 'Item', current: true },
+];
+
+export const Default: Story = {
+  args: {
+    items,
+  },
+};
+
+export const CustomSeparator: Story = {
+  args: {
+    items,
+    separator: '>',
+  },
+};
+
+export const LongBreadcrumb: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'Products', href: '/products' },
+      { label: 'Electronics', href: '/products/electronics' },
+      { label: 'Computers', href: '/products/electronics/computers' },
+      { label: 'Laptops', href: '/products/electronics/computers/laptops' },
+      { label: 'Gaming Laptops', current: true },
+    ],
+  },
+};
+
+export const SingleItem: Story = {
+  args: {
+    items: [{ label: 'Home', current: true }],
+  },
+};

package/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Breadcrumb from './Breadcrumb';
+import React from 'react';
+
+describe('Breadcrumb', () => {
+  const items = [
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Category', href: '/products/category' },
+    { label: 'Item', current: true },
+  ];
+
+  it('renders breadcrumb correctly', async () => {
+    const { container } = await render(<Breadcrumb items={items} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders breadcrumb with custom separator correctly', async () => {
+    const { container } = await render(
+      <Breadcrumb items={items} separator=">" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders single breadcrumb correctly', async () => {
+    const singleItem = [{ label: 'Home', current: true }];
+    const { container } = await render(<Breadcrumb items={singleItem} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders long breadcrumb correctly', async () => {
+    const longItems = [
+      { label: 'Home', href: '/' },
+      { label: 'Category 1', href: '/cat1' },
+      { label: 'Category 2', href: '/cat2' },
+      { label: 'Category 3', href: '/cat3' },
+      { label: 'Category 4', href: '/cat4' },
+      { label: 'Current Page', current: true },
+    ];
+    const { container } = await render(<Breadcrumb items={longItems} />);
+    expect(container).toMatchScreenshot();
+  });
+});