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

www/apps/book/app/advanced-development/data-models/manage-relationships/page.mdx

@@ -1,17 +1,13 @@
+import { BetaBadge } from "docs-ui"
+
 export const metadata = {
   title: `${pageNumber} Manage Relationships`,
 }
 
-# {metadata.title}
+# {metadata.title} <BetaBadge tooltipText="Data model relationships are in active development and may change." text="Beta" />
 
 In this chapter, you'll learn how to manage relationships between data models when creating, updating, or retrieving records using the module's main service.
 
-<Note type="soon" title="Important">
-
-Data model relationships are in active development and may change.
-
-</Note>
-
 ## Manage One-to-One and One-to-Many Relationship
 
 When you create a record of a data model that belongs to another, pass the ID of the other data model's record in the `{relation_name}_id` property.

www/apps/book/app/page.mdx

@@ -1,5 +1,6 @@
 import { CheckCircleSolid, BuildingStorefront, BuildingsSolid, ComputerDesktop, FlyingBox } from "@medusajs/icons"
 import { config } from "@/config"
+import { Prerequisites } from "docs-ui"
 
 export const metadata = {
   title: `${pageNumber} Introduction - ${config.titleSuffix}`,
@@ -20,14 +21,20 @@ With these tools, you save time you would spend with other platforms on maintain
 
 ## Get started
 
-
+<Prerequisites items={[
-<Note type="check">
+  {
-
+    text: "Node.js v20+",
-- [Node.js v20+](https://nodejs.org/en/download)
+    link: "https://nodejs.org/en/download"
-- [Git CLI tool](https://git-scm.com/downloads)
+  },
-- [PostgreSQL](https://www.postgresql.org/download/)
+  {
-
+    text: "Git CLI tool",
-</Note>
+    link: "https://git-scm.com/downloads"
+  },
+  {
+    text: "PostgreSQL",
+    link: "https://www.postgresql.org/download/"
+  }
+]} />
 
 Create your first Medusa store by running the following command:
 

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

@@ -0,0 +1,23 @@
+import React from "react"
+import { Badge, Tooltip } from "../.."
+
+type BetaBadgeProps = {
+  text?: string
+  tooltipText?: string
+}
+
+export const BetaBadge = ({
+  text = "Coming soon",
+  tooltipText = "Coming soon",
+}: BetaBadgeProps) => {
+  return (
+    <Tooltip
+      tooltipChildren={tooltipText}
+      className="align-middle text-compact-x-small-plus"
+    >
+      <Badge variant="blue" badgeType="shaded" className="cursor-pointer">
+        {text}
+      </Badge>
+    </Tooltip>
+  )
+}

www/packages/docs-ui/src/components/Icons/ShadedBg/index.tsx

@@ -32,214 +32,301 @@ export const ShadedBgIcon = ({
 
   return (
     <svg
-      width="33"
-      height="20"
-      viewBox="0 0 33 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      height="100%"
+      width="100%"
       {...props}
     >
-      <g clipPath="url(#clip0_7397_14857)">
+      <g clipPath="url(#clip0_10402_37468)">
         <rect
-          x="10.136"
+          x="32.3379"
-          y="-41.6187"
+          y="-66.5442"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 10.136 -41.6187)"
+          transform="rotate(45 32.3379 -66.5442)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="12.6109"
+          x="34.813"
-          y="-39.1439"
+          y="-64.0694"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 12.6109 -39.1439)"
+          transform="rotate(45 34.813 -64.0694)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="15.0858"
+          x="37.2876"
-          y="-36.6689"
+          y="-61.5945"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 15.0858 -36.6689)"
+          transform="rotate(45 37.2876 -61.5945)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="17.5607"
+          x="39.7627"
-          y="-34.1941"
+          y="-59.1196"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 17.5607 -34.1941)"
+          transform="rotate(45 39.7627 -59.1196)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="20.0355"
+          x="42.2373"
-          y="-31.7192"
+          y="-56.6447"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 20.0355 -31.7192)"
+          transform="rotate(45 42.2373 -56.6447)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="22.5104"
+          x="44.7124"
-          y="-29.2443"
+          y="-54.1699"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 22.5104 -29.2443)"
+          transform="rotate(45 44.7124 -54.1699)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="24.9853"
+          x="47.187"
-          y="-26.7695"
+          y="-51.695"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 24.9853 -26.7695)"
+          transform="rotate(45 47.187 -51.695)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="27.4602"
+          x="49.6621"
-          y="-24.2946"
+          y="-49.2201"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 27.4602 -24.2946)"
+          transform="rotate(45 49.6621 -49.2201)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="29.935"
+          x="52.1367"
-          y="-21.8197"
+          y="-46.7452"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 29.935 -21.8197)"
+          transform="rotate(45 52.1367 -46.7452)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="32.4099"
+          x="54.6118"
-          y="-19.3448"
+          y="-44.2704"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 32.4099 -19.3448)"
+          transform="rotate(45 54.6118 -44.2704)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="34.8848"
+          x="57.0869"
-          y="-16.87"
+          y="-41.7955"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 34.8848 -16.87)"
+          transform="rotate(45 57.0869 -41.7955)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="37.3597"
+          x="59.5615"
-          y="-14.3951"
+          y="-39.3206"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 37.3597 -14.3951)"
+          transform="rotate(45 59.5615 -39.3206)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="39.8345"
+          x="62.0366"
-          y="-11.9202"
+          y="-36.8458"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 39.8345 -11.9202)"
+          transform="rotate(45 62.0366 -36.8458)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="42.3094"
+          x="64.5112"
-          y="-9.44537"
+          y="-34.3709"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 42.3094 -9.44537)"
+          transform="rotate(45 64.5112 -34.3709)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="44.7843"
+          x="66.9863"
-          y="-6.97046"
+          y="-31.896"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 44.7843 -6.97046)"
+          transform="rotate(45 66.9863 -31.896)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="47.2592"
+          x="69.4609"
-          y="-4.49561"
+          y="-29.4211"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 47.2592 -4.49561)"
+          transform="rotate(45 69.4609 -29.4211)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="49.734"
+          x="71.936"
-          y="-2.02075"
+          y="-26.9463"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 49.734 -2.02075)"
+          transform="rotate(45 71.936 -26.9463)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="52.2089"
+          x="74.4106"
-          y="0.454163"
+          y="-24.4714"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 52.2089 0.454163)"
+          transform="rotate(45 74.4106 -24.4714)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="54.6838"
+          x="76.8857"
-          y="2.92902"
+          y="-21.9965"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 54.6838 2.92902)"
+          transform="rotate(45 76.8857 -21.9965)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="57.1586"
+          x="79.3604"
-          y="5.40387"
+          y="-19.5216"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 57.1586 5.40387)"
+          transform="rotate(45 79.3604 -19.5216)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="59.6335"
+          x="81.8354"
-          y="7.87878"
+          y="-17.0468"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 59.6335 7.87878)"
+          transform="rotate(45 81.8354 -17.0468)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="62.1084"
+          x="84.3105"
-          y="10.3536"
+          y="-14.5719"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 62.1084 10.3536)"
+          transform="rotate(45 84.3105 -14.5719)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="64.5833"
+          x="86.7852"
-          y="12.8285"
+          y="-12.097"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 64.5833 12.8285)"
+          transform="rotate(45 86.7852 -12.097)"
-          fill={color}
+          fill="#BFDBFE"
         />
         <rect
-          x="67.0581"
+          x="89.2603"
-          y="15.3034"
+          y="-9.62215"
           width="1.5"
-          height="64"
+          height="96"
-          transform="rotate(45 67.0581 15.3034)"
+          transform="rotate(45 89.2603 -9.62215)"
-          fill={color}
+          fill="#BFDBFE"
+        />
+        <rect
+          x="91.7349"
+          y="-7.14726"
+          width="1.5"
+          height="96"
+          transform="rotate(45 91.7349 -7.14726)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="94.21"
+          y="-4.67239"
+          width="1.5"
+          height="96"
+          transform="rotate(45 94.21 -4.67239)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="96.6846"
+          y="-2.19753"
+          width="1.5"
+          height="96"
+          transform="rotate(45 96.6846 -2.19753)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="99.1597"
+          y="0.277344"
+          width="1.5"
+          height="96"
+          transform="rotate(45 99.1597 0.277344)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="101.634"
+          y="2.75223"
+          width="1.5"
+          height="96"
+          transform="rotate(45 101.634 2.75223)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="104.109"
+          y="5.2271"
+          width="1.5"
+          height="96"
+          transform="rotate(45 104.109 5.2271)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="106.584"
+          y="7.70197"
+          width="1.5"
+          height="96"
+          transform="rotate(45 106.584 7.70197)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="109.059"
+          y="10.1768"
+          width="1.5"
+          height="96"
+          transform="rotate(45 109.059 10.1768)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="111.534"
+          y="12.6517"
+          width="1.5"
+          height="96"
+          transform="rotate(45 111.534 12.6517)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="114.009"
+          y="15.1266"
+          width="1.5"
+          height="96"
+          transform="rotate(45 114.009 15.1266)"
+          fill="#BFDBFE"
+        />
+        <rect
+          x="116.484"
+          y="17.6015"
+          width="1.5"
+          height="96"
+          transform="rotate(45 116.484 17.6015)"
+          fill="#BFDBFE"
         />
       </g>
       <defs>
-        <clipPath id="clip0_7397_14857">
+        <clipPath id="clip0_10402_37468">
           <rect
-            width="82"
+            width="148.5"
-            height="64"
+            height="96"
             fill="white"
-            transform="translate(10.136 -41.6187) rotate(45)"
+            transform="translate(22.4385 -76.4437) rotate(45)"
           />
         </clipPath>
       </defs>

www/packages/docs-ui/src/components/Note/Layout/index.tsx

@@ -1,60 +1,111 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { NoteProps } from ".."
 import clsx from "clsx"
+import { MarkdownContent } from "../../.."
 
-type NoteLayoutProps = NoteProps & {
+type StringInfo = {
-  icon: React.ReactNode
+  allStringChildren: boolean
+  stringChildren: string[]
 }
 
-export const NoteLayout = ({
+type NoteLayoutProps = NoteProps
-  type,
+
-  title,
+export const NoteLayout = ({ type, title, children }: NoteLayoutProps) => {
-  children,
+  const getStringInfoFromChildren = (nodes: React.ReactNode): StringInfo => {
-  icon,
+    let allStringChildren = true
-}: NoteLayoutProps) => {
+    const stringChildren: string[] = []
-  const isDefaultStyle =
+
-    type === "default" ||
+    React.Children.forEach(nodes, (child) => {
-    type === "success" ||
+      if (!allStringChildren) {
-    type === "error" ||
+        return
-    type === "check"
+      } else if (["string", "number"].includes(typeof child)) {
-  const isWarningStyle = type === "warning"
+        stringChildren.push(`${child}`)
-  const isSoonStyle = type === "soon"
+      } else if (Array.isArray(child)) {
+        const childInfo = getStringInfoFromChildren(child)
+        allStringChildren = childInfo.allStringChildren
+        stringChildren.push(...childInfo.stringChildren)
+      } else if (
+        React.isValidElement(child) &&
+        typeof child.props === "object" &&
+        child.props &&
+        "children" in child.props &&
+        child.props.children
+      ) {
+        const typeStr = child.type.toString()
+        if (typeStr.includes(`"li"`)) {
+          allStringChildren = false
+          return
+        } else if (
+          "href" in child.props &&
+          typeof child.props.children === "string"
+        ) {
+          stringChildren.push(`[${child.props.children}](${child.props.href})`)
+          return
+        } else if (
+          typeStr.includes("InlineCode") &&
+          typeof child.props.children === "string"
+        ) {
+          stringChildren.push(`\`${child.props.children}\``)
+          return
+        }
+
+        const childInfo = getStringInfoFromChildren(
+          child.props.children as React.ReactNode
+        )
+        allStringChildren = childInfo.allStringChildren
+        stringChildren.push(...childInfo.stringChildren)
+      }
+    })
+
+    return {
+      allStringChildren,
+      stringChildren,
+    }
+  }
+  const { allStringChildren, stringChildren } = useMemo(() => {
+    const { allStringChildren, stringChildren } =
+      getStringInfoFromChildren(children)
+
+    return {
+      allStringChildren,
+      stringChildren: stringChildren.join(" "),
+    }
+  }, [children])
 
   return (
     <div
       className={clsx(
-        "p-docs_0.75 border border-solid rounded shadow-none",
+        "py-[10px] px-docs_0.75 my-docs_0.5",
-        isDefaultStyle && "bg-medusa-bg-component border-medusa-border-base",
+        "flex gap-docs_0.75 rounded-docs_DEFAULT items-stretch",
-        isWarningStyle && "bg-medusa-tag-red-bg border-medusa-tag-red-border",
+        "bg-medusa-bg-component border border-medusa-border-base"
-        isSoonStyle && "bg-medusa-tag-blue-bg border-medusa-tag-blue-border",
-        "[&_a]:no-underline [&_a]:text-medusa-fg-interactive hover:[&_a]:text-medusa-fg-interactive-hover",
-        "mb-docs_2"
       )}
     >
-      <div className={clsx("flex gap-docs_0.5")}>
-        {icon}
-        <div
-          className={clsx(
-            isDefaultStyle && "text-medusa-fg-subtle",
-            isWarningStyle && "text-medusa-tag-red-text",
-            isSoonStyle && "text-medusa-tag-blue-text",
-            "text-medium flex-1 [&>*:last-child]:mb-0",
-            "[&>p>code]:px-docs_0.5 [&>p>code]:text-code-label"
-          )}
-        >
-          {title && (
       <span
         className={clsx(
-                "text-compact-medium-plus block mb-docs_0.125",
+          "rounded-full w-docs_0.25",
-                isDefaultStyle && "text-medusa-fg-base",
+          // TODO remove once we use the new prerequisites component across docs
-                isWarningStyle && "text-medusa-tag-red-text",
+          (type === "default" || type === "check") &&
-                isSoonStyle && "text-medusa-tag-blue-text"
+            "bg-medusa-tag-neutral-icon",
+          (type === "error" || type === "warning") && "bg-medusa-tag-red-icon",
+          type === "success" && "bg-medusa-tag-green-icon",
+          // TODO remove once all soon components are removed
+          type === "soon" && "bg-medusa-tag-blue-icon"
         )}
-            >
+      ></span>
-              {title}
+      <div className="flex-1">
+        <div className="text-small text-medusa-fg-subtle [&_ol]:!mb-0 [&_ul]:!mb-0">
+          <span className={clsx("text-small-plus text-medusa-fg-base")}>
+            {title}:&nbsp;
           </span>
+          {allStringChildren && (
+            <MarkdownContent
+              allowedElements={["a", "code"]}
+              unwrapDisallowed={true}
+            >
+              {stringChildren}
+            </MarkdownContent>
           )}
-          {children}
+          {!allStringChildren && children}
         </div>
       </div>
     </div>

www/packages/docs-ui/src/components/Note/Types/checks.tsx

@@ -1,27 +1,7 @@
 import React from "react"
 import { NoteProps } from ".."
 import { NoteLayout } from "../Layout"
-import { CheckCircleSolid } from "@medusajs/icons"
-import clsx from "clsx"
 
-export const CheckNote = ({
+export const CheckNote = ({ title = "Prerequisites", ...props }: NoteProps) => {
-  title = "Prerequisites",
+  return <NoteLayout title={title} {...props} />
-  icon,
-  ...props
-}: NoteProps) => {
-  return (
-    <NoteLayout
-      title={title}
-      icon={
-        icon || (
-          <CheckCircleSolid
-            className={clsx(
-              "inline-block mr-docs_0.125 text-medusa-tag-neutral-icon"
-            )}
-          />
-        )
-      }
-      {...props}
-    />
-  )
 }

www/packages/docs-ui/src/components/Note/Types/default.tsx

@@ -1,23 +1,7 @@
 import React from "react"
 import { NoteProps } from ".."
 import { NoteLayout } from "../Layout"
-import { InformationCircleSolid } from "@medusajs/icons"
-import clsx from "clsx"
 
-export const DefaultNote = ({ title = "Note", icon, ...props }: NoteProps) => {
+export const DefaultNote = ({ title = "Note", ...props }: NoteProps) => {
-  return (
+  return <NoteLayout title={title} {...props} />
-    <NoteLayout
-      title={title}
-      icon={
-        icon || (
-          <InformationCircleSolid
-            className={clsx(
-              "inline-block mr-docs_0.125 text-medusa-tag-neutral-icon"
-            )}
-          />
-        )
-      }
-      {...props}
-    />
-  )
 }

www/packages/docs-ui/src/components/Note/Types/error.tsx

@@ -1,23 +1,7 @@
 import React from "react"
 import { NoteProps } from ".."
 import { NoteLayout } from "../Layout"
-import { XMark } from "@medusajs/icons"
-import clsx from "clsx"
 
-export const ErrorNote = ({ title = "Error", icon, ...props }: NoteProps) => {
+export const ErrorNote = ({ title = "Error", ...props }: NoteProps) => {
-  return (
+  return <NoteLayout title={title} {...props} />
-    <NoteLayout
-      title={title}
-      icon={
-        icon || (
-          <XMark
-            className={clsx(
-              "inline-block mr-docs_0.125 text-medusa-tag-red-icon"
-            )}
-          />
-        )
-      }
-      {...props}
-    />
-  )
 }

www/packages/docs-ui/src/components/Note/Types/soon.tsx

@@ -1,27 +1,7 @@
 import React from "react"
 import { NoteProps } from ".."
 import { NoteLayout } from "../Layout"
-import { LightBulb } from "@medusajs/icons"
-import clsx from "clsx"
 
-export const SoonNote = ({
+export const SoonNote = ({ title = "Coming soon", ...props }: NoteProps) => {
-  title = "Coming soon",
+  return <NoteLayout title={title} {...props} />
-  icon,
-  ...props
-}: NoteProps) => {
-  return (
-    <NoteLayout
-      title={title}
-      icon={
-        icon || (
-          <LightBulb
-            className={clsx(
-              "inline-block mr-docs_0.125 text-medusa-tag-blue-icon"
-            )}
-          />
-        )
-      }
-      {...props}
-    />
-  )
 }

www/packages/docs-ui/src/components/Note/Types/sucess.tsx

@@ -1,27 +1,7 @@
 import React from "react"
 import { NoteProps } from ".."
 import { NoteLayout } from "../Layout"
-import { Check } from "@medusajs/icons"
-import clsx from "clsx"
 
-export const SuccessNote = ({
+export const SuccessNote = ({ title = "Sucess", ...props }: NoteProps) => {
-  title = "Sucess",
+  return <NoteLayout title={title} {...props} />
-  icon,
-  ...props
-}: NoteProps) => {
-  return (
-    <NoteLayout
-      title={title}
-      icon={
-        icon || (
-          <Check
-            className={clsx(
-              "inline-block mr-docs_0.125 text-medusa-tag-green-icon"
-            )}
-          />
-        )
-      }
-      {...props}
-    />
-  )
 }

www/packages/docs-ui/src/components/Note/Types/warning.tsx

@@ -1,27 +1,7 @@
 import React from "react"
 import { NoteProps } from ".."
 import { NoteLayout } from "../Layout"
-import { ExclamationCircleSolid } from "@medusajs/icons"
-import clsx from "clsx"
 
-export const WarningNote = ({
+export const WarningNote = ({ title = "Warning", ...props }: NoteProps) => {
-  title = "Warning",
+  return <NoteLayout title={title} {...props} />
-  icon,
-  ...props
-}: NoteProps) => {
-  return (
-    <NoteLayout
-      title={title}
-      icon={
-        icon || (
-          <ExclamationCircleSolid
-            className={clsx(
-              "inline-block mr-docs_0.125 text-medusa-tag-red-icon"
-            )}
-          />
-        )
-      }
-      {...props}
-    />
-  )
 }

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

@@ -10,7 +10,6 @@ export type NoteProps = {
   type?: "default" | "warning" | "success" | "error" | "check" | "soon"
   title?: string
   children?: React.ReactNode
-  icon?: React.ReactNode
 }
 
 export const Note = ({ type = "default", ...props }: NoteProps) => {
@@ -21,6 +20,7 @@ export const Note = ({ type = "default", ...props }: NoteProps) => {
       return <SuccessNote type={type} {...props} />
     case "error":
       return <ErrorNote type={type} {...props} />
+    // TODO remove both once we've removed all notes using them
     case "check":
       return <CheckNote type={type} {...props} />
     case "soon":

www/packages/docs-ui/src/components/Prerequisites/Item/index.tsx

@@ -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>
+  )
+}

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

@@ -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>
+  )
+}

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

@@ -2,6 +2,7 @@ export * from "./AiAssistant"
 export * from "./ApiRunner"
 export * from "./Badge"
 export * from "./Bannerv2"
+export * from "./BetaBadge"
 export * from "./Bordered"
 export * from "./BorderedIcon"
 export * from "./Breadcrumbs"
@@ -48,6 +49,7 @@ export * from "./Notification"
 export * from "./Notification/Item"
 export * from "./Notification/Item/Layout/Default"
 export * from "./Pagination"
+export * from "./Prerequisites"
 export * from "./Rating"
 export * from "./Search"
 export * from "./Search/EmptyQueryBoundary"

www/packages/tailwind/base.tailwind.config.js

@@ -441,6 +441,20 @@ module.exports = {
             fontWeight: "400",
           },
         ],
+        small: [
+          "13px",
+          {
+            lineHeight: "150%",
+            fontWeight: "400",
+          },
+        ],
+        "small-plus": [
+          "13px",
+          {
+            lineHeight: "150%",
+            fontWeight: "500",
+          },
+        ],
         "code-label": [
           "12px",
           {