diff --git a/packages/doc/content/components/components/feedback/index.mdx b/packages/doc/content/components/components/feedback/index.mdx index e655c374a6..95be85a5eb 100644 --- a/packages/doc/content/components/components/feedback/index.mdx +++ b/packages/doc/content/components/components/feedback/index.mdx @@ -145,6 +145,27 @@ This screen can be used to give feedback to the user of success, information, or ``` +### Multiple paragraphs in description + +Use an array of strings to render multiple paragraphs (each string becomes a separate Body1 block). + +```javascript + + + Ok + Cancel + + +``` + ## Props diff --git a/packages/yoga/src/Feedback/web/Feedback.jsx b/packages/yoga/src/Feedback/web/Feedback.jsx index 07f476d5b8..a2012ba1db 100644 --- a/packages/yoga/src/Feedback/web/Feedback.jsx +++ b/packages/yoga/src/Feedback/web/Feedback.jsx @@ -43,7 +43,11 @@ function Feedback({ center = true, ...props }) { + const descriptionArray = Array.isArray(description) + ? description + : [description]; const iconProps = VARIANT_ICONS[variant]; + let primaryButton; let secondaryButton; let captionElement; @@ -81,9 +85,13 @@ function Feedback({ /> {titleElement} - - {description} - + + {descriptionArray.map(paragraph => ( + + {paragraph} + + ))} + {captionElement ? {captionElement} : null} @@ -100,7 +108,7 @@ function Feedback({ Feedback.propTypes = { variant: oneOf(Object.keys(VARIANT_ICONS)).isRequired, title: string, - description: string.isRequired, + description: oneOfType([string, arrayOf(string)]).isRequired, children: oneOfType([arrayOf(node), node]), /** Center the component vertically */ center: bool, diff --git a/packages/yoga/src/Feedback/web/Feedback.test.jsx b/packages/yoga/src/Feedback/web/Feedback.test.jsx index b40a1b6c7b..4e102df41d 100644 --- a/packages/yoga/src/Feedback/web/Feedback.test.jsx +++ b/packages/yoga/src/Feedback/web/Feedback.test.jsx @@ -115,4 +115,24 @@ describe('', () => { expect(getByTestId('feedback-icon-delayed')).toMatchSnapshot(); }); + + it('should render multiple paragraphs when description is an array', () => { + const multiDescription = [ + 'First paragraph of the feedback description.', + 'Second paragraph providing extra context.', + 'Third paragraph with final details.', + ]; + + const { getByText } = renderWithTheme( + , + ); + + multiDescription.forEach(text => { + expect(getByText(text)).toBeTruthy(); + }); + }); }); diff --git a/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap b/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap index d2d1061a80..59847dbbcd 100644 --- a/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap +++ b/packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap @@ -7,6 +7,18 @@ exports[` should render correctly when not centered vertically 1`] = height: 64px; } +.c5 { + margin-top: 16px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 24px; +} + .c0 { background-color: #FFFFFF; width: 100%; @@ -20,7 +32,7 @@ exports[` should render correctly when not centered vertically 1`] = align-items: flex-end; } -.c5 { +.c6 { margin: 0; padding: 0; font-size: 16px; @@ -28,7 +40,6 @@ exports[` should render correctly when not centered vertically 1`] = color: #231B22; font-family: Rubik; font-weight: 400; - margin-top: 16px; color: #6B6B78; } @@ -50,7 +61,7 @@ exports[` should render correctly when not centered vertically 1`] = font-weight: 500; } -.c6 { +.c7 { margin-top: 56px; display: -webkit-box; display: -webkit-flex; @@ -82,7 +93,7 @@ exports[` should render correctly when not centered vertically 1`] = } @media (min-width:769px) { - .c6 { + .c7 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -117,15 +128,20 @@ exports[` should render correctly when not centered vertically 1`] = > Welcome to Yoga -

- Enjoy your membership! -

+

+ Enjoy your membership! +

+