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

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

@@ -13,6 +13,7 @@ import {
   IOVisualCostants,
   useIOTheme
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
@@ -63,12 +64,14 @@ const ModuleCredentialContent = ({
   ...pressableProps
 }: WithTestID<ModuleCredentialProps>) => {
   const theme = useIOTheme();
+  const { hugeFontEnabled } = useIOFontDynamicScale();
 
-  const iconComponent = icon && (
+  const iconComponent = icon && !hugeFontEnabled && (
     <Icon
+      allowFontScaling
       name={icon}
       size={IOSelectionListItemVisualParams.iconSize}
-      color="grey-300"
+      color={theme["icon-decorative"]}
     />
   );
 

package/src/components/modules/ModuleNavigation.tsx

@@ -19,6 +19,7 @@ import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { HStack, VStack } from "../stack";
 import { LabelMini, BodySmall } from "../typography";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -45,6 +46,7 @@ type ModuleNavigationProps = LoadingProps | BaseProps;
 
 export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
   const theme = useIOTheme();
+  const { hugeFontEnabled } = useIOFontDynamicScale();
 
   if (props.isLoading) {
     return <ModuleNavigationSkeleton />;
@@ -53,7 +55,7 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
   const { icon, image, title, subtitle, onPress, badge, ...pressableProps } =
     props;
 
-  const iconComponent = icon && (
+  const iconComponent = icon && !hugeFontEnabled && (
     <Icon
       name={icon}
       size={IOSelectionListItemVisualParams.iconSize}

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,
@@ -90,9 +92,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -159,6 +161,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -169,9 +173,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -238,6 +242,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -248,9 +254,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -333,6 +339,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -343,9 +351,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -412,6 +420,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -422,9 +432,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -491,6 +501,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -501,9 +513,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -586,6 +598,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -596,9 +610,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -665,6 +679,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -675,9 +691,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -744,6 +760,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -754,9 +772,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -980,6 +998,8 @@ exports[`NumberPad Should match the snapshot 1`] = `
               },
               {
                 "backgroundColor": undefined,
+              },
+              {
                 "transform": [
                   {
                     "scale": undefined,
@@ -990,9 +1010,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},

package/src/components/pictograms/Pictogram.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { ColorValue } from "react-native";
 import { IOColors, IOThemeDark, IOThemeLight, useIOTheme } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 import PictogramAccessDenied from "./svg/PictogramAccessDenied";
 import PictogramActivate from "./svg/PictogramActivate";
@@ -113,7 +114,7 @@ import PictogramSmile from "./svg/PictogramSmile";
 import PictogramStar from "./svg/PictogramStar";
 import PictogramTiming from "./svg/PictogramTiming";
 import PictogramWalletDoc from "./svg/PictogramWalletDoc";
-import { IOPictogramSizeScale, SVGPictogramProps } from "./types";
+import { SVGPictogramProps } from "./types";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -192,6 +193,8 @@ export const IOPictograms = {
 
 export type IOPictograms = keyof typeof IOPictograms;
 
+export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180;
+
 type IOPictogramsProps = {
   name: IOPictograms;
   color?: IOColors;
@@ -200,6 +203,7 @@ type IOPictogramsProps = {
   component props. */
   pictogramStyle?: "default" | "light-content" | "dark-content";
   size?: IOPictogramSizeScale | "100%";
+  allowFontScaling?: boolean;
 };
 
 type PictogramPalette = {
@@ -214,10 +218,18 @@ export const Pictogram = ({
   color = "aqua",
   pictogramStyle = "default",
   size = 120,
+  allowFontScaling = false,
   ...props
 }: IOPictogramsProps) => {
-  const PictogramElement = IOPictograms[name];
   const theme = useIOTheme();
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
+  const PictogramElement = IOPictograms[name];
+
+  const pictogramSize =
+    allowFontScaling && typeof size === "number"
+      ? size * dynamicFontScale * spacingScaleMultiplier
+      : size;
 
   const themeObj = useMemo(() => {
     switch (pictogramStyle) {
@@ -243,7 +255,7 @@ export const Pictogram = ({
   return (
     <PictogramElement
       {...props}
-      size={size}
+      size={pictogramSize}
       color={IOColors[color]}
       colorValues={colorValues}
     />
@@ -356,11 +368,18 @@ export const PictogramBleed = ({
   color = "aqua",
   size = 80,
   pictogramStyle = "default",
+  allowFontScaling = false,
   ...props
 }: IOPictogramsProps) => {
+  const theme = useIOTheme();
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
   const PictogramElement = IOPictogramsBleed[name as IOPictogramsBleed];
 
-  const theme = useIOTheme();
+  const pictogramSize =
+    allowFontScaling && typeof size === "number"
+      ? size * dynamicFontScale * spacingScaleMultiplier
+      : size;
 
   const themeObj = useMemo(() => {
     switch (pictogramStyle) {
@@ -386,7 +405,7 @@ export const PictogramBleed = ({
   return (
     <PictogramElement
       {...props}
-      size={size}
+      size={pictogramSize}
       color={IOColors[color]}
       colorValues={colorValues}
     />

package/src/components/pictograms/types.ts

@@ -1,9 +1,7 @@
 import { ColorValue } from "react-native";
 
-export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180;
-
 export type SVGPictogramProps = {
-  size: IOPictogramSizeScale | "100%";
+  size: number | "100%";
   color: ColorValue;
   colorValues: Record<string, ColorValue>;
 };

package/src/components/radio/AnimatedRadio.tsx

@@ -1,5 +1,11 @@
 import React, { useEffect } from "react";
-import { Pressable, PressableProps, StyleSheet, View } from "react-native";
+import {
+  Pressable,
+  PressableProps,
+  StyleSheet,
+  View,
+  ViewStyle
+} from "react-native";
 import Animated, {
   Easing,
   interpolate,
@@ -18,32 +24,23 @@ import {
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
+  size: number;
   checked?: boolean;
 };
 
 type OwnProps = Props & Pick<PressableProps, "disabled" | "onPress">;
 
 const styles = StyleSheet.create({
-  radioWrapper: {
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size
-  },
   radioBorder: {
     position: "absolute",
     left: 0,
     top: 0,
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size,
-    borderWidth: IOSelectionTickVisualParams.borderWidth,
-    borderRadius: IOSelectionTickVisualParams.size / 2
+    borderWidth: IOSelectionTickVisualParams.borderWidth
   },
   radioCircle: {
     position: "absolute",
     left: 0,
-    top: 0,
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size,
-    borderRadius: IOSelectionTickVisualParams.size / 2
+    top: 0
   }
 });
 
@@ -51,7 +48,12 @@ const styles = StyleSheet.create({
  * An animated checkbox. This can be used to implement a
  * standard {@link CheckBox} or other composite components.
  */
-export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
+export const AnimatedRadio = ({
+  size,
+  checked,
+  onPress,
+  disabled
+}: OwnProps) => {
   const isChecked = checked ?? false;
 
   const { isExperimental } = useIOExperimentalDesign();
@@ -76,6 +78,17 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
   const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
 
+  const radioButtonSizeStyle: ViewStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2
+  };
+
+  const radioButtonWrapperSizeStyle: ViewStyle = {
+    width: size,
+    height: size
+  };
+
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
     circleAnimationProgress.value = withSpring(
@@ -105,11 +118,12 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
       disabled={disabled}
       testID="AnimatedRadioInput"
       onPress={onPress}
-      style={styles.radioWrapper}
+      style={radioButtonWrapperSizeStyle}
     >
       <View
         style={[
           styles.radioBorder,
+          radioButtonSizeStyle,
           {
             borderColor: borderColorProp
           }
@@ -118,6 +132,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
       <Animated.View
         style={[
           styles.radioCircle,
+          radioButtonSizeStyle,
           {
             backgroundColor: backgroundColorProp
           },
@@ -127,6 +142,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
       {isChecked && (
         <View>
           <AnimatedTick
+            size={size}
             progress={tickAnimationProgress}
             stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
           />