docs: redesign notes (#8661)

* docs: redesign notes * fix color for warning notes * allow optional links * show links in a note * allow line code in notes
2024-08-20 14:47:24 +02:00
parent 5f310c0a00
commit 73905c14b1
16 changed files with 508 additions and 312 deletions
@@ -0,0 +1,40 @@
+import clsx from "clsx"
+import Link from "next/link"
+import React from "react"
+
+export type PrerequisiteItemPosition = "top" | "middle" | "bottom" | "alone"
+
+export type PrerequisiteItemType = {
+  text: string
+  link?: string
+  position?: PrerequisiteItemPosition
+}
+
+type PrerequisiteItemProps = {
+  item: PrerequisiteItemType
+}
+
+export const PrerequisiteItem = ({
+  item: { text, link, position = "alone" },
+}: PrerequisiteItemProps) => {
+  return (
+    <Link
+      href={link || "#"}
+      className={clsx(
+        "bg-medusa-tag-neutral-bg text-medusa-fg-subtle",
+        "px-docs_0.75 py-docs_0.5 w-fit",
+        "flex justify-center items-center",
+        "hover:bg-medusa-tag-neutral-bg-hover",
+        "rounded-tr-docs_xl rounded-br-docs_xl",
+        position === "alone" && "rounded-docs_xl",
+        position === "top" && "rounded-tl-docs_xl rounded-bl-docs_DEFAULT",
+        position === "middle" &&
+          "rounded-tl-docs_DEFAULT rounded-bl-docs_DEFAULT",
+        position === "bottom" && "rounded-tl-docs_DEFAULT rounded-bl-docs_xl",
+        !link && "cursor-text"
+      )}
+    >
+      {text}↗
+    </Link>
+  )
+}
@@ -0,0 +1,88 @@
+"use client"
+
+import React from "react"
+import { Button, useCollapsible } from "../.."
+import clsx from "clsx"
+import { TriangleRightMini } from "@medusajs/icons"
+import {
+  PrerequisiteItem,
+  PrerequisiteItemPosition,
+  PrerequisiteItemType,
+} from "./Item"
+
+type PrerequisitesProps = {
+  items: PrerequisiteItemType[]
+}
+
+export const Prerequisites = ({ items }: PrerequisitesProps) => {
+  const { collapsed, getCollapsibleElms, setCollapsed } = useCollapsible({
+    initialValue: false,
+    translateEnabled: false,
+  })
+
+  const getPosition = (index: number): PrerequisiteItemPosition => {
+    if (items.length === 1) {
+      return "alone"
+    }
+
+    if (index === items.length - 1) {
+      return "bottom"
+    }
+
+    return index === 0 ? "top" : "middle"
+  }
+
+  return (
+    <details
+      open={!collapsed}
+      onClick={(event) => {
+        event.preventDefault()
+      }}
+      onToggle={(event) => {
+        // this is to avoid event propagation
+        // when details are nested, which is a bug
+        // in react. Learn more here:
+        // https://github.com/facebook/react/issues/22718
+        event.stopPropagation()
+      }}
+      className="my-docs_1"
+    >
+      <summary
+        className="flex no-marker items-center mb-[6px] w-fit"
+        onClick={() => setCollapsed((prev) => !prev)}
+      >
+        <Button
+          className={clsx(
+            "flex items-center",
+            "px-docs_0.5 py-docs_0.25",
+            "text-medusa-fg-subtle",
+            "active:!outline-none active:!shadow-none",
+            "focus:!outline-none focus:!shadow-none"
+          )}
+          variant="transparent-clear"
+        >
+          <TriangleRightMini
+            className={clsx("transition-transform", !collapsed && "rotate-90")}
+          />
+          <span className="text-compact-small-plus block ml-[6px]">
+            Prerequisites
+          </span>
+          <span className="fg-muted text-compact-small">{items.length}</span>
+        </Button>
+      </summary>
+      {getCollapsibleElms(
+        <div className="flex gap-[6px] flex-col">
+          {items.map((item, index) => (
+            <PrerequisiteItem
+              item={{
+                ...item,
+                position: getPosition(index),
+              }}
+              key={index}
+            />
+          ))}
+        </div>
+      )}
+    </details>
+  )
+}