feat: allow react nodes on subtitle (#1954)

Author: booc0mtaco

src/components/Accordion/Accordion-v2.stories.tsx

@@ -53,7 +53,7 @@ export const TitleAndSubtitle: Story = {
       <Accordion.Row>
         <Accordion.Button
           data-testid="accordion-button"
-          subtitle="Quam lacus maecenas nibh malesuada."
+          subtitle={<span>"Quam lacus maecenas nibh malesuada."</span>}
           title="Massa quam egestas massa."
         ></Accordion.Button>
         <Accordion.Panel data-testid="accordion-panel">

src/components/Accordion/Accordion-v2.tsx

@@ -61,15 +61,15 @@ type AccordionButtonProps = {
    */
   headingAs?: HeadingElement;
   /**
-   *
+   * Icon to preceed the text in an accordion header
    */
   leadingIcon?: ReactNode;
   /**
-   *
+   * Secondary text used to describe the content in more detail
    */
-  subtitle?: string;
+  subtitle?: ReactNode;
   /**
-   *
+   * The title/heading of the component
    */
   title?: string;
   /**

src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap

@@ -1167,7 +1167,9 @@ exports[`<Accordion /> TitleAndSubtitle story renders snapshot 1`] = `
           <span
             class="text text--body-md accordion-button__subtitle"
           >
-            Quam lacus maecenas nibh malesuada.
+            <span>
+              "Quam lacus maecenas nibh malesuada."
+            </span>
           </span>
         </h2>
         <svg

src/components/Card/Card-v2.stories.tsx

@@ -92,7 +92,7 @@ export const WithFullHeaderAndIcon: StoryObj<Args> = {
         <Card.Header
           eyebrow="Recommended for you"
           icon="person-encircled"
-          subTitle="Get to know your colleagues"
+          subTitle={<span>Get to know your colleagues</span>}
           title="Question of the day"
         />
         <Card.Body>

src/components/Card/Card-v2.tsx

@@ -90,11 +90,11 @@ export interface CardHeaderProps {
    */
   size?: Extract<Size, 'sm' | 'md'>;
   /**
-   * Text below the main title of the card, to add supplementary information about the title
+   * Secondary text used to describe the content in more detail
    */
-  subTitle?: string;
+  subTitle?: ReactNode;
   /**
-   * Main title of the card
+   * The title/heading of the component
    */
   title?: string;
 }

src/components/Card/__snapshots__/Card-v2.test.ts.snap

@@ -675,7 +675,9 @@ exports[`<Card /> (v2) WithFullHeaderAndIcon story renders snapshot 1`] = `
         <div
           class="text text--body-lg header__sub-title header--size-md"
         >
-          Get to know your colleagues
+          <span>
+            Get to know your colleagues
+          </span>
         </div>
       </div>
     </header>

src/components/InlineNotification/InlineNotification-v2.stories.ts renamed to src/components/InlineNotification/InlineNotification-v2.stories.tsx

@@ -1,4 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
 import { InlineNotification } from './InlineNotification-v2';
 
 export default {
@@ -23,6 +25,17 @@ export const WithSubTitle: StoryObj<Args> = {
   },
 };
 
+export const WithFormattedSubTitle: StoryObj<Args> = {
+  args: {
+    ...Default.args,
+    subTitle: (
+      <span>
+        <em>Additional text</em> which provides additional detail
+      </span>
+    ),
+  },
+};
+
 export const Favorable: StoryObj<Args> = {
   args: {
     ...WithSubTitle.args,

src/components/InlineNotification/InlineNotification-v2.tsx

@@ -21,11 +21,11 @@ type InlineNotificationProps = {
    */
   status?: Status;
   /**
-   * Secondary text used to describe the notification in more detail
+   * Secondary text used to describe the content in more detail
    */
-  subTitle?: string;
+  subTitle?: React.ReactNode;
   /**
-   * The text contents of the tag, nested inside the component, in addition to the icon.
+   * The title/heading of the component
    */
   title: string;
 };

src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap

@@ -165,6 +165,46 @@ exports[`<InlineNotification /> (v2) Warning story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<InlineNotification /> (v2) WithFormattedSubTitle story renders snapshot 1`] = `
+<div
+  class="inline-notification inline-notification--status-informational"
+>
+  <svg
+    aria-hidden="true"
+    class="icon inline-notification__icon"
+    fill="currentColor"
+    height="1rem"
+    style="--icon-size: 1rem;"
+    viewBox="0 0 24 24"
+    width="1rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
+    />
+  </svg>
+  <div
+    class="inline-notication__body"
+  >
+    <div
+      class="text text--title-xs inline-notification__title"
+    >
+      Inline notifications lorem ipsum text
+    </div>
+    <div
+      class="text text--body-xs"
+    >
+      <span>
+        <em>
+          Additional text
+        </em>
+         which provides additional detail
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<InlineNotification /> (v2) WithSubTitle story renders snapshot 1`] = `
 <div
   class="inline-notification inline-notification--status-informational"

src/components/PageNotification/PageNotification.stories.tsx

@@ -47,6 +47,13 @@ export const Warning: StoryObj<Args> = {
   },
 };
 
+export const WarningWithSubtitle: StoryObj<Args> = {
+  args: {
+    status: 'warning',
+    subTitle: <span>Subtitle text</span>,
+  },
+};
+
 /**
  * When using critical, make sure `Button` has a matching variant specified.
  */

src/components/PageNotification/PageNotification.tsx

@@ -35,11 +35,11 @@ export type PageNotificationProps = {
    */
   status?: Status;
   /**
-   * Secondary text used to describe the notification in more detail
+   * Secondary text used to describe the content in more detail
    */
-  subTitle?: string;
+  subTitle?: ReactNode;
   /**
-   * The title/heading of the notification
+   * The title/heading of the component
    */
   title?: string;
 };

src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap

@@ -418,3 +418,58 @@ exports[`<PageNotification /> (v2) Warning story renders snapshot 1`] = `
   </div>
 </aside>
 `;
+
+exports[`<PageNotification /> (v2) WarningWithSubtitle story renders snapshot 1`] = `
+<aside
+  class="page-notification page-notification--status-warning"
+>
+  <svg
+    aria-hidden="true"
+    class="icon page-notification__icon"
+    fill="currentColor"
+    height="1.5rem"
+    style="--icon-size: 1.5rem;"
+    viewBox="0 0 24 24"
+    width="1.5rem"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.72503 20C2.5417 20 2.37503 19.9542 2.22503 19.8625C2.07503 19.7708 1.95837 19.65 1.87503 19.5C1.7917 19.35 1.74587 19.1875 1.73753 19.0125C1.7292 18.8375 1.77503 18.6667 1.87503 18.5L11.125 2.5C11.225 2.33333 11.3542 2.20833 11.5125 2.125C11.6709 2.04167 11.8334 2 12 2C12.1667 2 12.3292 2.04167 12.4875 2.125C12.6459 2.20833 12.775 2.33333 12.875 2.5L22.125 18.5C22.225 18.6667 22.2709 18.8375 22.2625 19.0125C22.2542 19.1875 22.2084 19.35 22.125 19.5C22.0417 19.65 21.925 19.7708 21.775 19.8625C21.625 19.9542 21.4584 20 21.275 20H2.72503ZM12 17C12.2834 17 12.5209 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5209 15.0958 12.2834 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0959 15.4792 11 15.7167 11 16C11 16.2833 11.0959 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 14C12.2834 14 12.5209 13.9042 12.7125 13.7125C12.9042 13.5208 13 13.2833 13 13V10C13 9.71667 12.9042 9.47917 12.7125 9.2875C12.5209 9.09583 12.2834 9 12 9C11.7167 9 11.4792 9.09583 11.2875 9.2875C11.0959 9.47917 11 9.71667 11 10V13C11 13.2833 11.0959 13.5208 11.2875 13.7125C11.4792 13.9042 11.7167 14 12 14Z"
+    />
+  </svg>
+  <div
+    class="page-notification__body page-notification--has-vertical-cta"
+  >
+    <div
+      class="page-notification__text"
+    >
+      <h3
+        class="heading heading--title-md"
+      >
+        Alert title which communicates info to the user
+      </h3>
+      <p
+        class="text text--body-sm page-notification__sub-title"
+      >
+        <span>
+          Subtitle text
+        </span>
+      </p>
+    </div>
+    <div
+      class="page-notification__call-to-action"
+    >
+      <button
+        class="button button--layout-none button--secondary button--sm button--variant-neutral"
+        type="button"
+      >
+        <span
+          class="button__text"
+        >
+          Call to Action
+        </span>
+      </button>
+    </div>
+  </div>
+</aside>
+`;