From b1b01ed383c59ecf0f4001f06b3ccf08b15a270d Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Fri, 25 Aug 2023 20:50:39 +0800
Subject: [PATCH] remove close button from TopBanner (#10705)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com>
---
 .../ui/components/top-banner/TopBanner.tsx    | 21 +++------
 .../components/top-banner/topBanner.test.tsx  | 45 +++++++++++++++++++
 2 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 packages/ui/components/top-banner/topBanner.test.tsx

diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index 3ea60d38f0..2ab3155936 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -1,17 +1,14 @@
 import classNames from "classnames";
-// eslint-disable-next-line no-restricted-imports
-import { noop } from "lodash";
 import type { ComponentType, ReactNode } from "react";
 
 import type { LucideIcon, LucideProps } from "@calcom/ui/components/icon";
-import { X, AlertTriangle, Info } from "@calcom/ui/components/icon";
+import { AlertTriangle, Info } from "@calcom/ui/components/icon";
 
 export type TopBannerProps = {
   Icon?: ComponentType<LucideProps> & LucideIcon;
   text: string;
   variant?: keyof typeof variantClassName;
   actions?: ReactNode;
-  onClose?: () => void;
 };
 
 const variantClassName = {
@@ -26,14 +23,14 @@ const defaultIconProps = {
 } as LucideProps;
 
 export function TopBanner(props: TopBannerProps) {
-  const { Icon, variant = "default", text, actions, onClose } = props;
+  const { Icon, variant = "default", text, actions } = props;
 
   const renderDefaultIconByVariant = () => {
     switch (variant) {
       case "error":
-        return <AlertTriangle {...defaultIconProps} />;
+        return <AlertTriangle {...defaultIconProps} data-testid="variant-error" />;
       case "warning":
-        return <Info {...defaultIconProps} />;
+        return <Info {...defaultIconProps} data-testid="variant-warning" />;
       default:
         return null;
     }
@@ -49,19 +46,11 @@ export function TopBanner(props: TopBannerProps) {
       )}>
       <div className="flex flex-1 flex-col items-start justify-center gap-2 p-1 lg:flex-row lg:items-center">
         <p className="text-emphasis flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 lg:flex-row lg:items-center">
-          {Icon ? <Icon {...defaultIconProps} /> : defaultIcon}
+          {Icon ? <Icon data-testid="variant-default" {...defaultIconProps} /> : defaultIcon}
           {text}
         </p>
         {actions && <div className="text-sm font-medium">{actions}</div>}
       </div>
-      {typeof onClose === "function" && (
-        <button
-          type="button"
-          onClick={noop}
-          className="hover:bg-gray-20 text-muted flex items-center rounded-lg p-1.5 text-sm">
-          <X className="text-emphasis h-4 w-4" />
-        </button>
-      )}
     </div>
   );
 }
diff --git a/packages/ui/components/top-banner/topBanner.test.tsx b/packages/ui/components/top-banner/topBanner.test.tsx
new file mode 100644
index 0000000000..64f92e84c7
--- /dev/null
+++ b/packages/ui/components/top-banner/topBanner.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+
+import { ArrowDown } from "@calcom/ui/components/icon";
+
+import { TopBanner } from "./TopBanner";
+
+describe("Tests for TopBanner component", () => {
+  test("Should render the component properly", () => {
+    render(<TopBanner text="the banner test" />);
+
+    const bannerElt = screen.getByTestId("banner");
+    expect(bannerElt).toBeInTheDocument();
+
+    const btnElt = screen.queryByRole("button");
+    expect(btnElt).toBeNull();
+  });
+
+  test("Should render actions", () => {
+    render(<TopBanner text="the banner test" actions={<div>cta</div>} />);
+
+    const ctaElt = screen.getByText("cta");
+    expect(ctaElt).toBeInTheDocument();
+  });
+
+  test("Should render the default variant", () => {
+    render(<TopBanner text="the banner test" Icon={ArrowDown} />);
+
+    const variant = screen.getByTestId("variant-default");
+    expect(variant).toBeInTheDocument();
+  });
+
+  test("Should render the alert variant", () => {
+    render(<TopBanner text="the banner test" variant="error" />);
+
+    const variant = screen.getByTestId("variant-error");
+    expect(variant).toBeInTheDocument();
+  });
+
+  test("Should render the warning variant", () => {
+    render(<TopBanner text="the banner test" variant="warning" />);
+
+    const variant = screen.getByTestId("variant-warning");
+    expect(variant).toBeInTheDocument();
+  });
+});