feat(nx-dev): allow callout component to be expanded by default (#29806)

nrwl · Jan 29, 2025 · 10c14b6 · 10c14b6
1 parent 3dd3ab7
commit 10c14b6
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 14 deletions.
diff --git a/docs/blog/2025-01-27-project-references.md b/docs/blog/2025-01-27-project-references.md
@@ -7,7 +7,7 @@ cover_image: /blog/images/articles/ts-islands.png
 youtubeUrl: https://youtu.be/SDE3cIq28s8
 ---
 
-{% callout type="deepdive" title="TypeScript Project References Series" %}
+{% callout type="deepdive" title="TypeScript Project References Series" expanded=true %}
 
 This article is part of the TypeScript Project References series:
 

diff --git a/docs/blog/2025-01-28-managing-ts-pkgs-in-monorepos.md b/docs/blog/2025-01-28-managing-ts-pkgs-in-monorepos.md
@@ -6,7 +6,7 @@ tags: [typescript, monorepo, nx]
 cover_image: /blog/images/articles/bg-managing-typescript-packages.jpg
 ---
 
-{% callout type="deepdive" title="TypeScript Project References Series" %}
+{% callout type="deepdive" title="TypeScript Project References Series" expanded=true %}
 
 This article is part of the TypeScript Project References series:
 

diff --git a/docs/blog/2025-01-29-new-nx-experience.md b/docs/blog/2025-01-29-new-nx-experience.md
@@ -7,7 +7,7 @@ cover_image: /blog/images/articles/new-ts-experience-bg.jpg
 youtubeUrl: https://youtu.be/D9D8KNffyBk
 ---
 
-{% callout type="deepdive" title="TypeScript Project References Series" %}
+{% callout type="deepdive" title="TypeScript Project References Series" expanded=true %}
 
 This article is part of the TypeScript Project References series:
 

diff --git 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 } from 'react';
+import React, { useState, useEffect, type ReactNode } from 'react';
 import cx from 'classnames';
 import {
   ChevronRightIcon,
@@ -84,22 +84,22 @@ export function Callout({
   title,
   type,
   children,
-  defaultExpanded = false,
+  expanded = false,
 }: {
   title: string;
   type: CalloutType;
   children: ReactNode;
-  defaultExpanded?: boolean;
+  expanded?: boolean;
 }) {
-  const [isOpen, setIsOpen] = useState(type !== 'deepdive');
+  const [isOpen, setIsOpen] = useState(type !== 'deepdive' || expanded);
   const ui = typeMap[type] || typeMap.note;
   const isCollapsible = type === 'deepdive';
 
   useEffect(() => {
     if (isCollapsible) {
-      setIsOpen(defaultExpanded);
+      setIsOpen(expanded);
     }
-  }, [defaultExpanded, isCollapsible]);
+  }, [expanded, isCollapsible]);
 
   const toggleOpen = () => {
     if (isCollapsible) {

diff --git a/nx-dev/ui-markdoc/src/lib/tags/callout.schema.ts b/nx-dev/ui-markdoc/src/lib/tags/callout.schema.ts
@@ -2,21 +2,21 @@ import { Schema } from '@markdoc/markdoc';
 
 export const callout: Schema = {
   render: 'Callout',
-  description: 'Display the enclosed content in a callout box',
   children: ['paragraph', 'tag', 'list'],
   attributes: {
     type: {
       type: 'String',
       default: 'note',
-      matches: ['caution', 'check', 'note', 'warning'],
+      matches: ['caution', 'check', 'note', 'warning', 'deepdive'],
       errorLevel: 'critical',
-      description:
-        'Controls the color and icon of the callout. Can be: "caution", "check", "note", "warning"',
     },
     title: {
       type: 'String',
       required: true,
-      description: 'The title displayed at the top of the callout',
+    },
+    expanded: {
+      type: 'Boolean',
+      default: false,
     },
   },
 };