docs: redesigned admonitions (#5689)

www/apps/docs/content/deployments/server/deploying-on-digital-ocean.md

@@ -211,7 +211,7 @@ YARN_PRODUCTION=false
 NODE_ENV=production
 ```
 
-:::caution
+:::warning
 
 It’s highly recommended to use strong, randomly generated secrets for `JWT_SECRET` and `COOKIE_SECRET`.
 

www/apps/docs/content/development/backend/prepare-environment.mdx

@@ -14,7 +14,7 @@ This document includes the installation instructions for the tools required to u
 
 Node.js is the environment that makes it possible for Medusa to run, so you must install Node.js on your machine to start Medusa development.
 
-:::caution
+:::warning
 
 Medusa supports v16+ of Node.js. You can check your Node.js version using the following command:
 

www/apps/docs/content/development/feature-flags/toggle.md

@@ -15,7 +15,7 @@ If a feature flag is enabled/disabled by default, you don’t need to manually e
 
 ## Enable Feature Flags
 
-:::caution
+:::warning
 
 Features guarded by feature flags are experimental and beta features. Enable them with caution.
 

www/apps/docs/content/modules/carts-and-checkout/payment.md

@@ -50,7 +50,7 @@ When you run your Medusa backend, the Payment Processor will be registered on yo
 
 Once the Payment Processor is added to the backend, the store operator will be able to choose using the [admin dashboard](../../admin/quickstart.mdx) the payment processors available in a region. You can alternatively do that using the [admin APIs](https://docs.medusajs.com/api/admin). These payment processors are shown to the customer at checkout as payment methods to choose from and use.
 
-:::caution
+:::warning
 
 It’s important to enable a payment processor in a region, or else the payment processor cannot be used by customers on checkout.
 

www/apps/docs/content/modules/price-lists/admin/_import-prices.mdx

@@ -15,7 +15,7 @@ In this document, you’ll learn how to bulk import prices into a price list usi
 
 Using Medusa’s [Batch Job Admin APIs](https://docs.medusajs.com/api/admin#batch-jobs), you can import prices into a price list.
 
-:::caution
+:::warning
 
 Importing prices into a price list removes all existing prices in the price list and adds the imported prices.
 

www/apps/docs/content/plugins/file-service/local.md

@@ -49,7 +49,7 @@ const plugins = [
 ]
 ```
 
-:::caution
+:::warning
 
 If you have multiple storage plugins configured, the last plugin declared in the `medusa-config.js` file will be used.
 

www/apps/docs/content/plugins/file-service/minio.md

@@ -63,7 +63,7 @@ To generate access keys for your plugin:
 3. This will open a new form with randomly-generated keys. Click on the Create button.
 4. A pop-up will then show the value for your Access Key and Secret Key. Copy them to use in the next section.
 
-:::caution
+:::warning
 
 You will not be able to access the Secret Key after closing the pop-up. So, make sure to store it somewhere to use later when configuring the plugin.
 
@@ -107,7 +107,7 @@ const plugins = [
 ]
 ```
 
-:::caution
+:::warning
 
 If you have multiple storage plugins configured, the last plugin declared in the `medusa-config.js` file will be used.
 

www/apps/docs/content/plugins/file-service/s3.mdx

@@ -152,7 +152,7 @@ S3_PREFIX=<YOUR_BUCKET_PREFIX>
 ```
 
 
-:::caution
+:::warning
 
 If you have multiple storage plugins configured, the last plugin declared in the `medusa-config.js` file will be used.
 

www/apps/docs/content/plugins/file-service/spaces.md

@@ -67,7 +67,7 @@ This shows a table with the Name field editable. Enter a name for the Access Key
 
 Then, two keys will be available under the Key column of the table. The first one is the Access Key ID and the second is the Secret Access Key. Copy both as you’ll use them later.
 
-:::caution
+:::warning
 
 The secret access key will not be shown again after you leave the page. Make sure to copy it when you see it or you’ll need to re-generate a new one.
 
@@ -124,7 +124,7 @@ const plugins = [
 ]
 ```
 
-:::caution
+:::warning
 
 If you have multiple storage plugins configured, the last plugin declared in the `medusa-config.js` file will be used.
 

www/apps/docs/content/plugins/notifications/twilio-sms.md

@@ -124,7 +124,7 @@ In the handler function, you resolve the `twilioSmsService` and `orderService` u
 
 The `sendSms` method of the Twilio service accepts an object of parameters. These parameters are based on Twilio’s SMS APIs. You can check their [API documentation](https://www.twilio.com/docs/sms/api/message-resource#create-a-message-resource) for more fields that you can add.
 
-:::caution
+:::warning
 
 If you’re on a Twilio trial make sure that the phone number you entered on checkout is a [verified Twilio number on your console](https://console.twilio.com/us1/develop/phone-numbers/manage/verified).
 

www/apps/docs/content/upgrade-guides/medusa-core/1-3-8.md

@@ -26,7 +26,7 @@ npm install medusa-interfaces@latest
 
 ### Use Legacy Peer Dependencies Option
 
-:::caution
+:::warning
 
 This solution can be used as a workaround and should be used with caution to avoid any issues while using Medusa.
 

www/apps/docs/content/user-guide/discounts/manage.mdx

@@ -112,7 +112,7 @@ To edit a discount’s condition:
 
 ### Delete a Condition
 
-:::caution
+:::warning
 
 Deleting a condition can't be undone. You can still add a new condition of the same type afterward.
 

www/apps/docs/content/user-guide/gift-cards/manage.mdx

@@ -148,7 +148,7 @@ If you face any errors or difficulties while uploading an image, please contact
 
 ### Delete Gift Card Image
 
-:::caution
+:::warning
 
 If you delete an image, you won’t be able to restore it.
 
@@ -167,7 +167,7 @@ To delete a gift card image:
 
 ## Unpublish Gift Card
 
-:::caution
+:::warning
 
 Unpublishing a gift card prevents customers from seeing the gift card in the storefront, purchasing it, or using it.
 

www/apps/docs/content/user-guide/orders/claims.mdx

@@ -20,7 +20,7 @@ When a claim is created, you can choose whether the claim will be resolved throu
 
 ## Create a Claim
 
-:::caution
+:::warning
 
 If you create a claim of type Refund, a refund is issued to the customer right after the claim is created. Before you can create a claim for an order, you must capture the order’s payment, and create fulfillment in the order for the items included in the claim.
 
@@ -79,7 +79,7 @@ To mark a claim’s return as received:
 
 ### Cancel a Claim’s Return
 
-:::caution
+:::warning
 
 Canceling a return can’t be undone.
 
@@ -95,7 +95,7 @@ To cancel a return of a claim:
 
 ## Manage a Claim’s Fulfillments
 
-:::caution
+:::warning
 
 This section only applies if the Claim’s type is Replace.
 
@@ -135,7 +135,7 @@ Shipment details can be seen in the Timeline section.
 
 ### Cancel a Claim’s Fulfillment
 
-:::caution
+:::warning
 
 If you cancel a fulfillment, it can’t be reverted. Only a fulfillment that hasn’t been marked as shipped can be canceled.
 
@@ -160,7 +160,7 @@ A claim of type Refund can be canceled by just [canceling the return of the clai
 
 ### For Replace Claims
 
-:::caution
+:::warning
 
 Canceling a claim can’t be undone. The [return of the claim must be canceled](#cancel-a-claims-return) before the claim itself is canceled.
 

www/apps/docs/content/user-guide/orders/drafts.mdx

@@ -99,7 +99,7 @@ To cancel a draft order:
 
 ## Mark Draft Order as Paid
 
-:::caution
+:::warning
 
 When you mark a draft order as paid, a new order is created and associated with this draft order. This can’t be undone, but the new order created can be canceled.
 

www/apps/docs/content/user-guide/orders/fulfillments.mdx

@@ -47,7 +47,7 @@ You can check the fulfillment details in the Fulfillment and Timeline sections.
 
 ## Mark a Fulfillment Shipped
 
-:::caution
+:::warning
 
 Once a fulfillment is marked as shipped, it can’t be reverted. You must [create a fulfillment](#create-fulfillment) first before you can mark it as shipped.
 
@@ -71,7 +71,7 @@ Shipment details can be seen in the Timeline section.
 
 ## Cancel a Fulfillment
 
-:::caution
+:::warning
 
 If you cancel a fulfillment, it can’t be reverted. Only a fulfillment that hasn’t been marked as shipped can be canceled.
 

www/apps/docs/content/user-guide/orders/manage.mdx

@@ -166,7 +166,7 @@ The note will be added and can be seen in the timeline.
 
 ## Delete a Note
 
-:::caution
+:::warning
 
 Deleted notes can’t be retrieved.
 

www/apps/docs/content/user-guide/orders/payments.md

@@ -34,7 +34,7 @@ To capture an order’s payment:
 
 ## Refund Payment
 
-:::caution
+:::warning
 
 Refunding payments can’t be undone. Payment can only be refunded after it has been captured.
 

www/apps/docs/content/user-guide/orders/returns.mdx

@@ -61,7 +61,7 @@ To request a return for an order:
 
 ## Receive Return
 
-:::caution
+:::warning
 
 Once the return is marked as received, a refund will be issued to the customer. A return can only be marked as “received” if the payment of the order or the items chosen in the return is captured.
 

www/apps/docs/content/user-guide/price-lists/_import.mdx

@@ -20,7 +20,7 @@ For a list of accepted columns, refer to [this guide](../../modules/price-lists/
 
 :::
 
-:::caution
+:::warning
 
 When you import prices into a price list, it removes existing prices and adds new prices.
 

www/apps/docs/content/user-guide/price-lists/manage.mdx

@@ -146,7 +146,7 @@ To delete a product from a price list and remove the pricing changes as well:
 
 ## Delete Price List
 
-:::caution
+:::warning
 
 Deleting a price list cannot be undone. Prices defined in the price list will no longer be available for the customers.
 

www/apps/docs/content/user-guide/products/manage.mdx

@@ -300,7 +300,7 @@ To manage the thumbnail of a product:
 
 ### Delete Thumbnail
 
-:::caution
+:::warning
 
 Deleting a thumbnail can’t be undone.
 

www/apps/docs/content/user-guide/taxes/manage.md

@@ -55,7 +55,7 @@ By default, taxes are calculated automatically by Medusa. They’re calculated i
 
 If you use a third-party tax provider and you want to avoid sending too many requests to the tax provider, you can disable this behavior.
 
-:::caution
+:::warning
 
 If you switch off automatic taxes calculation, the taxes must be calculated manually on checkout. If you’re unsure how that works, please contact your technical team.
 

www/apps/docs/content/user-guide/taxes/tax-overrides.mdx

@@ -64,7 +64,7 @@ To edit an override:
 
 ## Delete Override
 
-:::caution
+:::warning
 
 If you delete an override you won’t be able to restore it and it won’t be applied during checkout. If you want to, instead, remove some entries from an override type, you should [edit the override](#edit-override) instead.
 

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