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

@@ -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 %}
 ```

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';

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: {