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

package/src/components/Avatar/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 avatar = styleVariants({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  small: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    width: '24px',
+    height: '24px',
+    fontSize: '12px',
+    borderRadius: '12px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  medium: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    width: '32px',
+    height: '32px',
+    fontSize: '14px',
+    borderRadius: '16px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  large: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    width: '40px',
+    height: '40px',
+    fontSize: '16px',
+    borderRadius: '20px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  xlarge: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    width: '64px',
+    height: '64px',
+    fontSize: '24px',
+    borderRadius: '32px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+});
+
+export const avatarImage = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+});
+
+export const avatarWithImage = styleVariants({
+  small: {
+    width: '24px',
+    height: '24px',
+    borderRadius: '12px',
+    overflow: 'hidden',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  medium: {
+    width: '32px',
+    height: '32px',
+    borderRadius: '16px',
+    overflow: 'hidden',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  large: {
+    width: '40px',
+    height: '40px',
+    borderRadius: '20px',
+    overflow: 'hidden',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  xlarge: {
+    width: '64px',
+    height: '64px',
+    borderRadius: '32px',
+    overflow: 'hidden',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+});
+
+export const avatarWrapper = styleWithLayer({
+  display: 'inline-flex',
+});

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Badge } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+          alignItems: 'flex-start',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default Badge',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'Success',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'Warning',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children: 'Error',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    children: 'Info',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    children: 'Small Badge',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+    children: 'Medium Badge',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    children: 'Large Badge',
+  },
+};
+
+export const Dot: Story = {
+  args: {
+    dot: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <>
+      <Badge variant="default">Default</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="info">Info</Badge>
+    </>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <>
+      <Badge size="small">Small</Badge>
+      <Badge size="medium">Medium</Badge>
+      <Badge size="large">Large</Badge>
+    </>
+  ),
+};
+
+export const AllDots: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+      <Badge variant="default" dot />
+      <Badge variant="success" dot />
+      <Badge variant="warning" dot />
+      <Badge variant="error" dot />
+      <Badge variant="info" dot />
+    </div>
+  ),
+};
+
+export const Combined: Story = {
+  render: () => (
+    <>
+      <Badge variant="default" size="small">
+        Small Default
+      </Badge>
+      <Badge variant="success" size="medium">
+        Medium Success
+      </Badge>
+      <Badge variant="error" size="large">
+        Large Error
+      </Badge>
+    </>
+  ),
+};

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/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './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',
+  },
+});