chore(suite): refactor transaction details modal

trezor · Nov 22, 2024 · 04c428a · 04c428a
1 parent a55654c
commit 04c428a
Show file tree

Hide file tree

Showing 42 changed files with 1,206 additions and 1,550 deletions.
diff --git a/packages/components/src/components/Grid/Grid.tsx b/packages/components/src/components/Grid/Grid.tsx
@@ -16,7 +16,8 @@ const Container = styled.div<
 >`
     display: grid;
     gap: ${({ $gap }) => $gap}px;
-    grid-template-columns: repeat(${({ $columns }) => $columns}, 1fr);
+    grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));
+
     ${withFrameProps}
 `;
 

diff --git a/...rc/components/InfoRow/InfoRow.stories.tsx → .../components/InfoItem/InfoItem.stories.tsx b/...rc/components/InfoRow/InfoRow.stories.tsx → .../components/InfoItem/InfoItem.stories.tsx
@@ -3,31 +3,32 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import {
-    InfoRow as InfoRowComponent,
-    allowedInfoRowFrameProps,
-    allowedInfoRowTextProps,
-} from './InfoRow';
+    InfoItem as InfoItemComponent,
+    allowedInfoItemFrameProps,
+    allowedInfoItemTextProps,
+    verticalAlignments,
+} from './InfoItem';
 import { flexDirection } from '../Flex/Flex';
 import { getFramePropsStory } from '../../utils/frameProps';
 import { getTextPropsStory } from '../typography/utils';
 import { variables } from '../../config';
 
 const meta: Meta = {
-    title: 'InfoRow',
+    title: 'InfoItem',
 } as Meta;
 export default meta;
 
-export const InfoRow: StoryObj = {
+export const InfoItem: StoryObj = {
     render: props => (
-        <InfoRowComponent label={undefined} {...props}>
+        <InfoItemComponent label={undefined} {...props}>
             Lorem ipsum
-        </InfoRowComponent>
+        </InfoItemComponent>
     ),
     args: {
         direction: 'column',
         label: 'Label',
-        ...getFramePropsStory(allowedInfoRowFrameProps).args,
-        ...getTextPropsStory(allowedInfoRowTextProps).args,
+        ...getFramePropsStory(allowedInfoItemFrameProps).args,
+        ...getTextPropsStory(allowedInfoItemTextProps).args,
     },
     argTypes: {
         direction: {
@@ -51,7 +52,18 @@ export const InfoRow: StoryObj = {
                 type: 'select',
             },
         },
-        ...getFramePropsStory(allowedInfoRowFrameProps).argTypes,
-        ...getTextPropsStory(allowedInfoRowTextProps).argTypes,
+        labelWidth: {
+            control: {
+                type: 'number',
+            },
+        },
+        verticalAlignment: {
+            options: verticalAlignments,
+            control: {
+                type: 'radio',
+            },
+        },
+        ...getFramePropsStory(allowedInfoItemFrameProps).argTypes,
+        ...getTextPropsStory(allowedInfoItemTextProps).argTypes,
     },
 };
diff --git a/packages/components/src/components/InfoItem/InfoItem.tsx b/packages/components/src/components/InfoItem/InfoItem.tsx
@@ -0,0 +1,105 @@
+import { ReactNode } from 'react';
+
+import styled from 'styled-components';
+
+import { spacings, TypographyStyle } from '@trezor/theme';
+
+import {
+    FrameProps,
+    FramePropsKeys,
+    pickAndPrepareFrameProps,
+    withFrameProps,
+} from '../../utils/frameProps';
+import { TextPropsKeys, TextProps } from '../typography/utils';
+import { TransientProps } from '../../utils/transientProps';
+import { FlexDirection, Flex, Row, FlexAlignItems } from '../Flex/Flex';
+import { IconName, Icon } from '../Icon/Icon';
+import { Text } from '../typography/Text/Text';
+import { UIVerticalAlignment } from '../../config/types';
+
+export const allowedInfoItemTextProps = ['typographyStyle'] as const satisfies TextPropsKeys[];
+type AllowedTextProps = Pick<TextProps, (typeof allowedInfoItemTextProps)[number]>;
+
+export const allowedInfoItemFrameProps = ['margin'] as const satisfies FramePropsKeys[];
+type AllowedFrameProps = Pick<FrameProps, (typeof allowedInfoItemFrameProps)[number]>;
+
+export const verticalAlignments = ['top', 'center', 'bottom'] as const;
+type VerticalAlignment = Extract<UIVerticalAlignment, (typeof verticalAlignments)[number]>;
+
+const mapVerticalAlignmentToAlignItems = (verticalAlignment: VerticalAlignment): FlexAlignItems => {
+    const alignItemsMap: Record<VerticalAlignment, FlexAlignItems> = {
+        top: 'baseline',
+        center: 'center',
+        bottom: 'flex-end',
+    };
+
+    return alignItemsMap[verticalAlignment];
+};
+
+type ContainerProps = TransientProps<AllowedFrameProps & AllowedTextProps>;
+
+const Container = styled.div<ContainerProps>`
+    width: 100%;
+
+    ${withFrameProps}
+`;
+
+export type InfoItemProps = AllowedFrameProps &
+    AllowedTextProps & {
+        children?: ReactNode;
+        direction?: FlexDirection;
+        iconName?: IconName;
+        label: ReactNode;
+        labelTypographyStyle?: TypographyStyle;
+        labelWidth?: string | number;
+        verticalAlignment?: VerticalAlignment;
+    };
+
+export const InfoItem = ({
+    children,
+    label,
+    direction = 'column',
+    iconName,
+    typographyStyle = 'body',
+    labelTypographyStyle = 'hint',
+    labelWidth,
+    verticalAlignment = 'center',
+    ...rest
+}: InfoItemProps) => {
+    const frameProps = pickAndPrepareFrameProps(rest, allowedInfoItemFrameProps);
+    const isRow = direction === 'row';
+
+    return (
+        <Container {...frameProps}>
+            <Flex
+                direction={direction}
+                alignItems={isRow ? mapVerticalAlignmentToAlignItems(verticalAlignment) : 'normal'}
+                gap={isRow ? spacings.md : spacings.xxxs}
+            >
+                <Row
+                    gap={spacings.xxs}
+                    width={labelWidth}
+                    flex={labelWidth ? '0 0 auto' : '1 0 auto'}
+                >
+                    {iconName && <Icon name={iconName} size="medium" variant="tertiary" />}
+                    <Text
+                        variant="tertiary"
+                        typographyStyle={labelTypographyStyle}
+                        as="div"
+                        ellipsisLineCount={1}
+                    >
+                        {label}
+                    </Text>
+                </Row>
+                <Text
+                    as="div"
+                    typographyStyle={typographyStyle}
+                    align={isRow && !labelWidth ? 'right' : 'left'}
+                    ellipsisLineCount={isRow ? 1 : undefined}
+                >
+                    {children}
+                </Text>
+            </Flex>
+        </Container>
+    );
+};
diff --git a/packages/components/src/components/InfoPair/InfoPair.stories.tsx b/packages/components/src/components/InfoPair/InfoPair.stories.tsx
@@ -0,0 +1,36 @@
+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
@@ -0,0 +1,40 @@
+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/InfoRow/InfoRow.tsx b/packages/components/src/components/InfoRow/InfoRow.tsx
diff --git a/packages/components/src/components/NewModal/NewModalButton.tsx b/packages/components/src/components/NewModal/NewModalButton.tsx
@@ -7,7 +7,12 @@ export const NewModalButton = ({ children, ...rest }: ButtonProps) => {
 
     return (
         <NewModalContext.Provider value={value}>
-            <Button {...rest} variant={rest.variant ?? variant} size={rest.size ?? 'large'}>
+            <Button
+                {...rest}
+                variant={rest.variant ?? variant}
+                size={rest.size ?? 'large'}
+                minWidth={150}
+            >
                 {children}
             </Button>
         </NewModalContext.Provider>

diff --git a/packages/components/src/components/Table/Table.stories.tsx b/packages/components/src/components/Table/Table.stories.tsx
@@ -47,6 +47,7 @@ export const Table: StoryObj = {
         ...getFramePropsStory(allowedTableFrameProps).args,
         colWidths: 'none',
         isRowHighlightedOnHover: true,
+        hasBorders: true,
     },
     argTypes: {
         ...getFramePropsStory(allowedTableFrameProps).argTypes,
@@ -69,5 +70,10 @@ export const Table: StoryObj = {
                 type: 'boolean',
             },
         },
+        hasBorders: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 };