docs: add a need help button (#8069)

* docs: add a need help button

* change github issue link

* responsive fixes

www/packages/docs-ui/src/components/HelpButton/Actions/index.tsx

@@ -0,0 +1,52 @@
+"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>
+  )
+}

www/packages/docs-ui/src/components/HelpButton/index.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import React, { useCallback, useEffect, useRef, useState } from "react"
+import { Button } from "@/components"
+import clsx from "clsx"
+import { CSSTransition } from "react-transition-group"
+import { HelpButtonActions } from "./Actions"
+import { useIsBrowser } from "../.."
+
+export const HelpButton = () => {
+  const [showText, setShowText] = useState(false)
+  const [showHelp, setShowHelp] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const isBrowser = useIsBrowser()
+
+  const onClickOutside = useCallback(
+    (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) {
+        setShowHelp(false)
+        setShowText(false)
+      }
+    },
+    [ref.current]
+  )
+
+  useEffect(() => {
+    if (!isBrowser) {
+      return
+    }
+
+    window.document.addEventListener("click", onClickOutside)
+
+    return () => {
+      window.document.removeEventListener("click", onClickOutside)
+    }
+  }, [isBrowser])
+
+  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>
+  )
+}

www/packages/docs-ui/src/components/Notification/index.tsx

@@ -29,7 +29,7 @@ export const NotificationContainer = () => {
           "flex fixed flex-col gap-docs_0.5 right-0",
           "md:w-auto w-full overflow-y-auto",
           "max-h-[50%] md:max-h-[calc(100vh-57px)]",
-          notifications.length && "max-[768px]:h-[50%]",
+          "max-[768px]:max-h-[50%]",
           className
         )}
       >

www/packages/docs-ui/src/components/index.ts

@@ -22,6 +22,7 @@ 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"