diff --git a/src/core/Flyout.tsx b/src/core/Flyout.tsx index 2a9a84da..4e1021a6 100644 --- a/src/core/Flyout.tsx +++ b/src/core/Flyout.tsx @@ -9,7 +9,6 @@ import { NavigationMenuLink, } from "@radix-ui/react-navigation-menu"; import cn from "./utils/cn"; -import { createPortal } from "react-dom"; /** * Props for the Flyout component. @@ -56,6 +55,7 @@ type FlyoutProps = { * Flag to indicate if animation should be applied. */ hasAnimation: boolean; + setIsOpen: (val: boolean) => void; }; const DEFAULT_MENU_LINK_STYLING = @@ -65,6 +65,17 @@ const DEFAULT_VIEWPORT_STYLING = const PANEL_ANIMATION = "data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left"; +export const FlyOverlay = ({ className }: { className: string }) => { + return ( +
+ ); +}; + const Flyout = ({ menuItems, className, @@ -72,34 +83,35 @@ const Flyout = ({ menuLinkClassName, viewPortClassName, hasAnimation, + setIsOpen, }: FlyoutProps) => { return ( - + (val ? setIsOpen(true) : setIsOpen(false))} + > {menuItems.map(({ label, content, link, panelStyling }) => content ? ( {label} - {createPortal( - - {content} - , - document.body, - )} + + {content} + ) : ( diff --git a/src/core/Flyout/Flyout.stories.tsx b/src/core/Flyout/Flyout.stories.tsx index 92e342f4..be9b5af4 100644 --- a/src/core/Flyout/Flyout.stories.tsx +++ b/src/core/Flyout/Flyout.stories.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import Flyout from "../Flyout"; +import React, { useState } from "react"; +import Flyout, { FlyOverlay } from "../Flyout"; import ProductTile from "../ProductTile"; import FeaturedLink from "../FeaturedLink"; import { ProductName, products } from "../ProductTile/data"; @@ -17,10 +17,12 @@ const platforms = [ "Security & Compliance", ]; -// Note: All the components and data used in this story are just temporary placeholders and will be added as separate component for the Meganav component that can be used here. +const panelStyling = "w-full sm:w-[816px] bg-neutral-000 dark:bg-neutral-1300"; + const ProductsGrid = () => { - const [selectedProduct, setSelectedProduct] = - React.useState(null); + const [selectedProduct, setSelectedProduct] = useState( + null, + ); return (
{Object.keys(products).map((product) => ( @@ -80,8 +82,6 @@ const DefaultPanelLeft = ({ title, desc }: { title: string; desc: string }) => (
); -const panelStyling = "w-full sm:w-[816px] bg-neutral-000 dark:bg-neutral-1300"; - const menuItems = [ { label: "Home", content: null, link: "" }, { @@ -123,34 +123,55 @@ const menuItems = [ { label: "Docs", content: null, link: "/docs" }, ]; -const flyOutDefaultArgs = { - menuItems: menuItems, - className: "justify-center", - flyOutClassName: "flex w-full justify-center", - viewPortClassName: - "ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8", - hasAnimation: true, -}; +const FlyoutStory = () => { + const [isOpen, setIsOpen] = useState(false); -export const Default = { - render: () => ( -
+ const flyOutDefaultArgs = { + menuItems: menuItems, + className: "justify-center relative z-40 ui-standard-container", + flyOutClassName: "flex w-full justify-center", + viewPortClassName: + "ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8", + hasAnimation: true, + setIsOpen: setIsOpen, + }; + + return ( +
+ {isOpen && ( + + )}
- ), + ); +}; + +export const Default = { + render: () => , }; export const StandardContainer = { render: () => ( -
- -
+
+ +
+
+ Content 1 +
+
+ Content 2 +
+
+ Content 3 +
+
+
), parameters: { docs: { description: { story: - "The Flyout component is positioned within a standard container and Animation is enabled", + "The Flyout component is positioned within a standard container and content and Animation is enabled", }, }, }, diff --git a/src/core/Flyout/__snapshots__/Flyout.stories.tsx.snap b/src/core/Flyout/__snapshots__/Flyout.stories.tsx.snap index 845157cf..f2ae5a84 100644 --- a/src/core/Flyout/__snapshots__/Flyout.stories.tsx.snap +++ b/src/core/Flyout/__snapshots__/Flyout.stories.tsx.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components/Flyout Default smoke-test 1`] = ` -
+
-
+
+ Content 3 +
+
+ `;