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

package/src/components/buttons/IconButtonSolid.tsx

@@ -153,6 +153,7 @@ export const IconButtonSolid = ({
         ]}
       >
         <AnimatedIcon
+          allowFontScaling
           name={icon}
           color={
             !disabled

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -63,6 +63,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
           "columnGap": 8,
         },
         {},
+        {
+          "columnGap": 8,
+        },
         {
           "transform": [
             {
@@ -79,7 +82,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -163,6 +166,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
         {
           "height": 48,
         },
+        {
+          "columnGap": 8,
+        },
         false,
         {
           "backgroundColor": "rgba(231,236,252,0)",
@@ -188,7 +194,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -302,6 +308,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
             "flexDirection": "row",
             "justifyContent": "center",
           },
+          {
+            "columnGap": 8,
+          },
           false,
         ]
       }
@@ -312,7 +321,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
         allowFontScaling={true}
         ellipsizeMode="tail"
         importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         numberOfLines={1}
         style={
           [
@@ -794,6 +803,9 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
           "columnGap": 8,
         },
         {},
+        {
+          "columnGap": 8,
+        },
         {
           "transform": [
             {
@@ -807,10 +819,10 @@ exports[`Test Buttons Components ButtonLink 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={
         [
@@ -893,6 +905,9 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
         {
           "height": 40,
         },
+        {
+          "columnGap": 8,
+        },
         false,
         {
           "backgroundColor": "rgba(0,115,230,0)",
@@ -915,10 +930,10 @@ exports[`Test Buttons Components ButtonOutline 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={
         [
@@ -1031,6 +1046,9 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
+          {
+            "columnGap": 8,
+          },
           false,
         ]
       }
@@ -1038,10 +1056,10 @@ exports[`Test Buttons Components ButtonSolid 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={
           [

package/src/components/checkbox/AnimatedCheckbox.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,
@@ -8,6 +14,7 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
@@ -18,6 +25,7 @@ import {
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
+  size: number;
   checked?: boolean;
 };
 
@@ -26,28 +34,18 @@ type OwnProps = Props & Pick<PressableProps, "disabled" | "onPress">;
 const checkBoxRadius: number = 5;
 
 const styles = StyleSheet.create({
-  checkBoxWrapper: {
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size
-  },
   checkboxBorder: {
+    borderWidth: IOSelectionTickVisualParams.borderWidth,
+    borderCurve: "continuous",
     position: "absolute",
     left: 0,
-    top: 0,
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size,
-    borderWidth: IOSelectionTickVisualParams.borderWidth,
-    borderRadius: checkBoxRadius,
-    borderCurve: "continuous"
+    top: 0
   },
   checkBoxSquare: {
+    borderCurve: "continuous",
     position: "absolute",
     left: 0,
-    top: 0,
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size,
-    borderRadius: checkBoxRadius,
-    borderCurve: "continuous"
+    top: 0
   }
 });
 
@@ -55,7 +53,13 @@ const styles = StyleSheet.create({
  * An animated checkbox. This can be used to implement a
  * standard {@link CheckBox} or other composite components.
  */
-export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
+export const AnimatedCheckbox = ({
+  size,
+  checked,
+  onPress,
+  disabled
+}: OwnProps) => {
+  const { dynamicFontScale } = useIOFontDynamicScale();
   const isChecked = checked ?? false;
 
   const { isExperimental } = useIOExperimentalDesign();
@@ -80,6 +84,17 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
   const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
 
+  const checkboxSizeStyle: ViewStyle = {
+    width: size,
+    height: size,
+    borderRadius: checkBoxRadius * dynamicFontScale
+  };
+
+  const checkboxWrapperSizeStyle: ViewStyle = {
+    width: size,
+    height: size
+  };
+
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
     squareAnimationProgress.value = withSpring(
@@ -108,12 +123,13 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
       accessible={false}
       disabled={disabled}
       onPress={onPress}
-      style={styles.checkBoxWrapper}
+      style={checkboxWrapperSizeStyle}
       testID="AnimatedCheckboxInput"
     >
       <View
         style={[
           styles.checkboxBorder,
+          checkboxSizeStyle,
           {
             borderColor: borderColorProp
           }
@@ -122,6 +138,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
       <Animated.View
         style={[
           styles.checkBoxSquare,
+          checkboxSizeStyle,
           {
             backgroundColor: backgroundColorProp
           },
@@ -131,6 +148,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
       {isChecked && (
         <View style={{ zIndex: 1 }}>
           <AnimatedTick
+            size={size}
             progress={tickAnimationProgress}
             stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
           />

package/src/components/checkbox/CheckboxLabel.tsx

@@ -1,10 +1,14 @@
 import * as React from "react";
-import { useState } from "react";
+import { ComponentProps, useState } from "react";
 import { Pressable, View } from "react-native";
-import { useIOTheme } from "../../core";
-import { IOStyles } from "../../core/IOStyles";
+import {
+  IOSelectionTickVisualParams,
+  IOSpacingScale,
+  useIOTheme
+} from "../../core";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { HSpacer } from "../spacer/Spacer";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
+import { HStack } from "../stack";
 import { H6 } from "../typography/H6";
 import { AnimatedCheckbox } from "./AnimatedCheckbox";
 
@@ -15,12 +19,13 @@ type Props = {
 };
 
 const DISABLED_OPACITY = 0.5;
+const CHECKBOX_MARGIN: IOSpacingScale = 8;
 
 // disabled: the component is no longer touchable
 // onPress:
 type OwnProps = Props &
-  Pick<React.ComponentProps<typeof AnimatedCheckbox>, "disabled" | "checked"> &
-  Pick<React.ComponentProps<typeof Pressable>, "onPress">;
+  Pick<ComponentProps<typeof AnimatedCheckbox>, "disabled" | "checked"> &
+  Pick<ComponentProps<typeof Pressable>, "onPress">;
 
 /**
  * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
@@ -36,6 +41,7 @@ export const CheckboxLabel = ({
   onValueChange
 }: OwnProps) => {
   const theme = useIOTheme();
+  const { dynamicFontScale } = useIOFontDynamicScale();
 
   const [toggleValue, setToggleValue] = useState(checked ?? false);
 
@@ -65,7 +71,11 @@ export const CheckboxLabel = ({
       // inheritance on Android
       needsOffscreenAlphaCompositing={true}
     >
-      <View style={[IOStyles.row, { alignItems: "center", width: "100%" }]}>
+      <HStack
+        allowScaleSpacing
+        style={{ alignItems: "center", width: "100%" }}
+        space={CHECKBOX_MARGIN}
+      >
         <View
           pointerEvents="none"
           accessibilityElementsHidden
@@ -74,13 +84,15 @@ export const CheckboxLabel = ({
             alignSelf: "flex-start"
           }}
         >
-          <AnimatedCheckbox checked={checked ?? toggleValue} />
+          <AnimatedCheckbox
+            size={IOSelectionTickVisualParams.size * dynamicFontScale}
+            checked={checked ?? toggleValue}
+          />
         </View>
-        <HSpacer size={8} />
         <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
           {label}
         </H6>
-      </View>
+      </HStack>
     </Pressable>
   );
 };

package/src/components/common/AnimatedTick.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Animated, {
+  SharedValue,
   useAnimatedProps,
   useAnimatedRef
 } from "react-native-reanimated";
@@ -8,7 +9,8 @@ import Svg, { Path, PathProps } from "react-native-svg";
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
 interface AnimatedTickProps extends PathProps {
-  progress: Animated.SharedValue<number>;
+  size?: number;
+  progress: SharedValue<number>;
   onLayout?: () => void;
 }
 
@@ -20,7 +22,11 @@ const TickSVGPath = "m7 12 4 4 7-7";
  * It comes without any state logic.
  *
  */
-export const AnimatedTick = ({ progress, ...pathProps }: AnimatedTickProps) => {
+export const AnimatedTick = ({
+  size,
+  progress,
+  ...pathProps
+}: AnimatedTickProps) => {
   const [length, setLength] = useState(0);
   const ref = useAnimatedRef();
 
@@ -38,7 +44,7 @@ export const AnimatedTick = ({ progress, ...pathProps }: AnimatedTickProps) => {
   };
 
   return (
-    <Svg viewBox="0 0 24 24">
+    <Svg viewBox={`0 0 24 24`} {...(size ? { width: size, height: size } : {})}>
       <AnimatedPath
         ref={ref}
         onLayout={onLayout}

package/src/components/common/LogoPaymentWithFallback.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { IOColors } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
+import { findFirstCaseInsensitive } from "../../utils/object";
 import { IOIconSizeScale, Icon } from "../icons";
 import {
   IOLogoPaymentExtType,
@@ -9,7 +11,6 @@ import {
   LogoPayment,
   LogoPaymentExt
 } from "../logos";
-import { findFirstCaseInsensitive } from "../../utils/object";
 
 export type LogoPaymentWithFallback = {
   brand?: string;
@@ -38,21 +39,42 @@ export const LogoPaymentWithFallback = ({
   isExtended = false,
   size = isExtended ? 48 : 24
 }: LogoPaymentWithFallback) => {
+  const { dynamicFontScale } = useIOFontDynamicScale();
   const logos = isExtended ? IOPaymentExtLogos : IOPaymentLogos;
 
   if (!brand) {
-    return <Icon name="creditCard" size={size} color={fallbackIconColor} />;
+    return (
+      <Icon
+        allowFontScaling
+        name="creditCard"
+        size={size}
+        color={fallbackIconColor}
+      />
+    );
   }
 
   const findCase = findFirstCaseInsensitive(logos, brand);
 
   if (!findCase) {
-    return <Icon name="creditCard" size={size} color={fallbackIconColor} />;
+    return (
+      <Icon
+        allowFontScaling
+        name="creditCard"
+        size={size}
+        color={fallbackIconColor}
+      />
+    );
   }
 
   return isExtended ? (
-    <LogoPaymentExt name={findCase as IOLogoPaymentExtType} size={size} />
+    <LogoPaymentExt
+      name={findCase as IOLogoPaymentExtType}
+      size={size * dynamicFontScale}
+    />
   ) : (
-    <LogoPayment name={findCase as IOLogoPaymentType} size={size} />
+    <LogoPayment
+      name={findCase as IOLogoPaymentType}
+      size={size * dynamicFontScale}
+    />
   );
 };

package/src/components/featureInfo/FeatureInfo.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react";
-import { GestureResponderEvent, View } from "react-native";
+import { GestureResponderEvent } from "react-native";
 import {
   BodySmall,
-  HSpacer,
+  HStack,
   IOIconSizeScale,
   IOIcons,
   IOPictogramSizeScale,
@@ -11,7 +11,7 @@ import {
   Pictogram,
   VStack
 } from "../../components";
-import { IOStyles, useIOTheme } from "../../core";
+import { useIOTheme } from "../../core";
 
 type PartialFeatureInfo = {
   // Necessary to render main body with different formatting
@@ -57,24 +57,28 @@ export const FeatureInfo = ({
   const theme = useIOTheme();
 
   return (
-    <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
+    <HStack style={{ alignItems: "center" }} space={24}>
       {iconName && (
         <Icon
+          allowFontScaling
           name={iconName}
           size={DEFAULT_ICON_SIZE}
           color={theme["icon-decorative"]}
         />
       )}
       {pictogramName && (
-        <Pictogram name={pictogramName} size={DEFAULT_PICTOGRAM_SIZE} />
+        <Pictogram
+          allowFontScaling
+          name={pictogramName}
+          size={DEFAULT_PICTOGRAM_SIZE}
+        />
       )}
-      <HSpacer size={24} />
-      <VStack space={4} style={{ flexShrink: 1 }}>
+      <VStack allowScaleSpacing space={4} style={{ flexShrink: 1 }}>
         {renderNode(body)}
         {action && (
           <BodySmall
-            weight="Semibold"
             asLink
+            weight="Semibold"
             onPress={action.onPress}
             accessible
             importantForAccessibility={"yes"}
@@ -84,6 +88,6 @@ export const FeatureInfo = ({
           </BodySmall>
         )}
       </VStack>
-    </View>
+    </HStack>
   );
 };

package/src/components/icons/Icon.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { ColorValue } from "react-native";
 import { IOColors } from "../../core/IOColors";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 /* Icons */
 import IconAbacus from "./svg/IconAbacus";
@@ -51,6 +52,7 @@ import IconChevronRight from "./svg/IconChevronRight";
 import IconChevronRightListItem from "./svg/IconChevronRightListItem";
 import IconChevronTop from "./svg/IconChevronTop";
 import IconCie from "./svg/IconCie";
+import IconCieLetter from "./svg/IconCieLetter";
 import IconCloseLarge from "./svg/IconCloseLarge";
 import IconCloseMedium from "./svg/IconCloseMedium";
 import IconCloseSmall from "./svg/IconCloseSmall";
@@ -200,7 +202,6 @@ import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
-import IconCieLetter from "./svg/IconCieLetter";
 
 export const IOIcons = {
   spid: IconSpid,
@@ -406,10 +407,7 @@ export const IOIcons = {
 
 export type IOIcons = keyof typeof IOIcons;
 
-/* The following values should be deleted: 12, 30 */
-/* 96 is too big for an icon, it should be replaced
-with a Pictogram instead */
-export type IOIconSizeScale = 12 | 16 | 20 | 24 | 30 | 32 | 48 | 96;
+export type IOIconSizeScale = 16 | 20 | 24 | 32 | 48;
 /* Sizes used exclusively for the Checkbox component */
 export type IOIconSizeScaleCheckbox = 14 | 18;
 
@@ -420,6 +418,7 @@ export type IOIconsProps = {
   testID?: string;
   accessible?: boolean;
   accessibilityLabel?: string;
+  allowFontScaling?: boolean;
 };
 
 /*
@@ -432,15 +431,23 @@ export const Icon = ({
   size = 24,
   accessible = false,
   accessibilityLabel = "",
+  allowFontScaling = false,
   ...props
 }: IOIconsProps) => {
+  const { dynamicFontScale } = useIOFontDynamicScale();
+
   const IconElement = IOIcons[name];
   const isAccessible = accessible && accessibilityLabel.trim().length > 0;
+  const iconSize =
+    allowFontScaling && typeof size === "number"
+      ? size * dynamicFontScale
+      : size;
+
   return (
     <IconElement
       {...props}
       style={{ color: IOColors[color] }}
-      size={size}
+      size={iconSize}
       accessible={isAccessible}
       accessibilityElementsHidden={!isAccessible}
       accessibilityLabel={accessibilityLabel}
@@ -459,6 +466,7 @@ type IOAnimatedIconsProps = {
   color?: ColorValue;
   size?: IOIconSizeScale | "100%";
   accessible?: boolean;
+  allowFontScaling?: boolean;
 };
 
 export const AnimatedIcon = ({
@@ -466,14 +474,22 @@ export const AnimatedIcon = ({
   color = IOColors.bluegrey,
   size = 24,
   accessible = false,
+  allowFontScaling = false,
   ...props
 }: IOAnimatedIconsProps) => {
+  const { dynamicFontScale } = useIOFontDynamicScale();
+
   const IconElement = IOIcons[name];
+  const iconSize =
+    allowFontScaling && typeof size === "number"
+      ? size * dynamicFontScale
+      : size;
+
   return (
     <IconElement
       {...props}
       style={{ color }}
-      size={size}
+      size={iconSize}
       accessible={accessible}
       accessibilityElementsHidden={true}
       accessibilityLabel={""}

package/src/components/layout/HeaderFirstLevel.tsx

@@ -15,13 +15,12 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   alertEdgeToEdgeInsetTransitionConfig,
   IOColors,
-  IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
-import { HSpacer } from "../spacer";
+import { HStack } from "../stack";
 import { H3 } from "../typography";
 import { HeaderActionProps } from "./common";
 
@@ -136,27 +135,18 @@ export const HeaderFirstLevel = ({
             {title}
           </H3>
         </View>
-        <View style={[IOStyles.row, { flexShrink: 0 }]}>
+        <HStack space={16} style={{ flexShrink: 0 }}>
           {type === "threeActions" && (
-            <>
-              <IconButton
-                {...thirdAction}
-                color={backgroundColor === "dark" ? "contrast" : "primary"}
-              />
-              {/* Ideally, with the "gap" flex property,
-              we can get rid of these ugly constructs */}
-              <HSpacer size={16} />
-            </>
+            <IconButton
+              {...thirdAction}
+              color={backgroundColor === "dark" ? "contrast" : "primary"}
+            />
           )}
           {(type === "twoActions" || type === "threeActions") && (
-            <>
-              <IconButton
-                {...secondAction}
-                color={backgroundColor === "dark" ? "contrast" : "primary"}
-              />
-              {/* Same as above */}
-              <HSpacer size={16} />
-            </>
+            <IconButton
+              {...secondAction}
+              color={backgroundColor === "dark" ? "contrast" : "primary"}
+            />
           )}
           {type !== "base" && (
             <IconButton
@@ -164,7 +154,7 @@ export const HeaderFirstLevel = ({
               color={backgroundColor === "dark" ? "contrast" : "primary"}
             />
           )}
-        </View>
+        </HStack>
       </View>
     </Animated.View>
   );