feat: [TextIntroduction] Support ReactNode content in the `descriptio…

…n` (#339)

Close #338 

On SBL we have some descriptions that include lists (Errors page:
download and upload links). I'm seeing console errors about nesting
`ul`s within paragraphs.
 
This PR basically renders `description` within a `<p>` tag if it's a
string, otherwise renders it unchanged allowing us to pass more
customized content.

<img width="670" alt="Screenshot 2024-05-02 at 10 29 42 AM"
src="https://github.com/cfpb/design-system-react/assets/2592907/9dc19fbb-e482-4c29-9594-dad207b0c631">

src/components/Headings/Heading.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import type { JSXElement } from '~/src/types/jsxElement';
+import type { ReactNode } from 'react';
 
 export type HeadingType =
   | '1'
@@ -21,7 +21,7 @@ export const Heading = ({
   children,
   className,
   ...properties
-}: HeadingProperties): JSXElement => {
+}: HeadingProperties): ReactNode => {
   let DynamicHeading: keyof JSX.IntrinsicElements;
   const classes = [className];
 

src/components/Paragraph/Paragraph.tsx

@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import type { ReactNode } from 'react';
 
 interface ParagraphProperties extends React.HTMLProps<HTMLParagraphElement> {
   isLead?: boolean;
@@ -14,7 +15,7 @@ export function Paragraph({
   isLead,
   className,
   ...properties
-}: ParagraphProperties): JSX.Element {
+}: ParagraphProperties): ReactNode {
   const cnames = [className];
 
   if (isLead) cnames.push('lead-paragraph');

src/components/TextIntroduction/TextIntroduction.tsx

@@ -5,6 +5,13 @@ import List from '../List/List';
 import ListItem from '../List/ListItem';
 import { Paragraph } from '../Paragraph/Paragraph';
 
+const renderDescription = (description: ReactNode | string): ReactNode => {
+  if (!description) return null;
+  if (typeof description === 'string')
+    return <Paragraph>{description}</Paragraph>;
+  return description;
+};
+
 interface TextIntroductionProperties extends React.HTMLProps<HTMLDivElement> {
   // Page title
   heading: string;
@@ -45,7 +52,7 @@ export const TextIntroduction = ({
     >
       <Heading type='1'>{heading}</Heading>
       <Paragraph isLead>{subheading}</Paragraph>
-      {description ? <p>{description}</p> : null}
+      {renderDescription(description)}
       {call2action}
     </div>
   );
@@ -84,7 +91,7 @@ export const TextIntroductionHeading = TextIntroduction.Heading;
 
 TextIntroduction.Description = ({
   children
-}: TextIntroductionSubProperties): JSX.Element => <p>{children}</p>;
+}: TextIntroductionSubProperties): ReactNode => renderDescription(children);
 
 export const TextIntroductionDescription = TextIntroduction.Description;
 

src/stories/Introduction.stories.mdx

@@ -27,6 +27,7 @@ In your `package.json`:
 ```
 
 <Heading type='2'>Components - Verified vs Draft</Heading>
+
 This library is still in it's early stages of developement, with lots of changes expected in the coming months.  You will notice two subsections in the navigation sidebar: `Components (Verified)` and `Components (Draft)`.  
 
 `Verified` components have been thoroughly reviewed for consistency with their [Design System] counterparts and can be considered unlikely to change in the near future.