feat: Accept React node as expandable section description

pages/expandable-section/description-with-links.permutations.page.tsx

@@ -0,0 +1,36 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import ExpandableSection, { ExpandableSectionProps } from '~components/expandable-section';
+import Link from '~components/link';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+const permutations = createPermutations<ExpandableSectionProps>([
+  {
+    variant: ['default', 'container', 'footer', 'inline', 'navigation'],
+    headerText: ['Description with links'],
+    children: ['Sample content'],
+    headerDescription: [
+      <>
+        Sample description <Link href={`${window.location.href}#link-target`}>with a link</Link> within a sentence.
+      </>,
+    ],
+    defaultExpanded: [true],
+  },
+]);
+
+export default function ExpandableSectionPermutations() {
+  return (
+    <>
+      <h1>Expandable Section permutations with links in the description</h1>
+      <ScreenshotArea disableAnimations={true}>
+        <PermutationsView permutations={permutations} render={permutation => <ExpandableSection {...permutation} />} />
+      </ScreenshotArea>
+      <div id="link-target"></div>
+    </>
+  );
+}

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -11426,12 +11426,6 @@ Behaves similar to the Header component counter.",
       "optional": true,
       "type": "string",
     },
-    {
-      "description": "Supplementary text below the heading. Use with the container, default or footer variants.",
-      "name": "headerDescription",
-      "optional": true,
-      "type": "string",
-    },
     {
       "description": "Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
 Use with the container variant (which defaults to H2) or default/footer variants (which default to DIV). Using this
@@ -11505,6 +11499,11 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "isDefault": false,
       "name": "headerActions",
     },
+    {
+      "description": "Supplementary text below the heading. Use with the container, default or footer variants.",
+      "isDefault": false,
+      "name": "headerDescription",
+    },
     {
       "description": "The area next to the heading, used to display an Info link. Use with the container variant.",
       "isDefault": false,

src/expandable-section/expandable-section-header.tsx

@@ -166,7 +166,7 @@ const ExpandableHeaderTextWrapper = ({
   const isContainer = variant === 'container';
   const HeadingTag = headingTagOverride || 'div';
   const supportsInteractiveElements = variantSupportsActions(variant);
-  const restrictClickableArea = supportsInteractiveElements && (headerInfo || headerActions);
+  const restrictClickableArea = headerDescription || (supportsInteractiveElements && (headerInfo || headerActions));
   const actions = supportsInteractiveElements && headerActions;
   const description = variantSupportsDescription(variant) && headerDescription && (
     <span id={descriptionId} className={styles[`description-${variant}`]}>

src/expandable-section/interfaces.ts

@@ -75,7 +75,7 @@ export interface ExpandableSectionProps extends BaseComponentProps {
   /**
    * Supplementary text below the heading. Use with the container, default or footer variants.
    */
-  headerDescription?: string;
+  headerDescription?: React.ReactNode;
 
   /**
    * Specifies secondary text that's displayed to the right of the heading title. Use with the container variant.