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

package/src/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { Stepper } from '.';
+
+const meta = {
+  title: 'Components/Stepper',
+  component: Stepper,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Stepper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const steps = [
+  { title: 'Account', description: 'Create your account' },
+  { title: 'Personal', description: 'Add personal details' },
+  { title: 'Review', description: 'Review your information' },
+  { title: 'Complete', description: 'Finish registration' },
+];
+
+export const FirstStep: Story = {
+  args: {
+    steps,
+    currentStep: 0,
+    orientation: 'horizontal',
+  },
+};
+
+export const MiddleStep: Story = {
+  args: {
+    steps,
+    currentStep: 2,
+    orientation: 'horizontal',
+  },
+};
+
+export const AllCompleted: Story = {
+  args: {
+    steps,
+    currentStep: 4,
+    orientation: 'horizontal',
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    steps,
+    currentStep: 1,
+    orientation: 'vertical',
+  },
+};
+
+export const WithoutConnectors: Story = {
+  args: {
+    steps,
+    currentStep: 1,
+    orientation: 'horizontal',
+    showConnectors: false,
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    steps,
+    currentStep: 1,
+    orientation: 'horizontal',
+    clickable: true,
+    onStepClick: fn(),
+  },
+};
+
+export const CustomStatus: Story = {
+  args: {
+    steps: [
+      { title: 'Step 1', description: 'Completed step', status: 'completed' },
+      { title: 'Step 2', description: 'Current step', status: 'current' },
+      { title: 'Step 3', description: 'Pending step', status: 'pending' },
+    ],
+    orientation: 'horizontal',
+  },
+};

package/src/components/Stepper/Stepper.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Stepper from './Stepper';
+import React from 'react';
+
+describe('Stepper', () => {
+  const steps = [
+    { title: 'Step 1', description: 'Description for step 1' },
+    { title: 'Step 2', description: 'Description for step 2' },
+    { title: 'Step 3', description: 'Description for step 3' },
+  ];
+
+  it('renders horizontal stepper at first step', async () => {
+    const { container } = await render(
+      <Stepper steps={steps} currentStep={0} orientation="horizontal" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders horizontal stepper at middle step', async () => {
+    const { container } = await render(
+      <Stepper steps={steps} currentStep={1} orientation="horizontal" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders horizontal stepper with all completed', async () => {
+    const { container } = await render(
+      <Stepper steps={steps} currentStep={3} orientation="horizontal" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders vertical stepper', async () => {
+    const { container } = await render(
+      <Stepper steps={steps} currentStep={1} orientation="vertical" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders without connectors', async () => {
+    const { container } = await render(
+      <Stepper steps={steps} currentStep={1} showConnectors={false} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,133 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  stepperContainer,
+  stepperHorizontal,
+  stepperVertical,
+  step,
+  stepVertical,
+  stepIndicator,
+  stepIndicatorVariants,
+  stepContent,
+  stepContentVertical,
+  stepTitle,
+  stepDescription,
+  stepConnector,
+  stepConnectorCompleted,
+  stepConnectorVertical,
+} from './styles.css';
+import Box from '../Box';
+
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepStatus = 'pending' | 'current' | 'completed';
+
+export interface Step {
+  title: string;
+  description?: string;
+  status?: StepStatus;
+}
+
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: Step[];
+  currentStep?: number;
+  orientation?: StepperOrientation;
+  showConnectors?: boolean;
+  onStepClick?: (stepIndex: number) => void;
+  clickable?: boolean;
+}
+
+const Stepper = ({
+  steps,
+  currentStep = 0,
+  orientation = 'horizontal',
+  showConnectors = true,
+  onStepClick,
+  clickable = false,
+  className,
+  ...props
+}: StepperProps) => {
+  const getStepStatus = (index: number): StepStatus => {
+    if (index < currentStep) return 'completed';
+    if (index === currentStep) return 'current';
+    return 'pending';
+  };
+
+  const handleStepClick = (index: number) => {
+    if (clickable && onStepClick) {
+      onStepClick(index);
+    }
+  };
+
+  return (
+    <Box
+      className={clsx(
+        stepperContainer,
+        orientation === 'horizontal' ? stepperHorizontal : stepperVertical,
+        className,
+      )}
+      role="list"
+      aria-label="Step progress"
+      {...props}
+    >
+      {steps.map((stepItem, index) => {
+        const status = stepItem.status || getStepStatus(index);
+        const isLast = index === steps.length - 1;
+        const isCompleted = status === 'completed';
+        
+        return (
+          <Box
+            key={index}
+            className={clsx(step, orientation === 'vertical' && stepVertical)}
+            role="listitem"
+            aria-current={status === 'current' ? 'step' : undefined}
+          >
+            {showConnectors && !isLast && orientation === 'horizontal' && (
+              <Box
+                className={clsx(stepConnector, isCompleted && stepConnectorCompleted)}
+                aria-hidden="true"
+              />
+            )}
+            
+            {showConnectors && !isLast && orientation === 'vertical' && (
+              <Box
+                className={stepConnectorVertical}
+                style={{ backgroundColor: isCompleted ? undefined : undefined }}
+                aria-hidden="true"
+              />
+            )}
+            
+            <Box
+              className={clsx(
+                stepIndicator,
+                stepIndicatorVariants[status],
+              )}
+              onClick={() => handleStepClick(index)}
+              style={{ cursor: clickable ? 'pointer' : 'default' }}
+              aria-label={`Step ${index + 1}: ${stepItem.title}`}
+            >
+              {status === 'completed' ? '✓' : index + 1}
+            </Box>
+            
+            <Box
+              className={clsx(
+                stepContent,
+                orientation === 'vertical' && stepContentVertical,
+              )}
+            >
+              <Box as="h4" className={stepTitle}>
+                {stepItem.title}
+              </Box>
+              {stepItem.description && (
+                <Box as="p" className={stepDescription}>
+                  {stepItem.description}
+                </Box>
+              )}
+            </Box>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default Stepper;

package/src/components/Stepper/index.ts

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper';
+export type { StepperProps, Step, StepperOrientation, StepStatus } from './Stepper';

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

@@ -0,0 +1,118 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const stepperContainer = styleWithLayer({
+  display: 'flex',
+  alignItems: 'flex-start',
+  width: '100%',
+});
+
+export const stepperHorizontal = styleWithLayer({
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+});
+
+export const stepperVertical = styleWithLayer({
+  flexDirection: 'column',
+  gap: '1rem',
+});
+
+export const step = styleWithLayer({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  position: 'relative',
+  flex: 1,
+});
+
+export const stepVertical = styleWithLayer({
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  gap: '1rem',
+});
+
+export const stepIndicator = styleWithLayer({
+  width: '2.5rem',
+  height: '2.5rem',
+  borderRadius: '50%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontWeight: '600',
+  fontSize: '14px',
+  transition: 'all 0.3s ease',
+  zIndex: 1,
+});
+
+export const stepIndicatorVariants = styleVariants({
+  pending: {
+    backgroundColor: vars.colors.borderMuted,
+    color: vars.colors.textSecondary,
+    border: `2px solid ${vars.colors.borderMuted}`,
+  },
+  current: {
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+    color: vars.colors.buttonTextPrimary,
+    border: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    boxShadow: `0 0 0 4px ${vars.colors.alertInfoBackground}`,
+  },
+  completed: {
+    backgroundColor: vars.colors.alertSuccessBorder,
+    color: vars.colors.buttonTextPrimary,
+    border: `2px solid ${vars.colors.alertSuccessBorder}`,
+  },
+});
+
+export const stepContent = styleWithLayer({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  marginTop: '0.5rem',
+  textAlign: 'center',
+});
+
+export const stepContentVertical = styleWithLayer({
+  alignItems: 'flex-start',
+  marginTop: 0,
+  textAlign: 'left',
+});
+
+export const stepTitle = styleWithLayer({
+  fontFamily: vars.fontFamily.heading,
+  fontSize: '14px',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: 0,
+});
+
+export const stepDescription = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.textSecondary,
+  marginTop: '0.25rem',
+  maxWidth: '200px',
+});
+
+export const stepConnector = styleWithLayer({
+  position: 'absolute',
+  top: '1.25rem',
+  left: 'calc(50% + 1.5rem)',
+  right: 'calc(-50% + 1.5rem)',
+  height: '2px',
+  backgroundColor: vars.colors.borderMuted,
+  zIndex: 0,
+});
+
+export const stepConnectorCompleted = styleWithLayer({
+  backgroundColor: vars.colors.alertSuccessBorder,
+});
+
+export const stepConnectorVertical = styleWithLayer({
+  position: 'absolute',
+  top: '2.5rem',
+  left: '1.25rem',
+  width: '2px',
+  height: 'calc(100% + 1rem)',
+  backgroundColor: vars.colors.borderMuted,
+  zIndex: 0,
+});

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Table } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Table',
+  component: Table,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '600px',
+          maxWidth: '100%',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleData = [
+  { name: 'John Doe', email: 'john@example.com', role: 'Developer', status: 'Active' },
+  { name: 'Jane Smith', email: 'jane@example.com', role: 'Designer', status: 'Active' },
+  { name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager', status: 'Inactive' },
+  { name: 'Alice Brown', email: 'alice@example.com', role: 'Developer', status: 'Active' },
+];
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Email</Table.Th>
+          <Table.Th>Role</Table.Th>
+          <Table.Th>Status</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {sampleData.map((row, i) => (
+          <Table.Tr key={i}>
+            <Table.Td>{row.name}</Table.Td>
+            <Table.Td>{row.email}</Table.Td>
+            <Table.Td>{row.role}</Table.Td>
+            <Table.Td>{row.status}</Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  ),
+};
+
+export const Striped: Story = {
+  render: () => (
+    <Table striped>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Email</Table.Th>
+          <Table.Th>Role</Table.Th>
+          <Table.Th>Status</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {sampleData.map((row, i) => (
+          <Table.Tr key={i}>
+            <Table.Td>{row.name}</Table.Td>
+            <Table.Td>{row.email}</Table.Td>
+            <Table.Td>{row.role}</Table.Td>
+            <Table.Td>{row.status}</Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  ),
+};
+
+export const WithFooter: Story = {
+  render: () => (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Product</Table.Th>
+          <Table.Th>Quantity</Table.Th>
+          <Table.Th>Price</Table.Th>
+          <Table.Th>Total</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        <Table.Tr>
+          <Table.Td>Laptop</Table.Td>
+          <Table.Td>2</Table.Td>
+          <Table.Td>$999.00</Table.Td>
+          <Table.Td>$1,998.00</Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+          <Table.Td>Mouse</Table.Td>
+          <Table.Td>5</Table.Td>
+          <Table.Td>$25.00</Table.Td>
+          <Table.Td>$125.00</Table.Td>
+        </Table.Tr>
+        <Table.Tr>
+          <Table.Td>Keyboard</Table.Td>
+          <Table.Td>3</Table.Td>
+          <Table.Td>$75.00</Table.Td>
+          <Table.Td>$225.00</Table.Td>
+        </Table.Tr>
+      </Table.Tbody>
+      <Table.Tfoot>
+        <Table.Tr>
+          <Table.Td colSpan={3}>Grand Total</Table.Td>
+          <Table.Td>$2,348.00</Table.Td>
+        </Table.Tr>
+      </Table.Tfoot>
+    </Table>
+  ),
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Email</Table.Th>
+          <Table.Th>Role</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        <Table.Tr>
+          <Table.Td colSpan={3} style={{ textAlign: 'center' }}>
+            No data available
+          </Table.Td>
+        </Table.Tr>
+      </Table.Tbody>
+    </Table>
+  ),
+};

package/src/components/Table/Table.test.tsx

@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Table from './Table';
+import React from 'react';
+
+describe('Table', () => {
+  it('renders basic table correctly', async () => {
+    const { container } = await render(
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Name</Table.Th>
+            <Table.Th>Age</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>John</Table.Td>
+            <Table.Td>30</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders striped table correctly', async () => {
+    const { container } = await render(
+      <Table striped>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Name</Table.Th>
+            <Table.Th>Email</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>John</Table.Td>
+            <Table.Td>john@example.com</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>Jane</Table.Td>
+            <Table.Td>jane@example.com</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>Bob</Table.Td>
+            <Table.Td>bob@example.com</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders table with footer correctly', async () => {
+    const { container } = await render(
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Product</Table.Th>
+            <Table.Th>Price</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>Apple</Table.Td>
+            <Table.Td>$1.00</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>Banana</Table.Td>
+            <Table.Td>$0.50</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+        <Table.Tfoot>
+          <Table.Tr>
+            <Table.Td>Total</Table.Td>
+            <Table.Td>$1.50</Table.Td>
+          </Table.Tr>
+        </Table.Tfoot>
+      </Table>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders table with colspan', async () => {
+    const { container } = await render(
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Name</Table.Th>
+            <Table.Th>Details</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>John</Table.Td>
+            <Table.Td colSpan={2}>Full details here</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});