@pagopa/io-app-design-system 1.42.0 → 2.0.0-0

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

@@ -73,33 +73,21 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
     >
       <Text
         allowFontScaling={true}
-        color="blueIO-850"
-        defaultColor="black"
-        defaultWeight="Regular"
         dynamicTypeRamp="headline"
-        font="ReadexPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-            "lineHeight": 24,
-          }
-        }
         maxFontSizeMultiplier={1.25}
         style={
           [
-            {
-              "fontSize": 16,
-              "lineHeight": 24,
-            },
+            {},
             {
               "color": "#031344",
               "fontFamily": "Readex Pro",
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "lineHeight": 24,
             },
           ]
         }
-        weight="Regular"
       >
         Banner title
       </Text>
@@ -197,18 +185,18 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
               allowFontScaling={true}
               ellipsizeMode="tail"
               importantForAccessibility="no-hide-descendants"
-              maxFontSizeMultiplier={1.3}
+              maxFontSizeMultiplier={1.25}
               numberOfLines={1}
               style={
                 [
+                  {},
                   {
+                    "color": "#0E0F13",
                     "fontFamily": "Readex Pro",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                  },
-                  {
-                    "color": "#0B3EE3",
+                    "lineHeight": undefined,
                   },
                   {
                     "color": undefined,
@@ -434,33 +422,21 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
     >
       <Text
         allowFontScaling={false}
-        color="blueIO-850"
-        defaultColor="black"
-        defaultWeight="Semibold"
         dynamicTypeRamp="headline"
-        font="TitilliumSansPro"
-        fontStyle={
-          {
-            "fontSize": 18,
-            "lineHeight": 25,
-          }
-        }
         maxFontSizeMultiplier={1.25}
         style={
           [
-            {
-              "fontSize": 18,
-              "lineHeight": 25,
-            },
+            {},
             {
               "color": "#031344",
               "fontFamily": "Titillium Sans Pro",
+              "fontSize": 18,
               "fontStyle": "normal",
               "fontWeight": "600",
+              "lineHeight": 25,
             },
           ]
         }
-        weight="Semibold"
       >
         Banner title
       </Text>
@@ -558,18 +534,18 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
               allowFontScaling={false}
               ellipsizeMode="tail"
               importantForAccessibility="no-hide-descendants"
-              maxFontSizeMultiplier={1.3}
+              maxFontSizeMultiplier={1.25}
               numberOfLines={1}
               style={
                 [
+                  {},
                   {
+                    "color": "#0E0F13",
                     "fontFamily": "Titillium Sans Pro",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "700",
-                  },
-                  {
-                    "color": "#0073E6",
+                    "lineHeight": undefined,
                   },
                   {
                     "color": undefined,

package/src/components/buttons/ButtonLink.tsx

@@ -1,10 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -23,7 +18,6 @@ import {
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
@@ -32,7 +26,7 @@ import {
   IconClassComponent
 } from "../icons";
 import { HSpacer } from "../spacer/Spacer";
-import { buttonTextFontSize } from "../typography";
+import { IOText, buttonTextFontSize } from "../typography";
 
 export type ColorButtonLink = "primary" | "contrast";
 
@@ -102,20 +96,6 @@ const mapLegacyColorStates: Record<
 };
 
 const DISABLED_OPACITY = 0.5;
-const IOButtonStylesLocal = StyleSheet.create({
-  label: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
-    fontSize: buttonTextFontSize
-  }
-});
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const IOButtonLegacyStylesLocal = StyleSheet.create({
-  label: {
-    fontSize: 16,
-    ...makeFontStyleObject("Bold", false, "TitilliumSansPro")
-  }
-});
 
 export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
   (
@@ -139,10 +119,8 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
       () => (isExperimental ? mapColorStates : mapLegacyColorStates),
       [isExperimental]
     );
-    const buttonStylesLocal = useMemo(
-      () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
-      [isExperimental]
-    );
+
+    const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
@@ -255,24 +233,23 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
               <HSpacer size={8} />
             </>
           )}
-          <Animated.Text
+          <AnimatedIOText
             accessible={false}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
-            style={[
-              buttonStylesLocal.label,
+            font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+            weight={isExperimental ? "Regular" : "Bold"}
+            size={buttonTextFontSize}
+            style={
               disabled
                 ? { color: colorMap[color]?.label?.disabled }
-                : { color: colorMap[color]?.label?.default },
-              !disabled && pressedColorLabelAnimationStyle
-            ]}
+                : { ...pressedColorLabelAnimationStyle }
+            }
             numberOfLines={1}
             ellipsizeMode="tail"
-            allowFontScaling={isExperimental}
-            maxFontSizeMultiplier={1.3}
           >
             {label}
-          </Animated.Text>
+          </AnimatedIOText>
         </Animated.View>
       </Pressable>
     );

package/src/components/buttons/ButtonOutline.tsx

@@ -24,7 +24,6 @@ import {
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core/";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
@@ -33,7 +32,7 @@ import {
   IconClassComponent
 } from "../icons";
 import { HSpacer } from "../spacer/Spacer";
-import { buttonTextFontSize } from "../typography";
+import { IOText, buttonTextFontSize } from "../typography";
 
 type ColorButtonOutline = "primary" | "contrast" | "danger";
 export type ButtonOutline = WithTestID<
@@ -193,11 +192,6 @@ const mapLegacyColorStates: Record<
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const IOButtonLegacyStylesLocal = StyleSheet.create({
-  // eslint-disable-next-line react-native/no-unused-styles
-  label: {
-    ...makeFontStyleObject("Bold")
-  },
-  // eslint-disable-next-line react-native/no-unused-styles
   buttonWithBorder: {
     borderWidth: 1
   }
@@ -209,12 +203,6 @@ const iconSize: IOIconSizeScale = 20;
 const DISABLED_OPACITY = 0.5;
 
 const IOButtonStylesLocal = StyleSheet.create({
-  // eslint-disable-next-line react-native/no-unused-styles
-  label: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
-    fontSize: buttonTextFontSize
-  },
-  // eslint-disable-next-line react-native/no-unused-styles
   buttonWithBorder: {
     borderWidth: 2
   }
@@ -239,6 +227,8 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
     const { isExperimental } = useIOExperimentalDesign();
     const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
+    const AnimatedIOText = Animated.createAnimatedComponent(IOText);
+
     const colorMap = React.useMemo(
       () => (isExperimental ? mapColorStates : mapLegacyColorStates),
       [isExperimental]
@@ -383,25 +373,24 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
               <HSpacer size={8} />
             </>
           )}
-          <Animated.Text
+          <AnimatedIOText
+            font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+            weight={isExperimental ? "Regular" : "Bold"}
+            size={buttonTextFontSize}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            numberOfLines={1}
+            ellipsizeMode="tail"
             style={[
-              buttonStylesLocal.label,
               buttonStyles.label,
               disabled
                 ? { color: colorMap[color]?.label?.disabled }
-                : { color: colorMap[color]?.label?.default },
-              !disabled && pressedColorLabelAnimationStyle
+                : { ...pressedColorLabelAnimationStyle }
             ]}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            allowFontScaling={isExperimental}
-            maxFontSizeMultiplier={1.3}
-            accessible={false}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
           >
             {label}
-          </Animated.Text>
+          </AnimatedIOText>
         </Animated.View>
       </Pressable>
     );

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

@@ -76,18 +76,18 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Readex Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "400",
-          },
-          {
-            "color": "#0B3EE3",
+            "lineHeight": undefined,
           },
           {
             "color": undefined,
@@ -183,25 +183,27 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Readex Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "lineHeight": undefined,
           },
-          {
-            "alignSelf": "center",
-          },
-          {
-            "color": "#0B3EE3",
-          },
-          {
-            "color": undefined,
-          },
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "color": undefined,
+            },
+          ],
         ]
       }
     >
@@ -300,36 +302,26 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
         accessibilityElementsHidden={true}
         accessible={false}
         allowFontScaling={true}
-        color="white"
-        defaultColor="white"
-        defaultWeight="Regular"
         ellipsizeMode="tail"
-        font="ReadexPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-          }
-        }
         importantForAccessibility="no-hide-descendants"
         maxFontSizeMultiplier={1.25}
         numberOfLines={1}
         style={
           [
-            {
-              "alignSelf": "center",
-            },
-            {
-              "fontSize": 16,
-            },
+            {},
             {
               "color": "#FFFFFF",
               "fontFamily": "Readex Pro",
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "lineHeight": 20,
+            },
+            {
+              "alignSelf": "center",
             },
           ]
         }
-        weight="Regular"
       >
         label
       </Text>
@@ -803,18 +795,18 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
       allowFontScaling={false}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "700",
-          },
-          {
-            "color": "#0073E6",
+            "lineHeight": undefined,
           },
           {
             "color": undefined,
@@ -909,24 +901,27 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
       allowFontScaling={false}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Titillium Sans Pro",
+            "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "700",
+            "lineHeight": undefined,
           },
-          {
-            "alignSelf": "center",
-          },
-          {
-            "color": "#0073E6",
-          },
-          {
-            "color": undefined,
-          },
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "color": undefined,
+            },
+          ],
         ]
       }
     >
@@ -1024,36 +1019,26 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
         accessibilityElementsHidden={true}
         accessible={false}
         allowFontScaling={false}
-        color="white"
-        defaultColor="white"
-        defaultWeight="Bold"
         ellipsizeMode="tail"
-        font="TitilliumSansPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-          }
-        }
         importantForAccessibility="no-hide-descendants"
         maxFontSizeMultiplier={1.25}
         numberOfLines={1}
         style={
           [
-            {
-              "alignSelf": "center",
-            },
-            {
-              "fontSize": 16,
-            },
+            {},
             {
               "color": "#FFFFFF",
               "fontFamily": "Titillium Sans Pro",
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "700",
+              "lineHeight": 20,
+            },
+            {
+              "alignSelf": "center",
             },
           ]
         }
-        weight="Bold"
       >
         label
       </Text>

package/src/components/featureInfo/FeatureInfo.tsx

@@ -8,7 +8,7 @@ import {
   IOPictogramSizeScale,
   IOPictograms,
   Icon,
-  LabelLink,
+  Label,
   Pictogram,
   VSpacer
 } from "../../components";
@@ -21,12 +21,13 @@ type PartialFeatureInfo = {
 
 type FeatureInfoActionProps =
   | {
-      actionLabel?: string;
-      actionOnPress: (event: GestureResponderEvent) => void;
+      action: {
+        label: string;
+        onPress: (event: GestureResponderEvent) => void;
+      };
     }
   | {
-      actionLabel?: never;
-      actionOnPress?: never;
+      action?: never;
     };
 
 type FeatureInfoGraphicProps =
@@ -56,8 +57,7 @@ export const FeatureInfo = ({
   iconName,
   pictogramName,
   body,
-  actionLabel,
-  actionOnPress
+  action
 }: FeatureInfoProps) => (
   <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
     {iconName && (
@@ -69,21 +69,21 @@ export const FeatureInfo = ({
     <HSpacer size={24} />
     <View style={{ flexShrink: 1 }}>
       {renderNode(body)}
-      {actionLabel && actionOnPress && (
+      {action && (
         <>
           {/* Add "marginTop" equivalent if body text is present.
           This verbose code could be deleted once we got "gap"
           property support */}
           {body && <VSpacer size={4} />}
-          <LabelLink
-            fontSize="regular"
-            onPress={actionOnPress}
+          <Label
+            asLink
+            onPress={action.onPress}
             accessible
             importantForAccessibility={"yes"}
             accessibilityElementsHidden={false}
           >
-            {actionLabel}
-          </LabelLink>
+            {action.label}
+          </Label>
         </>
       )}
     </View>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -24,10 +24,10 @@ import {
   useIOTheme
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { HSpacer } from "../spacer";
+import { IOText } from "../typography";
 import { ActionProp } from "./common";
 
 type ScrollValues = {
@@ -103,16 +103,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
     marginHorizontal: titleHorizontalMargin
-  },
-  headerTitle: {
-    fontSize: 14,
-    textAlign: "center"
-  },
-  headerTitleFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  headerTitleLegacyFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
   }
 });
 
@@ -144,6 +134,8 @@ export const HeaderSecondLevel = ({
   const insets = useSafeAreaInsets();
   const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
 
+  const AnimatedIOText = Animated.createAnimatedComponent(IOText);
+
   const iconButtonColor: ComponentProps<typeof IconButton>["color"] =
     variant === "neutral" ? "neutral" : "contrast";
   const titleColor: ColorValue =
@@ -240,20 +232,19 @@ export const HeaderSecondLevel = ({
           accessibilityRole="header"
           style={styles.titleContainer}
         >
-          <Animated.Text
+          <AnimatedIOText
+            size={14}
             numberOfLines={1}
             accessible={false}
+            font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+            weight={isExperimental ? "Regular" : "Semibold"}
             style={[
-              styles.headerTitle,
-              { color: titleColor },
-              isExperimental
-                ? styles.headerTitleFont
-                : styles.headerTitleLegacyFont,
+              { color: titleColor, textAlign: "center" },
               titleAnimatedStyle
             ]}
           >
             {title}
-          </Animated.Text>
+          </AnimatedIOText>
         </View>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type === "threeActions" && (