From 9bdcdc76a88a5981848315be6000cd3a778c2efb Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 16 Aug 2024 09:40:05 +0300
Subject: [PATCH] docs: redesign help button (#8610)

Redesign help button

Closes DOCS-817
---
 www/apps/book/providers/index.tsx             |  3 +-
 www/apps/resources/providers/index.tsx        |  3 +-
 .../components/HelpButton/Actions/index.tsx   | 52 -----------
 .../src/components/HelpButton/index.tsx       | 86 -------------------
 .../src/components/Icons/Github/index.tsx     | 22 +++++
 .../components/MainNav/HelpButton/index.tsx   | 76 ++++++++++++++++
 .../docs-ui/src/components/MainNav/index.tsx  |  2 +
 .../src/components/Menu/Action/index.tsx      |  4 +-
 .../src/components/Menu/Item/index.tsx        |  4 +-
 www/packages/docs-ui/src/components/index.ts  |  1 -
 www/packages/docs-ui/src/constants.tsx        |  8 +-
 11 files changed, 109 insertions(+), 152 deletions(-)
 delete mode 100644 www/packages/docs-ui/src/components/HelpButton/Actions/index.tsx
 delete mode 100644 www/packages/docs-ui/src/components/HelpButton/index.tsx
 create mode 100644 www/packages/docs-ui/src/components/Icons/Github/index.tsx
 create mode 100644 www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx

diff --git a/www/apps/book/providers/index.tsx b/www/apps/book/providers/index.tsx
index 8853af0657..42f375cfc3 100644
--- a/www/apps/book/providers/index.tsx
+++ b/www/apps/book/providers/index.tsx
@@ -3,7 +3,6 @@
 import {
   AnalyticsProvider,
   ColorModeProvider,
-  helpButtonNotification,
   HooksLoader,
   LearningPathProvider,
   MobileProvider,
@@ -30,7 +29,7 @@ const Providers = ({ children }: ProvidersProps) => {
           <ColorModeProvider>
             <ModalProvider>
               <LearningPathProvider>
-                <NotificationProvider initial={[helpButtonNotification]}>
+                <NotificationProvider>
                   <ScrollControllerProvider scrollableSelector="#main">
                     <SidebarProvider>
                       <PaginationProvider>
diff --git a/www/apps/resources/providers/index.tsx b/www/apps/resources/providers/index.tsx
index b7c29a53d3..58fbeefcc4 100644
--- a/www/apps/resources/providers/index.tsx
+++ b/www/apps/resources/providers/index.tsx
@@ -3,7 +3,6 @@
 import {
   AnalyticsProvider,
   ColorModeProvider,
-  helpButtonNotification,
   HooksLoader,
   LearningPathProvider,
   MobileProvider,
@@ -32,7 +31,7 @@ const Providers = ({ children }: ProvidersProps) => {
               <LearningPathProvider
                 baseUrl={process.env.NEXT_PUBLIC_BASE_PATH || "/resources"}
               >
-                <NotificationProvider initial={[helpButtonNotification]}>
+                <NotificationProvider>
                   <ScrollControllerProvider scrollableSelector="#main">
                     <SidebarProvider>
                       <PaginationProvider>
diff --git a/www/packages/docs-ui/src/components/HelpButton/Actions/index.tsx b/www/packages/docs-ui/src/components/HelpButton/Actions/index.tsx
deleted file mode 100644
index a5e8b2e7cd..0000000000
--- a/www/packages/docs-ui/src/components/HelpButton/Actions/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client"
-
-import { Bug, Discord, Github } from "@medusajs/icons"
-import clsx from "clsx"
-import Link from "next/link"
-import React from "react"
-
-export const HelpButtonActions = () => {
-  const actions = [
-    {
-      title: "Troubleshooting Guides",
-      url: "https://docs.medusajs.com/v2/resources/troubleshooting",
-      icon: <Bug />,
-    },
-    {
-      title: "Create a GitHub Issue",
-      url: "https://github.com/medusajs/medusa/issues/new/choose",
-      icon: <Github />,
-    },
-    {
-      title: "Get Support on Discord",
-      url: "https://discord.gg/medusajs",
-      icon: <Discord />,
-    },
-  ]
-  return (
-    <div
-      className={clsx(
-        "bg-medusa-bg-component shadow-elevation-flyout",
-        "flex flex-col rounded-docs_DEFAULT",
-        "mr-0 ml-auto"
-      )}
-    >
-      {actions.map((action, index) => (
-        <Link
-          href={action.url}
-          className={clsx(
-            "px-docs_0.5 py-docs_0.25 text-medusa-fg-base",
-            "flex flex-row items-center gap-docs_0.5",
-            "hover:bg-medusa-bg-component-hover",
-            index !== 0 && "border-t border-medusa-border-base border-solid"
-          )}
-          key={index}
-          target="_blank"
-        >
-          {action.icon}
-          <span>{action.title}</span>
-        </Link>
-      ))}
-    </div>
-  )
-}
diff --git a/www/packages/docs-ui/src/components/HelpButton/index.tsx b/www/packages/docs-ui/src/components/HelpButton/index.tsx
deleted file mode 100644
index a2216e6570..0000000000
--- a/www/packages/docs-ui/src/components/HelpButton/index.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client"
-
-import React, { useEffect, useRef, useState } from "react"
-import { Button } from "@/components"
-import clsx from "clsx"
-import { CSSTransition } from "react-transition-group"
-import { HelpButtonActions } from "./Actions"
-import { useClickOutside } from "../.."
-
-export const HelpButton = () => {
-  const [showText, setShowText] = useState(false)
-  const [showHelp, setShowHelp] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-  useClickOutside({
-    elmRef: ref,
-    onClickOutside: () => {
-      setShowHelp(false)
-      setShowText(false)
-    },
-  })
-
-  useEffect(() => {
-    if (showHelp) {
-      setShowText(true)
-    }
-  }, [showHelp])
-
-  return (
-    <div
-      className={clsx(
-        "mr-0 ml-auto w-fit",
-        "flex flex-col gap-docs_0.5",
-        "max-[767px]:fixed max-[767px]:bottom-docs_1 max-[767px]:right-docs_1"
-      )}
-      ref={ref}
-    >
-      {showHelp && <HelpButtonActions />}
-      <Button
-        variant="secondary"
-        className={clsx(
-          "!p-[10px] !shadow-elevation-flyout dark:!shadow-elevation-flyout-dark !text-medusa-fg-subtle",
-          "rounded-full border-0 !flex relative mr-0 ml-auto",
-          "h-docs_3 min-w-docs_3 !txt-medium-plus lg:txt-large-plus transition-[width] duration-300",
-          !showText && "!gap-0"
-        )}
-        onMouseOver={() => setShowText(true)}
-        onMouseLeave={() => {
-          if (!showHelp) {
-            setShowText(false)
-          }
-        }}
-        onClick={() => {
-          setShowHelp((prev) => !prev)
-        }}
-      >
-        <CSSTransition
-          in={showText}
-          timeout={300}
-          onEnter={(node: HTMLElement) => {
-            node.style.width = `0px`
-          }}
-          onEntering={(node: HTMLElement) => {
-            node.style.width = `${node.scrollWidth}px`
-            setTimeout(() => {
-              node.style.opacity = `1`
-            }, 100)
-          }}
-          onExiting={(node: HTMLElement) => {
-            node.style.width = `0px`
-            node.style.opacity = `0`
-          }}
-        >
-          <span
-            className={clsx("opacity-0 w-0 text-nowrap")}
-            style={{
-              transition: `width cubic-bezier(0.4, 0, 0.2, 1) 300ms, opacity cubic-bezier(0.4, 0, 0.2, 1) 150ms`,
-            }}
-          >
-            Need help
-          </span>
-        </CSSTransition>
-        <span>?</span>
-      </Button>
-    </div>
-  )
-}
diff --git a/www/packages/docs-ui/src/components/Icons/Github/index.tsx b/www/packages/docs-ui/src/components/Icons/Github/index.tsx
new file mode 100644
index 0000000000..d49472ad32
--- /dev/null
+++ b/www/packages/docs-ui/src/components/Icons/Github/index.tsx
@@ -0,0 +1,22 @@
+import React from "react"
+import { IconProps } from "@medusajs/icons/dist/types"
+
+export const GithubIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="15"
+      height="16"
+      viewBox="0 0 15 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 1.41663C3.77063 1.41663 0.75 4.43725 0.75 8.16663C0.75 11.1535 2.68219 13.6763 5.36531 14.5707C5.70281 14.6298 5.82938 14.4273 5.82938 14.2501C5.82938 14.0898 5.82094 13.5582 5.82094 12.9929C4.125 13.3051 3.68625 12.5794 3.55125 12.1998C3.47531 12.0057 3.14625 11.4066 2.85938 11.2463C2.62312 11.1198 2.28562 10.8076 2.85094 10.7991C3.3825 10.7907 3.76219 11.2885 3.88875 11.491C4.49625 12.5119 5.46656 12.2251 5.85469 12.0479C5.91375 11.6091 6.09094 11.3138 6.285 11.1451C4.78312 10.9763 3.21375 10.3941 3.21375 7.81225C3.21375 7.07819 3.47531 6.47069 3.90562 5.99819C3.83812 5.82944 3.60188 5.13756 3.97312 4.20944C3.97312 4.20944 4.53844 4.03225 5.82938 4.90131C6.36938 4.74944 6.94313 4.6735 7.51688 4.6735C8.09063 4.6735 8.66438 4.74944 9.20438 4.90131C10.4953 4.02381 11.0606 4.20944 11.0606 4.20944C11.4319 5.13756 11.1956 5.82944 11.1281 5.99819C11.5584 6.47069 11.82 7.06975 11.82 7.81225C11.82 10.4026 10.2422 10.9763 8.74031 11.1451C8.985 11.356 9.19594 11.761 9.19594 12.3938C9.19594 13.2966 9.1875 14.0223 9.1875 14.2501C9.1875 14.4273 9.31406 14.6382 9.65156 14.5707C12.3178 13.6763 14.25 11.1451 14.25 8.16663C14.25 4.43725 11.2294 1.41663 7.5 1.41663Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx b/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx
new file mode 100644
index 0000000000..289fcfd045
--- /dev/null
+++ b/www/packages/docs-ui/src/components/MainNav/HelpButton/index.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import React, { useRef, useState } from "react"
+import { Button, Kbd, Tooltip } from "@/components"
+import { Bug, Discord, QuestionMark } from "@medusajs/icons"
+import { Menu, useClickOutside } from "../../.."
+import { MenuItem } from "types"
+import clsx from "clsx"
+import { GithubIcon } from "../../Icons/Github"
+
+export const MainNavHelpButton = () => {
+  const [showMenu, setShowMenu] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  useClickOutside({
+    elmRef: ref,
+    onClickOutside: () => {
+      setShowMenu(false)
+    },
+  })
+
+  const menuItems: MenuItem[] = [
+    {
+      type: "link",
+      title: "Create a GitHub Issue",
+      link: "https://github.com/medusajs/medusa/issues/new/choose",
+      icon: <GithubIcon className="text-medusa-fg-base" />,
+    },
+    {
+      type: "link",
+      title: "Get Support on Discord",
+      link: "https://discord.gg/medusajs",
+      icon: <Discord />,
+    },
+    {
+      type: "divider",
+    },
+    {
+      type: "link",
+      title: "Troubleshooting Guides",
+      link: "https://docs.medusajs.com/v2/resources/troubleshooting",
+      icon: <Bug />,
+    },
+  ]
+
+  return (
+    <div className="relative" ref={ref}>
+      <Tooltip
+        tooltipChildren={
+          <span className="flex gap-[6px]">
+            <span>Need help?</span>
+            <Kbd>?</Kbd>
+          </span>
+        }
+        place="bottom"
+        hidden={showMenu}
+      >
+        <Button
+          variant="transparent-clear"
+          className="text-medusa-fg-muted"
+          onClick={() => setShowMenu((prev) => !prev)}
+        >
+          <QuestionMark />
+        </Button>
+      </Tooltip>
+      <div
+        className={clsx(
+          "absolute bottom-0 left-0",
+          "z-50 -translate-x-[40%] translate-y-[calc(100%+8px)]",
+          !showMenu && "hidden"
+        )}
+      >
+        <Menu items={menuItems} className="w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/www/packages/docs-ui/src/components/MainNav/index.tsx b/www/packages/docs-ui/src/components/MainNav/index.tsx
index eaff03740c..a880cac2cc 100644
--- a/www/packages/docs-ui/src/components/MainNav/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/index.tsx
@@ -9,6 +9,7 @@ import { MainNavColorMode } from "./ColorMode"
 import Link from "next/link"
 import { MainNavDivider } from "./Divider"
 import { MainNavSidebarOpener } from "./SidebarOpener"
+import { MainNavHelpButton } from "./HelpButton"
 import { SidebarLeftIcon } from "../Icons/SidebarLeft"
 
 export const MainNav = () => {
@@ -39,6 +40,7 @@ export const MainNav = () => {
           Report Issue
         </Link>
         <MainNavDivider />
+        <MainNavHelpButton />
         <MainNavColorMode />
         <SearchModalOpener />
       </div>
diff --git a/www/packages/docs-ui/src/components/Menu/Action/index.tsx b/www/packages/docs-ui/src/components/Menu/Action/index.tsx
index c24e6c4d84..dd678299b8 100644
--- a/www/packages/docs-ui/src/components/Menu/Action/index.tsx
+++ b/www/packages/docs-ui/src/components/Menu/Action/index.tsx
@@ -20,7 +20,9 @@ export const MenuAction = ({ item }: MenuActionProps) => {
       tabIndex={-1}
       onClick={item.action}
     >
-      <span className="text-medusa-fg-subtle">{item.icon}</span>
+      <span className="text-medusa-fg-subtle mt-[2.5px] block">
+        {item.icon}
+      </span>
       <span className="text-compact-small flex-1">{item.title}</span>
       {item.shortcut && (
         <span className="text-medusa-fg-subtle text-compact-small">
diff --git a/www/packages/docs-ui/src/components/Menu/Item/index.tsx b/www/packages/docs-ui/src/components/Menu/Item/index.tsx
index fd11c770f5..b5a343a956 100644
--- a/www/packages/docs-ui/src/components/Menu/Item/index.tsx
+++ b/www/packages/docs-ui/src/components/Menu/Item/index.tsx
@@ -20,7 +20,9 @@ export const MenuItem = ({ item }: MenuItemProps) => {
       )}
       href={item.link}
     >
-      <span className="text-medusa-fg-subtle">{item.icon}</span>
+      <span className="text-medusa-fg-subtle mt-[2.5px] block">
+        {item.icon}
+      </span>
       <span className="text-compact-small">{item.title}</span>
     </Link>
   )
diff --git a/www/packages/docs-ui/src/components/index.ts b/www/packages/docs-ui/src/components/index.ts
index 2dfcdc759c..f117d941da 100644
--- a/www/packages/docs-ui/src/components/index.ts
+++ b/www/packages/docs-ui/src/components/index.ts
@@ -22,7 +22,6 @@ export * from "./ExpandableNotice"
 export * from "./FeatureFlagNotice"
 export * from "./Feedback"
 export * from "./Feedback/Solutions"
-export * from "./HelpButton"
 export * from "./HooksLoader"
 export * from "./Icons"
 export * from "./InlineIcon"
diff --git a/www/packages/docs-ui/src/constants.tsx b/www/packages/docs-ui/src/constants.tsx
index 234d71c35c..f5646f46e2 100644
--- a/www/packages/docs-ui/src/constants.tsx
+++ b/www/packages/docs-ui/src/constants.tsx
@@ -1,8 +1,7 @@
 import React from "react"
-import { Badge, HelpButton } from "@/components"
+import { Badge } from "@/components"
 import { OptionType } from "@/hooks"
 import { NavigationDropdownItem, SidebarItem } from "types"
-import { NotificationItemType } from "@/providers"
 import { NavigationDropdownDocIcon } from "./components/Icons/NavigationDropdown/Doc"
 import { NavigationDropdownStoreIcon } from "./components/Icons/NavigationDropdown/Store"
 import { NavigationDropdownAdminIcon } from "./components/Icons/NavigationDropdown/Admin"
@@ -233,8 +232,3 @@ export const searchFiltersV1: OptionType[] = [
     label: "UI",
   },
 ]
-
-export const helpButtonNotification: NotificationItemType = {
-  layout: "empty",
-  children: <HelpButton />,
-}