refactor(suite): Refactor InfoPair to InfoSegments (#15627)

trezor · Nov 28, 2024 · 175a03f · 175a03f
1 parent 6ea9351
commit 175a03f
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 121 deletions.
diff --git a/packages/components/src/components/InfoPair/InfoPair.stories.tsx b/packages/components/src/components/InfoPair/InfoPair.stories.tsx
diff --git a/packages/components/src/components/InfoPair/InfoPair.tsx b/packages/components/src/components/InfoPair/InfoPair.tsx
diff --git a/packages/components/src/components/InfoSegments/InfoSegments.stories.tsx 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
@@ -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
@@ -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
@@ -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/...odals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/IODetails/IODetails.tsx b/...odals/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/.../src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx b/.../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" />