From fe45cb27d4f0e2e7cbc03aaed5ec1d155e880874 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 20 May 2024 15:30:21 -0500 Subject: [PATCH] feat: allow react nodes on subtitle --- .../Accordion/Accordion-v2.stories.tsx | 2 +- src/components/Accordion/Accordion-v2.tsx | 8 +-- .../__snapshots__/Accordion-v2.test.tsx.snap | 4 +- src/components/Card/Card-v2.stories.tsx | 2 +- src/components/Card/Card-v2.tsx | 6 +- .../Card/__snapshots__/Card-v2.test.ts.snap | 4 +- ...s.ts => InlineNotification-v2.stories.tsx} | 13 +++++ .../InlineNotification-v2.tsx | 6 +- .../InlineNotification-v2.test.ts.snap | 40 ++++++++++++++ .../PageNotification.stories.tsx | 7 +++ .../PageNotification/PageNotification.tsx | 6 +- .../PageNotification.test.ts.snap | 55 +++++++++++++++++++ 12 files changed, 136 insertions(+), 17 deletions(-) rename src/components/InlineNotification/{InlineNotification-v2.stories.ts => InlineNotification-v2.stories.tsx} (84%) diff --git a/src/components/Accordion/Accordion-v2.stories.tsx b/src/components/Accordion/Accordion-v2.stories.tsx index b14e7cdb4..3a9d451b6 100644 --- a/src/components/Accordion/Accordion-v2.stories.tsx +++ b/src/components/Accordion/Accordion-v2.stories.tsx @@ -53,7 +53,7 @@ export const TitleAndSubtitle: Story = { "Quam lacus maecenas nibh malesuada."} title="Massa quam egestas massa." > diff --git a/src/components/Accordion/Accordion-v2.tsx b/src/components/Accordion/Accordion-v2.tsx index f7700c823..54e82dde0 100644 --- a/src/components/Accordion/Accordion-v2.tsx +++ b/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; /** diff --git a/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap index 474aeb5a6..abc7928e8 100644 --- a/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap +++ b/src/components/Accordion/__snapshots__/Accordion-v2.test.tsx.snap @@ -1167,7 +1167,9 @@ exports[` TitleAndSubtitle story renders snapshot 1`] = ` - Quam lacus maecenas nibh malesuada. + + "Quam lacus maecenas nibh malesuada." + = { Get to know your colleagues} title="Question of the day" /> diff --git a/src/components/Card/Card-v2.tsx b/src/components/Card/Card-v2.tsx index 9936cdc4a..8a2befeac 100644 --- a/src/components/Card/Card-v2.tsx +++ b/src/components/Card/Card-v2.tsx @@ -90,11 +90,11 @@ export interface CardHeaderProps { */ size?: Extract; /** - * 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; } diff --git a/src/components/Card/__snapshots__/Card-v2.test.ts.snap b/src/components/Card/__snapshots__/Card-v2.test.ts.snap index 3aeb76200..8b2b1cb51 100644 --- a/src/components/Card/__snapshots__/Card-v2.test.ts.snap +++ b/src/components/Card/__snapshots__/Card-v2.test.ts.snap @@ -675,7 +675,9 @@ exports[` (v2) WithFullHeaderAndIcon story renders snapshot 1`] = `
- Get to know your colleagues + + Get to know your colleagues +
diff --git a/src/components/InlineNotification/InlineNotification-v2.stories.ts b/src/components/InlineNotification/InlineNotification-v2.stories.tsx similarity index 84% rename from src/components/InlineNotification/InlineNotification-v2.stories.ts rename to src/components/InlineNotification/InlineNotification-v2.stories.tsx index ebb377baa..c4190f11c 100644 --- a/src/components/InlineNotification/InlineNotification-v2.stories.ts +++ b/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 = { }, }; +export const WithFormattedSubTitle: StoryObj = { + args: { + ...Default.args, + subTitle: ( + + Additional text which provides additional detail + + ), + }, +}; + export const Favorable: StoryObj = { args: { ...WithSubTitle.args, diff --git a/src/components/InlineNotification/InlineNotification-v2.tsx b/src/components/InlineNotification/InlineNotification-v2.tsx index 3d4073d27..46550e64b 100644 --- a/src/components/InlineNotification/InlineNotification-v2.tsx +++ b/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; }; diff --git a/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap b/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap index 7bd8faf61..824c4d1fe 100644 --- a/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap +++ b/src/components/InlineNotification/__snapshots__/InlineNotification-v2.test.ts.snap @@ -165,6 +165,46 @@ exports[` (v2) Warning story renders snapshot 1`] = ` `; +exports[` (v2) WithFormattedSubTitle story renders snapshot 1`] = ` +
+ +
+
+ Inline notifications lorem ipsum text +
+
+ + + Additional text + + which provides additional detail + +
+
+
+`; + exports[` (v2) WithSubTitle story renders snapshot 1`] = `
= { }, }; +export const WarningWithSubtitle: StoryObj = { + args: { + status: 'warning', + subTitle: Subtitle text, + }, +}; + /** * When using critical, make sure `Button` has a matching variant specified. */ diff --git a/src/components/PageNotification/PageNotification.tsx b/src/components/PageNotification/PageNotification.tsx index c849eb0b2..c03efc504 100644 --- a/src/components/PageNotification/PageNotification.tsx +++ b/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; }; diff --git a/src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap b/src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap index 2ff459383..485fa2e52 100644 --- a/src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap +++ b/src/components/PageNotification/__snapshots__/PageNotification.test.ts.snap @@ -418,3 +418,58 @@ exports[` (v2) Warning story renders snapshot 1`] = `
`; + +exports[` (v2) WarningWithSubtitle story renders snapshot 1`] = ` + +`;