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

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

@@ -0,0 +1,155 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const comboboxContainer = styleWithLayer({
+  position: 'relative',
+  width: '100%',
+});
+
+export const comboboxInput = styleWithLayer({
+  width: '100%',
+  padding: '0.75rem 2.5rem 0.75rem 1rem',
+  fontSize: '14px',
+  fontFamily: vars.fontFamily.body,
+  color: vars.colors.textPrimary,
+  backgroundColor: vars.colors.inputBackground,
+  border: `1px solid ${vars.colors.inputBorder}`,
+  borderRadius: '8px',
+  outline: 'none',
+  transition: 'border-color 0.2s ease',
+  '::placeholder': {
+    color: vars.colors.inputPlaceholder,
+  },
+  ':focus-visible': {
+    outline: `2px solid ${vars.colors.inputBorderFocused}`,
+    outlineOffset: '2px',
+  },
+  ':hover': {
+    borderColor: vars.colors.inputBorderFocused,
+  },
+  selectors: {
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+    '&:disabled:hover': {
+      borderColor: vars.colors.inputBorder,
+    },
+  },
+});
+
+export const comboboxInputVariants = styleVariants({
+  default: {},
+  error: {
+    border: `1px solid ${vars.colors.alertErrorBorder}`,
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.alertErrorBorder}`,
+    },
+    ':hover': {
+      borderColor: vars.colors.alertErrorBorder,
+    },
+  },
+});
+
+export const comboboxLabel = styleWithLayer({
+  display: 'block',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  marginBottom: '8px',
+});
+
+export const comboboxDropdown = styleWithLayer({
+  position: 'absolute',
+  top: '100%',
+  left: 0,
+  right: 0,
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '8px',
+  boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  maxHeight: '200px',
+  overflowY: 'auto',
+  zIndex: 50,
+  marginTop: '4px',
+});
+
+export const comboboxOption = styleWithLayer({
+  padding: '0.75rem 1rem',
+  cursor: 'pointer',
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+  transition: 'background-color 0.15s ease',
+  ':hover': {
+    backgroundColor: vars.colors.backgroundMuted,
+  },
+  ':focus-visible': {
+    outline: 'none',
+    backgroundColor: vars.colors.backgroundMuted,
+  },
+});
+
+export const comboboxOptionSelected = styleWithLayer({
+  backgroundColor: vars.colors.buttonBackgroundPrimary,
+  color: vars.colors.buttonTextPrimary,
+  ':hover': {
+    backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+  },
+});
+
+export const comboboxOptionDisabled = styleWithLayer({
+  opacity: 0.5,
+  cursor: 'not-allowed',
+  ':hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+export const comboboxClearButton = styleWithLayer({
+  position: 'absolute',
+  right: '2.5rem',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  padding: '0.25rem',
+  color: vars.colors.textSecondary,
+  fontSize: '16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ':hover': {
+    color: vars.colors.textPrimary,
+  },
+});
+
+export const comboboxArrow = styleWithLayer({
+  position: 'absolute',
+  right: '0.75rem',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  pointerEvents: 'none',
+  color: vars.colors.textSecondary,
+});
+
+export const comboboxNoResults = styleWithLayer({
+  padding: '0.75rem 1rem',
+  fontSize: '14px',
+  color: vars.colors.textSecondary,
+  textAlign: 'center',
+});
+
+export const comboboxHint = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.textSecondary,
+  marginTop: '4px',
+});
+
+export const comboboxErrorMessage = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.alertErrorText,
+  marginTop: '4px',
+});

package/src/components/Container/Container.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { Container } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/Container',
+  component: Container,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Container>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DemoContent = () => (
+  <Box 
+    padding="large" 
+    background="c3-100" 
+    style={{ textAlign: 'center' }}
+  >
+    Container Content
+  </Box>
+);
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: <DemoContent />,
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    children: <DemoContent />,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: <DemoContent />,
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    size: 'xl',
+    children: <DemoContent />,
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    size: 'full',
+    children: <DemoContent />,
+  },
+};
+
+export const LeftAligned: Story = {
+  args: {
+    size: 'md',
+    centerContent: false,
+    children: <DemoContent />,
+  },
+};

package/src/components/Container/Container.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Container from './Container';
+import React from 'react';
+
+describe('Container', () => {
+  it('renders with small size', async () => {
+    const { container } = await render(
+      <Container size="sm">
+        <div>Small container content</div>
+      </Container>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with medium size', async () => {
+    const { container } = await render(
+      <Container size="md">
+        <div>Medium container content</div>
+      </Container>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with large size', async () => {
+    const { container } = await render(
+      <Container size="lg">
+        <div>Large container content</div>
+      </Container>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with full width', async () => {
+    const { container } = await render(
+      <Container size="full" centerContent={false}>
+        <div>Full width content</div>
+      </Container>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Container/Container.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import Box from '../Box';
+
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface ContainerProps {
+  size?: ContainerSize;
+  centerContent?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const sizeMap: Record<ContainerSize, string> = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  full: '100%',
+};
+
+const Container = forwardRef<HTMLElement, ContainerProps>(
+  ({ size = 'lg', centerContent = true, children, className, style }, ref) => {
+    const sizeValue: ContainerSize = size;
+
+    const containerStyle: React.CSSProperties = {
+      maxWidth: sizeMap[sizeValue],
+      marginLeft: centerContent ? 'auto' : undefined,
+      marginRight: centerContent ? 'auto' : undefined,
+    };
+
+    return (
+      <Box
+        ref={ref}
+        width="100%"
+        className={className}
+        style={{ ...containerStyle, ...style }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);
+
+Container.displayName = 'Container';
+
+export default Container;

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Divider } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Divider',
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          width: '100%',
+          maxWidth: '600px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    orientation: 'horizontal',
+    size: 'medium',
+  },
+  render: () => (
+    <div>
+      <p>Content above divider</p>
+      <Divider />
+      <p>Content below divider</p>
+    </div>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <div>
+      <p>Content above divider</p>
+      <Divider size="small" />
+      <p>Content below divider</p>
+    </div>
+  ),
+};
+
+export const Medium: Story = {
+  render: () => (
+    <div>
+      <p>Content above divider</p>
+      <Divider size="medium" />
+      <p>Content below divider</p>
+    </div>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <div>
+      <p>Content above divider</p>
+      <Divider size="large" />
+      <p>Content below divider</p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <span>Left content</span>
+      <Divider orientation="vertical" />
+      <span>Right content</span>
+    </div>
+  ),
+};
+
+export const VerticalSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <span>Small:</span>
+      <Divider orientation="vertical" size="small" />
+      <span>Content</span>
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div>
+      <p>Section 1</p>
+      <Divider />
+      <p>Section 2</p>
+      <Divider size="small" />
+      <p>Section 3</p>
+      <Divider size="large" />
+      <p>Section 4</p>
+    </div>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <div>
+      <h3>Section Title</h3>
+      <Divider />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <Divider />
+      <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+  ),
+};

package/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Divider from './Divider';
+import React from 'react';
+
+describe('Divider', () => {
+  it('renders horizontal divider correctly', async () => {
+    const { container } = await render(<Divider />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders small divider correctly', async () => {
+    const { container } = await render(<Divider size="small" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders medium divider correctly', async () => {
+    const { container } = await render(<Divider size="medium" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders large divider correctly', async () => {
+    const { container } = await render(<Divider size="large" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders vertical divider correctly', async () => {
+    const { container } = await render(
+      <div style={{ display: 'flex', height: '100px' }}>
+        <Divider orientation="vertical" />
+      </div>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders hr element with proper attributes', async () => {
+    const { container } = await render(<Divider />);
+    const divider = container.querySelector('hr');
+    expect(divider).toBeInTheDocument();
+    expect(divider.tagName).toBe('HR');
+  });
+
+  it('applies orientation correctly', async () => {
+    const { getByRole } = await render(<Divider orientation="vertical" />);
+    const divider = getByRole('separator');
+    expect(divider).toHaveAttribute('aria-orientation', 'vertical');
+  });
+
+  it('renders with custom className', async () => {
+    const { getByRole } = await render(
+      <Divider className="custom-divider" />,
+    );
+    const divider = getByRole('separator');
+    expect(divider).toHaveClass('custom-divider');
+  });
+});

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+import {
+  divider,
+  dividerOrientations,
+  dividerSizes,
+  dividerVerticalSizes,
+} from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerSize = 'small' | 'medium' | 'large';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+  orientation?: DividerOrientation;
+  size?: DividerSize;
+}
+
+const Divider = ({
+  orientation = 'horizontal',
+  size = 'medium',
+  ...props
+}: DividerProps) => {
+  return (
+    <Box
+      as="hr"
+      className={clsx(
+        divider,
+        dividerOrientations[orientation],
+        orientation === 'vertical' ? dividerVerticalSizes[size] : dividerSizes[size],
+        props.className,
+      )}
+      role="separator"
+      aria-orientation={orientation}
+      {...props}
+    />
+  );
+};
+
+export default Divider;

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

@@ -0,0 +1,45 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const dividerOrientations = styleVariants({
+  horizontal: {
+    width: '100%',
+    height: '1px',
+    borderTop: `1px solid ${vars.colors.borderMuted}`,
+  },
+  vertical: {
+    width: '1px',
+    height: '100%',
+    borderLeft: `1px solid ${vars.colors.borderMuted}`,
+  },
+});
+
+export const dividerSizes = styleVariants({
+  small: {
+    margin: '0.5rem 0',
+  },
+  medium: {
+    margin: '1rem 0',
+  },
+  large: {
+    margin: '1.5rem 0',
+  },
+});
+
+export const divider = styleWithLayer({
+  border: 'none',
+  flexShrink: 0,
+});
+
+export const dividerVerticalSizes = styleVariants({
+  small: {
+    margin: '0 0.5rem',
+  },
+  medium: {
+    margin: '0 1rem',
+  },
+  large: {
+    margin: '0 1.5rem',
+  },
+});

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+
+import { Drawer } from '.';
+
+const meta = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  args: { onClose: fn() },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Left: Story = {
+  args: {
+    isOpen: true,
+    position: 'left',
+    title: 'Left Drawer',
+    children: 'This drawer slides in from the left side.',
+  },
+};
+
+export const Right: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    title: 'Right Drawer',
+    children: 'This drawer slides in from the right side.',
+  },
+};
+
+export const Top: Story = {
+  args: {
+    isOpen: true,
+    position: 'top',
+    title: 'Top Drawer',
+    children: 'This drawer slides in from the top.',
+  },
+};
+
+export const Bottom: Story = {
+  args: {
+    isOpen: true,
+    position: 'bottom',
+    title: 'Bottom Drawer',
+    children: 'This drawer slides in from the bottom.',
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    title: 'Drawer with Footer',
+    children: 'This drawer has a footer with action buttons.',
+    footer: (
+      <>
+        <button>Cancel</button>
+        <button>Save</button>
+      </>
+    ),
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    size: 'small',
+    title: 'Small Drawer',
+    children: 'This is a small drawer.',
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    size: 'large',
+    title: 'Large Drawer',
+    children: 'This is a large drawer.',
+  },
+};
+
+export const FullSize: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    size: 'full',
+    title: 'Full Drawer',
+    children: 'This drawer takes up the full width.',
+  },
+};