docs: improve UX of recipe learning path (#5477)

* docs: improve UX of recipe learning path

* fix icon colors

www/apps/docs/src/components/LearningPath/Steps/Actions/index.tsx

@@ -1,15 +1,18 @@
 import React from "react"
 import { useLearningPath } from "../../../../providers/LearningPath"
 import { Button } from "docs-ui"
+import { ArrowDownLeftMini, ArrowDownMini } from "@medusajs/icons"
 
 type LearningPathStepActionsType = {
   onFinish?: () => void
   onClose?: () => void
+  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>
 } & React.AllHTMLAttributes<HTMLDivElement>
 
 const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
   onFinish,
   onClose,
+  setCollapsed,
 }) => {
   const { hasNextStep, nextStep, endPath } = useLearningPath()
 
@@ -22,18 +25,34 @@ const LearningPathStepActions: React.FC<LearningPathStepActionsType> = ({
   }
 
   return (
-    <div className="flex gap-0.5 p-1 justify-end items-center">
-      <Button onClick={onClose}>Close</Button>
-      {hasNextStep() && (
-        <Button onClick={nextStep} variant="primary">
-          Next
+    <div className="flex p-1 justify-between items-center">
+      <div>
+        <Button
+          onClick={() => setCollapsed(true)}
+          variant="secondary"
+          className="!text-medusa-fg-subtle !p-[6px]"
+        >
+          <ArrowDownLeftMini className="flip-y hidden md:inline" />
+          <ArrowDownMini className="inline md:hidden" />
         </Button>
-      )}
-      {!hasNextStep() && (
-        <Button onClick={handleFinish} variant="primary">
-          Finish
-        </Button>
-      )}
+      </div>
+      <div className="flex gap-0.5 items-center">
+        {hasNextStep() && (
+          <>
+            <Button onClick={onClose} variant="secondary">
+              Close
+            </Button>
+            <Button onClick={nextStep} variant="primary">
+              Next
+            </Button>
+          </>
+        )}
+        {!hasNextStep() && (
+          <Button onClick={handleFinish} variant="primary">
+            Finish
+          </Button>
+        )}
+      </div>
     </div>
   )
 }

www/apps/docs/src/components/LearningPath/Steps/index.tsx

@@ -1,10 +1,12 @@
 import { useLearningPath } from "@site/src/providers/LearningPath"
-import React from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import LearningPathStepActions from "./Actions"
 import clsx from "clsx"
 import IconCircleDottedLine from "@site/src/theme/Icon/CircleDottedLine"
 import Link from "@docusaurus/Link"
-import { CheckCircleSolid, CircleMiniSolid } from "@medusajs/icons"
+import { CheckCircleSolid, CircleMiniSolid, ListBullet } from "@medusajs/icons"
+import { Badge, Button } from "docs-ui"
+import { CSSTransition, SwitchTransition } from "react-transition-group"
 
 type LearningPathStepsProps = {
   onFinish?: () => void
@@ -13,66 +15,140 @@ type LearningPathStepsProps = {
 
 const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
   const { path, currentStep, goToStep } = useLearningPath()
+  const [collapsed, setCollapsed] = useState(false)
+  const stepsRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const nodeRef: React.RefObject<HTMLElement> = collapsed ? buttonRef : stepsRef
+
+  const handleScroll = useCallback(() => {
+    if (window.scrollY > 100 && !collapsed) {
+      // automatically collapse steps
+      setCollapsed(true)
+    } else if (
+      (window.scrollY === 0 ||
+        window.scrollY + window.innerHeight >= document.body.scrollHeight) &&
+      collapsed
+    ) {
+      // automatically open steps
+      setCollapsed(false)
+    }
+  }, [collapsed])
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll)
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [handleScroll])
 
   if (!path) {
     return <></>
   }
 
   return (
-    <>
-      <div className="overflow-auto basis-3/4">
-        {path.steps.map((step, index) => (
-          <div
-            className={clsx(
-              "border-0 border-b border-solid border-medusa-border-base",
-              "relative p-1"
-            )}
-            key={index}
-          >
-            <div className={clsx("flex items-center gap-1")}>
-              <div className="w-2 flex-none flex items-center justify-center">
-                {index === currentStep && (
-                  <IconCircleDottedLine
+    <SwitchTransition>
+      <CSSTransition
+        key={collapsed ? "show_path" : "show_button"}
+        nodeRef={nodeRef}
+        timeout={300}
+        addEndListener={(done) => {
+          nodeRef.current?.addEventListener("transitionend", done, false)
+        }}
+        classNames={{
+          enter: "animate-maximize animate-fast",
+          exit: "animate-minimize animate-fast",
+        }}
+      >
+        <>
+          {!collapsed && (
+            <div
+              className={clsx(
+                "bg-medusa-bg-base shadow-flyout dark:shadow-flyout-dark rounded",
+                "transition-transform origin-bottom-right flex flex-col"
+              )}
+              ref={stepsRef}
+            >
+              <div className="overflow-auto basis-3/4">
+                {path.steps.map((step, index) => (
+                  <div
                     className={clsx(
-                      "shadow-active dark:shadow-active-dark rounded-full",
-                      "!text-ui-fg-interactive"
+                      "border-0 border-b border-solid border-medusa-border-base",
+                      "relative p-1"
                     )}
-                  />
-                )}
-                {index < currentStep && (
-                  <CheckCircleSolid className="text-ui-fg-interactive" />
-                )}
-                {index > currentStep && (
-                  <CircleMiniSolid className="text-ui-fg-subtle" />
-                )}
+                    key={index}
+                  >
+                    <div className={clsx("flex items-center gap-1")}>
+                      <div className="w-2 flex-none flex items-center justify-center">
+                        {index === currentStep && (
+                          <IconCircleDottedLine
+                            className={clsx(
+                              "shadow-active dark:shadow-active-dark rounded-full",
+                              "!text-ui-fg-interactive"
+                            )}
+                          />
+                        )}
+                        {index < currentStep && (
+                          <CheckCircleSolid className="text-ui-fg-interactive" />
+                        )}
+                        {index > currentStep && (
+                          <CircleMiniSolid className="text-ui-fg-subtle" />
+                        )}
+                      </div>
+                      <span
+                        className={clsx(
+                          "text-compact-medium-plus text-medusa-fg-base"
+                        )}
+                      >
+                        {step.title}
+                      </span>
+                    </div>
+                    {index === currentStep && (
+                      <div className={clsx("flex items-center gap-1")}>
+                        <div className="w-2 flex-none"></div>
+                        <div
+                          className={clsx("text-medium text-ui-fg-subtle mt-1")}
+                        >
+                          {step.descriptionJSX ?? step.description}
+                        </div>
+                      </div>
+                    )}
+                    <Link
+                      href={step.path}
+                      className={clsx("absolute top-0 left-0 w-full h-full")}
+                      onClick={(e) => {
+                        e.preventDefault()
+                        goToStep(index)
+                      }}
+                    />
+                  </div>
+                ))}
               </div>
-              <span
-                className={clsx("text-compact-medium-plus text-medusa-fg-base")}
-              >
-                {step.title}
-              </span>
+              <LearningPathStepActions setCollapsed={setCollapsed} {...rest} />
             </div>
-            {index === currentStep && (
-              <div className={clsx("flex items-center gap-1")}>
-                <div className="w-2 flex-none"></div>
-                <div className={clsx("text-medium text-ui-fg-subtle mt-1")}>
-                  {step.descriptionJSX ?? step.description}
-                </div>
-              </div>
-            )}
-            <Link
-              href={step.path}
-              className={clsx("absolute top-0 left-0 w-full h-full")}
-              onClick={(e) => {
-                e.preventDefault()
-                goToStep(index)
-              }}
-            />
-          </div>
-        ))}
-      </div>
-      <LearningPathStepActions {...rest} />
-    </>
+          )}
+          {collapsed && (
+            <Button
+              variant="secondary"
+              className={clsx(
+                "!p-[10px] !shadow-flyout dark:!shadow-flyout-dark !text-medusa-fg-subtle w-fit h-fit",
+                "rounded-full border-0 mr-0 ml-auto fixed md:relative max-[767px]:bottom-1 max-[767px]:right-1 "
+              )}
+              onClick={() => setCollapsed(false)}
+              buttonRef={buttonRef}
+            >
+              <ListBullet />
+              <Badge
+                variant="blue"
+                className={clsx("absolute -top-0.25 -right-0.25")}
+              >
+                !
+              </Badge>
+            </Button>
+          )}
+        </>
+      </CSSTransition>
+    </SwitchTransition>
   )
 }