refactor(ds): Unify Paragraph with Text component (#14509)

trezor · Sep 24, 2024 · bddd842 · bddd842
1 parent af7d6c1
commit bddd842
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 74 deletions.
diff --git a/packages/components/src/components/typography/Paragraph/Paragraph.stories.tsx b/packages/components/src/components/typography/Paragraph/Paragraph.stories.tsx
@@ -1,27 +1,22 @@
 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',
  component: P,
 } 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
@@ -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
@@ -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}