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

package/src/components/listitems/ListItemNav.tsx

@@ -1,39 +1,23 @@
-import React, { ComponentProps, ReactNode, useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Image,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import React, { ComponentProps } from "react";
+import { GestureResponderEvent, Image, Pressable, View } from "react-native";
+import Animated from "react-native-reanimated";
 import {
   IOColors,
   IOListItemStyles,
   IOListItemVisualParams,
-  IOScaleValues,
   IOSelectionListItemVisualParams,
-  IOSpringValues,
   IOStyles,
-  hexToRgba,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Avatar } from "../avatar";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HSpacer, VSpacer } from "../spacer";
-import { Caption, H6, BodySmall } from "../typography";
+import { BodySmall, Caption, H6 } from "../typography";
 
 type ListItemTopElementProps =
   | {
@@ -91,13 +75,6 @@ export type ListItemNavGraphicProps =
 
 export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
 
-const styles = StyleSheet.create({
-  paymentLogoSize: {
-    width: IOSelectionListItemVisualParams.iconSize,
-    height: IOSelectionListItemVisualParams.iconSize
-  }
-});
-
 export const ListItemNav = ({
   value,
   description,
@@ -114,15 +91,12 @@ export const ListItemNav = ({
   loading,
   numberOfLines
 }: ListItemNav) => {
-  const isPressed = useSharedValue(0);
-  const { isExperimental } = useIOExperimentalDesign();
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
   const theme = useIOTheme();
 
-  const withMargin = (GraphicalAsset: ReactNode) => (
-    <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-      {GraphicalAsset}
-    </View>
-  );
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
 
   const listItemNavContent = (
     <>
@@ -139,7 +113,12 @@ export const ListItemNav = ({
           {topElement.dateValue && (
             <>
               <View style={{ alignSelf: "flex-start", flexDirection: "row" }}>
-                <Icon name="calendar" size={16} color="grey-300" />
+                <Icon
+                  allowFontScaling
+                  name="calendar"
+                  size={16}
+                  color="grey-300"
+                />
                 <HSpacer size={4} />
                 <Caption color={theme["textBody-tertiary"]}>
                   {topElement.dateValue}
@@ -172,56 +151,7 @@ export const ListItemNav = ({
     </>
   );
 
-  const mapBackgroundStates: Record<string, string> = {
-    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-    pressed: IOColors[theme["listItem-pressed"]]
-  };
-
-  const navIconColor = isExperimental
-    ? theme["interactiveElem-default"]
-    : "blue";
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [mapBackgroundStates.default, mapBackgroundStates.pressed]
-    );
-
-    return {
-      backgroundColor
-    };
-  });
-
-  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 interactiveColor = theme["interactiveElem-default"];
 
   const handleOnPress = (event: GestureResponderEvent) => {
     if (!loading) {
@@ -229,13 +159,12 @@ export const ListItemNav = ({
     }
   };
 
-  const primaryColor: IOColors = isExperimental ? "blueIO-500" : "blue";
-
   return (
     <Pressable
       onPress={handleOnPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       accessible={true}
       accessibilityState={{ busy: loading }}
       accessibilityLabel={accessibilityLabel}
@@ -244,40 +173,54 @@ export const ListItemNav = ({
       testID={testID}
     >
       <Animated.View
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            {
+              columnGap:
+                IOListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            },
+            scaleAnimatedStyle
+          ]}
         >
           {/* Possibile graphical assets
           - Icon
           - Image URL (for payment logos)
           - Avatar
           */}
-          {icon &&
-            withMargin(
-              <Icon
-                name={icon}
-                color={iconColor}
-                size={IOListItemVisualParams.iconSize}
-              />
-            )}
-          {paymentLogoUri &&
-            withMargin(
-              <Image
-                accessibilityIgnoresInvertColors
-                source={{ uri: paymentLogoUri }}
-                style={styles.paymentLogoSize}
-              />
-            )}
-          {avatar && withMargin(<Avatar size="small" {...avatar} />)}
+          {icon && !hugeFontEnabled && (
+            <Icon
+              allowFontScaling
+              name={icon}
+              color={iconColor}
+              size={IOListItemVisualParams.iconSize}
+            />
+          )}
+          {paymentLogoUri && (
+            <Image
+              accessibilityIgnoresInvertColors
+              source={{ uri: paymentLogoUri }}
+              style={{
+                width:
+                  IOSelectionListItemVisualParams.iconSize * dynamicFontScale,
+                height:
+                  IOSelectionListItemVisualParams.iconSize * dynamicFontScale
+              }}
+            />
+          )}
+          {avatar && <Avatar size="small" {...avatar} />}
 
           <View style={IOStyles.flex}>{listItemNavContent}</View>
-          {loading && <LoadingSpinner color={primaryColor} />}
+          {loading && <LoadingSpinner color={interactiveColor} />}
           {!loading && !hideChevron && (
             <Icon
+              allowFontScaling
               name="chevronRightListItem"
-              color={navIconColor}
+              color={interactiveColor}
               size={IOListItemVisualParams.chevronSize}
             />
           )}

package/src/components/listitems/ListItemNavAlert.tsx

@@ -1,28 +1,18 @@
-import React, { ComponentProps, useCallback, useMemo } from "react";
+import React, { ComponentProps } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
-  IOColors,
   IOListItemStyles,
   IOListItemVisualParams,
-  IOScaleValues,
-  IOSpringValues,
   IOStyles,
-  hexToRgba,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
-import { H6, BodySmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
   value: string | React.ReactNode;
@@ -44,31 +34,19 @@ export const ListItemNavAlert = ({
   accessibilityHint,
   testID
 }: ListItemNavAlert) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const theme = useIOTheme();
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
   const { isExperimental } = useIOExperimentalDesign();
 
-  const componentValueToAccessibility = useMemo(
-    () => (typeof value === "string" ? value : ""),
-    [value]
-  );
+  const componentValueToAccessibility = typeof value === "string" ? value : "";
+  const componentDescriptionToAccessibility =
+    typeof description === "string" ? description : "";
 
-  const componentDescriptionToAccessibility = useMemo(
-    () => (typeof description === "string" ? description : ""),
-    [description]
-  );
-
-  const listItemAccessibilityLabel = useMemo(
-    () =>
-      accessibilityLabel
-        ? accessibilityLabel
-        : `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`,
-    [
-      componentDescriptionToAccessibility,
-      componentValueToAccessibility,
-      accessibilityLabel
-    ]
-  );
-  const theme = useIOTheme();
+  const listItemAccessibilityLabel =
+    accessibilityLabel ??
+    `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`;
 
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   const listItemNavAlertContent = (
@@ -95,58 +73,12 @@ export const ListItemNavAlert = ({
 
   const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
 
-  const mapBackgroundStates: Record<string, string> = {
-    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-    pressed: IOColors[theme["listItem-pressed"]]
-  };
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const animatedBackgroundStyle = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [mapBackgroundStates.default, mapBackgroundStates.pressed]
-    );
-
-    return {
-      backgroundColor
-    };
-  });
-
-  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]);
-
   return (
     <Pressable
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       accessible={true}
       accessibilityLabel={listItemAccessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -154,30 +86,38 @@ export const ListItemNavAlert = ({
       testID={testID}
     >
       <Animated.View
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
         importantForAccessibility="no-hide-descendants"
         accessibilityElementsHidden
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            {
+              columnGap:
+                IOListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            },
+            scaleAnimatedStyle
+          ]}
         >
           {!withoutIcon && (
-            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              <Icon
-                name="errorFilled"
-                color={theme.errorIcon}
-                size={IOListItemVisualParams.iconSize}
-              />
-            </View>
-          )}
-          <View style={IOStyles.flex}>{listItemNavAlertContent}</View>
-          <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
-              name="chevronRightListItem"
-              color={iconColor}
-              size={IOListItemVisualParams.chevronSize}
+              allowFontScaling
+              name="errorFilled"
+              color={theme.errorIcon}
+              size={IOListItemVisualParams.iconSize}
             />
-          </View>
+          )}
+          <View style={IOStyles.flex}>{listItemNavAlertContent}</View>
+
+          <Icon
+            allowFontScaling
+            name="chevronRightListItem"
+            color={iconColor}
+            size={IOListItemVisualParams.chevronSize}
+          />
         </Animated.View>
       </Animated.View>
     </Pressable>

package/src/components/listitems/ListItemRadio.tsx

@@ -1,33 +1,25 @@
 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,
+  IOSelectionTickVisualParams,
   IOStyles,
-  hexToRgba,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 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";
+import { BodySmall, H6 } from "../typography";
 
 type ListItemRadioGraphicProps =
   | { icon?: never; paymentLogo: IOLogoPaymentType; uri?: never }
@@ -91,58 +83,12 @@ 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 { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
+  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 +100,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 +123,7 @@ export const ListItemRadio = ({
   );
 
   const SkeletonComponent = () => (
-    <View style={IOSelectionListItemStyles.listItem}>
+    <View style={[IOSelectionListItemStyles.listItem, { rowGap: 8 }]}>
       <View style={IOSelectionListItemStyles.listItemInner}>
         <View
           style={[
@@ -200,7 +143,10 @@ export const ListItemRadio = ({
           </View>
           <HSpacer size={8} />
           <View pointerEvents="none" style={disabledStyle}>
-            <AnimatedRadio checked={toggleValue} />
+            <AnimatedRadio
+              size={IOSelectionTickVisualParams.size * dynamicFontScale}
+              checked={toggleValue}
+            />
           </View>
         </View>
       </View>
@@ -220,55 +166,59 @@ 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 && (
-                <View
-                  style={{
-                    marginRight: IOSelectionListItemVisualParams.iconMargin
-                  }}
-                >
-                  {/* icon or paymentLogo props are mutually exclusive */}
-                  {startImage.icon && (
-                    <Icon
-                      name={startImage.icon}
-                      color="grey-300"
-                      size={IOSelectionListItemVisualParams.iconSize}
-                    />
-                  )}
-                  {startImage.uri && (
-                    <Image
-                      accessibilityIgnoresInvertColors
-                      source={startImage}
-                      style={styles.imageSize}
-                    />
-                  )}
-                  {startImage.paymentLogo && (
-                    <LogoPayment
-                      name={startImage.paymentLogo}
-                      size={IOSelectionListItemVisualParams.iconSize}
-                    />
-                  )}
+            <View
+              style={{
+                flexDirection: "row",
+                flexShrink: 1,
+                columnGap:
+                  IOSelectionListItemVisualParams.iconMargin *
+                  dynamicFontScale *
+                  spacingScaleMultiplier
+              }}
+            >
+              {startImage?.icon && !hugeFontEnabled && (
+                <Icon
+                  allowFontScaling
+                  name={startImage.icon}
+                  color="grey-300"
+                  size={IOSelectionListItemVisualParams.iconSize}
+                />
+              )}
+              {startImage?.uri && (
+                <View style={{ alignSelf: "center" }}>
+                  <Image
+                    accessibilityIgnoresInvertColors
+                    source={startImage}
+                    style={styles.imageSize}
+                  />
+                </View>
+              )}
+              {startImage?.paymentLogo && (
+                <View style={{ alignSelf: "center" }}>
+                  <LogoPayment
+                    name={startImage.paymentLogo}
+                    size={IOSelectionListItemVisualParams.iconSize}
+                  />
                 </View>
               )}
-
               <H6 color={theme["textBody-default"]} style={{ flexShrink: 1 }}>
                 {value}
               </H6>
@@ -279,7 +229,10 @@ export const ListItemRadio = ({
               accessibilityElementsHidden
               importantForAccessibility="no-hide-descendants"
             >
-              <AnimatedRadio checked={selected ?? toggleValue} />
+              <AnimatedRadio
+                size={IOSelectionTickVisualParams.size * dynamicFontScale}
+                checked={selected ?? toggleValue}
+              />
             </View>
           </View>
           {description && (