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

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Toggle } from '.';
+import React, { useState } from 'react';
+
+const meta = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.5rem',
+          alignItems: 'flex-start',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        label="Notifications"
+      />
+    );
+  },
+};
+
+export const Checked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        label="Enabled"
+      />
+    );
+  },
+};
+
+export const Unchecked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        label="Disabled"
+      />
+    );
+  },
+};
+
+export const Small: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        size="small"
+        label="Small toggle"
+      />
+    );
+  },
+};
+
+export const Medium: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        size="medium"
+        label="Medium toggle"
+      />
+    );
+  },
+};
+
+export const Large: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        size="large"
+        label="Large toggle"
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        label="Disabled toggle"
+        disabled
+      />
+    );
+  },
+};
+
+export const DisabledChecked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        label="Disabled checked"
+        disabled
+      />
+    );
+  },
+};
+
+export const WithOnChange: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+      <Toggle
+        checked={checked}
+        onChange={setChecked}
+        label={`Toggle is ${checked ? 'ON' : 'OFF'}`}
+      />
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => {
+    const [small, setSmall] = useState(false);
+    const [medium, setMedium] = useState(true);
+    const [large, setLarge] = useState(false);
+    return (
+      <>
+        <Toggle size="small" label="Small" checked={small} onChange={setSmall} />
+        <Toggle size="medium" label="Medium" checked={medium} onChange={setMedium} />
+        <Toggle size="large" label="Large" checked={large} onChange={setLarge} />
+      </>
+    );
+  },
+};
+
+export const WithLabels: Story = {
+  render: () => {
+    const [darkMode, setDarkMode] = useState(true);
+    const [notifications, setNotifications] = useState(false);
+    const [autoSave, setAutoSave] = useState(true);
+    return (
+      <>
+        <Toggle checked={darkMode} onChange={setDarkMode} label="Dark Mode" />
+        <Toggle checked={notifications} onChange={setNotifications} label="Notifications" />
+        <Toggle checked={autoSave} onChange={setAutoSave} label="Auto-save" />
+      </>
+    );
+  },
+};
+
+export const NoLabel: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <Toggle checked={checked} onChange={setChecked} />;
+  },
+};

package/src/components/Toggle/Toggle.test.tsx

@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Toggle from './Toggle';
+import React from 'react';
+
+describe('Toggle', () => {
+  it('renders unchecked toggle correctly', async () => {
+    const { container } = await render(<Toggle />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders checked toggle correctly', async () => {
+    const { container } = await render(<Toggle checked />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders small toggle correctly', async () => {
+    const { container } = await render(<Toggle size="small" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders medium toggle correctly', async () => {
+    const { container } = await render(<Toggle size="medium" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders large toggle correctly', async () => {
+    const { container } = await render(<Toggle size="large" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with label', async () => {
+    const { container } = await render(<Toggle label="Toggle Label" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders disabled toggle correctly', async () => {
+    const { container } = await render(<Toggle disabled />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('handles onChange correctly', async () => {
+    let checked = false;
+    const handleChange = (newChecked: boolean) => {
+      checked = newChecked;
+    };
+    const { container } = await render(<Toggle onChange={handleChange} />);
+    const label = container.querySelector('label');
+    if (label) {
+      await label.click();
+    }
+    expect(checked).toBe(true);
+  });
+
+  it('does not change when disabled', async () => {
+    const checked = false;
+    const handleChange = () => {};
+    const { container } = await render(<Toggle onChange={handleChange} disabled />);
+    const label = container.querySelector('label');
+    if (label) {
+      await label.click();
+    }
+    expect(checked).toBe(false);
+  });
+
+  it('has proper role attribute', async () => {
+    const { getByRole } = await render(<Toggle />);
+    const input = getByRole('switch');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('role', 'switch');
+  });
+
+  it('has proper aria-checked attribute', async () => {
+    const { getByRole } = await render(<Toggle checked={true} />);
+    const input = getByRole('switch');
+    expect(input).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('has proper id when provided', async () => {
+    const { container } = await render(<Toggle id="custom-toggle" />);
+    const label = container.querySelector('label');
+    expect(label).toBeInTheDocument();
+    expect(label?.querySelector('input')).toHaveAttribute('id', 'custom-toggle');
+  });
+});

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,94 @@
+import clsx from 'clsx';
+import {
+  toggle,
+  toggleLabel,
+  toggleInput,
+  toggleTrack,
+  toggleTrackChecked,
+  toggleTrackUnchecked,
+  toggleThumb,
+  toggleThumbSizes,
+  toggleThumbChecked,
+  toggleThumbUnchecked,
+  toggleFocusRing,
+  toggleSizes,
+} from './styles.css';
+import React, { useState, useId } from 'react';
+import Box from '../Box';
+
+export type ToggleSize = 'small' | 'medium' | 'large';
+
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'checked' | 'onChange'> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: ToggleSize;
+  label?: string;
+}
+
+const Toggle = ({
+  checked = false,
+  onChange,
+  size = 'medium',
+  label,
+  disabled = false,
+  id,
+  ...props
+}: ToggleProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const generatedId = useId();
+  const toggleId = id || `toggle-${generatedId}`;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!disabled && onChange) {
+      onChange((e.target as HTMLInputElement).checked);
+    }
+  };
+
+  return (
+    <Box as="div" className={toggle}>
+      <Box as="label" htmlFor={toggleId} className={toggleLabel}>
+        <Box
+          as="input"
+          type="checkbox"
+          id={toggleId}
+          checked={checked}
+          onChange={handleChange}
+          disabled={disabled}
+          className={toggleInput}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          aria-checked={checked}
+          role="switch"
+          {...props}
+        />
+        <Box
+          as="span"
+          className={clsx(
+            toggleTrack,
+            toggleSizes[size],
+            checked ? toggleTrackChecked : toggleTrackUnchecked,
+          )}
+          data-size={size}
+        >
+          <Box
+            as="span"
+            className={clsx(
+              toggleThumb,
+              toggleThumbSizes[size],
+              checked ? toggleThumbChecked : toggleThumbUnchecked,
+            )}
+          />
+        </Box>
+        <Box
+          as="span"
+          className={toggleFocusRing}
+          data-focused={isFocused}
+          aria-hidden="true"
+        />
+      </Box>
+      {label && <Box as="span" marginLeft="small">{label}</Box>}
+    </Box>
+  );
+};
+
+export default Toggle;

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { default as Toggle } from './Toggle';
+export type { ToggleProps, ToggleSize } from './Toggle';

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

@@ -0,0 +1,130 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const toggleSizes = styleVariants({
+  small: {
+    width: '1.5rem',
+    height: '0.75rem',
+  },
+  medium: {
+    width: '2rem',
+    height: '1rem',
+  },
+  large: {
+    width: '2.5rem',
+    height: '1.25rem',
+  },
+});
+
+export const toggleLabel = styleWithLayer({
+  display: 'inline-flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+});
+
+export const toggle = styleWithLayer({
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  selectors: {
+    '&:has(input:disabled)': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+  },
+});
+
+export const toggleInput = styleWithLayer({
+  position: 'absolute',
+  opacity: 0,
+  width: 0,
+  height: 0,
+  cursor: 'pointer',
+});
+
+export const toggleTrack = styleWithLayer({
+  borderRadius: '9999px',
+  transition: 'background-color 0.2s ease-in-out',
+  backgroundColor: vars.colors.borderDefault,
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  selectors: {
+    '&:hover': {
+      backgroundColor: vars.colors.borderMuted,
+    },
+  },
+});
+
+export const toggleTrackChecked = styleWithLayer({
+  backgroundColor: vars.colors.buttonBackgroundPrimary,
+  selectors: {
+    '&:hover': {
+      backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+    },
+  },
+});
+
+export const toggleTrackUnchecked = styleWithLayer({
+  backgroundColor: vars.colors.borderDefault,
+});
+
+export const toggleThumb = styleWithLayer({
+  borderRadius: '50%',
+  backgroundColor: vars.colors.backgroundDefault,
+  position: 'absolute',
+  transition: 'transform 0.2s ease-in-out, background-color 0.2s ease-in-out',
+  top: '50%',
+  left: '0',
+  transform: 'translateY(-50%)',
+});
+
+export const toggleThumbSizes = styleVariants({
+  small: {
+    width: '0.5rem',
+    height: '0.5rem',
+  },
+  medium: {
+    width: '0.75rem',
+    height: '0.75rem',
+  },
+  large: {
+    width: '1rem',
+    height: '1rem',
+  },
+});
+
+export const toggleThumbChecked = styleWithLayer({
+  transform: 'translateY(-50%) translateX(1.25rem)',
+  backgroundColor: vars.colors.backgroundDefault,
+  selectors: {
+    '[data-size="small"] &': {
+      transform: 'translateY(-50%) translateX(1rem)',
+    },
+    '[data-size="large"] &': {
+      transform: 'translateY(-50%) translateX(1.5rem)',
+    },
+  },
+});
+
+export const toggleThumbUnchecked = styleWithLayer({
+  transform: 'translateY(-50%) translateX(0)',
+  backgroundColor: vars.colors.backgroundDefault,
+});
+
+export const toggleFocusRing = styleWithLayer({
+  position: 'absolute',
+  inset: '-0.25rem',
+  borderRadius: '0.5rem',
+  pointerEvents: 'none',
+  opacity: 0,
+  transition: 'opacity 0.2s ease-in-out',
+  boxShadow: `0 0 0 3px ${vars.colors.buttonBackgroundPrimary}`,
+  selectors: {
+    '[data-focused="true"] &': {
+      opacity: 1,
+    },
+  },
+});

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Tooltip } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '2rem',
+          alignItems: 'center',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: 'This is a tooltip',
+    children: <button>Hover me</button>,
+  },
+};
+
+export const Top: Story = {
+  args: {
+    content: 'Tooltip on top',
+    position: 'top',
+    children: <button>Hover me</button>,
+  },
+};
+
+export const Bottom: Story = {
+  args: {
+    content: 'Tooltip on bottom',
+    position: 'bottom',
+    children: <button>Hover me</button>,
+  },
+};
+
+export const Left: Story = {
+  args: {
+    content: 'Tooltip on left',
+    position: 'left',
+    children: <button>Hover me</button>,
+  },
+};
+
+export const Right: Story = {
+  args: {
+    content: 'Tooltip on right',
+    position: 'right',
+    children: <button>Hover me</button>,
+  },
+};
+
+export const WithArrow: Story = {
+  args: {
+    content: 'Tooltip with arrow',
+    showArrow: true,
+    children: <button>Hover me</button>,
+  },
+};
+
+export const WithoutArrow: Story = {
+  args: {
+    content: 'Tooltip without arrow',
+    showArrow: false,
+    children: <button>Hover me</button>,
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    content: 'This is a much longer tooltip text to test how it handles extended content',
+    children: <button>Hover me</button>,
+  },
+};
+
+export const MultiplePositions: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '2rem' }}>
+      <Tooltip content="Top tooltip" position="top">
+        <button>Top</button>
+      </Tooltip>
+      <Tooltip content="Bottom tooltip" position="bottom">
+        <button>Bottom</button>
+      </Tooltip>
+      <Tooltip content="Left tooltip" position="left">
+        <button>Left</button>
+      </Tooltip>
+      <Tooltip content="Right tooltip" position="right">
+        <button>Right</button>
+      </Tooltip>
+    </div>
+  ),
+};

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Tooltip from './Tooltip';
+import React from 'react';
+
+describe('Tooltip', () => {
+  it('renders top tooltip correctly', async () => {
+    const { container } = await render(
+      <Tooltip content="Test tooltip">
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders bottom tooltip correctly', async () => {
+    const { container } = await render(
+      <Tooltip content="Test tooltip" position="bottom">
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders left tooltip correctly', async () => {
+    const { container } = await render(
+      <Tooltip content="Test tooltip" position="left">
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders right tooltip correctly', async () => {
+    const { container } = await render(
+      <Tooltip content="Test tooltip" position="right">
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders tooltip without arrow', async () => {
+    const { container } = await render(
+      <Tooltip content="Test tooltip" showArrow={false}>
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with tooltip content', async () => {
+    const { container } = await render(
+      <Tooltip content="Tooltip text">
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent('Tooltip text');
+  });
+
+  it('renders children correctly', async () => {
+    const { getByText } = await render(
+      <Tooltip content="Tooltip text">
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    const button = getByText('Hover me');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('has proper role attribute', async () => {
+    const { container } = await render(
+      <Tooltip content="Tooltip text">
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]');
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveAttribute('role', 'tooltip');
+  });
+
+  it('shows tooltip on hover', async () => {
+    const { container } = await render(
+      <Tooltip content="Tooltip text">
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    const tooltip = container.querySelector('[role="tooltip"]');
+    expect(tooltip).toHaveAttribute('data-visible', 'false');
+  });
+});