@arbor-education/design-system.components 0.25.9 → 1.0.0

package/src/components/pill/Pill.test.tsx

@@ -49,22 +49,93 @@ describe('Pill', () => {
     expect(checkbox).not.toBeChecked();
   });
 
-  it('calls onclick callback with correct checked value', () => {
+  it('calls onChange callback with correct checked value', () => {
     const onClick = vi.fn();
-    render(<Pill text="Test Pill" onclick={onClick} />);
+    render(<Pill text="Test Pill" onChange={onClick} />);
     fireEvent.click(screen.getByText('Test Pill'));
     expect(onClick).toHaveBeenCalledWith(true);
     fireEvent.click(screen.getByText('Test Pill'));
     expect(onClick).toHaveBeenCalledWith(false);
   });
 
+  it('does not call onChange on mount', () => {
+    const onChange = vi.fn();
+    render(<Pill text="Test Pill" initialValue={true} onChange={onChange} />);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it('toggles checked state on pill click (with initialState prop set)', () => {
     const onClick = vi.fn();
-    render(<Pill text="Test Pill" initialValue={true} onclick={onClick} />);
+    render(<Pill text="Test Pill" initialValue={true} onChange={onClick} />);
     const pill = screen.getByText('Test Pill').closest('.ds-pill');
     expect(pill).toHaveClass('ds-pill__active');
     fireEvent.click(screen.getByText('Test Pill'));
     expect(pill).toHaveClass('ds-pill__inactive');
     fireEvent.click(screen.getByText('Test Pill'));
   });
+
+  describe('uncontrolled (initialValue)', () => {
+    it('starts inactive by default', () => {
+      render(<Pill text="Test Pill" />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__inactive');
+    });
+
+    it('starts active when initialValue={true}', () => {
+      render(<Pill text="Test Pill" initialValue />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__active');
+    });
+
+    it('ignores subsequent changes to initialValue — pill owns its own state after mount', () => {
+      const { rerender } = render(<Pill text="Test Pill" initialValue={false} />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__inactive');
+      rerender(<Pill text="Test Pill" initialValue={true} />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__inactive');
+    });
+  });
+
+  describe('controlled (checked)', () => {
+    it('renders as active when checked={true}', () => {
+      render(<Pill text="Test Pill" checked={true} />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__active');
+    });
+
+    it('renders as inactive when checked={false}', () => {
+      render(<Pill text="Test Pill" checked={false} />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__inactive');
+    });
+
+    it('syncs to checked prop when it changes', () => {
+      const { rerender } = render(<Pill text="Test Pill" checked={false} />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__inactive');
+      rerender(<Pill text="Test Pill" checked={true} />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__active');
+      rerender(<Pill text="Test Pill" checked={false} />);
+      expect(screen.getByText('Test Pill')).toHaveClass('ds-pill__inactive');
+    });
+
+    it('fires onChange when clicked so the parent can update its state', () => {
+      const onChange = vi.fn();
+      render(<Pill text="Test Pill" checked={false} onChange={onChange} />);
+      fireEvent.click(screen.getByText('Test Pill'));
+      expect(onChange).toHaveBeenCalledWith(true);
+    });
+
+    it('does not call onChange when the checked prop changes externally', () => {
+      const onChange = vi.fn();
+      const { rerender } = render(<Pill text="Test Pill" checked={false} onChange={onChange} />);
+      rerender(<Pill text="Test Pill" checked={true} onChange={onChange} />);
+      rerender(<Pill text="Test Pill" checked={false} onChange={onChange} />);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('reflects checked prop in checkbox mode', () => {
+      const { rerender } = render(<Pill text="Test Pill" checkbox checked={false} />);
+      const pill = screen.getByText('Test Pill').closest('.ds-pill');
+      expect(pill).toHaveClass('ds-pill__unchecked');
+      expect(screen.getByRole('checkbox')).not.toBeChecked();
+      rerender(<Pill text="Test Pill" checkbox checked={true} />);
+      expect(pill).toHaveClass('ds-pill__checked');
+      expect(screen.getByRole('checkbox')).toBeChecked();
+    });
+  });
 });

package/src/components/pill/Pill.tsx

@@ -6,27 +6,42 @@ type PillProps = {
   text: string;
   initialValue?: boolean;
   checkbox?: boolean;
-  onclick?: (checked: boolean) => void;
+  onChange?: (checked: boolean) => void;
+  checked?: boolean;
 };
 
-export const Pill = ({ text, checkbox, onclick, initialValue = false }: PillProps) => {
-  const [checked, setChecked] = useState(initialValue);
+export const Pill = (props: PillProps) => {
+  const {
+    text,
+    checkbox,
+    onChange,
+    initialValue = false,
+    checked: controlledChecked,
+  } = props;
+
+  const [checked, setChecked] = useState(controlledChecked ?? initialValue);
+
+  useEffect(() => {
+    if (typeof controlledChecked !== 'undefined') {
+      setChecked(!!controlledChecked);
+    }
+  }, [controlledChecked]);
+
+  const toggle = () => {
+    const next = !checked;
+    setChecked(next);
+    onChange?.(next);
+  };
 
   const handlePillClick = () => {
-    setChecked(prev => !prev);
+    toggle();
   };
 
   const handleCheckboxClick = (event: React.MouseEvent) => {
     event.stopPropagation();
-    setChecked(prev => !prev);
+    toggle();
   };
 
-  useEffect(() => {
-    if (onclick) {
-      onclick(checked);
-    }
-  }, [checked, onclick]);
-
   return (
     <span
       onClick={handlePillClick}