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

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/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

@@ -92,9 +92,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -173,9 +173,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -254,9 +254,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -351,9 +351,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -432,9 +432,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -513,9 +513,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -610,9 +610,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -691,9 +691,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -772,9 +772,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
           }
         >
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="title2"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -1010,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]}
           />

package/src/components/radio/RadioButtonLabel.tsx

@@ -1,10 +1,10 @@
 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 { IOSelectionTickVisualParams, useIOTheme } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { HSpacer } from "../spacer/Spacer";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { H6 } from "../typography/H6";
 import { AnimatedRadio } from "./AnimatedRadio";
 
@@ -17,9 +17,9 @@ type Props = {
 const DISABLED_OPACITY = 0.5;
 
 type RadioButtonLabelProps = Props &
-  Pick<React.ComponentProps<typeof AnimatedRadio>, "disabled" | "checked"> &
+  Pick<ComponentProps<typeof AnimatedRadio>, "disabled" | "checked"> &
   Pick<
-    React.ComponentProps<typeof Pressable>,
+    ComponentProps<typeof Pressable>,
     "onPress" | "accessibilityLabel" | "accessibilityHint"
   >;
 
@@ -38,6 +38,7 @@ export const RadioButtonLabel = ({
   accessibilityLabel,
   accessibilityHint
 }: RadioButtonLabelProps) => {
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
   const theme = useIOTheme();
 
   const [toggleValue, setToggleValue] = useState(checked ?? false);
@@ -70,7 +71,12 @@ export const RadioButtonLabel = ({
       <View
         style={[
           IOStyles.row,
-          { alignItems: "flex-start", flexShrink: 1, width: "100%" }
+          {
+            alignItems: "flex-start",
+            flexShrink: 1,
+            width: "100%",
+            columnGap: 8 * dynamicFontScale * spacingScaleMultiplier
+          }
         ]}
       >
         <View
@@ -78,9 +84,11 @@ export const RadioButtonLabel = ({
           accessibilityElementsHidden
           importantForAccessibility="no-hide-descendants"
         >
-          <AnimatedRadio checked={checked ?? toggleValue} />
+          <AnimatedRadio
+            size={IOSelectionTickVisualParams.size * dynamicFontScale}
+            checked={checked ?? toggleValue}
+          />
         </View>
-        <HSpacer size={8} />
         <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
           {label}
         </H6>

package/src/components/searchInput/SearchInput.tsx

@@ -21,7 +21,7 @@ import {
 } from "react-native";
 import Animated, {
   Easing,
-  Extrapolate,
+  Extrapolation,
   interpolate,
   interpolateColor,
   useAnimatedStyle,
@@ -173,7 +173,7 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
               showCancelButton,
               [0, 1],
               [cancelButtonWidth + IOVisualCostants.appMarginDefault, 0],
-              Extrapolate.CLAMP
+              Extrapolation.CLAMP
             )
           }
         ],
@@ -235,7 +235,12 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           pointerEvents={pressable ? "none" : "auto"}
         >
           <View style={styles.iconContainer}>
-            <Icon name="search" size={iconSize} color={iconColor} />
+            <Icon
+              allowFontScaling
+              name="search"
+              size={iconSize}
+              color={iconColor}
+            />
           </View>
           <AnimatedTextInput
             testID={testID}
@@ -328,7 +333,7 @@ const styles = StyleSheet.create({
       inputFontSizePlaceholder,
       "Titillio",
       undefined,
-      "Regular"
+      "Medium"
     )
   },
   placeholderLegacy: {
@@ -336,7 +341,7 @@ const styles = StyleSheet.create({
       inputFontSizePlaceholder,
       "TitilliumSansPro",
       undefined,
-      "Regular"
+      "Semibold"
     )
   },
   cancelButton: {

package/src/components/spacer/Spacer.tsx

@@ -1,14 +1,17 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View } from "react-native";
 import { hexToRgba, IOColors, IOSpacer } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 type BaseSpacerProps = {
   orientation: "vertical" | "horizontal";
   size: IOSpacer;
+  allowScaleSpacing?: boolean;
 };
 
 type SpacerProps = {
   size?: IOSpacer;
+  allowScaleSpacing?: boolean;
 };
 
 const DEFAULT_SIZE: IOSpacer = 16;
@@ -22,20 +25,32 @@ Native `Spacer` component
 @param  {string} orientation
 @param {IOSpacer} size
  */
-const Spacer = ({ orientation, size }: BaseSpacerProps) => {
-  const style = React.useMemo(
+const Spacer = ({ allowScaleSpacing, orientation, size }: BaseSpacerProps) => {
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
+  const style = useMemo(
     () => ({
       ...(orientation === "vertical" && {
-        height: size
+        height: allowScaleSpacing
+          ? size * dynamicFontScale * spacingScaleMultiplier
+          : size
       }),
       ...(orientation === "horizontal" && {
-        width: size
+        width: allowScaleSpacing
+          ? size * dynamicFontScale * spacingScaleMultiplier
+          : size
       }),
       ...((debugMode as boolean) && {
         backgroundColor: debugBg
       })
     }),
-    [orientation, size]
+    [
+      allowScaleSpacing,
+      dynamicFontScale,
+      orientation,
+      size,
+      spacingScaleMultiplier
+    ]
   );
 
   return <View style={style} />;

package/src/components/stack/Stack.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { View, ViewProps, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 type AllowedStyleProps = Pick<
   ViewStyle,
@@ -15,6 +16,7 @@ type A11YRelatedProps = Pick<
 type Stack = PropsWithChildren<{
   space?: IOSpacer;
   style?: AllowedStyleProps;
+  allowScaleSpacing?: boolean;
 }> &
   A11YRelatedProps;
 
@@ -22,30 +24,39 @@ type BaseStack = Stack & {
   orientation: "vertical" | "horizontal";
 };
 
+const DEFAULT_SPACING_VALUE: IOSpacer = 16;
+
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
 
 const Stack = ({
-  space,
+  space = DEFAULT_SPACING_VALUE,
   style,
   orientation = "vertical",
+  allowScaleSpacing,
   children,
   ...props
-}: BaseStack) => (
-  <View
-    {...props}
-    style={{
-      display: "flex",
-      flexDirection: orientation === "horizontal" ? "row" : "column",
-      gap: space,
-      ...style
-    }}
-  >
-    {children}
-  </View>
-);
+}: BaseStack) => {
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+
+  return (
+    <View
+      {...props}
+      style={{
+        display: "flex",
+        flexDirection: orientation === "horizontal" ? "row" : "column",
+        gap: allowScaleSpacing
+          ? space * dynamicFontScale * spacingScaleMultiplier
+          : space,
+        ...style
+      }}
+    >
+      {children}
+    </View>
+  );
+};
 
 export const HStack = ({ children, ...props }: Stack) => (
   <Stack orientation="horizontal" {...props}>