chore(suite): refactor staking

trezor · Nov 14, 2024 · 40b0d77 · 40b0d77
1 parent 3771bd2
commit 40b0d77
Show file tree

Hide file tree

Showing 62 changed files with 699 additions and 1,195 deletions.
diff --git a/packages/components/src/components/Card/Card.tsx b/packages/components/src/components/Card/Card.tsx
@@ -25,6 +25,7 @@ export const allowedCardFrameProps = [
     'minHeight',
     'maxHeight',
     'overflow',
+    'flex',
 ] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedCardFrameProps)[number]>;
 

diff --git a/packages/components/src/components/IconCircle/IconCircle.stories.tsx b/packages/components/src/components/IconCircle/IconCircle.stories.tsx
@@ -9,7 +9,7 @@ import {
     IconCircleProps,
     allowedIconCircleFrameProps,
 } from './IconCircle';
-import { iconCircleVariants } from './types';
+import { iconCircleVariants, iconCirclePaddingTypes } from './types';
 import { getFramePropsStory } from '../../utils/frameProps';
 
 const meta: Meta = {
@@ -22,6 +22,7 @@ export const IconCircle: StoryObj = {
     args: {
         variant: 'primary',
         name: 'butterfly',
+        paddingType: 'large',
         size: 40,
         hasBorder: true,
         ...getFramePropsStory(allowedIconCircleFrameProps).args,
@@ -38,6 +39,12 @@ export const IconCircle: StoryObj = {
                 type: 'number',
             },
         },
+        paddingType: {
+            control: {
+                type: 'select',
+            },
+            options: iconCirclePaddingTypes,
+        },
         hasBorder: {
             control: {
                 type: 'boolean',

diff --git a/packages/components/src/components/IconCircle/IconCircle.tsx b/packages/components/src/components/IconCircle/IconCircle.tsx
@@ -2,8 +2,18 @@ import styled from 'styled-components';
 
 import { ExclusiveColorOrVariant, Icon, IconName, IconSize, getIconSize } from '../Icon/Icon';
 import { TransientProps } from '../../utils/transientProps';
-import { IconCircleExclusiveColorOrVariant, IconCircleVariant, IconCircleColors } from './types';
-import { mapVariantToIconBackground, mapVariantToIconBorderColor } from './utils';
+import {
+    IconCircleExclusiveColorOrVariant,
+    IconCircleVariant,
+    IconCircleColors,
+    IconCirclePaddingType,
+} from './types';
+import {
+    mapVariantToIconBackground,
+    mapVariantToIconBorderColor,
+    mapPaddingTypeToPadding,
+    mapPaddingTypeToBorderWidth,
+} from './utils';
 import {
     FrameProps,
     FramePropsKeys,
@@ -19,23 +29,26 @@ type IconCircleWrapperProps = TransientProps<
 > & {
     $size: number;
     $hasBorder: boolean;
+    $paddingType: IconCirclePaddingType;
 };
 
 const IconCircleWrapper = styled.div<IconCircleWrapperProps>`
     width: ${({ $size }) => $size}px;
     background: ${mapVariantToIconBackground};
-    padding: ${({ $size }) => $size * 0.75}px;
+    padding: ${mapPaddingTypeToPadding};
     border-radius: 50%;
-    box-shadow: inset 0 0 0 ${({ $hasBorder, $size }) => ($hasBorder ? $size / 4 : 0)}px
-        ${mapVariantToIconBorderColor};
+    box-shadow: inset 0 0 0 ${mapPaddingTypeToBorderWidth} ${mapVariantToIconBorderColor};
     box-sizing: content-box;
 
+    ${({ $hasBorder }) => !$hasBorder && 'box-shadow: none;'}
+
     ${withFrameProps}
 `;
 
 export type IconCircleProps = {
     name: IconName;
     size: IconSize | number;
+    paddingType?: IconCirclePaddingType;
     hasBorder?: boolean;
 } & IconCircleExclusiveColorOrVariant &
     AllowedFrameProps;
@@ -44,6 +57,7 @@ export const IconCircle = ({
     name,
     size,
     hasBorder = true,
+    paddingType = 'large',
     iconColor,
     variant,
     ...rest
@@ -62,6 +76,7 @@ export const IconCircle = ({
     return (
         <IconCircleWrapper
             $size={iconSize}
+            $paddingType={paddingType}
             $hasBorder={hasBorder}
             {...wrapperColorOrVariant}
             {...frameProps}

diff --git a/packages/components/src/components/IconCircle/types.tsx b/packages/components/src/components/IconCircle/types.tsx
@@ -1,6 +1,6 @@
 import { CSSColor } from '@trezor/theme';
 
-import { UIVariant } from '../../config/types';
+import { UIVariant, UISize } from '../../config/types';
 
 export const iconCircleVariants = [
     'primary',
@@ -17,3 +17,6 @@ export type IconCircleColors = { foreground: CSSColor; background: CSSColor };
 export type IconCircleExclusiveColorOrVariant =
     | { variant?: IconCircleVariant; iconColor?: undefined }
     | { variant?: undefined; iconColor?: IconCircleColors };
+
+export const iconCirclePaddingTypes = ['small', 'medium', 'large'] as const;
+export type IconCirclePaddingType = Extract<UISize, (typeof iconCirclePaddingTypes)[number]>;
diff --git a/packages/components/src/components/IconCircle/utils.tsx b/packages/components/src/components/IconCircle/utils.tsx
@@ -2,15 +2,28 @@ import { DefaultTheme } from 'styled-components';
 
 import { Color, CSSColor } from '@trezor/theme';
 
-import { IconCircleVariant, IconCircleExclusiveColorOrVariant } from './types';
+import {
+    IconCircleVariant,
+    IconCircleExclusiveColorOrVariant,
+    IconCirclePaddingType,
+} from './types';
 import { TransientProps } from '../../utils/transientProps';
 
-type MapArgs = {
+type VariantMapArgs = {
     theme: DefaultTheme;
     $hasBorder: boolean;
 } & TransientProps<IconCircleExclusiveColorOrVariant>;
 
-export const mapVariantToIconBorderColor = ({ $variant, theme, $iconColor }: MapArgs): CSSColor => {
+type PaddingTypeMap = {
+    $paddingType: IconCirclePaddingType;
+    $size: number;
+};
+
+export const mapVariantToIconBorderColor = ({
+    $variant,
+    theme,
+    $iconColor,
+}: VariantMapArgs): CSSColor => {
     if ($variant === undefined) {
         return $iconColor?.foreground ?? 'transparent';
     }
@@ -31,17 +44,17 @@ export const mapVariantToIconBackground = ({
     $hasBorder,
     $iconColor,
     $variant,
-}: MapArgs): CSSColor => {
+}: VariantMapArgs): CSSColor => {
     if ($variant === undefined) {
         return $iconColor?.background ?? 'transparent';
     }
 
     const noBorderColorMap: Record<IconCircleVariant, Color> = {
-        primary: 'backgroundPrimarySubtleOnElevation1',
-        warning: 'backgroundAlertYellowSubtleOnElevation1',
-        destructive: 'backgroundAlertRedSubtleOnElevation1',
-        info: 'backgroundAlertBlueSubtleOnElevation1',
-        tertiary: 'backgroundTertiaryDefaultOnElevation1',
+        primary: 'backgroundPrimarySubtleOnElevation0',
+        warning: 'backgroundAlertYellowSubtleOnElevation0',
+        destructive: 'backgroundAlertRedSubtleOnElevation0',
+        info: 'backgroundAlertBlueSubtleOnElevation0',
+        tertiary: 'backgroundTertiaryDefaultOnElevation0',
     };
 
     const borderColorMap: Record<IconCircleVariant, Color> = {
@@ -54,3 +67,23 @@ export const mapVariantToIconBackground = ({
 
     return theme[($hasBorder ? borderColorMap : noBorderColorMap)[$variant]];
 };
+
+export const mapPaddingTypeToPadding = ({ $paddingType, $size }: PaddingTypeMap): string => {
+    const paddingCoefficientMap: Record<IconCirclePaddingType, number> = {
+        small: 0.25,
+        medium: 0.5,
+        large: 0.75,
+    };
+
+    return $size * paddingCoefficientMap[$paddingType] + 'px';
+};
+
+export const mapPaddingTypeToBorderWidth = ({ $paddingType, $size }: PaddingTypeMap): string => {
+    const borderCoefficientMap: Record<IconCirclePaddingType, number> = {
+        small: 0.1,
+        medium: 0.175,
+        large: 0.25,
+    };
+
+    return $size * borderCoefficientMap[$paddingType] + 'px';
+};
diff --git a/packages/components/src/components/InfoRow/InfoRow.stories.tsx b/packages/components/src/components/InfoRow/InfoRow.stories.tsx
@@ -10,6 +10,7 @@ import {
 import { flexDirection } from '../Flex/Flex';
 import { getFramePropsStory } from '../../utils/frameProps';
 import { getTextPropsStory } from '../typography/utils';
+import { variables } from '../../config';
 
 const meta: Meta = {
     title: 'InfoRow',
@@ -40,6 +41,16 @@ export const InfoRow: StoryObj = {
                 type: 'text',
             },
         },
+        iconName: {
+            options: ['none', ...variables.ICONS],
+            mapping: {
+                ...variables.ICONS,
+                none: undefined,
+            },
+            control: {
+                type: 'select',
+            },
+        },
         ...getFramePropsStory(allowedInfoRowFrameProps).argTypes,
         ...getTextPropsStory(allowedInfoRowTextProps).argTypes,
     },

diff --git a/packages/components/src/components/InfoRow/InfoRow.tsx b/packages/components/src/components/InfoRow/InfoRow.tsx
@@ -12,16 +12,17 @@ import {
 } from '../../utils/frameProps';
 import { TextPropsKeys, TextProps } from '../typography/utils';
 import { TransientProps } from '../../utils/transientProps';
-import { FlexDirection, Flex } from '../Flex/Flex';
+import { FlexDirection, Flex, Row } from '../Flex/Flex';
+import { IconName, Icon } from '../Icon/Icon';
 import { Text } from '../typography/Text/Text';
 
 export const allowedInfoRowTextProps = ['typographyStyle'] as const satisfies TextPropsKeys[];
-type AllowedInfoRowTextProps = Pick<TextProps, (typeof allowedInfoRowTextProps)[number]>;
+type AllowedTextProps = Pick<TextProps, (typeof allowedInfoRowTextProps)[number]>;
 
 export const allowedInfoRowFrameProps = ['margin'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedInfoRowFrameProps)[number]>;
 
-type ContainerProps = TransientProps<AllowedFrameProps & AllowedInfoRowTextProps>;
+type ContainerProps = TransientProps<AllowedFrameProps & AllowedTextProps>;
 
 const Container = styled.div<ContainerProps>`
     width: 100%;
@@ -30,9 +31,10 @@ const Container = styled.div<ContainerProps>`
 `;
 
 export type InfoRowProps = AllowedFrameProps &
-    AllowedInfoRowTextProps & {
+    AllowedTextProps & {
         children?: ReactNode;
         direction?: FlexDirection;
+        iconName?: IconName;
         label: ReactNode;
         labelTypographyStyle?: TypographyStyle;
     };
@@ -41,6 +43,7 @@ export const InfoRow = ({
     children,
     label,
     direction = 'column',
+    iconName,
     typographyStyle = 'body',
     labelTypographyStyle = 'hint',
     ...rest
@@ -54,11 +57,14 @@ export const InfoRow = ({
                 direction={direction}
                 alignItems={isRow ? 'center' : 'stretch'}
                 justifyContent={isRow ? 'space-between' : undefined}
-                gap={isRow ? spacings.md : spacings.xxs}
+                gap={isRow ? spacings.md : spacings.xxxs}
             >
-                <Text variant="tertiary" typographyStyle={labelTypographyStyle} as="div">
-                    {label}
-                </Text>
+                <Row gap={spacings.xxs}>
+                    {iconName && <Icon name={iconName} size="medium" variant="tertiary" />}
+                    <Text variant="tertiary" typographyStyle={labelTypographyStyle} as="div">
+                        {label}
+                    </Text>
+                </Row>
                 <Text as="div" typographyStyle={typographyStyle} align={isRow ? 'right' : 'left'}>
                     {children}
                 </Text>

diff --git a/packages/components/src/components/form/BottomText.tsx b/packages/components/src/components/form/BottomText.tsx
@@ -5,7 +5,7 @@ import styled, { keyframes } from 'styled-components';
 import { spacings } from '@trezor/theme';
 
 import { IconName, Icon, IconVariant } from '../Icon/Icon';
-import { InputState } from './inputTypes';
+import { InputState } from './types';
 import { Row } from '../Flex/Flex';
 import { Text, TextVariant } from '../typography/Text/Text';
 import { UIVariant } from '../../config/types';

diff --git a/packages/components/src/components/form/FormCell/FormCell.tsx b/packages/components/src/components/form/FormCell/FormCell.tsx
@@ -11,7 +11,7 @@ import {
     withFrameProps,
 } from '../../../utils/frameProps';
 import { Column } from '../../Flex/Flex';
-import { InputState } from '../inputTypes';
+import { InputState } from '../types';
 import { TopAddons } from '../TopAddons';
 import { BottomText } from '../BottomText';
 import { IconName } from '../../Icon/Icon';