From 533777cf2b9d97e4454543b367ce4088871fe235 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20St=C3=BCckler?= <moritz@bitbetter.de>
Date: Thu, 16 Feb 2023 16:14:09 +0100
Subject: [PATCH] feat(theme-common): allow passing a string for details
 summary (#8656)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 .../src/components/Details/index.tsx                     | 16 ++++++++++++----
 website/_dogfooding/_pages tests/markdownPageTests.mdx   |  5 +++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-theme-common/src/components/Details/index.tsx b/packages/docusaurus-theme-common/src/components/Details/index.tsx
index 19952166bc..0876cf9b94 100644
--- a/packages/docusaurus-theme-common/src/components/Details/index.tsx
+++ b/packages/docusaurus-theme-common/src/components/Details/index.tsx
@@ -31,8 +31,11 @@ function hasParent(node: HTMLElement | null, parent: HTMLElement): boolean {
 }
 
 export type DetailsProps = {
-  /** Summary is provided as props, including the wrapping `<summary>` tag */
-  summary?: ReactElement;
+  /**
+   * Summary is provided as props, optionally including the wrapping
+   * `<summary>` tag
+   */
+  summary?: ReactElement | string;
 } & ComponentProps<'details'>;
 
 /**
@@ -54,6 +57,12 @@ export function Details({
   // only after animation completes, otherwise close animations won't work
   const [open, setOpen] = useState(props.open);
 
+  const summaryElement = React.isValidElement(summary) ? (
+    summary
+  ) : (
+    <summary>{summary ?? 'Details'}</summary>
+  );
+
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <details
@@ -91,8 +100,7 @@ export function Details({
           // setOpen(false);
         }
       }}>
-      {/* eslint-disable-next-line @docusaurus/no-untranslated-text */}
-      {summary ?? <summary>Details</summary>}
+      {summaryElement}
 
       <Collapsible
         lazy={false} // Content might matter for SEO in this case
diff --git a/website/_dogfooding/_pages tests/markdownPageTests.mdx b/website/_dogfooding/_pages tests/markdownPageTests.mdx
index 35f7c2a4ff..a7ce3561d2 100644
--- a/website/_dogfooding/_pages tests/markdownPageTests.mdx	
+++ b/website/_dogfooding/_pages tests/markdownPageTests.mdx	
@@ -204,6 +204,11 @@ Details without a summary
 
 </details>
 
+import Details from '@theme/Details';
+
+<Details summary={'My Headline'}>Some Text</Details>
+<Details>Some Text</Details>
+
 This is a fragment:
 
 <>Hello</>