feat(suite-native): add more params to IconListItem for reusability

trezor · Jan 17, 2025 · bb70836 · bb70836
1 parent 591ce46
commit bb70836
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 27 deletions.
diff --git a/suite-native/atoms/src/IconListItem.tsx b/suite-native/atoms/src/IconListItem.tsx
@@ -1,14 +1,15 @@
 import { ReactNode } from 'react';
+import { FlexAlignType } from 'react-native';
 
-import { IconName } from '@suite-native/icons';
+import { IconName, IconSize } from '@suite-native/icons';
 import { Color } from '@trezor/theme';
 
 import { Box } from './Box';
 import { OrderedListIcon } from './OrderedListIcon';
 import { HStack } from './Stack';
 import { Text } from './Text';
 
-type Variant = 'default' | 'red';
+type Variant = 'default' | 'red' | 'yellow';
 type IconColors = {
     iconColor: Color;
     iconBorderColor: Color;
@@ -26,23 +27,40 @@ const iconColorsMap = {
         iconBorderColor: 'backgroundAlertRedSubtleOnElevation0',
         iconBackgroundColor: 'backgroundAlertRedSubtleOnElevation1',
     },
+    yellow: {
+        iconColor: 'iconAlertYellow',
+        iconBorderColor: 'backgroundAlertYellowSubtleOnElevation0',
+        iconBackgroundColor: 'backgroundAlertYellowSubtleOnElevation1',
+    },
 } as const satisfies Record<Variant, IconColors>;
 
 type IconListItemProps = {
     children: ReactNode;
     icon: IconName;
+    iconSize?: IconSize;
     variant?: Variant;
+    verticalAlign?: FlexAlignType;
 };
 
-export const IconListItem = ({ icon, children, variant = 'default' }: IconListItemProps) => {
+export const IconListItem = ({
+    icon,
+    children,
+    iconSize = 'medium',
+    variant = 'default',
+    verticalAlign = 'center',
+}: IconListItemProps) => {
     const iconColors = iconColorsMap[variant];
 
     return (
-        <HStack spacing="sp12" alignItems="center">
-            <OrderedListIcon iconName={icon} iconSize="medium" {...iconColors} />
-            <Box flexShrink={1}>
-                <Text variant="hint">{children}</Text>
-            </Box>
+        <HStack spacing="sp12" alignItems={verticalAlign}>
+            <OrderedListIcon iconName={icon} iconSize={iconSize} {...iconColors} />
+            <Box flexShrink={1}>{children}</Box>
         </HStack>
     );
 };
+
+export const IconListTextItem = ({ children, ...rest }: IconListItemProps) => (
+    <IconListItem {...rest}>
+        <Text variant="hint">{children}</Text>
+    </IconListItem>
+);
diff --git a/suite-native/atoms/src/OrderedListIcon.tsx b/suite-native/atoms/src/OrderedListIcon.tsx
@@ -3,17 +3,27 @@ import { RequireExactlyOne } from 'type-fest';
 
 import { Icon, IconName, IconSize } from '@suite-native/icons';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import { Color } from '@trezor/theme';
+import { Color, NativeSpacings } from '@trezor/theme';
 
 import { Box } from './Box';
 import { Text } from './Text';
 
-const iconBackgroundStyle = prepareNativeStyle<{ color: Color; borderColor: Color }>(
-    (utils, { color, borderColor }) => ({
+const iconSizeToBackgroundSizeMap = {
+    medium: 32,
+    large: 40,
+    // sizes below are unclear, have not yet been used in a design
+    extraSmall: 32,
+    small: 32,
+    mediumLarge: 40,
+    extraLarge: 40,
+} as const satisfies Record<IconSize, NativeSpacings[keyof NativeSpacings]>;
+
+const iconBackgroundStyle = prepareNativeStyle<{ color: Color; borderColor: Color; size: number }>(
+    (utils, { color, borderColor, size }) => ({
         alignItems: 'center',
         justifyContent: 'center',
-        width: utils.spacings.sp32,
-        height: utils.spacings.sp32,
+        width: size,
+        height: size,
         borderRadius: utils.borders.radii.r12,
         extend: [
             {
@@ -60,6 +70,7 @@ export const OrderedListIcon = ({
             style={applyStyle(iconBackgroundStyle, {
                 color: iconBackgroundColor,
                 borderColor: iconBorderColor,
+                size: iconSizeToBackgroundSizeMap[iconSize],
             })}
         >
             {iconNumber && <Text color={iconColor}>{iconNumber}</Text>}

diff --git a/suite-native/module-device-settings/src/components/DeviceAuthenticityCard.tsx b/suite-native/module-device-settings/src/components/DeviceAuthenticityCard.tsx
@@ -7,7 +7,7 @@ import { analytics, DeviceAuthenticityCheckResult, EventType } from '@suite-nati
 import { selectSelectedDevice } from '@suite-common/wallet-core';
 import { requestPrioritizedDeviceAccess } from '@suite-native/device-mutex';
 import { useAlert } from '@suite-native/alerts';
-import { Button, IconListItem, Text, VStack } from '@suite-native/atoms';
+import { Button, IconListTextItem, Text, VStack } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
 import {
     DeviceAuthenticityStackParamList,
@@ -84,15 +84,15 @@ export const DeviceAuthenticityCard = () => {
             textAlign: 'left',
             appendix: (
                 <VStack spacing="sp24">
-                    <IconListItem icon="shieldCheck">
+                    <IconListTextItem icon="shieldCheck">
                         <Translation id="moduleDeviceSettings.authenticity.info.item1" />
-                    </IconListItem>
-                    <IconListItem icon="cpu">
+                    </IconListTextItem>
+                    <IconListTextItem icon="cpu">
                         <Translation id="moduleDeviceSettings.authenticity.info.item2" />
-                    </IconListItem>
-                    <IconListItem icon="check">
+                    </IconListTextItem>
+                    <IconListTextItem icon="check">
                         <Translation id="moduleDeviceSettings.authenticity.info.item3" />
-                    </IconListItem>
+                    </IconListTextItem>
                 </VStack>
             ),
             primaryButtonTitle: (

diff --git a/suite-native/module-device-settings/src/screens/DeviceAuthenticitySummaryScreen.tsx b/suite-native/module-device-settings/src/screens/DeviceAuthenticitySummaryScreen.tsx
@@ -2,7 +2,7 @@ import { SUITE_LITE_SUPPORT_URL, useOpenLink } from '@suite-native/link';
 import {
     Button,
     ButtonColorScheme,
-    IconListItem,
+    IconListTextItem,
     PictogramTitleHeader,
     PictogramVariant,
     VStack,
@@ -68,15 +68,15 @@ export const DeviceAuthenticitySummaryScreen = ({
                 />
                 {checkResult === 'compromised' && (
                     <VStack spacing="sp24" justifyContent="center">
-                        <IconListItem icon="plugs" variant="red">
+                        <IconListTextItem icon="plugs" variant="red">
                             <Translation id="moduleDeviceSettings.authenticity.summary.compromised.item1" />
-                        </IconListItem>
-                        <IconListItem icon="handPalm" variant="red">
+                        </IconListTextItem>
+                        <IconListTextItem icon="handPalm" variant="red">
                             <Translation id="moduleDeviceSettings.authenticity.summary.compromised.item2" />
-                        </IconListItem>
-                        <IconListItem icon="chatCircle" variant="red">
+                        </IconListTextItem>
+                        <IconListTextItem icon="chatCircle" variant="red">
                             <Translation id="moduleDeviceSettings.authenticity.summary.compromised.item3" />
-                        </IconListItem>
+                        </IconListTextItem>
                     </VStack>
                 )}
             </VStack>