[PB-3867]:Feat/handle close circle button

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

src/components/buttonCircle/CircleButton.tsx

@@ -1,5 +1,5 @@
 import { CaretUp, Warning } from '@phosphor-icons/react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
 type ButtonVariant = 'default' | 'warning' | 'cancel';
 
@@ -15,6 +15,9 @@ export interface CircleButtonProps {
     icon?: JSX.Element;
     className?: string;
   };
+  isOpen?: boolean;
+  handleOpen?: () => void;
+  handleClose?: () => void;
 }
 
 const CircleButton = ({
@@ -26,16 +29,17 @@ const CircleButton = ({
   className = '',
   dropdown,
   indicator,
+  isOpen = false,
+  handleOpen = () => {},
+  handleClose = () => {},
 }: CircleButtonProps): JSX.Element => {
-  const [isOpen, setIsOpen] = useState(false);
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (isOpen) {
         const target = event.target as HTMLElement;
         const circleButton = document.querySelector(`[data-circle-button="${variant}"]`);
         if (circleButton && !circleButton.contains(target)) {
-          setIsOpen(false);
+          handleClose();
         }
       }
     };
@@ -50,7 +54,7 @@ const CircleButton = ({
     e.stopPropagation();
     if (dropdown) {
       onClickToggleButton?.();
-      setIsOpen(!isOpen);
+      isOpen ? handleClose() : handleOpen();
     }
   };
 

src/components/buttonCircle/__test__/CircleButton.test.tsx

@@ -1,6 +1,6 @@
 import { CaretUp } from '@phosphor-icons/react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import CircleButton from '../CircleButton';
 
@@ -82,16 +82,36 @@ describe('CircleButton component', () => {
   });
 
   it('should show dropdown content when toggle is clicked', () => {
-    const dropdown = <div>Dropdown Content</div>;
-    render(<CircleButton dropdown={dropdown} />);
+    const TestComponent = () => {
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        <CircleButton
+          dropdown={<div>Dropdown Content</div>}
+          isOpen={isOpen}
+          handleClose={() => setIsOpen(false)}
+          handleOpen={() => setIsOpen(true)}
+        />
+      );
+    };
+    render(<TestComponent />);
     const toggleButton = screen.getAllByRole('button')[1];
     fireEvent.click(toggleButton);
     expect(screen.getByText('Dropdown Content')).toBeInTheDocument();
   });
 
   it('should handle dropdown visibility correctly', () => {
-    const dropdown = <div>Dropdown Content</div>;
-    render(<CircleButton dropdown={dropdown} />);
+    const TestComponent = () => {
+      const [isOpen, setIsOpen] = useState(false);
+      return (
+        <CircleButton
+          dropdown={<div>Dropdown Content</div>}
+          isOpen={isOpen}
+          handleClose={() => setIsOpen(false)}
+          handleOpen={() => setIsOpen(true)}
+        />
+      );
+    };
+    render(<TestComponent />);
     const toggleButton = screen.getAllByRole('button')[1];
 
     // Open dropdown

src/stories/components/buttonCircle/ButtonCircle.stories.tsx

@@ -1,6 +1,7 @@
 import { CircleButton } from '@/components/buttonCircle';
 import { Camera, ExclamationMark, Microphone, User, X } from '@phosphor-icons/react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 
 const meta = {
   title: 'Components/CircleButton',
@@ -32,6 +33,17 @@ export const Default: Story = {
     onClick: () => console.log('clicked'),
     dropdown: <ExampleDropdown />,
   },
+  render: () => {
+    const [isOpenVideo, setIsOpenVideo] = useState(false);
+    return (
+      <CircleButton
+        {...Default.args}
+        isOpen={isOpenVideo}
+        handleClose={() => setIsOpenVideo(false)}
+        handleOpen={() => setIsOpenVideo(true)}
+      />
+    );
+  },
 };
 
 export const Active: Story = {
@@ -42,6 +54,17 @@ export const Active: Story = {
     onClick: () => console.log('clicked'),
     dropdown: <ExampleDropdown />,
   },
+  render: () => {
+    const [isOpenVideo, setIsOpenVideo] = useState(false);
+    return (
+      <CircleButton
+        {...Active.args}
+        isOpen={isOpenVideo}
+        handleClose={() => setIsOpenVideo(false)}
+        handleOpen={() => setIsOpenVideo(true)}
+      />
+    );
+  },
 };
 
 export const WithWarning: Story = {
@@ -73,30 +96,57 @@ export const CancelButton: Story = {
 };
 
 export const ButtonGroup: Story = {
-  render: () => (
-    <div className="flex space-x-2">
-      <CircleButton
-        variant="default"
-        active={false}
-        onClick={() => console.log('video clicked')}
-        dropdown={<ExampleDropdown />}
-      >
-        <Camera size={20} color="white" weight="bold" />
-      </CircleButton>
-      <CircleButton
-        variant="default"
-        active={false}
-        onClick={() => console.log('audio clicked')}
-        dropdown={<ExampleDropdown />}
-      >
-        <Microphone size={20} color="white" weight="bold" />
-      </CircleButton>
-      <CircleButton variant="default" active={false} onClick={() => console.log('user clicked')}>
-        <User size={20} color="white" weight="bold" />
-      </CircleButton>
-      <CircleButton variant="cancel" onClick={() => console.log('close clicked')}>
-        <X size={20} color="white" weight="bold" />
-      </CircleButton>
-    </div>
-  ),
+  args: {
+    isOpen: false,
+    handleOpen: () => {},
+    handleClose: () => {},
+  },
+  render: () => {
+    const [isOpenVideo, setIsOpenVideo] = useState(false);
+    const [isOpenAudio, setIsOpenAudio] = useState(false);
+    return (
+      <div className="flex space-x-2">
+        <CircleButton
+          variant="default"
+          active={false}
+          onClick={() => console.log('video clicked')}
+          dropdown={<ExampleDropdown />}
+          isOpen={isOpenVideo}
+          handleClose={() => {
+            setIsOpenVideo(false);
+            setIsOpenAudio(false);
+          }}
+          handleOpen={() => {
+            setIsOpenVideo(true);
+            setIsOpenAudio(false);
+          }}
+        >
+          <Camera size={20} color="white" weight="bold" />
+        </CircleButton>
+        <CircleButton
+          variant="default"
+          active={false}
+          onClick={() => console.log('audio clicked')}
+          dropdown={<ExampleDropdown />}
+          isOpen={isOpenAudio}
+          handleClose={() => {
+            setIsOpenAudio(false);
+            setIsOpenVideo(false);
+          }}
+          handleOpen={() => {
+            setIsOpenAudio(true);
+            setIsOpenVideo(false);
+          }}
+        >
+          <Microphone size={20} color="white" weight="bold" />
+        </CircleButton>
+        <CircleButton variant="default" active={false} onClick={() => console.log('user clicked')}>
+          <User size={20} color="white" weight="bold" />
+        </CircleButton>
+        <CircleButton variant="cancel" onClick={() => console.log('close clicked')}>
+          <X size={20} color="white" weight="bold" />
+        </CircleButton>
+      </div>
+    );
+  },
 };