From 363058ee5457e223d25b982d7957666ab543c689 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Fri, 13 Jun 2025 11:55:49 -0400
Subject: [PATCH] docs(nx-dev): add support for 'announcement' type callout
 (#31583)

Extended the `Callout` component and schema to support a new 'announcement' type with corresponding styles and icon. Updated documentation example for the new type.
---
 docs/README.md                                |  2 +-
 .../src/lib/tags/callout.component.tsx        | 27 ++++++++++++++++---
 .../ui-markdoc/src/lib/tags/callout.schema.ts |  9 ++++++-
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 59199bc4d9..60a02e33d9 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -88,7 +88,7 @@ The documentation website [nx.dev](https://nx.dev) is using custom Markdown synt
 Callouts are available to get the attention of the reader on some specific type of information.
 
 ```markdown
-{% callout type="caution|check|note|warning" title="string" %}
+{% callout type="announcement|caution|check|note|warning" title="string" %}
 Your content goes here.
 {% /callout %}
 ```
diff --git a/nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx
index f4226acf21..bad5304e3c 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, type ReactNode } from 'react';
+import { useState, useEffect, type ReactNode, type ReactElement } from 'react';
 import cx from 'classnames';
 import {
   ChevronRightIcon,
@@ -10,14 +10,21 @@ import {
   HandRaisedIcon,
   InformationCircleIcon,
   AcademicCapIcon,
+  MegaphoneIcon,
 } from '@heroicons/react/24/outline';
 
-type CalloutType = 'note' | 'warning' | 'check' | 'caution' | 'deepdive';
+type CalloutType =
+  | 'announcement'
+  | 'caution'
+  | 'check'
+  | 'deepdive'
+  | 'note'
+  | 'warning';
 
 const typeMap: Record<
   CalloutType,
   {
-    icon: JSX.Element;
+    icon: ReactElement;
     backgroundColor: string;
     borderColor: string;
     titleColor: string;
@@ -36,6 +43,18 @@ const typeMap: Record<
     titleColor: 'text-slate-600 dark:text-slate-300',
     textColor: 'text-slate-700 dark:text-slate-400',
   },
+  announcement: {
+    icon: (
+      <MegaphoneIcon
+        className="h-5 w-5 text-blue-500 dark:text-blue-400"
+        aria-hidden="true"
+      />
+    ),
+    backgroundColor: 'bg-blue-50 dark:bg-blue-900/30',
+    borderColor: 'border-blue-200 dark:border-blue-800',
+    titleColor: 'text-blue-600 dark:text-blue-400',
+    textColor: 'text-blue-700 dark:text-blue-600',
+  },
   warning: {
     icon: (
       <ExclamationCircleIcon
@@ -90,7 +109,7 @@ export function Callout({
   type: CalloutType;
   children: ReactNode;
   expanded?: boolean;
-}) {
+}): ReactElement {
   const [isOpen, setIsOpen] = useState(type !== 'deepdive' || expanded);
   const ui = typeMap[type] || typeMap.note;
   const isCollapsible = type === 'deepdive';
diff --git a/nx-dev/ui-markdoc/src/lib/tags/callout.schema.ts b/nx-dev/ui-markdoc/src/lib/tags/callout.schema.ts
index 7b4799bcd8..b116e65277 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/callout.schema.ts
+++ b/nx-dev/ui-markdoc/src/lib/tags/callout.schema.ts
@@ -7,7 +7,14 @@ export const callout: Schema = {
     type: {
       type: 'String',
       default: 'note',
-      matches: ['caution', 'check', 'note', 'warning', 'deepdive'],
+      matches: [
+        'announcement',
+        'caution',
+        'check',
+        'note',
+        'warning',
+        'deepdive',
+      ],
       errorLevel: 'critical',
     },
     title: {