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

package/src/components/listitems/ListItemAction.tsx

@@ -1,23 +1,14 @@
-import React, { ComponentProps, useCallback, useMemo } from "react";
+import React, { ComponentProps, useMemo } 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,
-  hexToRgba,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons } from "../icons";
 import { ButtonText } from "../typography/ButtonText";
@@ -42,20 +33,18 @@ export const ListItemAction = ({
   accessibilityHint,
   testID
 }: ListItemAction) => {
-  const isPressed = useSharedValue(0);
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
 
   const theme = useIOTheme();
 
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
   const listItemAccessibilityLabel = useMemo(
     () => (accessibilityLabel ? accessibilityLabel : `${label}`),
     [label, accessibilityLabel]
   );
 
-  const mapBackgroundStates: Record<string, string> = {
-    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-    pressed: IOColors[theme["listItem-pressed"]]
-  };
-
   const mapForegroundColor: Record<
     NonNullable<ListItemAction["variant"]>,
     IOColors
@@ -64,54 +53,12 @@ export const ListItemAction = ({
     danger: theme.errorText
   };
 
-  // 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}
-      onTouchEnd={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       accessible={true}
       accessibilityLabel={listItemAccessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -119,21 +66,29 @@ export const ListItemAction = ({
       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
+          ]}
         >
           {icon && (
-            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              <AnimatedIcon
-                name={icon}
-                color={IOColors[mapForegroundColor[variant]]}
-                size={IOListItemVisualParams.iconSize}
-              />
-            </View>
+            <AnimatedIcon
+              allowFontScaling
+              name={icon}
+              color={IOColors[mapForegroundColor[variant]]}
+              size={IOListItemVisualParams.iconSize}
+            />
           )}
           <View style={{ flexGrow: 1, flexShrink: 1 }}>
             <ButtonText color={mapForegroundColor[variant]}>{label}</ButtonText>

package/src/components/listitems/ListItemAmount.tsx

@@ -7,9 +7,9 @@ import {
   IOStyles,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { HSpacer } from "../spacer";
 import { H3, H6 } from "../typography";
 
 type ValueProps = ComponentProps<typeof H3>;
@@ -42,6 +42,8 @@ export const ListItemAmount = ({
   testID
 }: ListItemAmount) => {
   const theme = useIOTheme();
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
 
   const listItemAccessibilityLabel = useMemo(
     () => (accessibilityLabel ? accessibilityLabel : `${label}`),
@@ -65,18 +67,21 @@ export const ListItemAmount = ({
       accessible
       accessibilityLabel={listItemAccessibilityLabel}
     >
-      <View style={IOListItemStyles.listItemInner}>
-        {iconName && (
-          <View style={{ marginRight: iconMargin }}>
-            <Icon
-              name={iconName}
-              color={iconColor ?? theme["icon-decorative"]}
-              size={IOListItemVisualParams.iconSize}
-            />
-          </View>
+      <View
+        style={[
+          IOListItemStyles.listItemInner,
+          { columnGap: iconMargin * dynamicFontScale * spacingScaleMultiplier }
+        ]}
+      >
+        {iconName && !hugeFontEnabled && (
+          <Icon
+            allowFontScaling
+            name={iconName}
+            color={iconColor ?? theme["icon-decorative"]}
+            size={IOListItemVisualParams.iconSize}
+          />
         )}
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
-        <HSpacer size={4} />
         <H3
           {...valueElementProps}
           color={theme["textBody-default"]}

package/src/components/listitems/ListItemCheckbox.tsx

@@ -1,30 +1,21 @@
 import * as React from "react";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { Pressable, 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 {
-  IOColors,
-  IOScaleValues,
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
-  IOSpringValues,
+  IOSelectionTickVisualParams,
   IOStyles,
-  hexToRgba,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, BodySmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 
 type Props = {
   value: string;
@@ -59,16 +50,12 @@ export const ListItemCheckbox = ({
   disabled,
   onValueChange
 }: ListItemCheckboxProps) => {
-  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 { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
 
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
+  const [toggleValue, setToggleValue] = useState(selected ?? false);
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
 
   // Theme
   const theme = useIOTheme();
@@ -79,46 +66,6 @@ export const ListItemCheckbox = ({
     ? `${value}, ${description}`
     : value;
 
-  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 toggleCheckbox = () => {
     ReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(!toggleValue);
@@ -130,9 +77,9 @@ export const ListItemCheckbox = ({
   return (
     <Pressable
       onPress={toggleCheckbox}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onTouchEnd={handlePressOut}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
       testID="ListItemCheckbox"
       accessible={true}
       accessibilityLabel={accessibilityLabel || fallbackAccessibilityLabel}
@@ -147,28 +94,34 @@ export const ListItemCheckbox = ({
       <Animated.View
         style={[
           IOSelectionListItemStyles.listItem,
-          animatedBackgroundStyle,
+          backgroundAnimatedStyle,
           { opacity: disabled ? DISABLED_OPACITY : 1 }
         ]}
         // 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 }]}>
-              {icon && (
-                <View
-                  style={{
-                    marginRight: IOSelectionListItemVisualParams.iconMargin
-                  }}
-                >
-                  <Icon
-                    name={icon}
-                    color="grey-300"
-                    size={IOSelectionListItemVisualParams.iconSize}
-                  />
-                </View>
+            <View
+              style={[
+                IOStyles.row,
+                {
+                  flexShrink: 1,
+                  columnGap:
+                    IOSelectionListItemVisualParams.iconMargin *
+                    dynamicFontScale *
+                    spacingScaleMultiplier
+                }
+              ]}
+            >
+              {icon && !hugeFontEnabled && (
+                <Icon
+                  allowFontScaling
+                  name={icon}
+                  color="grey-300"
+                  size={IOSelectionListItemVisualParams.iconSize}
+                />
               )}
               <H6 color={theme["textBody-default"]} style={{ flexShrink: 1 }}>
                 {value}
@@ -180,7 +133,10 @@ export const ListItemCheckbox = ({
               accessibilityElementsHidden
               importantForAccessibility="no-hide-descendants"
             >
-              <AnimatedCheckbox checked={selected ?? toggleValue} />
+              <AnimatedCheckbox
+                size={IOSelectionTickVisualParams.size * dynamicFontScale}
+                checked={selected ?? toggleValue}
+              />
             </View>
           </View>
           {description && (

package/src/components/listitems/ListItemHeader.tsx

@@ -7,6 +7,7 @@ import {
   IOStyles,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { ButtonLink, IconButton } from "../buttons";
@@ -61,6 +62,9 @@ export const ListItemHeader = ({
 }: ListItemHeader) => {
   const theme = useIOTheme();
 
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
+
   const listItemAccessibilityLabel = useMemo(
     () => (accessibilityLabel ? accessibilityLabel : `${label}`),
     [label, accessibilityLabel]
@@ -87,7 +91,7 @@ export const ListItemHeader = ({
     [label, theme, endElement]
   );
 
-  const listItemInfoAction = useCallback(() => {
+  const listItemAction = useCallback(() => {
     if (endElement) {
       const { type, componentProps } = endElement;
 
@@ -129,9 +133,15 @@ export const ListItemHeader = ({
         style={IOListItemStyles.listItemInner}
         importantForAccessibility={endElement ? "auto" : "no-hide-descendants"}
       >
-        {iconName && (
-          <View style={{ marginRight: iconMargin }}>
+        {iconName && !hugeFontEnabled && (
+          <View
+            style={{
+              marginRight:
+                iconMargin * dynamicFontScale * spacingScaleMultiplier
+            }}
+          >
             <Icon
+              allowFontScaling
               name={iconName}
               color={iconColor ?? theme["icon-decorative"]}
               size={IOListItemVisualParams.iconSize}
@@ -141,7 +151,7 @@ export const ListItemHeader = ({
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
         {endElement && (
           <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
-            {listItemInfoAction()}
+            {listItemAction()}
           </View>
         )}
       </View>

package/src/components/listitems/ListItemInfo.tsx

@@ -6,6 +6,7 @@ import {
   IOStyles,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { ButtonLink, IconButton } from "../buttons";
@@ -68,6 +69,9 @@ export const ListItemInfo = ({
   testID
 }: ListItemInfo) => {
   const theme = useIOTheme();
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
+
   const componentValueToAccessibility = useMemo(
     () => (typeof value === "string" ? value : ""),
     [value]
@@ -140,30 +144,33 @@ export const ListItemInfo = ({
       accessibilityLabel={listItemAccessibilityLabel}
       accessibilityRole={accessibilityRole}
     >
-      <View style={IOListItemStyles.listItemInner}>
-        {icon && (
-          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-            <Icon
-              name={icon}
-              color="grey-450"
-              size={IOListItemVisualParams.iconSize}
-            />
-          </View>
+      <View
+        style={[
+          IOListItemStyles.listItemInner,
+          {
+            columnGap:
+              IOListItemVisualParams.iconMargin *
+              dynamicFontScale *
+              spacingScaleMultiplier
+          }
+        ]}
+      >
+        {icon && !hugeFontEnabled && (
+          <Icon
+            allowFontScaling
+            name={icon}
+            color="grey-450"
+            size={IOListItemVisualParams.iconSize}
+          />
         )}
         {paymentLogoIcon && (
-          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-            <LogoPaymentWithFallback
-              brand={paymentLogoIcon}
-              size={PAYMENT_LOGO_SIZE}
-            />
-          </View>
+          <LogoPaymentWithFallback
+            brand={paymentLogoIcon}
+            size={PAYMENT_LOGO_SIZE}
+          />
         )}
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
-        {endElement && (
-          <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
-            {listItemInfoAction()}
-          </View>
-        )}
+        {endElement && <View>{listItemInfoAction()}</View>}
       </View>
     </View>
   );

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -1,25 +1,14 @@
-import React, { ComponentProps, useCallback, useMemo } from "react";
+import React, { ComponentProps, useMemo } 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 { IOIcons, Icon } from "../icons";
 import { BodySmall, H6 } from "../typography";
@@ -46,9 +35,12 @@ export const ListItemInfoCopy = ({
   accessibilityHint,
   testID
 }: ListItemInfoCopy) => {
-  const isPressed = useSharedValue(0);
-  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
+
+  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
+    useIOFontDynamicScale();
 
   const componentValueToAccessibility = useMemo(
     () => (typeof value === "string" ? value : ""),
@@ -63,9 +55,7 @@ export const ListItemInfoCopy = ({
     [label, componentValueToAccessibility, accessibilityLabel]
   );
 
-  const foregroundColor = isExperimental
-    ? theme["interactiveElem-default"]
-    : "blue";
+  const foregroundColor = theme["interactiveElem-default"];
 
   const listItemInfoCopyContent = (
     <>
@@ -83,58 +73,12 @@ export const ListItemInfoCopy = ({
     </>
   );
 
-  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}
@@ -144,28 +88,35 @@ export const ListItemInfoCopy = ({
       <Animated.View
         importantForAccessibility="no-hide-descendants"
         accessibilityElementsHidden
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            {
+              columnGap:
+                IOListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            },
+            scaleAnimatedStyle
+          ]}
         >
-          {icon && (
-            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              <Icon
-                name={icon}
-                color="grey-450"
-                size={IOListItemVisualParams.iconSize}
-              />
-            </View>
-          )}
-          <View style={IOStyles.flex}>{listItemInfoCopyContent}</View>
-          <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+          {icon && !hugeFontEnabled && (
             <Icon
-              name="copy"
-              color={foregroundColor}
-              size={IOListItemVisualParams.chevronSize}
+              allowFontScaling
+              name={icon}
+              color="grey-450"
+              size={IOListItemVisualParams.iconSize}
             />
-          </View>
+          )}
+          <View style={IOStyles.flex}>{listItemInfoCopyContent}</View>
+          <Icon
+            allowFontScaling
+            name="copy"
+            color={foregroundColor}
+            size={IOListItemVisualParams.chevronSize}
+          />
         </Animated.View>
       </Animated.View>
     </Pressable>