Merge pull request #237 from wojciech-deriv/feature/optional-action

feat: make action in notification optional
deriv-com · Aug 15, 2024 · 65be155 · 65be155
2 parents 6e48db5 + 2bf8f18
commit 65be155
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 13 deletions.
diff --git a/src/components/AppLayout/Notifications/Notification.tsx b/src/components/AppLayout/Notifications/Notification.tsx
@@ -20,11 +20,13 @@ export const Notification = ({
                     </div>
                 </div>
             </div>
-            <div className="notification__button-container">
-                <button className="notification__button" onClick={buttonAction}>
-                    {actionText}
-                </button>
-            </div>
+            {buttonAction && actionText && (
+                <div className="notification__button-container">
+                    <button className="notification__button" onClick={buttonAction}>
+                        {actionText}
+                    </button>
+                </div>
+            )}
         </div>
     );
 };

diff --git a/src/components/AppLayout/Notifications/__test__/notification.spec.tsx b/src/components/AppLayout/Notifications/__test__/notification.spec.tsx
@@ -4,21 +4,48 @@ import { Notification } from "../Notification";
 import userEvent from "@testing-library/user-event";
 
 describe("Notification Component", () => {
-    it("renders the notification with title, message, and button", async () => {
-        const mockAction = jest.fn();
-        const { getByText, getByRole } = render(
+    it("renders the notification with title, message", async () => {
+        const { getByText } = render(
             <Notification
                 icon={<span>Icon</span>}
                 title="Test Title"
                 message="Test message"
-                buttonAction={mockAction}
-                actionText="Click Me"
             />,
         );
 
         // Check if the title and message are in the document
         expect(getByText("Test Title")).toBeInTheDocument();
         expect(getByText("Test message")).toBeInTheDocument();
+    });
+
+    it("renders the action button if buttonAction and actionText are passed", async () => {
+        const mockAction = jest.fn();
+        const { getByRole } = render(
+            <Notification
+                icon={<span>Icon</span>}
+                title="Test Title"
+                message="Test message"
+                buttonAction={mockAction}
+                actionText="Click Me"
+            />,
+        );
+
+        // Check if the button is rendered and clickable
+        const button = getByRole("button", { name: "Click Me" });
+        expect(button).toBeInTheDocument();
+    });
+
+    it("calls the action function when the button is clicked", async () => {
+        const mockAction = jest.fn();
+        const { getByRole } = render(
+            <Notification
+                icon={<span>Icon</span>}
+                title="Test Title"
+                message="Test message"
+                buttonAction={mockAction}
+                actionText="Click Me"
+            />,
+        );
 
         // Check if the button is rendered and clickable
         const button = getByRole("button", { name: "Click Me" });

diff --git a/src/components/AppLayout/Notifications/index.tsx b/src/components/AppLayout/Notifications/index.tsx
@@ -24,7 +24,7 @@ export const Notifications = ({
 
     useOnClickOutside(notificationsRef, (e) => {
         e.stopPropagation();
-        setIsOpen(!isOpen);
+        setIsOpen(false);
     });
 
     return (

diff --git a/src/components/AppLayout/Notifications/types.ts b/src/components/AppLayout/Notifications/types.ts
@@ -4,8 +4,8 @@ export type TNotificationObject = {
     icon: ReactNode;
     title: string;
     message: string;
-    buttonAction: () => void;
-    actionText: string;
+    buttonAction?: () => void;
+    actionText?: string;
 };
 export type TNotificationsProps = ComponentProps<"div"> & {
     notifications: TNotificationObject[];

diff --git a/stories/Notifications.stories.tsx b/stories/Notifications.stories.tsx
@@ -44,6 +44,11 @@ export const Default: Story = {
                 },
                 actionText: "Learn more",
             },
+            {
+                icon: <LegacyAnnouncementIcon width={16} height={16} />,
+                title: "Your account got verified!",
+                message: "Account verification is complete.",
+            },
             {
                 icon: <LegacyAnnouncementIcon width={16} height={16} />,
                 title: "We’d love to hear your thoughts",