fix descriptionText bug

src/components/NewsletterSignup/NewsletterSignup.mdx

@@ -51,6 +51,13 @@ Resources:
 - [DS Button Accessibility](../?path=/docs/components-form-elements-button--docs#accessibility)
 - [DS TextInput Accessibility](../?path=/docs/components-form-elements-textinput--docs#accessibility)
 
+## JSX Elements passed to descriptionText Prop
+
+Alternatively to a `descriptionText` of type `string`, a HTML Element or React component can be passed. When passing a JSX Element, the consuming app is responsible
+to assure its accessibility.
+
+<Canvas of={NewsletterSignupStories.DescriptionUsingJSXElements} />
+
 ## Form Submission Data
 
 Submitted form data can be retrieved when the `NewsletterSignup` component is

src/components/NewsletterSignup/NewsletterSignup.stories.tsx

@@ -100,6 +100,25 @@ export const WithControls: Story = {
   render: (args) => <NewsletterSignup {...args} />,
 };
 
+export const DescriptionUsingJSXElements: Story = {
+  render: () => (
+    <NewsletterSignup
+      id="jsx-description-text"
+      view="form"
+      onChange={() => {}}
+      onSubmit={() => {}}
+      descriptionText={
+        <div>
+          If the description text needs to have <i>special</i> styling or needs
+          to have a <a href="https://corgiorgy.com/">nested link</a>
+        </div>
+      }
+      confirmationHeading="Thank you for signing up!"
+      confirmationText="You can update your email subscription preferences at any time using the links at the bottom of the email."
+    />
+  ),
+};
+
 export const ComponentStates: Story = {
   render: () => (
     <VStack align="stretch" spacing="l">

src/components/NewsletterSignup/NewsletterSignup.tsx

@@ -104,7 +104,14 @@ export const NewsletterSignup = chakra(
         >
           <VStack id="pitch">
             {title && <Heading level="h3" text={title} />}
-            <Text>{descriptionText}</Text>
+            {descriptionText ? (
+              typeof descriptionText === "string" ? (
+                <Text>{descriptionText}</Text>
+              ) : (
+                descriptionText
+              )
+            ) : null}
+
             <Link href={privacyPolicyLink} type="external" id="privacy">
               Privacy Policy
             </Link>