feat(theme-common): allow passing a string for details summary (#8656)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

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 */}
+      {summaryElement}
-      {summary ?? <summary>Details</summary>}
 
       <Collapsible
         lazy={false} // Content might matter for SEO in this case

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</>