From c8380c2879f0da11f57827e55a530ba712593a19 Mon Sep 17 00:00:00 2001
From: VINEETH ASOK KUMAR <vineeth.asokkumar@clickhouse.com>
Date: Fri, 20 Oct 2023 17:29:38 +0200
Subject: [PATCH] Fix Flyout

---
 src/App.tsx                                   |  6 +-
 src/components/Flyout/Flyout.stories.tsx      | 79 +++++++++++++++++++
 src/components/Flyout/Flyout.test.tsx         | 69 ++++++++++++++++
 src/components/Flyout/Flyout.tsx              | 37 +++++----
 src/components/Select/MultiSelect.stories.tsx |  2 +-
 src/components/types.ts                       |  1 +
 6 files changed, 175 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Flyout/Flyout.stories.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 755f4cde..73750375 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -119,7 +119,7 @@ const App = () => {
                 description="test2"
               />
               <Flyout.Body>
-                hadksjhadksjhaskdjhaksdjhkajsdhkajshdkjashdkjashd
+                Flyout Text
                 <Select>
                   <Select.Item value="test">test</Select.Item>
                   <Select.Item value="test2">test2</Select.Item>
@@ -154,7 +154,7 @@ const App = () => {
                 description="test2"
               />
               <Flyout.Body>
-                hadksjhadksjhaskdjhaksdjhkajsdhkajshdkjashdkjashd
+                Flyout Text
                 <Select>
                   <Select.Item value="test">test</Select.Item>
                   <Select.Item value="test2">test2</Select.Item>
@@ -189,7 +189,7 @@ const App = () => {
                 description="test2"
               />
               <Flyout.Body>
-                hadksjhadksjhaskdjhaksdjhkajsdhkajshdkjashdkjashd
+                Flyout Text
                 <Select>
                   <Select.Item value="test">test</Select.Item>
                   <Select.Item value="test2">test2</Select.Item>
diff --git a/src/components/Flyout/Flyout.stories.tsx b/src/components/Flyout/Flyout.stories.tsx
new file mode 100644
index 00000000..84cdbac0
--- /dev/null
+++ b/src/components/Flyout/Flyout.stories.tsx
@@ -0,0 +1,79 @@
+import { Button } from "..";
+import { Flyout, FlyoutProps } from "./Flyout";
+
+interface Props extends FlyoutProps {
+  title: string;
+  description?: string;
+  showClose?: boolean;
+}
+
+const FlyoutExample = ({ title, description, showClose, ...props }: Props) => {
+  return (
+    <Flyout {...props}>
+      <Flyout.Trigger>Flyout Trigger</Flyout.Trigger>
+      <Flyout.Content strategy="fixed">
+        <Flyout.Header
+          title={title}
+          description={description}
+        />
+        <Flyout.Body>
+          <Flyout.Element>Content1 long text content</Flyout.Element>
+        </Flyout.Body>
+        <Flyout.Footer showClose={showClose}>
+          <Button>Test Primary</Button>
+        </Flyout.Footer>
+      </Flyout.Content>
+    </Flyout>
+  );
+};
+export default {
+  component: FlyoutExample,
+  title: "Display/Flyout",
+  tags: ["form-field", "select", "autodocs"],
+  argTypes: {
+    title: { control: "text" },
+    description: { control: "text" },
+    showClose: { control: "boolean" },
+  },
+};
+
+export const Playground = {
+  args: {
+    title: "Title",
+    description: "Description",
+    showClose: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        transform: (_: string, story: { args: Props; [x: string]: unknown }) => {
+          const { title, description, showClose, ...props } = story.args;
+          return `<Flyout\n
+          ${Object.entries(props)
+            .flatMap(([key, value]) =>
+              typeof value === "boolean"
+                ? value
+                  ? `  ${key}`
+                  : []
+                : `  ${key}=${typeof value == "string" ? `"${value}"` : `{${value}}`}`
+            )
+            .join("\n")}
+>
+
+      <Flyout.Header
+        title="${title}"
+        description="${description}"
+      />
+      <Flyout.Body>
+        <Flyout.Element>Content1 long text content</Flyout.Element>
+      </Flyout.Body>
+      <Flyout.Footer showClose={${showClose}}>
+        <Button>Test Primary</Button>
+      </Flyout.Footer>
+</Flyout>
+`;
+        },
+      },
+    },
+  },
+};
diff --git a/src/components/Flyout/Flyout.test.tsx b/src/components/Flyout/Flyout.test.tsx
index e69de29b..456195b2 100644
--- a/src/components/Flyout/Flyout.test.tsx
+++ b/src/components/Flyout/Flyout.test.tsx
@@ -0,0 +1,69 @@
+import { fireEvent } from "@testing-library/react";
+import { Flyout } from "./Flyout";
+import { renderCUI } from "@/utils/test-utils";
+import { Button } from "..";
+import { DialogProps } from "@radix-ui/react-dialog";
+
+describe("Flyout", () => {
+  const renderFlyout = (props: DialogProps) => {
+    return renderCUI(
+      <Flyout {...props}>
+        <Flyout.Trigger>
+          <Button iconLeft="user">Flyout Fixed</Button>
+        </Flyout.Trigger>
+        <Flyout.Content strategy="fixed">
+          <Flyout.Header
+            title="test1"
+            description="test2"
+          />
+          <Flyout.Body>Flyout Text</Flyout.Body>
+          <Flyout.Footer showClose>
+            <Button type="primary">Primary Button</Button>
+          </Flyout.Footer>
+        </Flyout.Content>
+      </Flyout>
+    );
+  };
+  it("should open flyout on click", () => {
+    const { queryByText } = renderFlyout({});
+    const selectTrigger = queryByText("Flyout Fixed");
+    expect(selectTrigger).not.toBeNull();
+    expect(queryByText("Flyout Text")).toBeNull();
+    selectTrigger && fireEvent.click(selectTrigger);
+
+    expect(queryByText("Flyout Text")).not.toBeNull();
+    expect(queryByText("test1")).not.toBeNull();
+  });
+
+  it("should open on updating open param", () => {
+    const { queryByText } = renderFlyout({
+      open: true,
+    });
+    expect(queryByText("Flyout Text")).not.toBeNull();
+  });
+
+  it("should close flyout on clicking close Button in header", () => {
+    const { queryByText, getByTestId } = renderFlyout({});
+    const selectTrigger = queryByText("Flyout Fixed");
+    expect(selectTrigger).not.toBeNull();
+    expect(queryByText("Flyout Text")).toBeNull();
+    selectTrigger && fireEvent.click(selectTrigger);
+
+    expect(queryByText("Flyout Text")).not.toBeNull();
+    expect(queryByText("test1")).not.toBeNull();
+    fireEvent.click(getByTestId("flyout-header-close-btn"));
+    expect(queryByText("Flyout Text")).toBeNull();
+  });
+
+  it("should close flyout on clicking close Button in footer", () => {
+    const { queryByText, getByText } = renderFlyout({});
+    const selectTrigger = queryByText("Flyout Fixed");
+    expect(selectTrigger).not.toBeNull();
+    expect(queryByText("Flyout Text")).toBeNull();
+    selectTrigger && fireEvent.click(selectTrigger);
+
+    expect(queryByText("Flyout Text")).not.toBeNull();
+    fireEvent.click(getByText("Cancel"));
+    expect(queryByText("Flyout Text")).toBeNull();
+  });
+});
diff --git a/src/components/Flyout/Flyout.tsx b/src/components/Flyout/Flyout.tsx
index 6c943cc9..22a69c63 100644
--- a/src/components/Flyout/Flyout.tsx
+++ b/src/components/Flyout/Flyout.tsx
@@ -3,7 +3,9 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { Button, IconButton, Separator } from "..";
 import styled from "styled-components";
 
-export const Flyout = (props: Dialog.DialogProps) => {
+export type FlyoutProps = Dialog.DialogProps;
+
+export const Flyout = (props: FlyoutProps) => {
   return <Dialog.Root {...props} />;
 };
 
@@ -22,7 +24,7 @@ Flyout.Trigger = Trigger;
 
 type FlyoutSizeType = "narrow" | "wide";
 type Strategy = "relative" | "absolute" | "fixed";
-interface DialogContentProps extends Dialog.DialogContentProps {
+export interface DialogContentProps extends Dialog.DialogContentProps {
   container?: HTMLElement | null;
   showOverlay?: boolean;
   showClose?: boolean;
@@ -39,13 +41,14 @@ const FlyoutContent = styled(Dialog.Content)<{
   flex-direction: column;
   align-items: center;
   width: 100%;
-  height: 100%;
   overflow: hidden;
   flex: 1;
   top: 0;
   right: 0;
+  bottom: 0;
   ${({ theme, $size = "narrow", $strategy }) => `
     position: ${$strategy};
+    height: ${$strategy === "relative" ? "100%" : "auto"};
     width: ${theme.click.flyout.size[$size].width};
     padding: ${theme.click.flyout.space.y} ${theme.click.flyout.space.x};
     gap: ${theme.click.flyout.space.gap};
@@ -54,11 +57,13 @@ const FlyoutContent = styled(Dialog.Content)<{
     box-shadow: -6px 0px 10px 0px ${
       theme.click.flyout.shadow.default
     }, -5px 0px 20px 0px ${theme.click.flyout.shadow.default};
+        @media (max-width: 1024px) {
     ${
       $strategy === "relative"
         ? `
-        @media (max-width: 1024px) {
-          position: absolute !important;
+          position: absolute !important;`
+        : ""
+    }
           overflow: hidden;
           transform: translateX(calc(100% - 50px));
           transition: 0.3s ease-in-out;
@@ -69,9 +74,6 @@ const FlyoutContent = styled(Dialog.Content)<{
             left: auto;
           }
         }
-    `
-        : ""
-    }
   `}
 `;
 const FlyoutContainer = styled.div`
@@ -131,7 +133,7 @@ Flyout.Element = Element;
 
 interface TitleHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
   title: string;
-  description: string;
+  description?: string;
   children?: never;
 }
 
@@ -140,7 +142,7 @@ interface ChildrenHeaderProps extends HTMLAttributes<HTMLDivElement> {
   description?: never;
 }
 
-type HeaderProps = TitleHeaderProps | ChildrenHeaderProps;
+export type FlyoutHeaderProps = TitleHeaderProps | ChildrenHeaderProps;
 
 const FlyoutHeaderContainer = styled.div`
   display: flex;
@@ -163,6 +165,8 @@ const FlyoutTitle = styled(Dialog.Title)`
   ${({ theme }) => `
     color: ${theme.click.flyout.color.title.default};
     font: ${theme.typography.styles.product.titles.xl};
+    margin: 0;
+    padding: 0;
   `}
 `;
 
@@ -170,10 +174,12 @@ const FlyoutDescription = styled(Dialog.Description)`
   ${({ theme }) => `
     color: ${theme.click.flyout.color.description.default};
     font: ${theme.typography.styles.product.text.normal.md};
+    margin: 0;
+    padding: 0;
   `}
 `;
 
-const Header = ({ title, description, children, ...props }: HeaderProps) => {
+const Header = ({ title, description, children, ...props }: FlyoutHeaderProps) => {
   if (children) {
     return (
       <FlyoutContainer>
@@ -181,6 +187,7 @@ const Header = ({ title, description, children, ...props }: HeaderProps) => {
           <FlexGrow>{children}</FlexGrow>
           <Dialog.Close asChild>
             <IconButton
+              data-testid="flyout-header-close-btn"
               icon="cross"
               type="ghost"
               size="xs"
@@ -199,8 +206,9 @@ const Header = ({ title, description, children, ...props }: HeaderProps) => {
           <FlyoutTitle>{title}</FlyoutTitle>
           {description && <FlyoutDescription>{description}</FlyoutDescription>}
         </FlexGrow>
-        <Dialog.Close>
+        <Dialog.Close asChild>
           <IconButton
+            data-testid="flyout-header-close-btn"
             icon="cross"
             type="ghost"
             size="xs"
@@ -227,7 +235,7 @@ const Body = (props: HTMLAttributes<HTMLDivElement>) => <FlyoutBody {...props} /
 Body.displayName = "Flyout.Body";
 Flyout.Body = Body;
 
-interface FooterProps extends HTMLAttributes<HTMLDivElement> {
+export interface FlyoutFooterProps extends HTMLAttributes<HTMLDivElement> {
   cancelText?: string;
   showClose?: boolean;
 }
@@ -236,7 +244,6 @@ const FlyoutFooter = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  width: 100%;
   ${({ theme }) => `
     row-gap: ${theme.click.flyout.space.content["row-gap"]};
     column-gap: ${theme.click.flyout.space.content["column-gap"]};
@@ -244,7 +251,7 @@ const FlyoutFooter = styled.div`
   `}
 `;
 
-const Footer = ({ cancelText, showClose, children, ...props }: FooterProps) => {
+const Footer = ({ cancelText, showClose, children, ...props }: FlyoutFooterProps) => {
   return (
     <FlyoutContainer>
       <Separator size="lg" />
diff --git a/src/components/Select/MultiSelect.stories.tsx b/src/components/Select/MultiSelect.stories.tsx
index 3c35c0aa..25a33c07 100644
--- a/src/components/Select/MultiSelect.stories.tsx
+++ b/src/components/Select/MultiSelect.stories.tsx
@@ -131,7 +131,7 @@ ${
       Content2
     </MultiSelect.Item>
     <MultiSelect.Item value="content3">Content3</MultiSelect.Item>
-</Select>
+</MultiSelect>
 `
     : ""
 }`;
diff --git a/src/components/types.ts b/src/components/types.ts
index 1447f041..a005926b 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -31,6 +31,7 @@ export type { ToastProps } from "./Toast/Toast";
 export type { SelectOptionListItem } from "./Select/common/types";
 export type { MultiSelectProps } from "./Select/MultiSelect";
 export type { PanelProps } from "./Panel/Panel";
+export type { FlyoutProps, FlyoutFooterProps, FlyoutHeaderProps } from "./Flyout/Flyout";
 
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";