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

package/src/components/listitems/ListItemRadio.tsx

@@ -1,33 +1,23 @@
 import * as React from "react";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { Image, Pressable, StyleSheet, View } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import Placeholder from "rn-placeholder";
 import {
-  IOColors,
-  IOScaleValues,
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
-  IOSpringValues,
   IOStyles,
-  hexToRgba,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
 import { H6, BodySmall } from "../typography";
+import { VStack } from "../stack";
 
 type ListItemRadioGraphicProps =
   | { icon?: never; paymentLogo: IOLogoPaymentType; uri?: never }
@@ -91,58 +81,10 @@ export const ListItemRadio = ({
   testID
 }: ListItemRadioProps) => {
   const [toggleValue, setToggleValue] = useState(selected ?? false);
-  // Animations
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Theme
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
   const theme = useIOTheme();
 
-  const mapBackgroundStates: Record<string, string> = {
-    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-    pressed: IOColors[theme["listItem-pressed"]]
-  };
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [mapBackgroundStates.default, mapBackgroundStates.pressed]
-    );
-
-    return {
-      backgroundColor
-    };
-  });
-
   const toggleRadioItem = () => {
     ReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(!toggleValue);
@@ -154,14 +96,11 @@ export const ListItemRadio = ({
   const disabledStyle = { opacity: disabled ? DISABLED_OPACITY : 1 };
 
   const SkeletonDescriptionLines = () => (
-    <>
-      <VSpacer size={8} />
+    <VStack space={8}>
       <Placeholder.Box animate="fade" radius={8} width={"100%"} height={8} />
-      <VSpacer size={8} />
       <Placeholder.Box animate="fade" radius={8} width={"100%"} height={8} />
-      <VSpacer size={8} />
       <Placeholder.Box animate="fade" radius={8} width={"100%"} height={8} />
-    </>
+    </VStack>
   );
 
   const SkeletonIcon = () => (
@@ -180,7 +119,7 @@ export const ListItemRadio = ({
   );
 
   const SkeletonComponent = () => (
-    <View style={IOSelectionListItemStyles.listItem}>
+    <View style={[IOSelectionListItemStyles.listItem, { rowGap: 8 }]}>
       <View style={IOSelectionListItemStyles.listItemInner}>
         <View
           style={[
@@ -220,23 +159,23 @@ export const ListItemRadio = ({
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       onPress={toggleRadioItem}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onTouchEnd={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       testID={testID}
       disabled={disabled}
     >
       <Animated.View
         style={[
           IOSelectionListItemStyles.listItem,
-          animatedBackgroundStyle,
+          backgroundAnimatedStyle,
           disabledStyle
         ]}
         // This is required to avoid opacity
         // inheritance on Android
         needsOffscreenAlphaCompositing={true}
       >
-        <Animated.View style={animatedScaleStyle}>
+        <Animated.View style={scaleAnimatedStyle}>
           <View style={IOSelectionListItemStyles.listItemInner}>
             <View style={[IOStyles.row, { flexShrink: 1 }]}>
               {startImage && (

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -6,7 +6,7 @@ import { Icon } from "../icons";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HStack } from "../stack";
 import { BodySmall, H6 } from "../typography";
-import { PressableListItemBase } from "./PressableListItemsBase";
+import { PressableListItemBase } from "./PressableListItemBase";
 
 export type ListItemRadioWithAmountProps = {
   onValueChange?: (newValue: boolean) => void;
@@ -34,6 +34,7 @@ export const ListItemRadioWithAmount = ({
   formattedAmountString
 }: ListItemRadioWithAmountProps) => {
   const [toggleValue, setToggleValue] = React.useState(selected ?? false);
+
   const pressHandler = () => {
     RNReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(val => !val);

package/src/components/listitems/ListItemTransaction.tsx

@@ -25,7 +25,7 @@ import { H6, BodySmall } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
-} from "./PressableListItemsBase";
+} from "./PressableListItemBase";
 
 export type ListItemTransactionBadge = {
   text: string;

package/src/components/listitems/{PressableListItemsBase.tsx → PressableListItemBase.tsx}

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { PropsWithChildren } from "react";
 import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOListItemStyles, IOListItemVisualParams } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { useListItemSpringAnimation } from "./hooks/useListItemSpringAnimation";
+import { useListItemAnimation } from "../../hooks";
 
 export type PressableBaseProps = WithTestID<
   Pick<
@@ -22,9 +23,9 @@ export const PressableListItemBase = ({
   children,
   accessibilityRole,
   ...props
-}: React.PropsWithChildren<PressableBaseProps>) => {
-  const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
-    useListItemSpringAnimation();
+}: PropsWithChildren<PressableBaseProps>) => {
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
   return (
     <Pressable
       onPress={onPress}
@@ -37,13 +38,13 @@ export const PressableListItemBase = ({
       {...props}
     >
       <Animated.View
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
           style={[
             IOListItemStyles.listItemInner,
             { columnGap: IOListItemVisualParams.iconMargin },
-            animatedScaleStyle
+            scaleAnimatedStyle
           ]}
         >
           {children}

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

@@ -312,6 +312,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     accessibilityElementsHidden={true}
@@ -502,6 +503,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     style={
@@ -661,6 +663,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     accessibilityElementsHidden={true}
@@ -1978,6 +1981,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     accessibilityElementsHidden={true}
@@ -2049,7 +2053,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
             [
               {},
               {
-                "color": "#0073E6",
+                "color": "#0B3EE3",
                 "fontFamily": "Titillium Sans Pro",
                 "fontSize": 17,
                 "fontStyle": "normal",
@@ -2089,7 +2093,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0073E6",
+                "color": "#0B3EE3",
               },
               {
                 "flex": 0,
@@ -2098,7 +2102,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               },
             ]
           }
-          tintColor="#0073E6"
+          tintColor="#0B3EE3"
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -2168,6 +2172,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     style={
@@ -2249,7 +2254,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               "borderWidth": 0,
             },
             {
-              "color": "#0073E6",
+              "color": "#0B3EE3",
             },
             {
               "flex": 0,
@@ -2258,7 +2263,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
             },
           ]
         }
-        tintColor="#0073E6"
+        tintColor="#0B3EE3"
         vbHeight={24}
         vbWidth={24}
         width={24}
@@ -2327,6 +2332,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
 >
   <View
     accessibilityElementsHidden={true}
@@ -2485,7 +2491,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0073E6",
+                "color": "#0B3EE3",
               },
               {
                 "flex": 0,
@@ -2494,7 +2500,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               },
             ]
           }
-          tintColor="#0073E6"
+          tintColor="#0B3EE3"
           vbHeight={24}
           vbWidth={24}
           width={24}

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/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";

package/src/components/numberpad/NumberButton.tsx

@@ -1,22 +1,17 @@
 import React, { memo, useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
 import Animated, {
-  Extrapolate,
-  interpolate,
   interpolateColor,
   useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
+  useReducedMotion
 } from "react-native-reanimated";
 import {
   IOColors,
   IONumberPadButtonStyles,
-  IOScaleValues,
-  IOSpringValues,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
+import { useScaleAnimation } from "../../hooks";
 import { H3 } from "../typography";
 
 type NumberButtonVariantType = "light" | "dark";
@@ -76,51 +71,24 @@ const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
  */
 export const NumberButton = memo(
   ({ number, variant, onPress }: NumberButtonProps) => {
+    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+      useScaleAnimation("slight");
+    const reducedMotion = useReducedMotion();
     const { isExperimental } = useIOExperimentalDesign();
 
     const colors = useMemo(
       () => (isExperimental ? colorMap[variant] : legacyColorMap[variant]),
       [variant, isExperimental]
     );
-    const isPressed = useSharedValue(0);
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-    // Using a spring-based animation for our interpolations
-    const progressPressed = useDerivedValue(() =>
-      withSpring(isPressed.value, IOSpringValues.button)
-    );
 
     // Interpolate animation values from `isPressed` values
-    const pressedAnimationStyle = useAnimatedStyle(() => {
-      // Link color states to the pressed states
-      const bgColor = interpolateColor(
-        progressPressed.value,
+    const pressedAnimationStyle = useAnimatedStyle(() => ({
+      backgroundColor: interpolateColor(
+        progress.value,
         [0, 1],
         [colors.background, colors.pressed]
-      );
-
-      // Scale down button slightly when pressed
-      const scale = interpolate(
-        progressPressed.value,
-        [0, 1],
-        [1, animationScaleValue],
-        Extrapolate.CLAMP
-      );
-
-      return {
-        backgroundColor: bgColor,
-        transform: [{ scale }]
-      };
-    });
-
-    const onPressIn = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 1;
-    }, [isPressed]);
-    const onPressOut = useCallback(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isPressed.value = 0;
-    }, [isPressed]);
+      )
+    }));
 
     const handleOnPress = useCallback(() => {
       onPress(number);
@@ -139,7 +107,8 @@ export const NumberButton = memo(
             IONumberPadButtonStyles.button,
             IONumberPadButtonStyles.circularShape,
             IONumberPadButtonStyles.buttonSize,
-            pressedAnimationStyle
+            pressedAnimationStyle,
+            !reducedMotion && scaleAnimatedStyle
           ]}
         >
           <H3 color={colors.foreground}>{number}</H3>

package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

@@ -80,6 +80,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -159,6 +161,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -238,6 +242,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -333,6 +339,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -412,6 +420,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -491,6 +501,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -586,6 +598,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -665,6 +679,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -744,6 +760,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -980,6 +998,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,