From dc91c6cb588510b7e38687698f280bdfa08e2050 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 24 Jun 2024 14:47:51 +0200
Subject: [PATCH 01/16] Allow font scaling to most of the typographic styles

---
 src/components/badge/Badge.tsx              |  3 +++
 src/components/buttons/ButtonSolid.tsx      |  2 --
 src/components/typography/ButtonText.tsx    |  4 +++-
 src/components/typography/H1.tsx            |  5 ++++-
 src/components/typography/H2.tsx            |  5 ++++-
 src/components/typography/H3.tsx            |  5 ++++-
 src/components/typography/H4.tsx            |  5 ++++-
 src/components/typography/H5.tsx            | 15 ++++++++++-----
 src/components/typography/H6.tsx            | 10 +++++++++-
 src/components/typography/LabelSmall.tsx    | 19 +++++++++++++++----
 src/components/typography/LabelSmallAlt.tsx |  5 ++++-
 src/core/IOStyles.ts                        |  6 +++++-
 12 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index 5c509a63..b69d1c1c 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -5,6 +5,7 @@ import {
   IOBadgeRadius,
   IOBadgeVSpacing,
   IOColors,
+  IOVisualCostants,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
@@ -179,6 +180,8 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
       <Text
         numberOfLines={1}
         ellipsizeMode="tail"
+        allowFontScaling={isExperimental}
+        maxFontSizeMultiplier={IOVisualCostants.maxFontSizeMultiplier}
         style={[
           styles.label,
           isExperimental ? styles.labelFont : styles.legacyLabelFont,
diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
index b58d738d..e52c4727 100644
--- a/src/components/buttons/ButtonSolid.tsx
+++ b/src/components/buttons/ButtonSolid.tsx
@@ -332,8 +332,6 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
                 style={IOButtonStyles.label}
                 numberOfLines={1}
                 ellipsizeMode="tail"
-                allowFontScaling={isExperimental}
-                maxFontSizeMultiplier={1.3}
                 accessible={false}
                 accessibilityElementsHidden
                 importantForAccessibility="no-hide-descendants"
diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx
index a09d738b..4f00582b 100644
--- a/src/components/typography/ButtonText.tsx
+++ b/src/components/typography/ButtonText.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { IOColors } from "../../core/IOColors";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { useIOExperimentalDesign } from "../../core";
+import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
@@ -34,6 +34,8 @@ export const ButtonText = React.forwardRef<View, ButtonTextProps>(
     return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>(
       {
         ...props,
+        allowFontScaling: isExperimental,
+        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
         defaultWeight: isExperimental
           ? buttonTextDefaultWeight
           : legacyTextDefaultWeight,
diff --git a/src/components/typography/H1.tsx b/src/components/typography/H1.tsx
index f7c5b3b2..ebb057ba 100644
--- a/src/components/typography/H1.tsx
+++ b/src/components/typography/H1.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -33,6 +33,9 @@ export const H1 = React.forwardRef<View, H1Props>((props, ref) => {
   return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "largeTitle" /* iOS only */,
       defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
       defaultColor,
       font: isExperimental ? fontName : legacyFont,
diff --git a/src/components/typography/H2.tsx b/src/components/typography/H2.tsx
index 6a3e5ec6..3015626e 100644
--- a/src/components/typography/H2.tsx
+++ b/src/components/typography/H2.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -33,6 +33,9 @@ export const H2 = React.forwardRef<View, H2Props>((props, ref) => {
   return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "title1" /* iOS only */,
       defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
       defaultColor,
       font: isExperimental ? fontName : legacyFont,
diff --git a/src/components/typography/H3.tsx b/src/components/typography/H3.tsx
index 1ded44e5..43343d4e 100644
--- a/src/components/typography/H3.tsx
+++ b/src/components/typography/H3.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -34,6 +34,9 @@ export const H3 = React.forwardRef<View, H3Props>((props, ref) => {
   return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "title2" /* iOS only */,
       defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
       defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
       font: isExperimental ? fontName : legacyFontName,
diff --git a/src/components/typography/H4.tsx b/src/components/typography/H4.tsx
index b34eb2c3..7571ceeb 100644
--- a/src/components/typography/H4.tsx
+++ b/src/components/typography/H4.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -32,6 +32,9 @@ export const H4 = React.forwardRef<View, H4Props>((props, ref) => {
   return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "title3" /* iOS only */,
       defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
       defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
       font: isExperimental ? font : legacyFontName,
diff --git a/src/components/typography/H5.tsx b/src/components/typography/H5.tsx
index f061dfda..947f5102 100644
--- a/src/components/typography/H5.tsx
+++ b/src/components/typography/H5.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { IOTheme } from "../../core";
+import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -21,10 +21,15 @@ const defaultWeight: AllowedWeight = "Semibold";
 /**
  * `H5` typographic style
  */
-export const H5 = React.forwardRef<View, H5Props>((props, ref) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>(
+export const H5 = React.forwardRef<View, H5Props>((props, ref) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "subheadline" /* iOS only */,
       defaultWeight,
       defaultColor,
       font,
@@ -36,5 +41,5 @@ export const H5 = React.forwardRef<View, H5Props>((props, ref) =>
       }
     },
     ref
-  )
-);
+  );
+});
diff --git a/src/components/typography/H6.tsx b/src/components/typography/H6.tsx
index bd6d6b56..e4fb7b3d 100644
--- a/src/components/typography/H6.tsx
+++ b/src/components/typography/H6.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import { View } from "react-native";
-import { IOTheme, IOThemeLight, useIOExperimentalDesign } from "../../core";
+import {
+  IOTheme,
+  IOThemeLight,
+  IOVisualCostants,
+  useIOExperimentalDesign
+} from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -34,6 +39,9 @@ export const H6 = React.forwardRef<View, H6Props>((props, ref) => {
   return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "headline" /* iOS only */,
       defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
       defaultColor: h6DefaultColor,
       font: isExperimental ? fontName : legacyFontName,
diff --git a/src/components/typography/LabelSmall.tsx b/src/components/typography/LabelSmall.tsx
index c414f107..37022e28 100644
--- a/src/components/typography/LabelSmall.tsx
+++ b/src/components/typography/LabelSmall.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import { View } from "react-native";
-import { IOColors, IOTheme } from "../../core";
+import {
+  IOColors,
+  IOTheme,
+  IOVisualCostants,
+  useIOExperimentalDesign
+} from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -42,10 +47,15 @@ const labelDefaultcolor = "blue";
  * `LabelSmall` typographic style
  */
 export const LabelSmall = React.forwardRef<View, LabelSmallProps>(
-  (props, ref) =>
-    useTypographyFactory<AllowedWeight, AllowedColors>(
+  (props, ref) => {
+    const { isExperimental } = useIOExperimentalDesign();
+
+    return useTypographyFactory<AllowedWeight, AllowedColors>(
       {
         ...props,
+        allowFontScaling: isExperimental,
+        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+        dynamicTypeRamp: "footnote" /* iOS only */,
         defaultWeight: labelDefaultWeight,
         defaultColor: labelDefaultcolor,
         font,
@@ -59,5 +69,6 @@ export const LabelSmall = React.forwardRef<View, LabelSmallProps>(
         }
       },
       ref
-    )
+    );
+  }
 );
diff --git a/src/components/typography/LabelSmallAlt.tsx b/src/components/typography/LabelSmallAlt.tsx
index 4f0aee93..b21a378e 100644
--- a/src/components/typography/LabelSmallAlt.tsx
+++ b/src/components/typography/LabelSmallAlt.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign } from "../../core";
+import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import type { IOColors, IOTheme } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -44,6 +44,9 @@ export const LabelSmallAlt = React.forwardRef<View, LabelSmallAltProps>(
     return useTypographyFactory<AllowedWeight, AllowedColors>(
       {
         ...props,
+        allowFontScaling: isExperimental,
+        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+        dynamicTypeRamp: "footnote" /* iOS only */,
         defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
         defaultColor,
         font: isExperimental ? fontName : legacyFontName,
diff --git a/src/core/IOStyles.ts b/src/core/IOStyles.ts
index 59d2d222..4370a4c7 100644
--- a/src/core/IOStyles.ts
+++ b/src/core/IOStyles.ts
@@ -1,4 +1,5 @@
-import { Platform, StyleSheet } from "react-native";
+import { Platform, StyleSheet, Text } from "react-native";
+import { ComponentProps } from "react";
 import { IOIconSizeScale } from "../components/icons";
 import { IOColors } from "./IOColors";
 import { IOModuleIDPRadius } from "./IOShapes";
@@ -18,6 +19,8 @@ interface IOVisualCostants {
   appMarginDefault: IOAppMargin;
   // Header
   headerHeight: number;
+  // Typography
+  maxFontSizeMultiplier: ComponentProps<typeof Text>["maxFontSizeMultiplier"];
   // Dimensions
   avatarSizeSmall: number;
   avatarSizeMedium: number;
@@ -32,6 +35,7 @@ interface IOVisualCostants {
 export const IOVisualCostants: IOVisualCostants = {
   appMarginDefault: 24,
   headerHeight: 56,
+  maxFontSizeMultiplier: 1.25,
   avatarSizeSmall: 44,
   avatarSizeMedium: 66,
   avatarRadiusSizeSmall: 8,

From 8874abc7ea03e3ef3c7a7cb4379667827dbf451e Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 24 Jun 2024 15:43:45 +0200
Subject: [PATCH 02/16] Fix criminal code without appropriate flexbox property

---
 src/components/modules/ModuleAttachment.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/modules/ModuleAttachment.tsx b/src/components/modules/ModuleAttachment.tsx
index 29fc316b..5d6b1d96 100644
--- a/src/components/modules/ModuleAttachment.tsx
+++ b/src/components/modules/ModuleAttachment.tsx
@@ -62,6 +62,7 @@ const styles = StyleSheet.create({
     borderWidth: 1
   },
   innerContent: {
+    alignItems: "flex-start",
     flex: 1,
     flexDirection: "column"
   },
@@ -115,9 +116,7 @@ const ModuleAttachmentContent = ({
           {title}
         </LabelSmallAlt>
         <VSpacer size={4} />
-        <View style={{ width: 44 }}>
-          <Badge text={format.toUpperCase()} variant="default" />
-        </View>
+        <Badge text={format.toUpperCase()} variant="default" />
       </View>
       <View style={styles.rightSection}>
         <IconOrActivityIndicatorComponent />

From f98365349e7506f2b16a89ba9e5f8b0da625d0a1 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 24 Jun 2024 15:53:36 +0200
Subject: [PATCH 03/16] Add space between content and action in
 `ModuleCheckout`

---
 src/components/modules/ModuleCheckout.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/modules/ModuleCheckout.tsx b/src/components/modules/ModuleCheckout.tsx
index b105784c..e85556c4 100644
--- a/src/components/modules/ModuleCheckout.tsx
+++ b/src/components/modules/ModuleCheckout.tsx
@@ -85,7 +85,12 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
     return (
       <PressableModuleBase onPress={props.onPress}>
         <ModuleBaseContent />
-        {props.ctaText && <ModuleAction ctaText={props.ctaText} />}
+        {props.ctaText && (
+          <>
+            <HSpacer size={4} />
+            <ModuleAction ctaText={props.ctaText} />
+          </>
+        )}
       </PressableModuleBase>
     );
   }

From 0e7a970901c120ea28aabc4b07ea7c236a553262 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 24 Jun 2024 15:57:34 +0200
Subject: [PATCH 04/16] Add theme key to module border in the
 `PressableModuleBase`

---
 src/components/modules/PressableModuleBase.tsx | 10 +++++++++-
 src/core/IOStyles.ts                           |  1 -
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/PressableModuleBase.tsx b/src/components/modules/PressableModuleBase.tsx
index 0b25d243..8830f828 100644
--- a/src/components/modules/PressableModuleBase.tsx
+++ b/src/components/modules/PressableModuleBase.tsx
@@ -2,7 +2,12 @@ import * as React from "react";
 import { PropsWithChildren } from "react";
 import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";
-import { IOModuleIDPSavedVSpacing, IOModuleStyles } from "../../core";
+import {
+  IOColors,
+  IOModuleIDPSavedVSpacing,
+  IOModuleStyles,
+  useIOTheme
+} from "../../core";
 import { WithTestID } from "../../utils/types";
 import { useModuleSpringAnimation } from "./hooks/useModuleSpringAnimation";
 
@@ -23,8 +28,10 @@ export const PressableModuleBase = ({
   testID,
   children
 }: PropsWithChildren<PressableModuleBaseProps>) => {
+  const theme = useIOTheme();
   const { handlePressIn, handlePressOut, animatedStyle } =
     useModuleSpringAnimation();
+
   return (
     <Pressable
       onPress={onPress}
@@ -40,6 +47,7 @@ export const PressableModuleBase = ({
       <Animated.View
         style={[
           IOModuleStyles.button,
+          { borderColor: IOColors[theme["cardBorder-default"]] },
           withLooseSpacing && { paddingVertical: IOModuleIDPSavedVSpacing },
           animatedStyle
         ]}
diff --git a/src/core/IOStyles.ts b/src/core/IOStyles.ts
index 4370a4c7..8a320544 100644
--- a/src/core/IOStyles.ts
+++ b/src/core/IOStyles.ts
@@ -300,7 +300,6 @@ export const IOModuleStyles = StyleSheet.create({
     borderColor: IOColors["grey-100"],
     borderRadius: IOModuleIDPRadius,
     borderCurve: "continuous",
-    backgroundColor: IOColors.white,
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",

From e712622b813e633159235963cd146a4b663bf065 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 24 Jun 2024 16:15:25 +0200
Subject: [PATCH 05/16] Allow font scaling to the remaining typographic styles

---
 src/components/typography/Body.tsx          | 20 +++++++++++++++-----
 src/components/typography/BodyMonospace.tsx | 18 ++++++++++++++----
 src/components/typography/Caption.tsx       |  5 ++++-
 src/components/typography/Chip.tsx          |  9 ++++++++-
 src/components/typography/Label.tsx         | 19 +++++++++++++++----
 src/components/typography/LabelLink.tsx     |  9 ++++++++-
 6 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/src/components/typography/Body.tsx b/src/components/typography/Body.tsx
index 9c08f5fd..e88fdf84 100644
--- a/src/components/typography/Body.tsx
+++ b/src/components/typography/Body.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import { View } from "react-native";
-import { IOColors, IOTheme } from "../../core";
+import {
+  IOColors,
+  IOTheme,
+  IOVisualCostants,
+  useIOExperimentalDesign
+} from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -26,15 +31,20 @@ export const bodyDefaultWeight: AllowedWeight = "Regular";
 /**
  * `Body` typographic style
  */
-export const Body = React.forwardRef<View, BodyProps>((props, ref) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>(
+export const Body = React.forwardRef<View, BodyProps>((props, ref) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "body" /* iOS only */,
       defaultWeight: bodyDefaultWeight,
       defaultColor: bodyDefaultColor,
       font: fontName,
       fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
     },
     ref
-  )
-);
+  );
+});
diff --git a/src/components/typography/BodyMonospace.tsx b/src/components/typography/BodyMonospace.tsx
index 13e97ac1..caffc0d7 100644
--- a/src/components/typography/BodyMonospace.tsx
+++ b/src/components/typography/BodyMonospace.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import { View } from "react-native";
-import type { IOColors } from "../../core/IOColors";
+import {
+  IOVisualCostants,
+  useIOExperimentalDesign,
+  type IOColors
+} from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -22,15 +26,21 @@ const monospaceDefaultcolor = "bluegrey";
  * `BodyMonospace` typographic style
  */
 export const BodyMonospace = React.forwardRef<View, BodyMonospaceProps>(
-  (props, ref) =>
-    useTypographyFactory<AllowedWeight, AllowedColors>(
+  (props, ref) => {
+    const { isExperimental } = useIOExperimentalDesign();
+
+    return useTypographyFactory<AllowedWeight, AllowedColors>(
       {
         ...props,
+        allowFontScaling: isExperimental,
+        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+        dynamicTypeRamp: "body" /* iOS only */,
         defaultWeight: monospaceDefaultWeight,
         defaultColor: monospaceDefaultcolor,
         font: fontName,
         fontStyle: { fontSize, lineHeight }
       },
       ref
-    )
+    );
+  }
 );
diff --git a/src/components/typography/Caption.tsx b/src/components/typography/Caption.tsx
index 84e7081a..6fcc7767 100644
--- a/src/components/typography/Caption.tsx
+++ b/src/components/typography/Caption.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -29,6 +29,9 @@ export const Caption = React.forwardRef<View, CaptionProps>((props, ref) => {
   return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "caption1" /* iOS only */,
       defaultWeight,
       defaultColor,
       font: isExperimental ? font : legacyFont,
diff --git a/src/components/typography/Chip.tsx b/src/components/typography/Chip.tsx
index a24d5990..e6f7180d 100644
--- a/src/components/typography/Chip.tsx
+++ b/src/components/typography/Chip.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import { View } from "react-native";
-import { IOColors, useIOExperimentalDesign } from "../../core";
+import {
+  IOColors,
+  IOVisualCostants,
+  useIOExperimentalDesign
+} from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -28,6 +32,9 @@ export const Chip = React.forwardRef<View, ChipProps>((props, ref) => {
   return useTypographyFactory<AllowedWeight, AllowedColors>(
     {
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "caption2" /* iOS only */,
       defaultWeight,
       defaultColor,
       font: isExperimental ? font : legacyFont,
diff --git a/src/components/typography/Label.tsx b/src/components/typography/Label.tsx
index 98c9c63a..5f4fd47d 100644
--- a/src/components/typography/Label.tsx
+++ b/src/components/typography/Label.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import { View } from "react-native";
-import { IOColors, IOColorsStatusForeground } from "../../core";
+import {
+  IOColors,
+  IOColorsStatusForeground,
+  IOVisualCostants,
+  useIOExperimentalDesign
+} from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import {
@@ -26,10 +31,15 @@ const labelDefaultcolor = "black";
  * `Label` typographic style
  */
 export const Label = React.forwardRef<View, LabelProps>(
-  ({ fontSize, ...props }, ref) =>
-    useTypographyFactory<AllowedWeight, AllowedColors>(
+  ({ fontSize, ...props }, ref) => {
+    const { isExperimental } = useIOExperimentalDesign();
+
+    return useTypographyFactory<AllowedWeight, AllowedColors>(
       {
         ...props,
+        allowFontScaling: isExperimental,
+        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+        dynamicTypeRamp: "footnote" /* iOS only */,
         defaultWeight: labelDefaultWeight,
         defaultColor: labelDefaultcolor,
         font,
@@ -43,5 +53,6 @@ export const Label = React.forwardRef<View, LabelProps>(
         }
       },
       ref
-    )
+    );
+  }
 );
diff --git a/src/components/typography/LabelLink.tsx b/src/components/typography/LabelLink.tsx
index c8421a6f..29e337b5 100644
--- a/src/components/typography/LabelLink.tsx
+++ b/src/components/typography/LabelLink.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign, type IOColors } from "../../core";
+import {
+  IOVisualCostants,
+  useIOExperimentalDesign,
+  type IOColors
+} from "../../core";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import {
@@ -36,6 +40,9 @@ export const LabelLink = React.forwardRef<View, LinkProps>((props, ref) => {
     {
       accessibilityRole: props.onPress ? "link" : undefined,
       ...props,
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
+      dynamicTypeRamp: "footnote" /* iOS only */,
       defaultWeight: linkDefaultWeight,
       defaultColor: isExperimental ? linkDefaultColor : linkLegacyDefaultColor,
       font,

From ded1a0c44b83d93f77702cf61b46842adced09de Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 24 Jun 2024 17:14:29 +0200
Subject: [PATCH 06/16] Allow font scaling to `ModuleIDP`

---
 src/components/modules/ModuleIDP.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/ModuleIDP.tsx b/src/components/modules/ModuleIDP.tsx
index cbcda514..0851b68e 100644
--- a/src/components/modules/ModuleIDP.tsx
+++ b/src/components/modules/ModuleIDP.tsx
@@ -9,7 +9,9 @@ import {
 import {
   IOColors,
   IOListItemLogoMargin,
-  useIOExperimentalDesign
+  IOVisualCostants,
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { makeFontStyleObject } from "../../utils/fonts";
@@ -27,7 +29,6 @@ interface ModuleIDP extends PressableModuleBaseProps {
 
 const styles = StyleSheet.create({
   idpName: {
-    color: IOColors["grey-700"],
     fontSize: 12,
     lineHeight: 16,
     alignSelf: "center",
@@ -63,6 +64,7 @@ export const ModuleIDP = ({
   testID,
   accessibilityLabel
 }: ModuleIDP) => {
+  const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
 
   // eslint-disable-next-line no-console
@@ -78,8 +80,11 @@ export const ModuleIDP = ({
       withLooseSpacing={withLooseSpacing}
     >
       <Text
+        allowFontScaling={isExperimental}
+        maxFontSizeMultiplier={IOVisualCostants.maxFontSizeMultiplier}
         style={[
           styles.idpName,
+          { color: IOColors[theme["textBody-tertiary"]] },
           isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
         ]}
         accessibilityLabel={accessibilityLabel ?? name}

From cc2530028fd5121b57de9d473728bf3c040ddd82 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 24 Jun 2024 17:40:13 +0200
Subject: [PATCH 07/16] Update jest snapshots

---
 .../__snapshots__/advice.test.tsx.snap        |  6 +-
 .../__snapshots__/badge.test.tsx.snap         |  4 +
 .../__snapshots__/banner.test.tsx.snap        |  6 +-
 .../__snapshots__/button.test.tsx.snap        | 10 ++-
 .../__snapshots__/listitem.test.tsx.snap      | 86 +++++++++++++++----
 .../__snapshots__/NumberPad.test.tsx.snap     | 20 +++++
 .../ToastNotification.test.tsx.snap           | 24 ++++--
 .../__snapshots__/typography.test.tsx.snap    | 61 +++++++++++++
 8 files changed, 191 insertions(+), 26 deletions(-)

diff --git a/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap b/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap
index 0d2ecdf9..678d98b6 100644
--- a/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap
+++ b/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap
@@ -84,10 +84,11 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
     }
   />
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     color="bluegrey"
     defaultColor="bluegrey"
     defaultWeight="Regular"
+    dynamicTypeRamp="body"
     font="TitilliumSansPro"
     fontStyle={
       {
@@ -95,6 +96,7 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
         "lineHeight": 24,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -204,6 +206,7 @@ exports[`Test Advice Components Advice Snapshot 1`] = `
     color="bluegrey"
     defaultColor="bluegrey"
     defaultWeight="Regular"
+    dynamicTypeRamp="body"
     font="TitilliumSansPro"
     fontStyle={
       {
@@ -211,6 +214,7 @@ exports[`Test Advice Components Advice Snapshot 1`] = `
         "lineHeight": 24,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
diff --git a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap
index 695b69ee..9cf687d6 100644
--- a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap
+++ b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap
@@ -20,7 +20,9 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
   }
 >
   <Text
+    allowFontScaling={true}
     ellipsizeMode="tail"
+    maxFontSizeMultiplier={1.25}
     numberOfLines={1}
     style={
       [
@@ -67,7 +69,9 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
   }
 >
   <Text
+    allowFontScaling={false}
     ellipsizeMode="tail"
+    maxFontSizeMultiplier={1.25}
     numberOfLines={1}
     style={
       [
diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
index c30a9a5e..c99907b8 100644
--- a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
+++ b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -72,10 +72,11 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
       }
     >
       <Text
-        allowFontScaling={false}
+        allowFontScaling={true}
         color="blueIO-850"
         defaultColor="black"
         defaultWeight="Regular"
+        dynamicTypeRamp="headline"
         font="ReadexPro"
         fontStyle={
           {
@@ -83,6 +84,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             "lineHeight": 24,
           }
         }
+        maxFontSizeMultiplier={1.25}
         style={
           [
             {
@@ -433,6 +435,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         color="blueIO-850"
         defaultColor="black"
         defaultWeight="Semibold"
+        dynamicTypeRamp="headline"
         font="TitilliumSansPro"
         fontStyle={
           {
@@ -440,6 +443,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             "lineHeight": 25,
           }
         }
+        maxFontSizeMultiplier={1.25}
         style={
           [
             {
diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
index 6344bc9c..54629e4c 100644
--- a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
+++ b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
@@ -68,10 +68,11 @@ exports[`Test Buttons Components - Experimental Enabled ButtonExtendedOutline Sn
       }
     >
       <Text
-        allowFontScaling={false}
+        allowFontScaling={true}
         color="black"
         defaultColor="black"
         defaultWeight="Regular"
+        dynamicTypeRamp="headline"
         font="ReadexPro"
         fontStyle={
           {
@@ -79,6 +80,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonExtendedOutline Sn
             "lineHeight": 24,
           }
         }
+        maxFontSizeMultiplier={1.25}
         style={
           [
             {
@@ -481,7 +483,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
           }
         }
         importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.3}
+        maxFontSizeMultiplier={1.25}
         numberOfLines={1}
         style={
           [
@@ -969,6 +971,7 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
         color="black"
         defaultColor="black"
         defaultWeight="Semibold"
+        dynamicTypeRamp="headline"
         font="TitilliumSansPro"
         fontStyle={
           {
@@ -976,6 +979,7 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
             "lineHeight": 25,
           }
         }
+        maxFontSizeMultiplier={1.25}
         style={
           [
             {
@@ -1375,7 +1379,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           }
         }
         importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.3}
+        maxFontSizeMultiplier={1.25}
         numberOfLines={1}
         style={
           [
diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
index 19d893f5..86afbfac 100644
--- a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
+++ b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
@@ -138,7 +138,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#FFFFFF",
           "borderColor": "#E8EBF1",
           "borderCurve": "continuous",
           "borderRadius": 8,
@@ -148,6 +147,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
           "paddingHorizontal": 16,
           "paddingVertical": 16,
         },
+        {
+          "borderColor": "#E8EBF1",
+        },
         false,
         {
           "transform": [
@@ -160,16 +162,20 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
     }
   >
     <Text
+      allowFontScaling={true}
+      maxFontSizeMultiplier={1.25}
       style={
         [
           {
             "alignSelf": "center",
-            "color": "#555C70",
             "flexShrink": 1,
             "fontSize": 12,
             "lineHeight": 16,
             "textTransform": "uppercase",
           },
+          {
+            "color": "#555C70",
+          },
           {
             "fontFamily": "Readex Pro",
             "fontStyle": "normal",
@@ -232,10 +238,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
         importantForAccessibility="yes"
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="grey-700"
           defaultColor="blue"
           defaultWeight="Bold"
+          dynamicTypeRamp="footnote"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -243,6 +250,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               "lineHeight": 21,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -262,10 +270,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
           label
         </Text>
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="black"
           defaultColor="black"
           defaultWeight="Regular"
+          dynamicTypeRamp="headline"
           font="ReadexPro"
           fontStyle={
             {
@@ -273,6 +282,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               "lineHeight": 24,
             }
           }
+          maxFontSizeMultiplier={1.25}
           numberOfLines={2}
           style={
             [
@@ -373,10 +383,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="grey-700"
           defaultColor="blue"
           defaultWeight="Bold"
+          dynamicTypeRamp="footnote"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -384,6 +395,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               "lineHeight": 21,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -403,10 +415,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
           label
         </Text>
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="blueIO-500"
           defaultColor="black"
           defaultWeight="Regular"
+          dynamicTypeRamp="headline"
           font="ReadexPro"
           fontStyle={
             {
@@ -414,6 +427,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               "lineHeight": 24,
             }
           }
+          maxFontSizeMultiplier={1.25}
           numberOfLines={2}
           style={
             [
@@ -581,10 +595,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="black"
           defaultColor="black"
           defaultWeight="Regular"
+          dynamicTypeRamp="headline"
           font="ReadexPro"
           fontStyle={
             {
@@ -592,6 +607,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
               "lineHeight": 24,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -818,10 +834,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="black"
           defaultColor="black"
           defaultWeight="Regular"
+          dynamicTypeRamp="headline"
           font="ReadexPro"
           fontStyle={
             {
@@ -829,6 +846,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               "lineHeight": 24,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -995,10 +1013,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="black"
           defaultColor="black"
           defaultWeight="Regular"
+          dynamicTypeRamp="footnote"
           font="ReadexPro"
           fontStyle={
             {
@@ -1006,6 +1025,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               "lineHeight": 21,
             }
           }
+          maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
             [
@@ -1105,10 +1125,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             }
           />
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             color="hanPurple-500"
             defaultColor="blue"
             defaultWeight="Bold"
+            dynamicTypeRamp="footnote"
             font="TitilliumSansPro"
             fontStyle={
               {
@@ -1116,6 +1137,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                 "lineHeight": 21,
               }
             }
+            maxFontSizeMultiplier={1.25}
             style={
               [
                 {
@@ -1152,10 +1174,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           }
         />
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="blueIO-500"
           defaultColor="black"
           defaultWeight="Regular"
+          dynamicTypeRamp="headline"
           font="ReadexPro"
           fontStyle={
             {
@@ -1163,6 +1186,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               "lineHeight": 24,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -1411,10 +1435,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="black"
           defaultColor="black"
           defaultWeight="Regular"
+          dynamicTypeRamp="footnote"
           font="ReadexPro"
           fontStyle={
             {
@@ -1422,6 +1447,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               "lineHeight": 21,
             }
           }
+          maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
             [
@@ -1458,10 +1484,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           }
         />
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           color="blueIO-500"
           defaultColor="black"
           defaultWeight="Regular"
+          dynamicTypeRamp="headline"
           font="ReadexPro"
           fontStyle={
             {
@@ -1469,6 +1496,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               "lineHeight": 24,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -1933,7 +1961,6 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#FFFFFF",
           "borderColor": "#E8EBF1",
           "borderCurve": "continuous",
           "borderRadius": 8,
@@ -1943,6 +1970,9 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
           "paddingHorizontal": 16,
           "paddingVertical": 16,
         },
+        {
+          "borderColor": "#E8EBF1",
+        },
         false,
         {
           "transform": [
@@ -1955,16 +1985,20 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
+      maxFontSizeMultiplier={1.25}
       style={
         [
           {
             "alignSelf": "center",
-            "color": "#555C70",
             "flexShrink": 1,
             "fontSize": 12,
             "lineHeight": 16,
             "textTransform": "uppercase",
           },
+          {
+            "color": "#555C70",
+          },
           {
             "fontFamily": "Titillium Sans Pro",
             "fontStyle": "normal",
@@ -2031,6 +2065,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
           color="grey-700"
           defaultColor="blue"
           defaultWeight="Bold"
+          dynamicTypeRamp="footnote"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -2038,6 +2073,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
               "lineHeight": 21,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -2061,6 +2097,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
           color="black"
           defaultColor="black"
           defaultWeight="Semibold"
+          dynamicTypeRamp="headline"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -2068,6 +2105,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
               "lineHeight": 25,
             }
           }
+          maxFontSizeMultiplier={1.25}
           numberOfLines={2}
           style={
             [
@@ -2172,6 +2210,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
           color="grey-700"
           defaultColor="blue"
           defaultWeight="Bold"
+          dynamicTypeRamp="footnote"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -2179,6 +2218,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               "lineHeight": 21,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -2202,6 +2242,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
           color="blue"
           defaultColor="black"
           defaultWeight="Semibold"
+          dynamicTypeRamp="headline"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -2209,6 +2250,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               "lineHeight": 25,
             }
           }
+          maxFontSizeMultiplier={1.25}
           numberOfLines={2}
           style={
             [
@@ -2380,6 +2422,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
           color="black"
           defaultColor="black"
           defaultWeight="Semibold"
+          dynamicTypeRamp="headline"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -2387,6 +2430,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               "lineHeight": 25,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -2617,6 +2661,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
           color="black"
           defaultColor="black"
           defaultWeight="Semibold"
+          dynamicTypeRamp="headline"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -2624,6 +2669,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               "lineHeight": 25,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -2794,6 +2840,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
           color="black"
           defaultColor="black"
           defaultWeight="Semibold"
+          dynamicTypeRamp="footnote"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -2801,6 +2848,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               "lineHeight": 21,
             }
           }
+          maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
             [
@@ -2904,6 +2952,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             color="hanPurple-500"
             defaultColor="blue"
             defaultWeight="Bold"
+            dynamicTypeRamp="footnote"
             font="TitilliumSansPro"
             fontStyle={
               {
@@ -2911,6 +2960,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                 "lineHeight": 21,
               }
             }
+            maxFontSizeMultiplier={1.25}
             style={
               [
                 {
@@ -2951,6 +3001,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
           color="blueIO-500"
           defaultColor="black"
           defaultWeight="Semibold"
+          dynamicTypeRamp="headline"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -2958,6 +3009,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               "lineHeight": 25,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -3210,6 +3262,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
           color="black"
           defaultColor="black"
           defaultWeight="Semibold"
+          dynamicTypeRamp="footnote"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -3217,6 +3270,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               "lineHeight": 21,
             }
           }
+          maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
             [
@@ -3257,6 +3311,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
           color="blueIO-500"
           defaultColor="black"
           defaultWeight="Semibold"
+          dynamicTypeRamp="headline"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -3264,6 +3319,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               "lineHeight": 25,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
diff --git a/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap b/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap
index 53a18d62..9f6fde49 100644
--- a/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap
+++ b/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap
@@ -85,6 +85,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -92,6 +93,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -174,6 +176,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -181,6 +184,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -263,6 +267,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -270,6 +275,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -375,6 +381,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -382,6 +389,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -464,6 +472,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -471,6 +480,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -553,6 +563,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -560,6 +571,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -665,6 +677,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -672,6 +685,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -754,6 +768,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -761,6 +776,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -843,6 +859,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -850,6 +867,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
@@ -1096,6 +1114,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
           color="white"
           defaultColor="bluegreyDark"
           defaultWeight="Semibold"
+          dynamicTypeRamp="title2"
           font="TitilliumSansPro"
           fontStyle={
             {
@@ -1103,6 +1122,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               "lineHeight": 34,
             }
           }
+          maxFontSizeMultiplier={1.25}
           style={
             [
               {
diff --git a/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap b/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap
index 98002c6b..ed063489 100644
--- a/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap
+++ b/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     color="turquoise-850"
     defaultColor="white"
     defaultWeight="Regular"
@@ -34,6 +34,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -149,7 +150,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     color="error-850"
     defaultColor="white"
     defaultWeight="Regular"
@@ -159,6 +160,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -207,7 +209,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     color="info-850"
     defaultColor="white"
     defaultWeight="Regular"
@@ -217,6 +219,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -265,7 +268,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     color="turquoise-850"
     defaultColor="white"
     defaultWeight="Regular"
@@ -275,6 +278,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -323,7 +327,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     color="success-850"
     defaultColor="white"
     defaultWeight="Regular"
@@ -333,6 +337,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -381,7 +386,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
   }
 >
   <Text
-    allowFontScaling={false}
+    allowFontScaling={true}
     color="warning-850"
     defaultColor="white"
     defaultWeight="Regular"
@@ -391,6 +396,7 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -449,6 +455,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -574,6 +581,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -632,6 +640,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -690,6 +699,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -748,6 +758,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
@@ -806,6 +817,7 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
         "fontSize": 16,
       }
     }
+    maxFontSizeMultiplier={1.25}
     style={
       [
         {
diff --git a/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap b/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap
index acd09485..ea002ea9 100644
--- a/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap
+++ b/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Test Typography Components Body Snapshot 1`] = `
   color="bluegrey"
   defaultColor="bluegrey"
   defaultWeight="Regular"
+  dynamicTypeRamp="body"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -13,6 +14,7 @@ exports[`Test Typography Components Body Snapshot 1`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -39,6 +41,7 @@ exports[`Test Typography Components BodyMonospace Snapshot 1`] = `
   color="bluegrey"
   defaultColor="bluegrey"
   defaultWeight="Medium"
+  dynamicTypeRamp="body"
   font="DMMono"
   fontStyle={
     {
@@ -46,6 +49,7 @@ exports[`Test Typography Components BodyMonospace Snapshot 1`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -78,6 +82,7 @@ exports[`Test Typography Components CTA Snapshot 1`] = `
       "fontSize": 16,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -103,6 +108,7 @@ exports[`Test Typography Components H1 Snapshot 1`] = `
   color="black"
   defaultColor="black"
   defaultWeight="Semibold"
+  dynamicTypeRamp="largeTitle"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -110,6 +116,7 @@ exports[`Test Typography Components H1 Snapshot 1`] = `
       "lineHeight": 43,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -136,6 +143,7 @@ exports[`Test Typography Components H1 Snapshot 2`] = `
   color="white"
   defaultColor="black"
   defaultWeight="Semibold"
+  dynamicTypeRamp="largeTitle"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -143,6 +151,7 @@ exports[`Test Typography Components H1 Snapshot 2`] = `
       "lineHeight": 43,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -169,6 +178,7 @@ exports[`Test Typography Components H2 Snapshot 1`] = `
   color="black"
   defaultColor="black"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title1"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -176,6 +186,7 @@ exports[`Test Typography Components H2 Snapshot 1`] = `
       "lineHeight": 40,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -202,6 +213,7 @@ exports[`Test Typography Components H3 Snapshot 1`] = `
   color="bluegreyDark"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title2"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -209,6 +221,7 @@ exports[`Test Typography Components H3 Snapshot 1`] = `
       "lineHeight": 34,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -235,6 +248,7 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
   color="bluegreyLight"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title2"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -242,6 +256,7 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
       "lineHeight": 34,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -268,6 +283,7 @@ exports[`Test Typography Components H3 Snapshot 3`] = `
   color="white"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title2"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -275,6 +291,7 @@ exports[`Test Typography Components H3 Snapshot 3`] = `
       "lineHeight": 34,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -301,6 +318,7 @@ exports[`Test Typography Components H3 Snapshot 4`] = `
   color="white"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title2"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -308,6 +326,7 @@ exports[`Test Typography Components H3 Snapshot 4`] = `
       "lineHeight": 34,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -334,6 +353,7 @@ exports[`Test Typography Components H3 Snapshot 5`] = `
   color="bluegreyDark"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title2"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -341,6 +361,7 @@ exports[`Test Typography Components H3 Snapshot 5`] = `
       "lineHeight": 34,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -367,6 +388,7 @@ exports[`Test Typography Components H4 Snapshot 1`] = `
   color="bluegreyDark"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title3"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -374,6 +396,7 @@ exports[`Test Typography Components H4 Snapshot 1`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -400,6 +423,7 @@ exports[`Test Typography Components H4 Snapshot 2`] = `
   color="blue"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title3"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -407,6 +431,7 @@ exports[`Test Typography Components H4 Snapshot 2`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -433,6 +458,7 @@ exports[`Test Typography Components H4 Snapshot 3`] = `
   color="white"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title3"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -440,6 +466,7 @@ exports[`Test Typography Components H4 Snapshot 3`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -466,6 +493,7 @@ exports[`Test Typography Components H4 Snapshot 4`] = `
   color="bluegreyDark"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title3"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -473,6 +501,7 @@ exports[`Test Typography Components H4 Snapshot 4`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -499,6 +528,7 @@ exports[`Test Typography Components H4 Snapshot 5`] = `
   color="bluegrey"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title3"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -506,6 +536,7 @@ exports[`Test Typography Components H4 Snapshot 5`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -532,6 +563,7 @@ exports[`Test Typography Components H4 Snapshot 6`] = `
   color="bluegreyLight"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title3"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -539,6 +571,7 @@ exports[`Test Typography Components H4 Snapshot 6`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -565,6 +598,7 @@ exports[`Test Typography Components H4 Snapshot 7`] = `
   color="white"
   defaultColor="bluegreyDark"
   defaultWeight="Semibold"
+  dynamicTypeRamp="title3"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -572,6 +606,7 @@ exports[`Test Typography Components H4 Snapshot 7`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -598,6 +633,7 @@ exports[`Test Typography Components H5 Snapshot 1`] = `
   color="black"
   defaultColor="black"
   defaultWeight="Semibold"
+  dynamicTypeRamp="subheadline"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -607,6 +643,7 @@ exports[`Test Typography Components H5 Snapshot 1`] = `
       "textTransform": "uppercase",
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -635,6 +672,7 @@ exports[`Test Typography Components H5 Snapshot 2`] = `
   color="bluegrey"
   defaultColor="black"
   defaultWeight="Semibold"
+  dynamicTypeRamp="subheadline"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -644,6 +682,7 @@ exports[`Test Typography Components H5 Snapshot 2`] = `
       "textTransform": "uppercase",
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -672,6 +711,7 @@ exports[`Test Typography Components H5 Snapshot 3`] = `
   color="blue"
   defaultColor="black"
   defaultWeight="Semibold"
+  dynamicTypeRamp="subheadline"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -681,6 +721,7 @@ exports[`Test Typography Components H5 Snapshot 3`] = `
       "textTransform": "uppercase",
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -709,6 +750,7 @@ exports[`Test Typography Components H5 Snapshot 4`] = `
   color="white"
   defaultColor="black"
   defaultWeight="Semibold"
+  dynamicTypeRamp="subheadline"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -718,6 +760,7 @@ exports[`Test Typography Components H5 Snapshot 4`] = `
       "textTransform": "uppercase",
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -746,6 +789,7 @@ exports[`Test Typography Components H6 Snapshot 1`] = `
   color="black"
   defaultColor="black"
   defaultWeight="Semibold"
+  dynamicTypeRamp="headline"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -753,6 +797,7 @@ exports[`Test Typography Components H6 Snapshot 1`] = `
       "lineHeight": 25,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -779,6 +824,7 @@ exports[`Test Typography Components Label Snapshot 1`] = `
   color="black"
   defaultColor="black"
   defaultWeight="Bold"
+  dynamicTypeRamp="footnote"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -786,6 +832,7 @@ exports[`Test Typography Components Label Snapshot 1`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -812,6 +859,7 @@ exports[`Test Typography Components Label Snapshot 2`] = `
   color="black"
   defaultColor="black"
   defaultWeight="Bold"
+  dynamicTypeRamp="footnote"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -819,6 +867,7 @@ exports[`Test Typography Components Label Snapshot 2`] = `
       "lineHeight": 24,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -845,6 +894,7 @@ exports[`Test Typography Components LabelSmall Snapshot 1`] = `
   color="blue"
   defaultColor="blue"
   defaultWeight="Bold"
+  dynamicTypeRamp="footnote"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -852,6 +902,7 @@ exports[`Test Typography Components LabelSmall Snapshot 1`] = `
       "lineHeight": 21,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -878,6 +929,7 @@ exports[`Test Typography Components LabelSmall Snapshot 2`] = `
   color="blue"
   defaultColor="blue"
   defaultWeight="Bold"
+  dynamicTypeRamp="footnote"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -885,6 +937,7 @@ exports[`Test Typography Components LabelSmall Snapshot 2`] = `
       "lineHeight": 21,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -911,6 +964,7 @@ exports[`Test Typography Components LabelSmall Snapshot 3`] = `
   color="bluegrey"
   defaultColor="blue"
   defaultWeight="Bold"
+  dynamicTypeRamp="footnote"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -918,6 +972,7 @@ exports[`Test Typography Components LabelSmall Snapshot 3`] = `
       "lineHeight": 21,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -944,6 +999,7 @@ exports[`Test Typography Components LabelSmall Snapshot 4`] = `
   color="red"
   defaultColor="blue"
   defaultWeight="Bold"
+  dynamicTypeRamp="footnote"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -951,6 +1007,7 @@ exports[`Test Typography Components LabelSmall Snapshot 4`] = `
       "lineHeight": 21,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -977,6 +1034,7 @@ exports[`Test Typography Components LabelSmall Snapshot 5`] = `
   color="white"
   defaultColor="blue"
   defaultWeight="Bold"
+  dynamicTypeRamp="footnote"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -984,6 +1042,7 @@ exports[`Test Typography Components LabelSmall Snapshot 5`] = `
       "lineHeight": 21,
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {
@@ -1010,6 +1069,7 @@ exports[`Test Typography Components Link Snapshot 1`] = `
   color="blue"
   defaultColor="blue"
   defaultWeight="Semibold"
+  dynamicTypeRamp="footnote"
   font="TitilliumSansPro"
   fontStyle={
     {
@@ -1018,6 +1078,7 @@ exports[`Test Typography Components Link Snapshot 1`] = `
       "textDecorationLine": "underline",
     }
   }
+  maxFontSizeMultiplier={1.25}
   style={
     [
       {

From f6fdfe932ec0eeb703f8cfb1a77341fb05bffde3 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 24 Jun 2024 17:46:11 +0200
Subject: [PATCH 08/16] Trim text box in the `Alert`, based on dynamic font
 size

---
 src/components/alert/Alert.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index f01f6cd3..d2e28e16 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from "react";
 import {
   GestureResponderEvent,
+  PixelRatio,
   Pressable,
   StyleSheet,
   Text,
@@ -174,7 +175,10 @@ export const Alert = ({
       have to put these magic numbers after manual adjustments.
       Tested on both Android and iOS. */}
       <View
-        style={[!title && { marginTop: -5 }, { marginBottom: -4, flex: 1 }]}
+        style={[
+          !title && { marginTop: -5 * PixelRatio.getFontScale() },
+          { marginBottom: -3 * PixelRatio.getFontScale(), flex: 1 }
+        ]}
       >
         {title && (
           <>

From 65f07480283fe611f8aaaedf85e646f93d9cc21f Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 25 Jun 2024 10:27:56 +0200
Subject: [PATCH 09/16] Add space between title and amount in the
 `ListItemAmount`

---
 example/src/pages/ListItem.tsx              | 2 +-
 src/components/listitems/ListItemAmount.tsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
index 2611b089..049758be 100644
--- a/example/src/pages/ListItem.tsx
+++ b/example/src/pages/ListItem.tsx
@@ -526,7 +526,7 @@ const renderListItemAmount = () => (
     <ListItemAmount label="Amount" valueString="€ 1.000,00" />
     <ListItemAmount
       iconName="creditCard"
-      label="Amount with card "
+      label="Amount with card"
       valueString="€ 1.000,00"
     />
   </ComponentViewerBox>
diff --git a/src/components/listitems/ListItemAmount.tsx b/src/components/listitems/ListItemAmount.tsx
index ca798295..e3e5ea9c 100644
--- a/src/components/listitems/ListItemAmount.tsx
+++ b/src/components/listitems/ListItemAmount.tsx
@@ -9,6 +9,7 @@ import {
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
+import { HSpacer } from "../spacer";
 import { H3, H6 } from "../typography";
 
 type ValueProps = ComponentProps<typeof H3>;
@@ -77,6 +78,7 @@ export const ListItemAmount = ({
           </View>
         )}
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+        <HSpacer size={4} />
         <H3
           weight={"Semibold"}
           color={"black"}

From b53b4937d0c8cbca2232b99453bfb24ef092edc2 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 25 Jun 2024 11:31:59 +0200
Subject: [PATCH 10/16] Add loading example of `ModulePaymentNotice`

---
 example/src/pages/Modules.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
index dc0c0cd6..c30b7297 100644
--- a/example/src/pages/Modules.tsx
+++ b/example/src/pages/Modules.tsx
@@ -102,6 +102,18 @@ const renderModulePaymentNotice = () => (
         />
       </View>
     </ComponentViewerBox>
+    <ComponentViewerBox name="ModulePaymentNotice, default variant, loading">
+      <View>
+        <ModulePaymentNotice
+          isLoading
+          onPress={mockFn}
+          paymentNoticeStatus="default"
+          paymentNoticeAmount="100,00 €"
+          title="Codice avviso"
+          subtitle="302012131232131"
+        />
+      </View>
+    </ComponentViewerBox>
   </>
 );
 

From 24a231c9bbc925545fcfd75207c780b9f231e619 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 25 Jun 2024 12:00:53 +0200
Subject: [PATCH 11/16] Add the new `ModuleSkeleton`, add it to two modules

---
 src/components/modules/ModuleCredential.tsx   | 30 ++++++++----
 .../modules/ModulePaymentNotice.tsx           | 49 ++++++++++++-------
 src/components/modules/ModuleSkeleton.tsx     | 30 ++++++++++++
 3 files changed, 80 insertions(+), 29 deletions(-)
 create mode 100644 src/components/modules/ModuleSkeleton.tsx

diff --git a/src/components/modules/ModuleCredential.tsx b/src/components/modules/ModuleCredential.tsx
index bc878621..01316b66 100644
--- a/src/components/modules/ModuleCredential.tsx
+++ b/src/components/modules/ModuleCredential.tsx
@@ -9,7 +9,6 @@ import {
 import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
-  IOModuleStyles,
   IOSelectionListItemVisualParams,
   IOStyles,
   IOVisualCostants,
@@ -19,6 +18,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LabelSmallAlt } from "../typography";
+import { ModuleSkeleton } from "./ModuleSkeleton";
 import {
   PressableModuleBase,
   PressableModuleBaseProps
@@ -90,15 +90,25 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
 };
 
 const ModuleCredentialSkeleton = () => (
-  <View style={IOModuleStyles.button}>
-    <View style={[IOStyles.row, IOStyles.alignCenter]}>
-      <View style={{ marginRight: IOVisualCostants.iconMargin }}>
-        <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
-      </View>
-      <Placeholder.Box animate="fade" width={96} height={19} radius={8} />
-    </View>
-    <Placeholder.Box animate="fade" width={64} height={22} radius={8} />
-  </View>
+  <ModuleSkeleton
+    startBlock={
+      <>
+        {/* Rewrite it using HStack and VStack, when 0.72 will be used in the main app:
+            <HStack alignItems="center" space={IOVisualCostants.iconMargin as IOSpacer}>
+              <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+              <Placeholder.Box animate="fade" width={96} height={16} radius={8} />
+            </HStack>
+      */}
+        <View style={{ marginRight: IOVisualCostants.iconMargin }}>
+          <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+        </View>
+        <Placeholder.Box animate="fade" width={96} height={16} radius={8} />
+      </>
+    }
+    endBlock={
+      <Placeholder.Box animate="fade" width={64} height={24} radius={8} />
+    }
+  />
 );
 
 const styles = StyleSheet.create({
diff --git a/src/components/modules/ModulePaymentNotice.tsx b/src/components/modules/ModulePaymentNotice.tsx
index 22e9cda3..0b208182 100644
--- a/src/components/modules/ModulePaymentNotice.tsx
+++ b/src/components/modules/ModulePaymentNotice.tsx
@@ -5,7 +5,8 @@ import {
   IOListItemVisualParams,
   IOModuleStyles,
   IOStyles,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { getAccessibleAmountText } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
@@ -14,6 +15,7 @@ import { Icon } from "../icons";
 import { VSpacer } from "../spacer";
 import { H6, LabelSmall, LabelSmallAlt } from "../typography";
 import { PressableModuleBase } from "./PressableModuleBase";
+import { ModuleSkeleton } from "./ModuleSkeleton";
 
 export type PaymentNoticeStatus =
   | "default"
@@ -61,6 +63,7 @@ const ModulePaymentNoticeContent = ({
   paymentNoticeAmount,
   badgeText = ""
 }: Omit<ModulePaymentNoticeProps, "isLoading" | "onPress" | "testID">) => {
+  const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
 
   const AmountOrBadgeComponent = () => {
@@ -94,18 +97,21 @@ const ModulePaymentNoticeContent = ({
     <>
       <View style={{ flexGrow: 1, flexShrink: 1, paddingEnd: 8 }}>
         {title && (
-          <LabelSmall numberOfLines={1} weight="Regular" color="bluegrey">
+          <LabelSmall
+            numberOfLines={1}
+            weight="Regular"
+            color={theme["textBody-tertiary"]}
+          >
             {title}
           </LabelSmall>
         )}
-        {isExperimental ? (
-          <LabelSmallAlt color={"blueIO-500"} numberOfLines={2}>
+        {subtitle && (
+          <LabelSmallAlt
+            color={theme["interactiveElem-default"]}
+            numberOfLines={2}
+          >
             {subtitle}
           </LabelSmallAlt>
-        ) : (
-          <LabelSmall weight="Semibold" color={"bluegrey"} numberOfLines={2}>
-            {subtitle}
-          </LabelSmall>
         )}
       </View>
       <View style={styles.rightSection}>
@@ -140,7 +146,7 @@ export const ModulePaymentNotice = ({
   ...rest
 }: ModulePaymentNoticeProps) => {
   if (isLoading) {
-    return <SkeletonComponent />;
+    return <ModulePaymentNoticeSkeleton />;
   }
 
   return (
@@ -154,15 +160,20 @@ export const ModulePaymentNotice = ({
   );
 };
 
-const SkeletonComponent = () => (
-  <View style={IOModuleStyles.button} accessible={false}>
-    <View style={IOStyles.flex}>
-      <Placeholder.Box animate="fade" radius={8} width={179} height={16} />
-      <VSpacer size={4} />
-      <Placeholder.Box animate="fade" radius={8} width={121} height={13} />
-    </View>
-    <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+const ModulePaymentNoticeSkeleton = () => (
+  <ModuleSkeleton
+    startBlock={
+      <React.Fragment>
+        {/* Rewrite it using HStack and VStack */}
+        <View>
+          <Placeholder.Box animate="fade" radius={8} width={121} height={13} />
+          <VSpacer size={8} />
+          <Placeholder.Box animate="fade" radius={8} width={179} height={16} />
+        </View>
+      </React.Fragment>
+    }
+    endBlock={
       <Placeholder.Box animate="fade" radius={8} width={62} height={16} />
-    </View>
-  </View>
+    }
+  />
 );
diff --git a/src/components/modules/ModuleSkeleton.tsx b/src/components/modules/ModuleSkeleton.tsx
new file mode 100644
index 00000000..b744c8e3
--- /dev/null
+++ b/src/components/modules/ModuleSkeleton.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { View } from "react-native";
+import { IOColors, IOModuleStyles, useIOTheme } from "../../core";
+
+type ModuleSkeletonProps = {
+  startBlock: React.ReactNode;
+  endBlock?: React.ReactNode;
+};
+
+export const ModuleSkeleton = ({
+  startBlock,
+  endBlock
+}: ModuleSkeletonProps) => {
+  const theme = useIOTheme();
+
+  return (
+    <View
+      style={[
+        IOModuleStyles.button,
+        { borderColor: IOColors[theme["cardBorder-default"]] }
+      ]}
+      accessible={false}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
+        {startBlock}
+      </View>
+      {endBlock}
+    </View>
+  );
+};

From 148422c9d46eb3fc92aab0719b18dc79c101589e Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 25 Jun 2024 12:10:46 +0200
Subject: [PATCH 12/16] Rename `ModuleSkeleton` into `ModuleStatic`

---
 example/src/pages/Modules.tsx                 | 10 +++++
 src/components/modules/ModuleCheckout.tsx     | 44 +++++++++----------
 src/components/modules/ModuleCredential.tsx   |  4 +-
 .../modules/ModulePaymentNotice.tsx           |  6 +--
 .../{ModuleSkeleton.tsx => ModuleStatic.tsx}  |  7 +--
 5 files changed, 38 insertions(+), 33 deletions(-)
 rename src/components/modules/{ModuleSkeleton.tsx => ModuleStatic.tsx} (82%)

diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
index c30b7297..e99d7b9e 100644
--- a/example/src/pages/Modules.tsx
+++ b/example/src/pages/Modules.tsx
@@ -163,6 +163,16 @@ const renderModuleCheckout = () => (
         onPress={modulePress}
       />
     </ComponentViewerBox>
+    <ComponentViewerBox name="ModuleCheckout, no CTA, with image">
+      <ModuleCheckout
+        image={{
+          uri: "https://assets.cdn.platform.pagopa.it/apm/bancomatpay.png"
+        }}
+        title="3,50 $"
+        subtitle="Piú o meno"
+        onPress={modulePress}
+      />
+    </ComponentViewerBox>
     <ComponentViewerBox name="ModuleCheckout, loading">
       <ModuleCheckout isLoading ctaText="Loading" />
     </ComponentViewerBox>
diff --git a/src/components/modules/ModuleCheckout.tsx b/src/components/modules/ModuleCheckout.tsx
index e85556c4..87b634bc 100644
--- a/src/components/modules/ModuleCheckout.tsx
+++ b/src/components/modules/ModuleCheckout.tsx
@@ -8,16 +8,15 @@ import {
 } from "react-native";
 import Placeholder from "rn-placeholder";
 import {
-  IOModuleStyles,
   IOSelectionListItemVisualParams,
   IOSpacingScale,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { ButtonLink } from "../buttons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HSpacer, VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
+import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
 type LoadingProps = {
@@ -45,7 +44,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   const theme = useIOTheme();
 
   if (props.isLoading) {
-    return <LoadingVersion {...props} />;
+    return <ModuleCheckoutSkeleton />;
   }
 
   const { paymentLogo, image } = props;
@@ -71,7 +70,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
     <>
       {imageComponent}
       <View style={styles.content}>
-        <H6>{props.title}</H6>
+        <H6 color={theme["textBody-default"]}>{props.title}</H6>
         {props.subtitle && (
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
             {props.subtitle}
@@ -95,11 +94,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
     );
   }
 
-  return (
-    <View style={IOModuleStyles.button}>
-      <ModuleBaseContent />
-    </View>
-  );
+  return <ModuleStatic startBlock={<ModuleBaseContent />} />;
 };
 
 const ModuleAction = ({ ctaText }: Pick<ModuleCheckoutProps, "ctaText">) => (
@@ -112,19 +107,24 @@ const ModuleAction = ({ ctaText }: Pick<ModuleCheckoutProps, "ctaText">) => (
   </View>
 );
 
-const LoadingVersion = ({ ctaText }: LoadingProps) => (
-  <View style={IOModuleStyles.button}>
-    <View style={[IOStyles.row, IOStyles.alignCenter]}>
-      <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
-      <HSpacer size={8} />
-      <View>
-        <Placeholder.Box animate="fade" radius={8} height={20} width={170} />
-        <VSpacer size={8} />
-        <Placeholder.Box animate="fade" radius={8} height={16} width={116} />
-      </View>
-    </View>
-    <ModuleAction ctaText={ctaText} />
-  </View>
+const ModuleCheckoutSkeleton = () => (
+  <ModuleStatic
+    startBlock={
+      <React.Fragment>
+        {/* Rewrite it using HStack and VStack */}
+        <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
+        <HSpacer size={8} />
+        <View>
+          <Placeholder.Box animate="fade" radius={8} height={20} width={170} />
+          <VSpacer size={8} />
+          <Placeholder.Box animate="fade" radius={8} height={16} width={116} />
+        </View>
+      </React.Fragment>
+    }
+    endBlock={
+      <Placeholder.Box animate="fade" width={64} height={16} radius={8} />
+    }
+  />
 );
 
 const imageMarginRight: IOSpacingScale = 12;
diff --git a/src/components/modules/ModuleCredential.tsx b/src/components/modules/ModuleCredential.tsx
index 01316b66..cf1ddb67 100644
--- a/src/components/modules/ModuleCredential.tsx
+++ b/src/components/modules/ModuleCredential.tsx
@@ -18,7 +18,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LabelSmallAlt } from "../typography";
-import { ModuleSkeleton } from "./ModuleSkeleton";
+import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
   PressableModuleBaseProps
@@ -90,7 +90,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
 };
 
 const ModuleCredentialSkeleton = () => (
-  <ModuleSkeleton
+  <ModuleStatic
     startBlock={
       <>
         {/* Rewrite it using HStack and VStack, when 0.72 will be used in the main app:
diff --git a/src/components/modules/ModulePaymentNotice.tsx b/src/components/modules/ModulePaymentNotice.tsx
index 0b208182..6e6a4406 100644
--- a/src/components/modules/ModulePaymentNotice.tsx
+++ b/src/components/modules/ModulePaymentNotice.tsx
@@ -3,8 +3,6 @@ import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
-  IOModuleStyles,
-  IOStyles,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
@@ -14,8 +12,8 @@ import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { VSpacer } from "../spacer";
 import { H6, LabelSmall, LabelSmallAlt } from "../typography";
+import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
-import { ModuleSkeleton } from "./ModuleSkeleton";
 
 export type PaymentNoticeStatus =
   | "default"
@@ -161,7 +159,7 @@ export const ModulePaymentNotice = ({
 };
 
 const ModulePaymentNoticeSkeleton = () => (
-  <ModuleSkeleton
+  <ModuleStatic
     startBlock={
       <React.Fragment>
         {/* Rewrite it using HStack and VStack */}
diff --git a/src/components/modules/ModuleSkeleton.tsx b/src/components/modules/ModuleStatic.tsx
similarity index 82%
rename from src/components/modules/ModuleSkeleton.tsx
rename to src/components/modules/ModuleStatic.tsx
index b744c8e3..8d76ccea 100644
--- a/src/components/modules/ModuleSkeleton.tsx
+++ b/src/components/modules/ModuleStatic.tsx
@@ -2,15 +2,12 @@ import * as React from "react";
 import { View } from "react-native";
 import { IOColors, IOModuleStyles, useIOTheme } from "../../core";
 
-type ModuleSkeletonProps = {
+type ModuleStaticProps = {
   startBlock: React.ReactNode;
   endBlock?: React.ReactNode;
 };
 
-export const ModuleSkeleton = ({
-  startBlock,
-  endBlock
-}: ModuleSkeletonProps) => {
+export const ModuleStatic = ({ startBlock, endBlock }: ModuleStaticProps) => {
   const theme = useIOTheme();
 
   return (

From 7e94aa742c5eefd247a602c7a6e3e263fa9229da Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 25 Jun 2024 13:42:13 +0200
Subject: [PATCH 13/16] Replace legacy code with `ModuleStatic` in the
 `ModuleNavigation`

---
 src/components/modules/ModuleCredential.tsx   |  2 +-
 src/components/modules/ModuleNavigation.tsx   | 35 ++++++++++---------
 .../modules/ModulePaymentNotice.tsx           |  2 +-
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/modules/ModuleCredential.tsx b/src/components/modules/ModuleCredential.tsx
index cf1ddb67..19df1283 100644
--- a/src/components/modules/ModuleCredential.tsx
+++ b/src/components/modules/ModuleCredential.tsx
@@ -106,7 +106,7 @@ const ModuleCredentialSkeleton = () => (
       </>
     }
     endBlock={
-      <Placeholder.Box animate="fade" width={64} height={24} radius={8} />
+      <Placeholder.Box animate="fade" width={64} height={24} radius={16} />
     }
   />
 );
diff --git a/src/components/modules/ModuleNavigation.tsx b/src/components/modules/ModuleNavigation.tsx
index 034ba085..53ef8801 100644
--- a/src/components/modules/ModuleNavigation.tsx
+++ b/src/components/modules/ModuleNavigation.tsx
@@ -9,9 +9,7 @@ import {
 import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
-  IOModuleStyles,
   IOSelectionListItemVisualParams,
-  IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
@@ -20,6 +18,7 @@ import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { VSpacer } from "../spacer";
 import { Chip, LabelSmallAlt } from "../typography";
+import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
   PressableModuleBaseProps
@@ -77,7 +76,7 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
         >
           {title}
         </LabelSmallAlt>
-        {subtitle && <Chip color="grey-700">{subtitle}</Chip>}
+        {subtitle && <Chip color={theme["textBody-tertiary"]}>{subtitle}</Chip>}
       </View>
       <View>
         {badge ? (
@@ -95,19 +94,23 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
 };
 
 const ModuleNavigationSkeleton = () => (
-  <View style={IOModuleStyles.button}>
-    <View style={[IOStyles.row, IOStyles.alignCenter]}>
-      <View style={{ marginRight: IOVisualCostants.iconMargin }}>
-        <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
-      </View>
-      <View style={{ paddingRight: 8 }}>
-        <Placeholder.Box animate="fade" width={96} height={19} radius={8} />
-        <VSpacer size={4} />
-        <Placeholder.Box animate="fade" width={180} height={16} radius={8} />
-      </View>
-    </View>
-    <Placeholder.Box animate="fade" width={64} height={22} radius={8} />
-  </View>
+  <ModuleStatic
+    startBlock={
+      <>
+        <View style={{ marginRight: IOVisualCostants.iconMargin }}>
+          <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+        </View>
+        <View style={{ paddingRight: 8 }}>
+          <Placeholder.Box animate="fade" width={96} height={16} radius={8} />
+          <VSpacer size={4} />
+          <Placeholder.Box animate="fade" width={160} height={12} radius={8} />
+        </View>
+      </>
+    }
+    endBlock={
+      <Placeholder.Box animate="fade" width={64} height={24} radius={16} />
+    }
+  />
 );
 
 const styles = StyleSheet.create({
diff --git a/src/components/modules/ModulePaymentNotice.tsx b/src/components/modules/ModulePaymentNotice.tsx
index 6e6a4406..22d825df 100644
--- a/src/components/modules/ModulePaymentNotice.tsx
+++ b/src/components/modules/ModulePaymentNotice.tsx
@@ -171,7 +171,7 @@ const ModulePaymentNoticeSkeleton = () => (
       </React.Fragment>
     }
     endBlock={
-      <Placeholder.Box animate="fade" radius={8} width={62} height={16} />
+      <Placeholder.Box animate="fade" radius={16} width={62} height={24} />
     }
   />
 );

From 779b8a9685f0ccc935bb24b892606e674197f7ce Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 25 Jun 2024 15:10:25 +0200
Subject: [PATCH 14/16] =?UTF-8?q?Refactor=20`ModuleAttachment`=20to=20use?=
 =?UTF-8?q?=C2=A0`PressableModuleBase`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modules/ModuleAttachment.tsx | 170 +++++---------------
 src/components/modules/ModuleStatic.tsx     |  45 +++++-
 2 files changed, 74 insertions(+), 141 deletions(-)

diff --git a/src/components/modules/ModuleAttachment.tsx b/src/components/modules/ModuleAttachment.tsx
index 5d6b1d96..4c2b315d 100644
--- a/src/components/modules/ModuleAttachment.tsx
+++ b/src/components/modules/ModuleAttachment.tsx
@@ -1,39 +1,20 @@
 import React, { useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  PressableProps,
-  StyleSheet,
-  View
-} from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import { GestureResponderEvent, PressableProps, View } from "react-native";
 import Placeholder from "rn-placeholder";
-import {
-  IOColors,
-  IOListItemVisualParams,
-  IOScaleValues,
-  IOSpringValues,
-  useIOTheme
-} from "../../core";
+import { IOListItemVisualParams, useIOTheme } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { VSpacer } from "../spacer";
 import { LabelSmallAlt } from "../typography";
+import { ModuleStatic } from "./ModuleStatic";
+import { PressableModuleBase } from "./PressableModuleBase";
 
 type PartialProps = WithTestID<{
   title: string;
   format: "doc" | "pdf";
   isLoading?: boolean;
-  loadingAccessibilityLabel?: string;
   isFetching?: boolean;
   fetchingAccessibilityLabel?: string;
   onPress: (event: GestureResponderEvent) => void;
@@ -45,35 +26,6 @@ export type ModuleAttachmentProps = PartialProps &
     "onPress" | "accessibilityLabel" | "disabled" | "testID"
   >;
 
-type SkeletonComponentProps = {
-  loadingAccessibilityLabel?: string;
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderRadius: 8,
-    borderColor: IOColors.bluegreyLight,
-    backgroundColor: IOColors.white,
-    borderStyle: "solid",
-    borderWidth: 1
-  },
-  innerContent: {
-    alignItems: "flex-start",
-    flex: 1,
-    flexDirection: "column"
-  },
-  rightSection: {
-    marginLeft: IOListItemVisualParams.iconMargin,
-    alignItems: "center"
-  }
-});
-
-const DISABLED_OPACITY = 0.5;
-
 const ModuleAttachmentContent = ({
   isFetching,
   format,
@@ -84,11 +36,13 @@ const ModuleAttachmentContent = ({
   "isFetching" | "format" | "title" | "testID"
 >) => {
   const theme = useIOTheme();
+
   const IconOrActivityIndicatorComponent = () => {
     if (isFetching) {
       const activityIndicatorTestId = testID
         ? `${testID}_activityIndicator`
         : undefined;
+
       return (
         <LoadingSpinner
           testID={activityIndicatorTestId}
@@ -108,9 +62,9 @@ const ModuleAttachmentContent = ({
 
   return (
     <>
-      <View style={styles.innerContent}>
+      <View style={{ alignItems: "flex-start", flexShrink: 1 }}>
         <LabelSmallAlt
-          numberOfLines={1}
+          numberOfLines={2}
           color={theme["interactiveElem-default"]}
         >
           {title}
@@ -118,7 +72,7 @@ const ModuleAttachmentContent = ({
         <VSpacer size={4} />
         <Badge text={format.toUpperCase()} variant="default" />
       </View>
-      <View style={styles.rightSection}>
+      <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
         <IconOrActivityIndicatorComponent />
       </View>
     </>
@@ -135,7 +89,6 @@ const ModuleAttachmentContent = ({
  * @param {string}   format - Badge content. PDF or DOC.
  * @param {boolean}  isLoading - If true, displays a skeleton loading component.
  * @param {boolean}  isFetching - If true, displays an activity indicator.
- * @param {string}   loadingAccessibilityLabel - Optional accessibility label to use during loading.
  * @param {function} onPress - The function to be executed when the item is pressed.
  * @param {string}   testID - The test ID for testing purposes.
  * @param {string}   title - The title text to display.
@@ -148,44 +101,10 @@ export const ModuleAttachment = ({
   format,
   isLoading = false,
   isFetching = false,
-  loadingAccessibilityLabel,
   onPress,
   testID,
   title
 }: ModuleAttachmentProps) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
-
-  const scaleTraversed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      scaleTraversed.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 handleOnPress = useCallback(
     (event: GestureResponderEvent) => {
       if (isFetching) {
@@ -197,61 +116,46 @@ export const ModuleAttachment = ({
   );
 
   if (isLoading) {
-    return (
-      <SkeletonComponent
-        loadingAccessibilityLabel={loadingAccessibilityLabel}
-      />
-    );
+    return <ModuleAttachmentSkeleton />;
   }
 
   const pressableAccessibilityLabel =
     (isFetching && !!fetchingAccessibilityLabel
       ? fetchingAccessibilityLabel
       : accessibilityLabel) ?? title;
-  return (
-    <Pressable
+
+  return disabled || isFetching ? (
+    <ModuleStatic disabled={disabled}>
+      <ModuleAttachmentContent
+        isFetching={isFetching}
+        title={title}
+        format={format}
+      />
+    </ModuleStatic>
+  ) : (
+    <PressableModuleBase
       testID={testID}
       onPress={handleOnPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      accessible={true}
-      accessibilityRole={"button"}
       accessibilityHint={format}
       accessibilityLabel={pressableAccessibilityLabel}
-      disabled={disabled || isFetching}
     >
-      <Animated.View
-        style={[
-          styles.button,
-          animatedStyle,
-          { opacity: disabled ? DISABLED_OPACITY : 1 }
-        ]}
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no-hide-descendants"
-      >
-        <ModuleAttachmentContent
-          isFetching={isFetching}
-          title={title}
-          format={format}
-        />
-      </Animated.View>
-    </Pressable>
+      <ModuleAttachmentContent
+        isFetching={isFetching}
+        title={title}
+        format={format}
+      />
+    </PressableModuleBase>
   );
 };
 
-const SkeletonComponent = ({
-  loadingAccessibilityLabel
-}: SkeletonComponentProps) => (
-  <View
-    style={styles.button}
-    accessible={true}
-    accessibilityState={{ busy: true }}
-    accessibilityLabel={loadingAccessibilityLabel}
-  >
-    <View style={styles.innerContent}>
-      <Placeholder.Box animate="fade" radius={8} width={107} height={22} />
-      <VSpacer size={4} />
-      <Placeholder.Box animate="fade" radius={8} width={44} height={22} />
-    </View>
-  </View>
+const ModuleAttachmentSkeleton = () => (
+  <ModuleStatic
+    startBlock={
+      <View>
+        <Placeholder.Box animate="fade" radius={8} width={107} height={16} />
+        <VSpacer size={4} />
+        <Placeholder.Box animate="fade" radius={16} width={44} height={20} />
+      </View>
+    }
+  />
 );
diff --git a/src/components/modules/ModuleStatic.tsx b/src/components/modules/ModuleStatic.tsx
index 8d76ccea..52ce32a3 100644
--- a/src/components/modules/ModuleStatic.tsx
+++ b/src/components/modules/ModuleStatic.tsx
@@ -1,27 +1,56 @@
 import * as React from "react";
-import { View } from "react-native";
+import { PressableProps, View } from "react-native";
 import { IOColors, IOModuleStyles, useIOTheme } from "../../core";
 
-type ModuleStaticProps = {
+type ModuleStaticProps =
+  | ModuleStaticSingleBlockProps
+  | ModuleStaticMultipleBlockProps;
+
+type ModuleStaticMultipleBlockProps = {
   startBlock: React.ReactNode;
   endBlock?: React.ReactNode;
+  children?: never;
+  disabled?: PressableProps["disabled"];
+};
+
+type ModuleStaticSingleBlockProps = {
+  startBlock?: never;
+  endBlock?: never;
+  children: React.ReactNode;
+  disabled?: PressableProps["disabled"];
 };
 
-export const ModuleStatic = ({ startBlock, endBlock }: ModuleStaticProps) => {
+const DISABLED_OPACITY = 0.5;
+
+export const ModuleStatic = ({
+  disabled = false,
+  startBlock,
+  endBlock,
+  children
+}: ModuleStaticProps) => {
   const theme = useIOTheme();
 
   return (
     <View
       style={[
         IOModuleStyles.button,
-        { borderColor: IOColors[theme["cardBorder-default"]] }
+        {
+          borderColor: IOColors[theme["cardBorder-default"]],
+          opacity: disabled ? DISABLED_OPACITY : 1
+        }
       ]}
       accessible={false}
     >
-      <View style={{ flexDirection: "row", alignItems: "center" }}>
-        {startBlock}
-      </View>
-      {endBlock}
+      {startBlock && (
+        <React.Fragment>
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            {startBlock}
+          </View>
+          {endBlock}
+        </React.Fragment>
+      )}
+
+      {children}
     </View>
   );
 };

From 30a869f02341c8c439331ac2221c4eda77669a78 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 25 Jun 2024 15:11:13 +0200
Subject: [PATCH 15/16] Improve `ModuleCheckout` code

---
 example/src/pages/Modules.tsx             |  4 +-
 src/components/modules/ModuleCheckout.tsx | 47 ++++++++---------------
 2 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
index e99d7b9e..2b6c9f71 100644
--- a/example/src/pages/Modules.tsx
+++ b/example/src/pages/Modules.tsx
@@ -174,7 +174,7 @@ const renderModuleCheckout = () => (
       />
     </ComponentViewerBox>
     <ComponentViewerBox name="ModuleCheckout, loading">
-      <ModuleCheckout isLoading ctaText="Loading" />
+      <ModuleCheckout isLoading />
     </ComponentViewerBox>
   </>
 );
@@ -183,7 +183,7 @@ const renderModuleAttachment = () => (
   <>
     <ComponentViewerBox name="ModuleAttachment, pdf variant">
       <ModuleAttachment
-        title="Documento.pdf"
+        title="Documento dal nome molto molto molto lungo.pdf"
         format="pdf"
         onPress={modulePress}
       />
diff --git a/src/components/modules/ModuleCheckout.tsx b/src/components/modules/ModuleCheckout.tsx
index 87b634bc..bf7e5858 100644
--- a/src/components/modules/ModuleCheckout.tsx
+++ b/src/components/modules/ModuleCheckout.tsx
@@ -21,7 +21,6 @@ import { PressableModuleBase } from "./PressableModuleBase";
 
 type LoadingProps = {
   isLoading: true;
-  ctaText?: string;
 };
 
 type ImageProps =
@@ -47,7 +46,7 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
     return <ModuleCheckoutSkeleton />;
   }
 
-  const { paymentLogo, image } = props;
+  const { paymentLogo, image, title, subtitle, ctaText, onPress } = props;
 
   const imageComponent = (
     <>
@@ -70,43 +69,31 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
     <>
       {imageComponent}
       <View style={styles.content}>
-        <H6 color={theme["textBody-default"]}>{props.title}</H6>
-        {props.subtitle && (
+        <H6 color={theme["textBody-default"]}>{title}</H6>
+        {subtitle && (
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-            {props.subtitle}
+            {subtitle}
           </LabelSmall>
         )}
       </View>
     </>
   );
 
-  if (props.ctaText) {
-    return (
-      <PressableModuleBase onPress={props.onPress}>
-        <ModuleBaseContent />
-        {props.ctaText && (
-          <>
-            <HSpacer size={4} />
-            <ModuleAction ctaText={props.ctaText} />
-          </>
-        )}
-      </PressableModuleBase>
-    );
-  }
-
-  return <ModuleStatic startBlock={<ModuleBaseContent />} />;
+  return ctaText ? (
+    <PressableModuleBase onPress={onPress}>
+      <ModuleBaseContent />
+      <HSpacer size={4} />
+      <View pointerEvents="none">
+        <ButtonLink label={ctaText} onPress={() => null} />
+      </View>
+    </PressableModuleBase>
+  ) : (
+    <ModuleStatic>
+      <ModuleBaseContent />
+    </ModuleStatic>
+  );
 };
 
-const ModuleAction = ({ ctaText }: Pick<ModuleCheckoutProps, "ctaText">) => (
-  <View pointerEvents="none">
-    <ButtonLink
-      label={ctaText ?? ""}
-      accessibilityLabel={ctaText}
-      onPress={() => null}
-    />
-  </View>
-);
-
 const ModuleCheckoutSkeleton = () => (
   <ModuleStatic
     startBlock={

From a77a9d81c77598f65f7e096206ac17a06d0e5721 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 25 Jun 2024 15:41:28 +0200
Subject: [PATCH 16/16] Remove `loadingAccessibilityLabel` from
 `ModuleAttachment` story

---
 stories/components/modules/ModuleAttachment.stories.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/stories/components/modules/ModuleAttachment.stories.ts b/stories/components/modules/ModuleAttachment.stories.ts
index 1fd44a11..2e01bc70 100644
--- a/stories/components/modules/ModuleAttachment.stories.ts
+++ b/stories/components/modules/ModuleAttachment.stories.ts
@@ -27,7 +27,6 @@ export const Primary: Story = {
     title: "Title",
     format: "pdf",
     accessibilityLabel: "accessibilityLabel",
-    loadingAccessibilityLabel: "loadingAccessibilityLabel",
     isFetching: false,
     fetchingAccessibilityLabel: "fetchingAccessibilityLabel",
     disabled: false,