[RTN-2254] feat(action-requirement): add multiple paragraphs in description

packages/doc/content/components/components/actionrequirement/actionrequirement-web.mdx

@@ -46,6 +46,55 @@ render(() => {
   });
 ```
 
+### Multiple description paragraphs
+
+You can pass an array of strings to `description` to render multiple paragraphs. Empty, whitespace-only and `null` entries are ignored.
+
+```javascript state
+render(() => {
+  const descriptions = [
+    'Choose your activities to start the journey.',
+    'Track progress and adjust goals weekly.',
+    'Celebrate achievements and stay consistent!',
+  ];
+
+  function handleGetCheckableContent() {
+      return (
+        <Box display="flex" flexDirection="row" alignItems="center">
+          <Checkbox /> <Text>I have read and agree to the Terms of Use and Privacy Policy.</Text>
+        </Box>
+      )
+    };
+    function handleGetIllustration() {
+      return <Img2d01  width={375} height={375} />
+    }
+    function handleGetList() {
+      return (
+        <>
+          <Text><Dumbbell/> 1x/day standard access</Text>
+          <Text mt="small"><User /> 4x/month 1-on-1 sessions</Text>
+          <Text mt="small"><Star /> 2x/month premium classes</Text>
+        </>
+      )
+    }
+
+  return (
+    <Box display="flex" flexDirection="column" alignItems="center">
+      <ActionRequirement
+        title="Welcome to the world of feeling good!"
+        description={descriptions}
+        checkable={handleGetCheckableContent()}
+        illustration={handleGetIllustration()}
+        list={handleGetList()}
+      >
+        <ActionRequirement.PrimaryButton>Start working</ActionRequirement.PrimaryButton>
+        <ActionRequirement.SecondaryButton>Learn more</ActionRequirement.SecondaryButton>
+      </ActionRequirement>
+    </Box>
+  );
+});
+```
+
 ### Props
 
 <PropsTable component="ActionRequirement" platform="web" />

packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx

@@ -9,6 +9,7 @@ import {
   SecondaryButton,
 } from './ActionRequirementStyles';
 import Text from '../../Text';
+import parseDescription from '../../utils/parseDescription';
 import Box from '../../Box';
 
 const StyledActionRequirement = styled.div`
@@ -64,6 +65,8 @@ function ActionRequirement(props) {
   let primaryButton;
   let secondaryButton;
 
+  const descriptionArray = parseDescription(description);
+
   function defineCompoundComponents() {
     React.Children.forEach(children, child => {
       if (isChildFromComponent(child, PrimaryButton)) primaryButton = child;
@@ -85,9 +88,13 @@ function ActionRequirement(props) {
         ) : (
           <Title aria-level={ariaLevelTitle}>{title}</Title>
         )}
-        <Text.Body1 mt="small" color="deep">
-          {description}
-        </Text.Body1>
+        <Box display="flex" flexDirection="column" gap="large" mt="small">
+          {descriptionArray.map(paragraph => (
+            <Text.Body1 key={paragraph?.toString().slice(0, 10)} color="deep">
+              {paragraph}
+            </Text.Body1>
+          ))}
+        </Box>
         {list && <Box mt="large">{list}</Box>}
         {checkable && <Box mt="xxlarge">{checkable}</Box>}
         <Actions mt="xlarge">
@@ -102,7 +109,7 @@ function ActionRequirement(props) {
 ActionRequirement.propTypes = {
   title: oneOfType([arrayOf(node), node]).isRequired,
   children: oneOfType([arrayOf(node), node]),
-  description: string.isRequired,
+  description: oneOfType([string, arrayOf(string)]).isRequired,
   checkable: oneOfType([arrayOf(node), node]),
   illustration: oneOfType([arrayOf(node), node]),
   list: oneOfType([arrayOf(node), node]),

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

@@ -73,4 +73,22 @@ describe('<ActionRequirement />', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('should render multiple paragraphs when description is an array', () => {
+    const descriptions = [
+      'First requirement paragraph.',
+      'Second requirement giving more context.',
+      'Final requirement details here.',
+    ];
+
+    const { getByText } = render(
+      <ThemeProvider>
+        <ActionRequirement title="title" description={descriptions} />
+      </ThemeProvider>,
+    );
+
+    descriptions.forEach(d => {
+      expect(getByText(d)).toBeTruthy();
+    });
+  });
 });