[RTN-2065] feat(feedback): add multiple paragraphs in description

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
 </Box>
 ```
 
+### Multiple paragraphs in description
+
+Use an array of strings to render multiple paragraphs (each string becomes a separate Body1 block).
+
+```javascript
+<Box h={611} w="100%">
+  <Feedback
+    variant="success"
+    title="Welcome to Yoga, Feedback."
+    description={[
+      'Enjoy your membership! Access thousands of gyms, studios and wellness app.',
+      'Track your wellbeing journey and discover new activities every week.',
+      'Need help? Reach out to our support anytime.'
+    ]}
+  >
+    <Feedback.PrimaryButton>Ok</Feedback.PrimaryButton>
+    <Feedback.SecondaryButton>Cancel</Feedback.SecondaryButton>
+  </Feedback>
+</Box>
+```
+
 ## Props
 
 <PropsTable component="Feedback" platform="web" />

packages/yoga/src/Feedback/web/Feedback.jsx

@@ -81,9 +81,22 @@ function Feedback({
         />
         <TextContainer>
           {titleElement}
-          <Text.Body1 mt="small" color="deep">
-            {description}
-          </Text.Body1>
+          <Box display="flex" flexDirection="column" gap="large" mt="small">
+            {Array.isArray(description) ? (
+              description.map(paragraph => (
+                <Text.Body1
+                  key={paragraph?.toString().slice(0, 10)}
+                  color="deep"
+                >
+                  {paragraph}
+                </Text.Body1>
+              ))
+            ) : (
+              <Text.Body1 mt="small" color="deep">
+                {description}
+              </Text.Body1>
+            )}
+          </Box>
         </TextContainer>
 
         {captionElement ? <Box mt="medium">{captionElement}</Box> : null}
@@ -100,7 +113,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,

packages/yoga/src/Feedback/web/Feedback.test.jsx

@@ -115,4 +115,24 @@ describe('<Feedback />', () => {
 
     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(
+      <Feedback
+        variant="success"
+        title={title}
+        description={multiDescription}
+      />,
+    );
+
+    multiDescription.forEach(text => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
 });

packages/yoga/src/Feedback/web/__snapshots__/Feedback.test.jsx.snap

@@ -7,6 +7,18 @@ exports[`<Feedback /> 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[`<Feedback /> should render correctly when not centered vertically 1`] =
   align-items: flex-end;
 }
 
-.c5 {
+.c6 {
   margin: 0;
   padding: 0;
   font-size: 16px;
@@ -50,7 +62,7 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
   font-weight: 500;
 }
 
-.c6 {
+.c7 {
   margin-top: 56px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -82,7 +94,7 @@ exports[`<Feedback /> 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 +129,20 @@ exports[`<Feedback /> should render correctly when not centered vertically 1`] =
           >
             Welcome to Yoga
           </h1>
-          <p
+          <div
             class="c5"
-            color="deep"
+            display="flex"
           >
-            Enjoy your membership!
-          </p>
+            <p
+              class="c6"
+              color="deep"
+            >
+              Enjoy your membership!
+            </p>
+          </div>
         </div>
         <div
-          class="c6"
+          class="c7"
         />
       </div>
     </div>