@pagopa/io-app-design-system 4.2.0 → 4.3.0

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -73,6 +73,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
         style={
           {
             "flexGrow": 1,
+            "flexShrink": 1,
           }
         }
       >
@@ -311,6 +312,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     accessibilityElementsHidden={true}
@@ -501,6 +503,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     style={
@@ -660,6 +663,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     accessibilityElementsHidden={true}
@@ -942,7 +946,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
       >
         <Text
           allowFontScaling={true}
-          dynamicTypeRamp="footnote"
+          dynamicTypeRamp="headline"
           maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
@@ -951,28 +955,23 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
             ]
           }
         >
           label
         </Text>
-        <View
-          style={
-            {
-              "height": 4,
-            }
-          }
-        />
         <View
           style={
             {
               "alignItems": "center",
+              "display": "flex",
               "flexDirection": "row",
+              "gap": 4,
             }
           }
         >
@@ -1033,13 +1032,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               />
             </RNSVGGroup>
           </RNSVGSvgView>
-          <View
-            style={
-              {
-                "width": 4,
-              }
-            }
-          />
           <Text
             allowFontScaling={true}
             dynamicTypeRamp="footnote"
@@ -1068,7 +1060,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         pointerEvents="none"
         style={
           {
+            "display": "flex",
             "flexDirection": "row",
+            "gap": 8,
           }
         }
       >
@@ -1092,13 +1086,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         >
           € 1.000,00
         </Text>
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <View
           accessibilityState={
             {
@@ -1326,7 +1313,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
       >
         <Text
           allowFontScaling={true}
-          dynamicTypeRamp="footnote"
+          dynamicTypeRamp="headline"
           maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
@@ -1335,10 +1322,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
             ]
           }
@@ -1352,7 +1339,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         pointerEvents="none"
         style={
           {
+            "display": "flex",
             "flexDirection": "row",
+            "gap": 8,
           }
         }
       >
@@ -1376,13 +1365,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         >
           € 1.000,00
         </Text>
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <View
           accessibilityState={
             {
@@ -1760,6 +1742,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
         style={
           {
             "flexGrow": 1,
+            "flexShrink": 1,
           }
         }
       >
@@ -1949,7 +1932,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 18,
+                "fontSize": 17,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1998,6 +1981,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     accessibilityElementsHidden={true}
@@ -2069,9 +2053,9 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
             [
               {},
               {
-                "color": "#0073E6",
+                "color": "#0B3EE3",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 18,
+                "fontSize": 17,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2109,7 +2093,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0073E6",
+                "color": "#0B3EE3",
               },
               {
                 "flex": 0,
@@ -2118,7 +2102,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               },
             ]
           }
-          tintColor="#0073E6"
+          tintColor="#0B3EE3"
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -2188,6 +2172,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     style={
@@ -2238,7 +2223,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 18,
+                "fontSize": 17,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2269,7 +2254,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               "borderWidth": 0,
             },
             {
-              "color": "#0073E6",
+              "color": "#0B3EE3",
             },
             {
               "flex": 0,
@@ -2278,7 +2263,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
             },
           ]
         }
-        tintColor="#0073E6"
+        tintColor="#0B3EE3"
         vbHeight={24}
         vbWidth={24}
         width={24}
@@ -2347,6 +2332,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     accessibilityElementsHidden={true}
@@ -2467,7 +2453,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 18,
+                "fontSize": 17,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2505,7 +2491,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0073E6",
+                "color": "#0B3EE3",
               },
               {
                 "flex": 0,
@@ -2514,7 +2500,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               },
             ]
           }
-          tintColor="#0073E6"
+          tintColor="#0B3EE3"
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -2629,7 +2615,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          dynamicTypeRamp="footnote"
+          dynamicTypeRamp="headline"
           maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
@@ -2638,28 +2624,23 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 14,
+                "fontSize": 17,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
             ]
           }
         >
           label
         </Text>
-        <View
-          style={
-            {
-              "height": 4,
-            }
-          }
-        />
         <View
           style={
             {
               "alignItems": "center",
+              "display": "flex",
               "flexDirection": "row",
+              "gap": 4,
             }
           }
         >
@@ -2720,13 +2701,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               />
             </RNSVGGroup>
           </RNSVGSvgView>
-          <View
-            style={
-              {
-                "width": 4,
-              }
-            }
-          />
           <Text
             allowFontScaling={false}
             dynamicTypeRamp="footnote"
@@ -2755,7 +2729,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
         pointerEvents="none"
         style={
           {
+            "display": "flex",
             "flexDirection": "row",
+            "gap": 8,
           }
         }
       >
@@ -2769,7 +2745,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 18,
+                "fontSize": 17,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2779,13 +2755,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
         >
           € 1.000,00
         </Text>
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <View
           accessibilityState={
             {
@@ -3013,7 +2982,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
       >
         <Text
           allowFontScaling={false}
-          dynamicTypeRamp="footnote"
+          dynamicTypeRamp="headline"
           maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
@@ -3022,10 +2991,10 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 14,
+                "fontSize": 17,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
             ]
           }
@@ -3039,7 +3008,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
         pointerEvents="none"
         style={
           {
+            "display": "flex",
             "flexDirection": "row",
+            "gap": 8,
           }
         }
       >
@@ -3053,7 +3024,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 18,
+                "fontSize": 17,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -3063,13 +3034,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
         >
           € 1.000,00
         </Text>
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <View
           accessibilityState={
             {

package/src/components/listitems/__test__/listitem.test.tsx

@@ -10,7 +10,7 @@ import ListItemNav from "../ListItemNav";
 import ListItemNavAlert from "../ListItemNavAlert";
 import { ListItemRadioWithAmount } from "../ListItemRadioWithAmount";
 import { ListItemTransaction } from "../ListItemTransaction";
-import { PressableListItemBase } from "../PressableListItemsBase";
+import { PressableListItemBase } from "../PressableListItemBase";
 
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");

package/src/components/listitems/index.tsx

@@ -5,9 +5,9 @@ export * from "./ListItemInfoCopy";
 export * from "./ListItemNav";
 export * from "./ListItemNavAlert";
 export * from "./ListItemTransaction";
-export * from "./PressableListItemsBase";
 export * from "./ListItemSwitch";
 export * from "./ListItemCheckbox";
 export * from "./ListItemRadio";
 export * from "./ListItemRadioWithAmount";
 export * from "./ListItemAmount";
+export * from "./PressableListItemBase";

package/src/components/modules/ModuleCredential.tsx

@@ -3,15 +3,13 @@ import {
   Image,
   ImageSourcePropType,
   ImageURISource,
-  StyleSheet,
-  View
+  StyleSheet
 } from "react-native";
 import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacer,
-  IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
@@ -43,26 +41,28 @@ type BaseModuleProps = {
 };
 
 type ModuleCredentialProps =
-  | LoadingModuleProps
-  | (BaseModuleProps & ImageProps & PressableModuleBaseProps);
+  | BaseModuleProps & ImageProps & PressableModuleBaseProps;
 
-const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
-  const theme = useIOTheme();
-
-  if (props.isLoading) {
-    return <ModuleCredentialSkeleton />;
-  }
+const ModuleCredential = (
+  props: WithTestID<LoadingModuleProps | ModuleCredentialProps>
+) =>
+  props.isLoading ? (
+    <ModuleCredentialSkeleton />
+  ) : (
+    <ModuleCredentialContent {...props} />
+  );
 
-  const {
-    testID,
-    icon,
-    image,
-    label,
-    onPress,
-    badge,
-    isFetching,
-    ...pressableProps
-  } = props;
+const ModuleCredentialContent = ({
+  testID,
+  icon,
+  image,
+  label,
+  onPress,
+  badge,
+  isFetching,
+  ...pressableProps
+}: WithTestID<ModuleCredentialProps>) => {
+  const theme = useIOTheme();
 
   const iconComponent = icon && (
     <Icon
@@ -80,6 +80,33 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
     />
   );
 
+  const endComponent = React.useMemo(() => {
+    if (isFetching) {
+      return (
+        <LoadingSpinner
+          testID={testID ? `${testID}_activityIndicator` : undefined}
+          color={theme["interactiveElem-default"]}
+        />
+      );
+    }
+    if (badge) {
+      return (
+        <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
+      );
+    }
+    if (onPress) {
+      return (
+        <Icon
+          testID={testID ? `${testID}_icon` : undefined}
+          name="chevronRightListItem"
+          color={theme["interactiveElem-default"]}
+          size={IOListItemVisualParams.chevronSize}
+        />
+      );
+    }
+    return null;
+  }, [testID, theme, isFetching, badge, onPress]);
+
   const ModuleContent = () => (
     <HStack space={8} style={{ alignItems: "center" }}>
       <HStack
@@ -99,24 +126,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
           {label}
         </BodySmall>
       </HStack>
-      <View style={IOStyles.row}>
-        {badge ? (
-          <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
-        ) : null}
-        {isFetching ? (
-          <LoadingSpinner
-            testID={testID ? `${testID}_activityIndicator` : undefined}
-            color={theme["interactiveElem-default"]}
-          />
-        ) : onPress ? (
-          <Icon
-            testID={testID ? `${testID}_icon` : undefined}
-            name="chevronRightListItem"
-            color={theme["interactiveElem-default"]}
-            size={IOListItemVisualParams.chevronSize}
-          />
-        ) : null}
-      </View>
+      {endComponent}
     </HStack>
   );
 

package/src/components/modules/PressableModuleBase.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { PropsWithChildren } from "react";
 import { Pressable } from "react-native";
-import Animated from "react-native-reanimated";
+import Animated, { useReducedMotion } from "react-native-reanimated";
+import { useScaleAnimation } from "../../hooks";
 import {
   IOColors,
   IOModuleIDPSavedVSpacing,
@@ -9,7 +10,6 @@ import {
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { useModuleSpringAnimation } from "./hooks/useModuleSpringAnimation";
 
 export type PressableModuleBaseProps = WithTestID<
   {
@@ -29,17 +29,24 @@ export const PressableModuleBase = ({
   children
 }: PropsWithChildren<PressableModuleBaseProps>) => {
   const theme = useIOTheme();
-  const { handlePressIn, handlePressOut, animatedStyle } =
-    useModuleSpringAnimation();
+  const reducedMotion = useReducedMotion();
+  const { onPressIn, onPressOut, scaleAnimatedStyle } = useScaleAnimation(
+    reducedMotion ? "slight" : "medium"
+  );
+  /* We use a slight scaleEffect if `reducedMotion` is enabled.
+  We don't disable it completely because that's the only
+  difference between the two states "default" and "pressed".
+  If we remove it, they they won't be able to understand
+  if there's an ongoing interaction. */
 
   return (
     <Pressable
       onPress={onPress}
       testID={testID}
       accessible={true}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onTouchEnd={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       accessibilityRole="button"
@@ -49,7 +56,7 @@ export const PressableModuleBase = ({
           IOModuleStyles.button,
           { borderColor: IOColors[theme["cardBorder-default"]] },
           withLooseSpacing && { paddingVertical: IOModuleIDPSavedVSpacing },
-          animatedStyle
+          scaleAnimatedStyle
         ]}
       >
         {children}

package/src/components/modules/index.tsx

@@ -4,5 +4,5 @@ export * from "./ModuleCredential";
 export * from "./ModuleIDP";
 export * from "./ModuleNavigation";
 export * from "./ModulePaymentNotice";
-export * from "./PressableModuleBase";
 export * from "./ModuleSummary";
+export * from "./PressableModuleBase";