From b1a58336968bad5067cd32085425f17fb05d6e98 Mon Sep 17 00:00:00 2001
From: April Smith <april.smith@ably.com>
Date: Fri, 31 Jan 2025 14:30:19 +0000
Subject: [PATCH] fix!: Flyout for Meganav

---
 src/core/Flyout.tsx                | 98 +++++++++++++++---------------
 src/core/Flyout/Flyout.stories.tsx | 29 +++++----
 tailwind.config.js                 |  8 +--
 3 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/src/core/Flyout.tsx b/src/core/Flyout.tsx
index 687e39db..e7574e3a 100644
--- a/src/core/Flyout.tsx
+++ b/src/core/Flyout.tsx
@@ -10,10 +10,12 @@ import {
 } from "@radix-ui/react-navigation-menu";
 import cn from "./utils/cn";
 
-const NavigationMenuDemo = ({
+const Flyout = ({
   menuItems,
-  navMenuStyling,
-  flyOutStyling,
+  className,
+  flyOutClassName,
+  menuLinkClassName,
+  viewPortClassName,
 }: {
   menuItems: {
     label: string;
@@ -21,64 +23,62 @@ const NavigationMenuDemo = ({
     link?: string;
     panelStyling?: string;
   }[];
-  navMenuStyling?: string;
-  flyOutStyling?: string;
+  className?: string;
+  flyOutClassName?: string;
+  menuLinkClassName?: string;
+  viewPortClassName?: string;
 }) => {
-  const menuLinkStyles =
-    "ui-text-menu3 text-neutral-1000 font-bold px-12 py-8 hover:bg-neutral-100 hover:text-neutral-1300 cursor-pointer flex items-center";
-  const viewPortStyling =
-    "relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scaleOut data-[state=open]:animate-scaleIn sm:w-[var(--radix-navigation-menu-viewport-width)]";
-  const boxShadowViewport =
-    "shadow-[0_201px_56px_0_rgba(20,25,36,0),0_129px_51px_0_rgba(20,25,36,0.02),0_72px_43px_0_rgba(20,25,36,0.06),0_32px_32px_0_rgba(20,25,36,0.10),0_8px_18px_0_rgba(20,25,36,0.12)]";
+  const DEFAULT_MENU_LINK_STYLING =
+    "ui-text-menu3 font-bold text-neutral-1000 dark:neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 hover:text-neutral-1300 dark:hover:text-neutral-000 px-12 py-8 flex items-center justify-between";
+  const DEFAULT_VIEWPORT_STYLING =
+    "relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] origin-[top_center] transition-[width,_height] duration-300 data-[state=closed]:animate-scale-out data-[state=open]:animate-scale-in sm:w-[var(--radix-navigation-menu-viewport-width)]";
 
   return (
-    <NavigationMenu className={cn(navMenuStyling, "flex w-full relative")}>
+    <NavigationMenu className={cn(className, "flex w-full relative")}>
       <NavigationMenuList className="flex list-none center">
-        {menuItems.map((menuItem) => (
-          <NavigationMenuItem key={menuItem.label}>
-            {menuItem.content ? (
-              <>
-                <NavigationMenuTrigger
-                  className={cn(
-                    menuLinkStyles,
-                    "group outline-none focus:outline-none select-none flex items-center justify-between",
-                  )}
-                >
-                  {menuItem.label}
-                </NavigationMenuTrigger>
-                <NavigationMenuContent
-                  className={cn(
-                    menuItem.panelStyling,
-                    "absolute left-0 top-0 p-24 z-10",
-                  )}
-                >
-                  {menuItem.content}
-                </NavigationMenuContent>
-              </>
-            ) : (
-              <NavigationMenuLink>
-                <a href={menuItem.link} className={menuLinkStyles}>
-                  {menuItem.label}
-                </a>
-              </NavigationMenuLink>
-            )}
-          </NavigationMenuItem>
-        ))}
+        {menuItems.map(({ label, content, link, panelStyling }) =>
+          content ? (
+            <NavigationMenuItem key={label}>
+              <NavigationMenuTrigger
+                className={cn(
+                  "group outline-none focus:outline-none select-none cursor-pointer",
+                  DEFAULT_MENU_LINK_STYLING,
+                  menuLinkClassName,
+                )}
+              >
+                {label}
+              </NavigationMenuTrigger>
+              <NavigationMenuContent
+                className={cn(
+                  "absolute inset-x-0 top-0 p-24 z-10",
+                  panelStyling,
+                )}
+              >
+                {content}
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          ) : (
+            <NavigationMenuLink key={label}>
+              <a
+                href={link}
+                className={cn(DEFAULT_MENU_LINK_STYLING, menuLinkClassName)}
+              >
+                {label}
+              </a>
+            </NavigationMenuLink>
+          ),
+        )}
       </NavigationMenuList>
 
       <div
-        className={cn("absolute left-0 top-full flex w-full", flyOutStyling)}
+        className={cn("absolute left-0 top-full flex w-full", flyOutClassName)}
       >
         <NavigationMenuViewport
-          className={cn(
-            viewPortStyling,
-            boxShadowViewport,
-            "border border-neutral-000 rounded-2xl mt-8",
-          )}
+          className={cn(DEFAULT_VIEWPORT_STYLING, viewPortClassName)}
         />
       </div>
     </NavigationMenu>
   );
 };
 
-export default NavigationMenuDemo;
+export default Flyout;
diff --git a/src/core/Flyout/Flyout.stories.tsx b/src/core/Flyout/Flyout.stories.tsx
index c1abb36d..4864cc83 100644
--- a/src/core/Flyout/Flyout.stories.tsx
+++ b/src/core/Flyout/Flyout.stories.tsx
@@ -1,17 +1,20 @@
 import React from "react";
-import { StoryFn } from "@storybook/react";
 import Flyout from "../Flyout";
 import ProductTile from "../ProductTile";
 import FeaturedLink from "../FeaturedLink";
 import { ProductName, products } from "../ProductTile/data";
+import { StoryFn } from "@storybook/react";
 
 export default {
   title: "Components/Flyout",
   component: Flyout,
   tags: ["autodocs"],
 };
-
-const Template: StoryFn = (args) => <div className="h-[450px]"><Flyout {...args} /></div>;
+const Template: StoryFn = (args) => (
+  <div className="h-[450px]">
+    <Flyout {...args} />
+  </div>
+);
 
 const platforms = [
   "Infrastructure",
@@ -28,7 +31,6 @@ const ProductsGrid = () => {
     <div className="grid grid-cols-2">
       {Object.keys(products).map((product) => (
         <ProductTile
-          className="bg-neutral-000"
           name={product as ProductName}
           key={product}
           selected={selectedProduct === product}
@@ -49,11 +51,11 @@ const Panels = ({
   <div className="flex flex-row gap-x-24">
     <div className="flex-6">{panelLeft}</div>
     <div className="flex-4 pt-12">
-      <p className="ui-text-overline2 text-neutral-700 pb-6">platform</p>
+      <p className="ui-text-overline2 text-neutral-700 dark:text-neutral-600 pb-6">platform</p>
       {platforms.map((item) => (
         <li className="list-none py-6" key={item}>
           <a
-            className="ui-text-menu3 text-neutral-1000"
+            className="ui-text-menu3 text-neutral-1000 dark:text-neutral-300"
             href={`/platform/${item.toLowerCase()}`}
           >
             {item}
@@ -65,12 +67,12 @@ const Panels = ({
 );
 
 const DefaultPanelLeft = ({ title, desc }: { title: string; desc: string }) => (
-  <div className="bg-neutral-100 w-full p-24">
-    <h4 className="ui-text-h4">{title}</h4>
-    <p className="ui-text-p3 text-neutral-800 mt-8">{desc}</p>
+  <div className="bg-neutral-100 dark:bg-neutral-1200 w-full p-24">
+    <h4 className="ui-text-h4 text-neutral-1300 dark:text-neutral-000">{title}</h4>
+    <p className="ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8">{desc}</p>
     <FeaturedLink
       url=""
-      additionalCSS="text-neutral-1300"
+      additionalCSS="text-neutral-1300 dark:text-neutral-000"
       iconColor="text-orange-600"
     >
       Learn more
@@ -78,7 +80,7 @@ const DefaultPanelLeft = ({ title, desc }: { title: string; desc: string }) => (
   </div>
 );
 
-const panelStyling = "w-full sm:w-[816px] bg-neutral-000";
+const panelStyling = "w-full sm:w-[816px] bg-neutral-000 dark:bg-neutral-1300";
 
 export const Default = Template.bind({});
 Default.args = {
@@ -122,6 +124,7 @@ Default.args = {
     { label: "Pricing", content: null, link: "/pricing" },
     { label: "Docs", content: null, link: "/docs" },
   ],
-  navMenuStyling: "justify-center",
-  flyOutStyling: "justify-center",
+  className: "justify-center",
+  flyOutClassName: "justify-center",
+  viewPortClassName:"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8",
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 506c1f5c..70662cb4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -332,11 +332,11 @@ module.exports = {
           from: { opacity: 0 },
           to: { opacity: 0.1 },
         },
-        scaleIn: {
+        "scale-in": {
           from: { opacity: "0", transform: "rotateX(-10deg) scale(0.9)" },
           to: { opacity: "1", transform: "rotateX(0deg) scale(1)" },
         },
-        scaleOut: {
+        "scale-out": {
           from: { opacity: "1", transform: "rotateX(0deg) scale(1)" },
           to: { opacity: "0", transform: "rotateX(-10deg) scale(0.95)" },
         },
@@ -344,8 +344,8 @@ module.exports = {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
-        scaleIn: "scaleIn 200ms ease",
-        scaleOut: "scaleOut 200ms ease",
+        "scale-in": "scale-in 200ms ease",
+        "scale-out": "scale-out 200ms ease",
       },
     },
     listStyleType: {