@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/atoms/Badge/Badge.stories.tsx

@@ -1,86 +1,288 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Badge from "./Badge";
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import Badge from './Badge';
 
 const meta: Meta<typeof Badge> = {
-  title: "UI/Atoms/Badge",
+  title: 'Atoms/Badge',
   component: Badge,
+  tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
-        component: "A versatile badge component for displaying status, priority, and other labels. Supports multiple variants: success, warning, error, info, and neutral.",
+        component: `
+## Badge
+
+A badge component for displaying status indicators, labels, or counts.
+
+### Events
+
+| Event | Description | Parameters | When Fired |
+|-------|-------------|------------|------------|
+| N/A | Badge é um componente de exibição | - | Não possui eventos de interação |
+
+### States
+
+| State | Description | How to Activate | Visual |
+|-------|-------------|-----------------|--------|
+| \`solid\` | Estilo sólido | \`style="solid"\` | Badge com fundo preenchido |
+| \`outline\` | Estilo outline | \`style="outline"\` | Badge com borda apenas |
+| \`small\` | Tamanho pequeno | \`size="sm"\` | Badge pequeno |
+| \`medium\` | Tamanho médio | \`size="md"\` | Badge médio |
+| \`large\` | Tamanho grande | \`size="lg"\` | Badge grande |
+        `,
       },
     },
   },
   argTypes: {
     variant: {
-      control: "select",
-      options: ["success", "warning", "error", "info", "neutral"],
-      description: "Visual variant of the badge",
+      control: 'select',
+      options: ['success', 'warning', 'error', 'info', 'neutral', 'primary', 'secondary'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
     },
-    children: {
-      control: "text",
-      description: "Content to display inside the badge",
+    style: {
+      control: 'select',
+      options: ['solid', 'outline'],
     },
   },
 };
 
-export const Success: StoryObj<typeof Badge> = {
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
   args: {
-    children: "Success",
-    variant: "success",
+    children: 'Badge',
   },
 };
 
-export const Warning: StoryObj<typeof Badge> = {
-  args: {
-    children: "Warning",
-    variant: "warning",
-  },
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="info">Info</Badge>
+      <Badge variant="neutral">Neutral</Badge>
+      <Badge variant="primary">Primary</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+    </div>
+  ),
 };
 
-export const Error: StoryObj<typeof Badge> = {
-  args: {
-    children: "Error",
-    variant: "error",
-  },
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Badge size="sm">Small</Badge>
+      <Badge size="md">Medium</Badge>
+      <Badge size="lg">Large</Badge>
+    </div>
+  ),
 };
 
-export const Info: StoryObj<typeof Badge> = {
-  args: {
-    children: "Info",
-    variant: "info",
-  },
+export const Styles: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="success" style="solid">Solid</Badge>
+      <Badge variant="success" style="outline">Outline</Badge>
+      <Badge variant="error" style="solid">Solid</Badge>
+      <Badge variant="error" style="outline">Outline</Badge>
+      <Badge variant="info" style="solid">Solid</Badge>
+      <Badge variant="info" style="outline">Outline</Badge>
+    </div>
+  ),
 };
 
-export const Neutral: StoryObj<typeof Badge> = {
-  args: {
-    children: "Neutral",
-    variant: "neutral",
-  },
+export const AllCombinations: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-2">Solid Style</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="success" size="sm">Success</Badge>
+          <Badge variant="warning" size="md">Warning</Badge>
+          <Badge variant="error" size="lg">Error</Badge>
+          <Badge variant="info" size="md">Info</Badge>
+          <Badge variant="primary" size="md">Primary</Badge>
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2">Outline Style</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="success" style="outline" size="sm">Success</Badge>
+          <Badge variant="warning" style="outline" size="md">Warning</Badge>
+          <Badge variant="error" style="outline" size="lg">Error</Badge>
+          <Badge variant="info" style="outline" size="md">Info</Badge>
+          <Badge variant="primary" style="outline" size="md">Primary</Badge>
+        </div>
+      </div>
+    </div>
+  ),
 };
 
-export const AllVariants: StoryObj<typeof Badge> = {
+export const Accessibility: Story = {
   render: () => (
-    <div className="flex gap-2 flex-wrap">
-      <Badge variant="success">Success</Badge>
-      <Badge variant="warning">Warning</Badge>
-      <Badge variant="error">Error</Badge>
-      <Badge variant="info">Info</Badge>
-      <Badge variant="neutral">Neutral</Badge>
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">Badges with proper ARIA labels:</p>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="success" aria-label="Status: Active">Active</Badge>
+          <Badge variant="error" aria-label="Status: Critical">Critical</Badge>
+          <Badge variant="warning" aria-label="Status: Pending">Pending</Badge>
+          <Badge variant="info" aria-label="Status: New">New</Badge>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">Badges with non-string children and explicit aria-label:</p>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="success" aria-label="Status: 5 items">
+            <span>5</span>
+          </Badge>
+          <Badge variant="error" aria-label="Status: 3 errors">
+            <span>3</span>
+          </Badge>
+          <Badge variant="info" aria-label="Status: New notifications">
+            <span>New</span>
+          </Badge>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">Badges with role="status" for screen readers:</p>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="success">Task completed</Badge>
+          <Badge variant="error">Task failed</Badge>
+          <Badge variant="warning">Task in progress</Badge>
+        </div>
+        <p className="text-xs text-gray-500">
+          Screen readers will announce these badges as status updates.
+        </p>
+      </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Examples demonstrating accessibility features: ARIA labels for non-string children, role="status" for screen readers, and proper labeling.',
+      },
+    },
+  },
 };
 
-export const WithCustomContent: StoryObj<typeof Badge> = {
+export const WithNonStringChildren: Story = {
   render: () => (
-    <div className="flex gap-2 flex-wrap">
-      <Badge variant="success">Active</Badge>
-      <Badge variant="error">Critical</Badge>
-      <Badge variant="warning">Pending</Badge>
-      <Badge variant="info">New</Badge>
-      <Badge variant="neutral">Draft</Badge>
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">Badges with ReactNode children:</p>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="success" aria-label="5 items">
+            <span>5</span>
+          </Badge>
+          <Badge variant="error" aria-label="3 errors">
+            <span>3</span>
+          </Badge>
+          <Badge variant="info" aria-label="New notifications">
+            <span>New</span>
+          </Badge>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">Badges with number children:</p>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="primary">{42}</Badge>
+          <Badge variant="secondary">{100}</Badge>
+          <Badge variant="success">{0}</Badge>
+        </div>
+      </div>
+      <p className="text-xs text-gray-500">
+        When children is not a string, provide an explicit aria-label for accessibility.
+      </p>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates how to use badges with non-string children and the importance of providing aria-label for accessibility.',
+      },
+    },
+  },
 };
 
-export default meta;
+// State Stories
+export const SolidState: Story = {
+  args: {
+    children: 'Solid Badge',
+    variant: 'primary',
+    style: 'solid',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Solid state - badge with filled background.',
+      },
+    },
+  },
+};
+
+export const OutlineState: Story = {
+  args: {
+    children: 'Outline Badge',
+    variant: 'primary',
+    style: 'outline',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Outline state - badge with border only, no fill.',
+      },
+    },
+  },
+};
+
+export const SmallState: Story = {
+  args: {
+    children: 'Small Badge',
+    variant: 'primary',
+    size: 'sm',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small state - badge with small size.',
+      },
+    },
+  },
+};
+
+export const MediumState: Story = {
+  args: {
+    children: 'Medium Badge',
+    variant: 'primary',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Medium state - badge with medium size (default).',
+      },
+    },
+  },
+};
+
+export const LargeState: Story = {
+  args: {
+    children: 'Large Badge',
+    variant: 'primary',
+    size: 'lg',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large state - badge with large size.',
+      },
+    },
+  },
+};

package/src/ui/atoms/Badge/Badge.test.tsx

@@ -1,63 +1,152 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Badge from "./Badge";
-
-describe("Badge", () => {
-  it("renders with default variant", () => {
-    render(<Badge>Test Badge</Badge>);
-    const badge = screen.getByText("Test Badge");
-    expect(badge).toBeInTheDocument();
-    expect(badge).toHaveClass("bg-gray-100");
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Badge from './Badge';
+
+describe('Badge', () => {
+  it('renders badge with text', () => {
+    render(<Badge>Status</Badge>);
+    expect(screen.getByText('Status')).toBeInTheDocument();
   });
 
-  it("renders with success variant", () => {
-    render(<Badge variant="success">Success</Badge>);
-    const badge = screen.getByText("Success");
-    expect(badge).toHaveClass("bg-green-100", "text-green-800", "border-green-500");
+  it('applies variant classes', () => {
+    const { container } = render(<Badge variant="success">Active</Badge>);
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('bg-green-300');
   });
 
-  it("renders with warning variant", () => {
-    render(<Badge variant="warning">Warning</Badge>);
-    const badge = screen.getByText("Warning");
-    expect(badge).toHaveClass("bg-yellow-100", "text-yellow-800", "border-yellow-500");
+  it('applies size classes', () => {
+    const { container } = render(<Badge size="sm">Small</Badge>);
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('px-1.5', 'py-0.5', 'text-xs');
   });
 
-  it("renders with error variant", () => {
-    render(<Badge variant="error">Error</Badge>);
-    const badge = screen.getByText("Error");
-    expect(badge).toHaveClass("bg-red-100", "text-red-800", "border-red-500");
+  it('applies outline style', () => {
+    const { container } = render(<Badge variant="success" style="outline">Outline</Badge>);
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('bg-transparent');
   });
 
-  it("renders with info variant", () => {
-    render(<Badge variant="info">Info</Badge>);
-    const badge = screen.getByText("Info");
-    expect(badge).toHaveClass("bg-blue-100", "text-blue-800", "border-blue-500");
+  it('has correct aria-label when children is string', () => {
+    render(<Badge>Status</Badge>);
+    const badge = screen.getByLabelText('Status');
+    expect(badge).toBeInTheDocument();
   });
 
-  it("renders with neutral variant", () => {
-    render(<Badge variant="neutral">Neutral</Badge>);
-    const badge = screen.getByText("Neutral");
-    expect(badge).toHaveClass("bg-gray-100", "text-gray-800", "border-gray-500");
+  it('has role="status"', () => {
+    render(<Badge>Status</Badge>);
+    const badge = screen.getByRole('status');
+    expect(badge).toBeInTheDocument();
   });
 
-  it("applies custom className", () => {
-    render(<Badge className="custom-class">Test</Badge>);
-    const badge = screen.getByText("Test");
-    expect(badge).toHaveClass("custom-class");
+  describe('Accessibility', () => {
+    it('uses explicit aria-label when provided', () => {
+      render(<Badge aria-label="Custom label">Status</Badge>);
+      const badge = screen.getByLabelText('Custom label');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('prefers explicit aria-label over children', () => {
+      render(<Badge aria-label="Custom">Status</Badge>);
+      const badge = screen.getByLabelText('Custom');
+      expect(badge).toBeInTheDocument();
+      // Should not be found by children text when aria-label is provided
+      expect(screen.queryByLabelText('Status')).not.toBeInTheDocument();
+    });
+
+    it('extracts text from nested ReactNode', () => {
+      render(
+        <Badge>
+          <span>Nested Text</span>
+        </Badge>
+      );
+      // When children is not a string, aria-label should be undefined
+      // But the badge should still render
+      const badge = screen.getByRole('status');
+      expect(badge).toBeInTheDocument();
+      expect(badge).toHaveTextContent('Nested Text');
+    });
+
+    it('handles empty children gracefully', () => {
+      render(<Badge aria-label="Empty badge"></Badge>);
+      const badge = screen.getByLabelText('Empty badge');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('handles number children', () => {
+      render(<Badge>{42}</Badge>);
+      const badge = screen.getByRole('status');
+      expect(badge).toBeInTheDocument();
+      expect(badge).toHaveTextContent('42');
+    });
   });
 
-  it("has accessible role and aria-label for string children", () => {
-    render(<Badge>Accessible Badge</Badge>);
-    const badge = screen.getByRole("status");
-    expect(badge).toHaveAttribute("aria-label", "Accessible Badge");
+  describe('Variants', () => {
+    it('renders all variants correctly', () => {
+      const variants: Array<'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary'> = [
+        'success',
+        'warning',
+        'error',
+        'info',
+        'neutral',
+        'primary',
+        'secondary',
+      ];
+
+      variants.forEach((variant) => {
+        const { container } = render(<Badge variant={variant}>{variant}</Badge>);
+        const badge = container.querySelector('span');
+        expect(badge).toBeInTheDocument();
+      });
+    });
+
+    it('renders both solid and outline styles', () => {
+      const { container: solidContainer } = render(<Badge style="solid">Solid</Badge>);
+      const { container: outlineContainer } = render(<Badge style="outline">Outline</Badge>);
+
+      const solidBadge = solidContainer.querySelector('span');
+      const outlineBadge = outlineContainer.querySelector('span');
+
+      expect(solidBadge).toBeInTheDocument();
+      expect(outlineBadge).toBeInTheDocument();
+      expect(outlineBadge).toHaveClass('bg-transparent');
+    });
+  });
+
+  describe('Sizes', () => {
+    it('renders all sizes correctly', () => {
+      const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg'];
+
+      sizes.forEach((size) => {
+        const { container } = render(<Badge size={size}>{size}</Badge>);
+        const badge = container.querySelector('span');
+        expect(badge).toBeInTheDocument();
+      });
+    });
   });
 
-  it("renders with custom children", () => {
-    render(
-      <Badge>
-        <span>Custom Content</span>
-      </Badge>
-    );
-    expect(screen.getByText("Custom Content")).toBeInTheDocument();
+  describe('Edge Cases', () => {
+    it('handles custom className', () => {
+      const { container } = render(<Badge className="custom-class">Custom</Badge>);
+      const badge = container.querySelector('span');
+      expect(badge).toHaveClass('custom-class');
+    });
+
+    it('passes through HTML attributes', () => {
+      render(<Badge data-testid="badge-test" id="badge-id">Test</Badge>);
+      const badge = screen.getByTestId('badge-test');
+      expect(badge).toHaveAttribute('id', 'badge-id');
+    });
+
+    it('handles multiple children', () => {
+      render(
+        <Badge>
+          <span>Part 1</span>
+          <span>Part 2</span>
+        </Badge>
+      );
+      const badge = screen.getByRole('status');
+      expect(badge).toBeInTheDocument();
+      expect(badge).toHaveTextContent('Part 1Part 2');
+    });
   });
 });