From bddd84285d0397f605d2b2392054b9ee26bece37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= <jvaclavik@gmail.com>
Date: Tue, 24 Sep 2024 18:07:47 +0200
Subject: [PATCH] refactor(ds): Unify Paragraph with Text component (#14509)

---
 .../Paragraph/Paragraph.stories.tsx           | 21 +++----
 .../typography/Paragraph/Paragraph.tsx        | 63 ++-----------------
 .../src/components/typography/Text/Text.tsx   | 11 +++-
 3 files changed, 21 insertions(+), 74 deletions(-)

diff --git a/packages/components/src/components/typography/Paragraph/Paragraph.stories.tsx b/packages/components/src/components/typography/Paragraph/Paragraph.stories.tsx
index 7beb0a0a5f0..948a75b3d1f 100644
--- a/packages/components/src/components/typography/Paragraph/Paragraph.stories.tsx
+++ b/packages/components/src/components/typography/Paragraph/Paragraph.stories.tsx
@@ -1,13 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import {
-    Paragraph as P,
-    ParagraphProps,
-    paragraphVariants,
-    allowedParagraphFrameProps,
-    allowedParagraphTextProps,
-} from './Paragraph';
+import { Paragraph as P } from './Paragraph';
 import { getFramePropsStory } from '../../../utils/frameProps';
 import { getTextPropsStory } from '../utils';
+import { allowedTextFrameProps, allowedTextTextProps, TextProps, textVariants } from '../Text/Text';
 
 const meta: Meta = {
     title: 'Typography',
@@ -15,13 +10,13 @@ const meta: Meta = {
 } as Meta;
 export default meta;
 
-export const Paragraph: StoryObj<ParagraphProps> = {
+export const Paragraph: StoryObj<TextProps> = {
     args: {
         typographyStyle: 'body',
         children:
             'Quos delectus veritatis est doloribus dolor. Odit fugit omnis magni ipsam quia rem aut. Et alias sint non. Consequuntur dignissimos veritatis debitis corporis esse. Quaerat voluptatem unde aut. Iusto laborum omnis quis amet atque. Sint culpa delectus non soluta temporibus saepe. Sequi saepe corrupti aliquam ut sit assumenda aspernatur consequuntur. Ut est ullam iusto facilis voluptatibus. Sit est cum quos. Quasi deleniti non fugit iste alias consequuntur. Ullam ad ut culpa est reiciendis molestiae. Reiciendis ab veritatis a totam inventore nihil voluptatem occaecati. Quisquam atque odit quia nam. Laboriosam rem et ut. Maxime qui voluptatem voluptatem.',
-        ...getFramePropsStory(allowedParagraphFrameProps).args,
-        ...getTextPropsStory(allowedParagraphTextProps).args,
+        ...getFramePropsStory(allowedTextFrameProps).args,
+        ...getTextPropsStory(allowedTextTextProps).args,
     },
     argTypes: {
         typographyStyle: {
@@ -41,9 +36,9 @@ export const Paragraph: StoryObj<ParagraphProps> = {
             control: {
                 type: 'select',
             },
-            options: paragraphVariants,
+            options: textVariants,
         },
-        ...getFramePropsStory(allowedParagraphFrameProps).argTypes,
-        ...getTextPropsStory(allowedParagraphTextProps).argTypes,
+        ...getFramePropsStory(allowedTextFrameProps).argTypes,
+        ...getTextPropsStory(allowedTextTextProps).argTypes,
     },
 };
diff --git a/packages/components/src/components/typography/Paragraph/Paragraph.tsx b/packages/components/src/components/typography/Paragraph/Paragraph.tsx
index 456a5664e8d..f81f563230a 100644
--- a/packages/components/src/components/typography/Paragraph/Paragraph.tsx
+++ b/packages/components/src/components/typography/Paragraph/Paragraph.tsx
@@ -1,63 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Text, TextVariant, textVariants, allowedTextTextProps } from '../Text/Text';
-import {
-    FrameProps,
-    FramePropsKeys,
-    pickAndPrepareFrameProps,
-    withFrameProps,
-} from '../../../utils/frameProps';
-import { makePropsTransient, TransientProps } from '../../../utils/transientProps';
-import { TextProps, TextPropsKeys, withTextProps } from '../utils';
-
-export const allowedParagraphTextProps: TextPropsKeys[] = [...allowedTextTextProps, 'align'];
-type AllowedParagraphTextProps = Pick<TextProps, (typeof allowedParagraphTextProps)[number]>;
-
-export const allowedParagraphFrameProps = [
-    'margin',
-    'maxWidth',
-] as const satisfies FramePropsKeys[];
-type AllowedFrameProps = Pick<FrameProps, (typeof allowedParagraphFrameProps)[number]>;
-
-export const paragraphVariants = textVariants;
-
-export type ParagraphProps = AllowedFrameProps &
-    AllowedParagraphTextProps & {
-        variant?: TextVariant;
-        className?: string;
-        'data-testid'?: string;
-        children: React.ReactNode;
-    };
-
-const P = styled.p<
-    TransientProps<AllowedFrameProps> & TransientProps<Pick<AllowedParagraphTextProps, 'align'>>
->`
-    ${withTextProps}
-    ${withFrameProps}
-`;
-
-export const Paragraph = ({
-    className,
-    typographyStyle = 'body',
-    textWrap,
-    align,
-    'data-testid': dataTest,
-    children,
-    variant,
-    ...rest
-}: ParagraphProps) => {
-    const frameProps = pickAndPrepareFrameProps(rest, allowedParagraphFrameProps);
+import { Text, TextProps } from '../Text/Text';
 
+export const Paragraph = ({ children, ...rest }: TextProps) => {
     return (
-        <P
-            className={className}
-            data-testid={dataTest}
-            {...makePropsTransient({ align })}
-            {...frameProps}
-        >
-            <Text typographyStyle={typographyStyle} textWrap={textWrap} variant={variant}>
-                {children}
-            </Text>
-        </P>
+        <Text {...rest} as="p">
+            {children}
+        </Text>
     );
 };
diff --git a/packages/components/src/components/typography/Text/Text.tsx b/packages/components/src/components/typography/Text/Text.tsx
index e96af5550b0..befde13827a 100644
--- a/packages/components/src/components/typography/Text/Text.tsx
+++ b/packages/components/src/components/typography/Text/Text.tsx
@@ -14,10 +14,11 @@ import { uiVariants } from '../../../config/types';
 export const allowedTextTextProps = [
     'typographyStyle',
     'textWrap',
+    'align',
 ] as const satisfies TextPropsKeys[];
 type AllowedTextTextProps = Pick<TextPropsCommon, (typeof allowedTextTextProps)[number]>;
 
-export const allowedTextFrameProps = ['margin'] as const satisfies FramePropsKeys[];
+export const allowedTextFrameProps = ['margin', 'maxWidth'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedTextFrameProps)[number]>;
 
 export const textVariants = [...uiVariants, 'purple'] as const;
@@ -63,10 +64,11 @@ const StyledText = styled.span<StyledTextProps>`
     ${withFrameProps}
 `;
 
-type TextProps = {
+export type TextProps = {
     children: ReactNode;
     className?: string;
     as?: string;
+    'data-testid'?: string;
 } & ExclusiveColorOrVariant &
     AllowedFrameProps &
     AllowedTextTextProps;
@@ -78,7 +80,9 @@ export const Text = ({
     className,
     typographyStyle,
     textWrap,
+    align,
     as = 'span',
+    'data-testid': dataTest,
     ...rest
 }: TextProps) => {
     const frameProps = pickAndPrepareFrameProps(rest, allowedTextFrameProps);
@@ -88,7 +92,8 @@ export const Text = ({
             {...(variant !== undefined ? { $variant: variant } : { $color: color })}
             className={className}
             as={as}
-            {...makePropsTransient({ typographyStyle, textWrap })}
+            data-testid={dataTest}
+            {...makePropsTransient({ typographyStyle, textWrap, align })}
             {...frameProps}
         >
             {children}