docs: redesigned admonitions (#5689)

www/apps/docs/src/theme/Admonition/Icon/Danger.tsx

@@ -10,7 +10,10 @@ export default function AdmonitionIconDanger({
   return (
     <ExclamationCircleSolid
       {...props}
-      className={clsx("inline-block mr-0.125 text-medusa-fg-error", className)}
+      className={clsx(
+        "inline-block mr-0.125 text-medusa-tag-red-icon",
+        className
+      )}
     />
   )
 }

www/apps/docs/src/theme/Admonition/Icon/Note.tsx

@@ -11,7 +11,7 @@ export default function AdmonitionIconNote({
     <InformationCircleSolid
       {...props}
       className={clsx(
-        "inline-block mr-0.125 text-medusa-tag-blue-icon",
+        "inline-block mr-0.125 text-medusa-tag-neutral-icon",
         className
       )}
     />

www/apps/docs/src/theme/Admonition/Icon/Tip.tsx

@@ -1,19 +1,7 @@
-import { LightBulbSolid } from "@medusajs/icons"
 import type { IconProps } from "@medusajs/icons/dist/types"
-import clsx from "clsx"
 import React from "react"
+import AdmonitionIconNote from "./Note"
 
-export default function AdmonitionIconTip({
-  className,
-  ...props
-}: IconProps): JSX.Element {
-  return (
-    <LightBulbSolid
-      {...props}
-      className={clsx(
-        "inline-block mr-0.125 text-medusa-tag-orange-icon",
-        className
-      )}
-    />
-  )
+export default function AdmonitionIconTip(props: IconProps): JSX.Element {
+  return <AdmonitionIconNote {...props} />
 }

www/apps/docs/src/theme/Admonition/Layout/index.tsx

@@ -6,12 +6,16 @@ import type { Props } from "@theme/Admonition/Layout"
 function AdmonitionContainer({
   className,
   children,
+  type,
 }: Pick<Props, "type" | "className"> & { children: ReactNode }) {
   return (
     <div
       className={clsx(
-        "p-1 border border-solid border-medusa-border-base rounded",
-        "bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-none",
+        "p-1 border border-solid  rounded shadow-none",
+        (type === "note" || type === "info" || type === "tip") &&
+          "bg-medusa-tag-neutral-bg border-medusa-tag-neutral-border",
+        (type === "danger" || type === "warning" || type === "caution") &&
+          "bg-medusa-tag-red-bg border-medusa-tag-red-border",
         "[&_a]:no-underline [&_a]:text-medusa-fg-interactive hover:[&_a]:text-medusa-fg-interactive-hover ",
         "mb-2 alert",
         className
@@ -26,26 +30,57 @@ function AdmonitionHeading({ icon }: Pick<Props, "icon">) {
   return <span className={clsx("inline-block h-1.5 w-1.5 mr-1")}>{icon}</span>
 }
 
-function AdmonitionContent({ children }: Pick<Props, "children">) {
+function AdmonitionContent({
+  children,
+  title,
+  type,
+}: Pick<Props, "children" | "title" | "type">) {
   return children ? (
     <div
       className={clsx(
-        "text-medusa-fg-subtle",
+        (type === "note" || type === "info" || type === "tip") &&
+          "text-medusa-tag-neutral-text",
+        (type === "danger" || type === "warning" || type === "caution") &&
+          "text-medusa-tag-red-text",
         "text-medium flex-1 [&>*:last-child]:mb-0",
         "[&>p>code]:px-0.5 [&>p>code]:text-code-label"
       )}
     >
+      {title && (
+        <span className="txt-compact-medium-plus block mb-0.125">
+          {transformAdmonitionTitle(title)}
+        </span>
+      )}
       {children}
     </div>
   ) : null
 }
 
 export default function AdmonitionLayout(props: Props): JSX.Element {
-  const { type, icon, children, className } = props
+  const { type, icon, children, className, title } = props
   return (
     <AdmonitionContainer type={type} className={className}>
       <AdmonitionHeading icon={icon} />
-      <AdmonitionContent>{children}</AdmonitionContent>
+      <AdmonitionContent title={title} type={type}>
+        {children}
+      </AdmonitionContent>
     </AdmonitionContainer>
   )
 }
+
+function transformAdmonitionTitle<T = unknown>(title: T): T | string {
+  if (typeof title !== "string") {
+    return title
+  }
+  switch (title) {
+    case "note":
+    case "tip":
+    case "danger":
+    case "warning":
+    case "info":
+    case "caution":
+      return title.charAt(0).toUpperCase + title.substring(1)
+    default:
+      return title
+  }
+}

www/apps/docs/src/theme/Admonition/Type/Caution.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import clsx from "clsx"
+import Translate from "@docusaurus/Translate"
+import type { Props } from "@theme/Admonition/Type/Caution"
+import AdmonitionLayout from "@theme/Admonition/Layout"
+import IconWarning from "@theme/Admonition/Icon/Warning"
+
+const infimaClassName = "alert alert--warning"
+
+const defaultProps = {
+  icon: <IconWarning />,
+  title: (
+    <Translate
+      id="theme.admonition.caution"
+      description="The default label used for the Caution admonition (:::caution)"
+    >
+      Caution
+    </Translate>
+  ),
+}
+
+// TODO remove before v4: Caution replaced by Warning
+// see https://github.com/facebook/docusaurus/issues/7558
+export default function AdmonitionTypeCaution(props: Props): JSX.Element {
+  return (
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}
+    >
+      {props.children}
+    </AdmonitionLayout>
+  )
+}

www/apps/docs/src/theme/Admonition/Type/Danger.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import clsx from "clsx"
+import Translate from "@docusaurus/Translate"
+import type { Props } from "@theme/Admonition/Type/Danger"
+import AdmonitionLayout from "@theme/Admonition/Layout"
+import IconDanger from "@theme/Admonition/Icon/Danger"
+
+const infimaClassName = "alert alert--danger"
+
+const defaultProps = {
+  icon: <IconDanger />,
+  title: (
+    <Translate
+      id="theme.admonition.danger"
+      description="The default label used for the Danger admonition (:::danger)"
+    >
+      Danger
+    </Translate>
+  ),
+}
+
+export default function AdmonitionTypeDanger(props: Props): JSX.Element {
+  return (
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}
+    >
+      {props.children}
+    </AdmonitionLayout>
+  )
+}

www/apps/docs/src/theme/Admonition/Type/Info.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import clsx from "clsx"
+import Translate from "@docusaurus/Translate"
+import type { Props } from "@theme/Admonition/Type/Info"
+import AdmonitionLayout from "@theme/Admonition/Layout"
+import IconInfo from "@theme/Admonition/Icon/Info"
+
+const infimaClassName = "alert alert--info"
+
+const defaultProps = {
+  icon: <IconInfo />,
+  title: (
+    <Translate
+      id="theme.admonition.info"
+      description="The default label used for the Info admonition (:::info)"
+    >
+      Info
+    </Translate>
+  ),
+}
+
+export default function AdmonitionTypeInfo(props: Props): JSX.Element {
+  return (
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}
+    >
+      {props.children}
+    </AdmonitionLayout>
+  )
+}

www/apps/docs/src/theme/Admonition/Type/Note.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import clsx from "clsx"
+import Translate from "@docusaurus/Translate"
+import type { Props } from "@theme/Admonition/Type/Note"
+import AdmonitionLayout from "@theme/Admonition/Layout"
+import IconNote from "@theme/Admonition/Icon/Note"
+
+const infimaClassName = "alert alert--secondary"
+
+const defaultProps = {
+  icon: <IconNote />,
+  title: (
+    <Translate
+      id="theme.admonition.note"
+      description="The default label used for the Note admonition (:::note)"
+    >
+      Note
+    </Translate>
+  ),
+}
+
+export default function AdmonitionTypeNote(props: Props): JSX.Element {
+  return (
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}
+    >
+      {props.children}
+    </AdmonitionLayout>
+  )
+}

www/apps/docs/src/theme/Admonition/Type/Tip.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import clsx from "clsx"
+import Translate from "@docusaurus/Translate"
+import type { Props } from "@theme/Admonition/Type/Tip"
+import AdmonitionLayout from "@theme/Admonition/Layout"
+import IconTip from "@theme/Admonition/Icon/Tip"
+
+const infimaClassName = "alert alert--success"
+
+const defaultProps = {
+  icon: <IconTip />,
+  title: (
+    <Translate
+      id="theme.admonition.tip"
+      description="The default label used for the Tip admonition (:::tip)"
+    >
+      Tip
+    </Translate>
+  ),
+}
+
+export default function AdmonitionTypeTip(props: Props): JSX.Element {
+  return (
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}
+    >
+      {props.children}
+    </AdmonitionLayout>
+  )
+}

www/apps/docs/src/theme/Admonition/Type/Warning.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import clsx from "clsx"
+import Translate from "@docusaurus/Translate"
+import type { Props } from "@theme/Admonition/Type/Warning"
+import AdmonitionLayout from "@theme/Admonition/Layout"
+import IconWarning from "@theme/Admonition/Icon/Warning"
+
+const infimaClassName = "alert alert--warning"
+
+const defaultProps = {
+  icon: <IconWarning />,
+  title: (
+    <Translate
+      id="theme.admonition.warning"
+      description="The default label used for the Warning admonition (:::warning)"
+    >
+      Warning
+    </Translate>
+  ),
+}
+
+export default function AdmonitionTypeWarning(props: Props): JSX.Element {
+  return (
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}
+    >
+      {props.children}
+    </AdmonitionLayout>
+  )
+}