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

package/src/components/alert/Alert.tsx

@@ -1,53 +1,28 @@
-import React, { useCallback, useState } from "react";
+import React, { forwardRef, useCallback, useState } from "react";
 import {
   ColorValue,
   GestureResponderEvent,
   NativeSyntheticEvent,
-  PixelRatio,
   Pressable,
-  StyleSheet,
   TextLayoutEventData,
   View
 } from "react-native";
-import Animated, {
-  Extrapolation,
-  SharedValue,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { IOVisualCostants, useIOThemeContext } from "../../core";
-import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { IOAlertRadius } from "../../core/IOShapes";
-import { IOAlertSpacing } from "../../core/IOSpacing";
+import { IOAlertSpacing, IOSpacer } from "../../core/IOSpacing";
+import { useScaleAnimation } from "../../hooks";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { VSpacer } from "../spacer";
+import { HStack, VStack } from "../stack";
 import { Body, ButtonText } from "../typography";
 import { H4 } from "../typography/H4";
 
-const iconSize: IOIconSizeScale = 24;
+const ICON_SIZE: IOIconSizeScale = 24;
 
-const [spacingDefault, spacingFullWidth] = IOAlertSpacing;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    alignContent: "center"
-  },
-  spacingDefault: {
-    padding: spacingDefault,
-    borderRadius: IOAlertRadius,
-    borderCurve: "continuous"
-  },
-  spacingFullWidth: {
-    padding: spacingFullWidth
-  }
-});
+const [padding, paddingFullWidth] = IOAlertSpacing;
 
 type AlertProps = WithTestID<{
   variant: "error" | "warning" | "info" | "success";
@@ -132,7 +107,7 @@ const mapVariantStatesDarkMode: Record<
   }
 };
 
-export const Alert = React.forwardRef<View, AlertType>(
+export const Alert = forwardRef<View, AlertType>(
   (
     {
       variant,
@@ -146,8 +121,11 @@ export const Alert = React.forwardRef<View, AlertType>(
     }: AlertType,
     viewRef
   ): JSX.Element => {
+    const { onPressIn, onPressOut, scaleAnimatedStyle } =
+      useScaleAnimation("medium");
+    const { dynamicFontScale, spacingScaleMultiplier } =
+      useIOFontDynamicScale();
     const { themeType } = useIOThemeContext();
-    const isPressed: SharedValue<number> = useSharedValue(0);
 
     const [isMultiline, setIsMultiline] = useState(false);
 
@@ -158,37 +136,11 @@ export const Alert = React.forwardRef<View, AlertType>(
       []
     );
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.magnifiedButton?.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(() => {
-      // Scale down button slightly when pressed
-      const scale = interpolate(
-        progressPressed.value,
-        [0, 1],
-        [1, animationScaleValue],
-        Extrapolation.CLAMP
-      );
-
-      return {
-        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 paddingDefaultVariant = {
+      padding,
+      borderRadius: IOAlertRadius * dynamicFontScale * spacingScaleMultiplier,
+      borderCurve: "continuous"
+    };
 
     const mapVariantStates =
       themeType === "light"
@@ -196,48 +148,41 @@ export const Alert = React.forwardRef<View, AlertType>(
         : mapVariantStatesDarkMode;
 
     const renderMainBlock = () => (
-      <>
-        <View
-          style={{
-            marginRight: IOVisualCostants.iconMargin,
-            alignSelf: "flex-start"
-          }}
-        >
-          <Icon
-            name={mapVariantStates[variant].icon}
-            size={iconSize}
-            color={mapVariantStates[variant].foreground}
-          />
-        </View>
+      <HStack
+        space={IOVisualCostants.iconMargin as IOSpacer}
+        allowScaleSpacing
+        style={{ alignItems: isMultiline ? "flex-start" : "center" }}
+      >
+        <Icon
+          allowFontScaling
+          name={mapVariantStates[variant].icon}
+          size={ICON_SIZE}
+          color={mapVariantStates[variant].foreground}
+        />
         {/* Sadly we don't have specific alignments style for text
       in React Native, like `text-box-trim` for CSS. So we
       have to put these magic numbers after manual adjustments.
       Tested on both Android and iOS. */}
         <View
           style={[
-            !title &&
-              isMultiline && { marginTop: -5 * PixelRatio.getFontScale() },
-            isMultiline && { marginBottom: -3 * PixelRatio.getFontScale() },
+            !title && isMultiline && { marginTop: -6 * dynamicFontScale },
+            isMultiline && { marginBottom: -4 * dynamicFontScale },
             { flex: 1 }
           ]}
         >
-          {title && (
-            <>
+          <VStack space={8} allowScaleSpacing>
+            {title && (
               <H4 color={mapVariantStates[variant].foreground}>{title}</H4>
-              <VSpacer size={8} />
-            </>
-          )}
-          <Body
-            color={mapVariantStates[variant].foreground}
-            weight={"Regular"}
-            accessibilityRole="text"
-            onTextLayout={onTextLayout}
-          >
-            {content}
-          </Body>
-          {action && (
-            <>
-              <VSpacer size={8} />
+            )}
+            <Body
+              color={mapVariantStates[variant].foreground}
+              weight={"Regular"}
+              accessibilityRole="text"
+              onTextLayout={onTextLayout}
+            >
+              {content}
+            </Body>
+            {action && (
               <ButtonText
                 color={mapVariantStates[variant].foreground}
                 numberOfLines={1}
@@ -245,18 +190,17 @@ export const Alert = React.forwardRef<View, AlertType>(
               >
                 {action}
               </ButtonText>
-            </>
-          )}
+            )}
+          </VStack>
         </View>
-      </>
+      </HStack>
     );
 
     const StaticComponent = () => (
       <View
         ref={viewRef}
         style={[
-          styles.container,
-          fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
+          fullWidth ? { padding } : paddingDefaultVariant,
           { backgroundColor: mapVariantStates[variant].background }
         ]}
         testID={testID}
@@ -283,11 +227,10 @@ export const Alert = React.forwardRef<View, AlertType>(
       >
         <Animated.View
           style={[
-            styles.container,
-            fullWidth ? styles.spacingFullWidth : styles.spacingDefault,
+            fullWidth ? { padding: paddingFullWidth } : paddingDefaultVariant,
             { backgroundColor: mapVariantStates[variant].background },
             // Disable pressed animation when component is full width
-            !fullWidth && pressedAnimationStyle
+            !fullWidth && scaleAnimatedStyle
           ]}
         >
           {renderMainBlock()}

package/src/components/alert/AlertEdgeToEdge.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useMemo } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -6,18 +6,9 @@ import {
   Text,
   View
 } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
-  IOScaleValues,
-  IOSpringValues,
   IOVisualCostants,
   enterTransitionAlertEdgeToEdge,
   enterTransitionAlertEdgeToEdgeContent,
@@ -30,6 +21,7 @@ import {
 } from "../../core/IOColors";
 import { IOAlertSpacing } from "../../core/IOSpacing";
 import { IOStyles } from "../../core/IOStyles";
+import { useScaleAnimation } from "../../hooks";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
@@ -105,42 +97,10 @@ export const AlertEdgeToEdge = ({
   accessibilityHint,
   testID
 }: AlertEdgeToEdgeProps) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("slight");
   const insets = useSafeAreaInsets();
 
-  // 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(() => {
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      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 backgroundColor = useMemo(
     () => IOColors[mapVariantStates[variant].background],
     [variant]
@@ -201,7 +161,7 @@ export const AlertEdgeToEdge = ({
     >
       <Animated.View
         entering={enterTransitionAlertEdgeToEdgeContent}
-        style={[styles.alert, pressedAnimationStyle]}
+        style={[styles.alert, scaleAnimatedStyle]}
       >
         {renderMainBlock()}
       </Animated.View>

package/src/components/badge/Badge.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { ColorValue, Platform, StyleSheet, View } from "react-native";
+import {
+  ColorValue,
+  Platform,
+  StyleSheet,
+  View,
+  ViewStyle
+} from "react-native";
 import {
   hexToRgba,
   IOBadgeHSpacing,
@@ -10,12 +16,14 @@ import {
   useIOTheme,
   useIOThemeContext
 } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { IOText } from "../typography";
 
 export type Badge = WithTestID<{
   outline?: boolean;
   text: string;
+  allowFontScaling?: boolean;
   variant:
     | "default"
     | "info"
@@ -44,12 +52,14 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
+    borderCurve: "continuous",
     ...Platform.select({
       android: {
         textAlignVertical: "center"
       }
-    }),
-    borderCurve: "continuous",
+    })
+  },
+  badgeStaticStyle: {
     borderRadius: IOBadgeRadius,
     paddingHorizontal: IOBadgeHSpacing,
     paddingVertical: IOBadgeVSpacing
@@ -59,9 +69,16 @@ const styles = StyleSheet.create({
 /**
  * Official badge component
  */
-export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
+export const Badge = ({
+  text,
+  outline = false,
+  allowFontScaling = true,
+  variant,
+  testID
+}: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { dynamicFontScale } = useIOFontDynamicScale();
   const { themeType } = useIOThemeContext();
 
   const bgOpacityDarkMode = 0.2;
@@ -237,12 +254,19 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
 
   const { background, foreground } = variantMap[variant];
 
+  const dynamicStyle: ViewStyle = {
+    borderRadius: IOBadgeRadius * dynamicFontScale,
+    paddingHorizontal: IOBadgeHSpacing * dynamicFontScale,
+    paddingVertical: IOBadgeVSpacing * dynamicFontScale
+  };
+
   return (
     <View
       accessible={true}
       testID={testID}
       style={[
         styles.badge,
+        allowFontScaling ? dynamicStyle : styles.badgeStaticStyle,
         outline
           ? {
               borderWidth: 1,
@@ -254,6 +278,7 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
       ]}
     >
       <IOText
+        allowFontScaling={allowFontScaling}
         font={isExperimental ? "Titillio" : "TitilliumSansPro"}
         weight={"Semibold"}
         size={12}

package/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap

@@ -8,9 +8,11 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
       {
         "alignItems": "center",
         "borderCurve": "continuous",
-        "borderRadius": 24,
         "flexDirection": "row",
         "justifyContent": "center",
+      },
+      {
+        "borderRadius": 24,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -23,7 +25,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
   <Text
     allowFontScaling={true}
     ellipsizeMode="tail"
-    maxFontSizeMultiplier={1.25}
+    maxFontSizeMultiplier={1.5}
     numberOfLines={1}
     style={
       [
@@ -58,9 +60,11 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
       {
         "alignItems": "center",
         "borderCurve": "continuous",
-        "borderRadius": 24,
         "flexDirection": "row",
         "justifyContent": "center",
+      },
+      {
+        "borderRadius": 24,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -71,9 +75,9 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     ellipsizeMode="tail"
-    maxFontSizeMultiplier={1.25}
+    maxFontSizeMultiplier={1.5}
     numberOfLines={1}
     style={
       [

package/src/components/banner/Banner.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React from "react";
 import {
   AccessibilityRole,
   GestureResponderEvent,
@@ -7,28 +7,19 @@ import {
   View,
   ViewStyle
 } from "react-native";
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import {
   IOBannerBigSpacing,
   IOBannerRadius,
   IOBannerSmallHSpacing,
   IOBannerSmallVSpacing,
-  IOScaleValues,
-  IOSpringValues,
   IOStyles,
   useIOExperimentalDesign,
   useIOTheme,
   useIOThemeContext
 } from "../../core";
 import { hexToRgba, IOColors } from "../../core/IOColors";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import {
@@ -159,7 +150,8 @@ export const Banner = ({
   accessibilityLabel,
   testID
 }: Banner) => {
-  const isPressed: SharedValue<number> = useSharedValue(0);
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
 
   const { isExperimental } = useIOExperimentalDesign();
   const { themeType } = useIOThemeContext();
@@ -181,40 +173,6 @@ export const Banner = ({
     paddingHorizontal: size === "big" ? sizeBigPadding : sizeSmallHPadding
   };
 
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.magnifiedButton?.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
-
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolation.CLAMP
-    );
-
-    return {
-      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]);
-
   /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
    if they are present. */
   const fallbackAccessibilityLabel = [title, content, action]
@@ -233,8 +191,6 @@ export const Banner = ({
       >
         {title && (
           <>
-            {/* Once we get 'gap' property, we can get rid of
-          these <VSpacer> components */}
             <H6 color={colorTitle}>{title}</H6>
             <VSpacer size={4} />
           </>
@@ -305,11 +261,7 @@ export const Banner = ({
       accessible={false}
     >
       <Animated.View
-        style={[
-          styles.container,
-          dynamicContainerStyles,
-          pressedAnimationStyle
-        ]}
+        style={[styles.container, dynamicContainerStyles, scaleAnimatedStyle]}
       >
         {renderMainBlock()}
       </Animated.View>

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -75,7 +75,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
       <Text
         allowFontScaling={true}
         dynamicTypeRamp="headline"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         style={
           [
             {},
@@ -120,7 +120,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
           allowFontScaling={true}
           ellipsizeMode="tail"
           importantForAccessibility="no-hide-descendants"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={
             [
@@ -352,9 +352,9 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       }
     >
       <Text
-        allowFontScaling={false}
+        allowFontScaling={true}
         dynamicTypeRamp="headline"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         style={
           [
             {},
@@ -396,10 +396,10 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         <Text
           accessibilityElementsHidden={true}
           accessible={false}
-          allowFontScaling={false}
+          allowFontScaling={true}
           ellipsizeMode="tail"
           importantForAccessibility="no-hide-descendants"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={
             [