diff --git a/docs/blog/2025-01-27-project-references.md b/docs/blog/2025-01-27-project-references.md index 25be02d4c198a..0543a0ee5765e 100644 --- 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 index f93432fc96932..b68ccc21bf089 100644 --- 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 index e9903d878d44f..d04fb92771c44 100644 --- 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 index d138fc9893d37..f4226acf2167a 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 } 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 index ec399583455fc..7b4799bcd8d5c 100644 --- 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, }, }, };