From 175a03f8c6bca7714dcb0d78dcad80ae4ce4cc3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= <jvaclavik@gmail.com>
Date: Thu, 28 Nov 2024 15:16:13 +0100
Subject: [PATCH] refactor(suite): Refactor InfoPair to InfoSegments (#15627)

---
 .../components/InfoPair/InfoPair.stories.tsx  | 36 -----------------
 .../src/components/InfoPair/InfoPair.tsx      | 40 -------------------
 .../InfoSegments/InfoSegments.stories.tsx     | 35 ++++++++++++++++
 .../components/InfoSegments/InfoSegments.tsx  | 36 +++++++++++++++++
 packages/components/src/index.ts              |  2 +-
 .../suite/FormattedDateWithBullet.tsx         | 10 ++---
 .../AdvancedTxDetails/IODetails/IODetails.tsx | 35 +++++++---------
 .../TxDetailModal/BasicTxDetails.tsx          | 30 ++++++--------
 8 files changed, 103 insertions(+), 121 deletions(-)
 delete mode 100644 packages/components/src/components/InfoPair/InfoPair.stories.tsx
 delete mode 100644 packages/components/src/components/InfoPair/InfoPair.tsx
 create mode 100644 packages/components/src/components/InfoSegments/InfoSegments.stories.tsx
 create mode 100644 packages/components/src/components/InfoSegments/InfoSegments.tsx

diff --git a/packages/components/src/components/InfoPair/InfoPair.stories.tsx b/packages/components/src/components/InfoPair/InfoPair.stories.tsx
deleted file mode 100644
index b44a8a5bdb2..00000000000
--- a/packages/components/src/components/InfoPair/InfoPair.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import {
-    InfoPair as InfoPairComponent,
-    allowedInfoPairFrameProps,
-    allowedInfoPairTextProps,
-    InfoPairProps,
-} from './InfoPair';
-import { getFramePropsStory } from '../../utils/frameProps';
-import { getTextPropsStory } from '../typography/utils';
-import { textVariants } from '../typography/Text/Text';
-
-const meta: Meta = {
-    title: 'InfoPair',
-    component: InfoPairComponent,
-} as Meta;
-export default meta;
-
-export const InfoPair: StoryObj<InfoPairProps> = {
-    args: {
-        leftContent: 'Left',
-        rightContent: 'Right',
-        ...getFramePropsStory(allowedInfoPairFrameProps).args,
-        ...getTextPropsStory(allowedInfoPairTextProps).args,
-    },
-    argTypes: {
-        variant: {
-            control: {
-                type: 'select',
-            },
-            options: textVariants,
-        },
-        ...getFramePropsStory(allowedInfoPairFrameProps).argTypes,
-        ...getTextPropsStory(allowedInfoPairTextProps).argTypes,
-    },
-};
diff --git a/packages/components/src/components/InfoPair/InfoPair.tsx b/packages/components/src/components/InfoPair/InfoPair.tsx
deleted file mode 100644
index 9186fccd491..00000000000
--- a/packages/components/src/components/InfoPair/InfoPair.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ReactNode } from 'react';
-
-import { spacings } from '@trezor/theme';
-
-import { FrameProps, FramePropsKeys } from '../../utils/frameProps';
-import { TextPropsKeys, TextProps } from '../typography/utils';
-import { Text, TextVariant } from '../typography/Text/Text';
-import { Row } from '../Flex/Flex';
-
-export const allowedInfoPairTextProps = ['typographyStyle'] as const satisfies TextPropsKeys[];
-type AllowedTextProps = Pick<TextProps, (typeof allowedInfoPairTextProps)[number]>;
-
-export const allowedInfoPairFrameProps = ['margin'] as const satisfies FramePropsKeys[];
-type AllowedFrameProps = Pick<FrameProps, (typeof allowedInfoPairFrameProps)[number]>;
-
-export type InfoPairProps = AllowedFrameProps &
-    AllowedTextProps & {
-        variant?: TextVariant;
-    } & (
-        | { leftContent: ReactNode; rightContent?: ReactNode }
-        | { leftContent?: ReactNode; rightContent: ReactNode }
-    );
-
-export const InfoPair = ({
-    leftContent,
-    rightContent,
-    typographyStyle,
-    variant,
-    margin,
-}: InfoPairProps) => {
-    return (
-        <Text as="div" typographyStyle={typographyStyle} margin={margin} variant={variant}>
-            <Row gap={spacings.xxs}>
-                {leftContent}
-                {leftContent && rightContent && <span>&bull;</span>}
-                {rightContent}
-            </Row>
-        </Text>
-    );
-};
diff --git a/packages/components/src/components/InfoSegments/InfoSegments.stories.tsx b/packages/components/src/components/InfoSegments/InfoSegments.stories.tsx
new file mode 100644
index 00000000000..d114d9fc525
--- /dev/null
+++ b/packages/components/src/components/InfoSegments/InfoSegments.stories.tsx
@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import {
+    InfoSegments as InfoSegmentsComponent,
+    allowedInfoSegmentsFrameProps,
+    allowedInfoSegmentsTextProps,
+    InfoSegmentsProps,
+} from './InfoSegments';
+import { getFramePropsStory } from '../../utils/frameProps';
+import { getTextPropsStory } from '../typography/utils';
+import { textVariants } from '../typography/Text/Text';
+
+const meta: Meta = {
+    title: 'InfoSegments',
+    component: InfoSegmentsComponent,
+} as Meta;
+export default meta;
+
+export const InfoSegments: StoryObj<InfoSegmentsProps> = {
+    args: {
+        children: ['Left', 'Right'],
+        ...getFramePropsStory(allowedInfoSegmentsFrameProps).args,
+        ...getTextPropsStory(allowedInfoSegmentsTextProps).args,
+    },
+    argTypes: {
+        variant: {
+            control: {
+                type: 'select',
+            },
+            options: textVariants,
+        },
+        ...getFramePropsStory(allowedInfoSegmentsFrameProps).argTypes,
+        ...getTextPropsStory(allowedInfoSegmentsTextProps).argTypes,
+    },
+};
diff --git a/packages/components/src/components/InfoSegments/InfoSegments.tsx b/packages/components/src/components/InfoSegments/InfoSegments.tsx
new file mode 100644
index 00000000000..1ab6a82980f
--- /dev/null
+++ b/packages/components/src/components/InfoSegments/InfoSegments.tsx
@@ -0,0 +1,36 @@
+import { ReactNode, Children } from 'react';
+
+import { spacings } from '@trezor/theme';
+
+import { FrameProps, FramePropsKeys } from '../../utils/frameProps';
+import { TextPropsKeys, TextProps } from '../typography/utils';
+import { Text, TextVariant } from '../typography/Text/Text';
+import { Row } from '../Flex/Flex';
+
+export const allowedInfoSegmentsTextProps = ['typographyStyle'] as const satisfies TextPropsKeys[];
+type AllowedTextProps = Pick<TextProps, (typeof allowedInfoSegmentsTextProps)[number]>;
+
+export const allowedInfoSegmentsFrameProps = ['margin'] as const satisfies FramePropsKeys[];
+type AllowedFrameProps = Pick<FrameProps, (typeof allowedInfoSegmentsFrameProps)[number]>;
+
+export type InfoSegmentsProps = AllowedFrameProps &
+    AllowedTextProps & {
+        variant?: TextVariant;
+    } & { children: Array<ReactNode> };
+
+export const InfoSegments = ({ children, typographyStyle, variant, margin }: InfoSegmentsProps) => {
+    const validChildren = Children.toArray(children).filter(child => Boolean(child));
+
+    return (
+        <Text as="div" typographyStyle={typographyStyle} margin={margin} variant={variant}>
+            <Row gap={spacings.xxs}>
+                {validChildren.map((child, index) => (
+                    <>
+                        {child}
+                        {index < validChildren.length - 1 && <span>&bull;</span>}
+                    </>
+                ))}
+            </Row>
+        </Text>
+    );
+};
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index baef124424d..f6e78d4b131 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -48,7 +48,7 @@ export {
     type IconCircleVariant,
     type IconCircleColors,
 } from './components/IconCircle/IconCircle';
-export { InfoPair, type InfoPairProps } from './components/InfoPair/InfoPair';
+export { InfoSegments, type InfoSegmentsProps } from './components/InfoSegments/InfoSegments';
 export { InfoItem, type InfoItemProps } from './components/InfoItem/InfoItem';
 export * from './components/loaders/LoadingContent/LoadingContent';
 export * from './components/loaders/ProgressBar/ProgressBar';
diff --git a/packages/suite/src/components/suite/FormattedDateWithBullet.tsx b/packages/suite/src/components/suite/FormattedDateWithBullet.tsx
index c32481f8498..38fcb22492b 100644
--- a/packages/suite/src/components/suite/FormattedDateWithBullet.tsx
+++ b/packages/suite/src/components/suite/FormattedDateWithBullet.tsx
@@ -1,10 +1,10 @@
-import { InfoPair } from '@trezor/components';
+import { InfoSegments } from '@trezor/components';
 
 import { FormattedDate, FormattedDateProps } from './FormattedDate';
 
 export const FormattedDateWithBullet = ({ ...props }: FormattedDateProps) => (
-    <InfoPair
-        leftContent={<FormattedDate date {...props} />}
-        rightContent={<FormattedDate time {...props} />}
-    />
+    <InfoSegments>
+        <FormattedDate date {...props} />
+        <FormattedDate time {...props} />
+    </InfoSegments>
 );
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx
index bb284eb2c02..e64ce500b9a 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx
@@ -14,7 +14,7 @@ import {
     Row,
     Text,
     Grid,
-    InfoPair,
+    InfoSegments,
     H4,
 } from '@trezor/components';
 import { NetworkSymbol } from '@suite-common/wallet-config';
@@ -102,16 +102,13 @@ const IOGroup = ({ tx, inputs, outputs, isPhishingTransaction }: IOGroupProps) =
             <Grid columns={2} gap={spacings.xxxxl}>
                 {hasInputs && (
                     <Column gap={spacings.xs} margin={{ right: spacings.xl }}>
-                        <InfoPair
-                            leftContent={
-                                <Text typographyStyle="callout" variant="default">
-                                    <Translation id="TR_INPUTS" />
-                                </Text>
-                            }
-                            rightContent={inputs.length}
-                            typographyStyle="hint"
-                            variant="tertiary"
-                        />
+                        <InfoSegments typographyStyle="hint" variant="tertiary">
+                            <Text typographyStyle="callout" variant="default">
+                                <Translation id="TR_INPUTS" />
+                            </Text>
+                            {inputs.length}
+                        </InfoSegments>
+
                         {inputs.map(input => (
                             <IOItem
                                 key={`input-${input.n}`}
@@ -126,16 +123,12 @@ const IOGroup = ({ tx, inputs, outputs, isPhishingTransaction }: IOGroupProps) =
                 )}
                 {hasOutputs && (
                     <Column gap={spacings.xs} margin={{ left: spacings.xl }}>
-                        <InfoPair
-                            leftContent={
-                                <Text typographyStyle="callout" variant="default">
-                                    <Translation id="TR_OUTPUTS" />
-                                </Text>
-                            }
-                            rightContent={outputs.length}
-                            typographyStyle="hint"
-                            variant="tertiary"
-                        />
+                        <InfoSegments typographyStyle="hint" variant="tertiary">
+                            <Text typographyStyle="callout" variant="default">
+                                <Translation id="TR_OUTPUTS" />
+                            </Text>
+                            {outputs.length}
+                        </InfoSegments>
                         {outputs.map(output => (
                             <IOItem
                                 key={`output-${output.n}`}
diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx
index 4f8f2b21a93..18d80202191 100644
--- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx
+++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx
@@ -8,7 +8,7 @@ import {
     useElevation,
     Card,
     InfoItem,
-    InfoPair,
+    InfoSegments,
     Row,
     InfoItemProps,
     Grid,
@@ -90,23 +90,17 @@ export const BasicTxDetails = ({
 
                 <Row gap={spacings.xxs} margin={{ left: 'auto' }}>
                     {isConfirmed ? (
-                        <InfoPair
-                            typographyStyle="hint"
-                            variant="tertiary"
-                            leftContent={
-                                <Text typographyStyle="callout" variant="primary">
-                                    <Translation id="TR_CONFIRMED_TX" />
-                                </Text>
-                            }
-                            rightContent={
-                                confirmations > 0 ? (
-                                    <Translation
-                                        id="TR_TX_CONFIRMATIONS"
-                                        values={{ confirmationsCount: confirmations }}
-                                    />
-                                ) : undefined
-                            }
-                        />
+                        <InfoSegments typographyStyle="hint" variant="tertiary">
+                            <Text typographyStyle="callout" variant="primary">
+                                <Translation id="TR_CONFIRMED_TX" />
+                            </Text>
+                            {confirmations > 0 ? (
+                                <Translation
+                                    id="TR_TX_CONFIRMATIONS"
+                                    values={{ confirmationsCount: confirmations }}
+                                />
+                            ) : undefined}
+                        </InfoSegments>
                     ) : (
                         <Text typographyStyle="callout" variant="warning">
                             <Translation id="TR_UNCONFIRMED_TX" />