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

package/src/components/alert/Alert.tsx

@@ -4,7 +4,6 @@ import {
   PixelRatio,
   Pressable,
   StyleSheet,
-  Text,
   View
 } from "react-native";
 import Animated, {
@@ -15,7 +14,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
+import { IOVisualCostants } from "../../core";
 import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
 import {
   IOColors,
@@ -24,10 +23,10 @@ import {
 } from "../../core/IOColors";
 import { IOAlertRadius } from "../../core/IOShapes";
 import { IOAlertSpacing } from "../../core/IOSpacing";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { VSpacer } from "../spacer";
+import { ButtonText } from "../typography";
 import { H4 } from "../typography/H4";
 import { Label } from "../typography/Label";
 
@@ -48,14 +47,6 @@ const styles = StyleSheet.create({
   },
   spacingFullWidth: {
     padding: spacingFullWidth
-  },
-  label: {
-    fontSize: 16,
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  labelLegacy: {
-    fontSize: 16,
-    ...makeFontStyleObject("Bold", false, "TitilliumSansPro")
   }
 });
 
@@ -129,7 +120,6 @@ export const Alert = React.forwardRef<View, AlertType>(
     viewRef
   ): JSX.Element => {
     const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-    const { isExperimental } = useIOExperimentalDesign();
 
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
@@ -198,16 +188,13 @@ export const Alert = React.forwardRef<View, AlertType>(
           {action && (
             <>
               <VSpacer size={8} />
-              <Text
-                style={[
-                  isExperimental ? styles.label : styles.labelLegacy,
-                  { color: IOColors[mapVariantStates[variant].foreground] }
-                ]}
+              <ButtonText
+                color={mapVariantStates[variant].foreground}
                 numberOfLines={1}
                 ellipsizeMode="tail"
               >
                 {action}
-              </Text>
+              </ButtonText>
             </>
           )}
         </View>

package/src/components/badge/Badge.tsx

@@ -1,16 +1,15 @@
 import React from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
 import {
   IOBadgeHSpacing,
   IOBadgeRadius,
   IOBadgeVSpacing,
   IOColors,
-  IOVisualCostants,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
+import { IOText } from "../typography";
 
 export type Badge = WithTestID<{
   outline?: boolean;
@@ -52,20 +51,6 @@ const styles = StyleSheet.create({
     borderRadius: IOBadgeRadius,
     paddingHorizontal: IOBadgeHSpacing,
     paddingVertical: IOBadgeVSpacing
-  },
-  label: {
-    fontSize: 12,
-    lineHeight: 16,
-    alignSelf: "center",
-    textTransform: "uppercase",
-    flexShrink: 1
-  },
-  labelFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  legacyLabelFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
   }
 });
 
@@ -177,21 +162,23 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
             }
       ]}
     >
-      <Text
+      <IOText
+        font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+        weight={isExperimental ? "Regular" : "Semibold"}
+        size={12}
+        lineHeight={16}
+        color={foreground}
         numberOfLines={1}
         ellipsizeMode="tail"
-        allowFontScaling={isExperimental}
-        maxFontSizeMultiplier={IOVisualCostants.maxFontSizeMultiplier}
-        style={[
-          styles.label,
-          isExperimental ? styles.labelFont : styles.legacyLabelFont,
-          {
-            color: IOColors[foreground]
-          }
-        ]}
+        style={{
+          alignSelf: "center",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          flexShrink: 1
+        }}
       >
         {text}
-      </Text>
+      </IOText>
     </View>
   );
 };

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

@@ -26,20 +26,20 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
     numberOfLines={1}
     style={
       [
+        {},
         {
-          "alignSelf": "center",
-          "flexShrink": 1,
-          "fontSize": 12,
-          "lineHeight": 16,
-          "textTransform": "uppercase",
-        },
-        {
+          "color": "#555C70",
           "fontFamily": "Readex Pro",
+          "fontSize": 12,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 16,
         },
         {
-          "color": "#555C70",
+          "alignSelf": "center",
+          "flexShrink": 1,
+          "letterSpacing": 0.5,
+          "textTransform": "uppercase",
         },
       ]
     }
@@ -75,20 +75,20 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
     numberOfLines={1}
     style={
       [
+        {},
         {
-          "alignSelf": "center",
-          "flexShrink": 1,
-          "fontSize": 12,
-          "lineHeight": 16,
-          "textTransform": "uppercase",
-        },
-        {
+          "color": "#555C70",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 12,
           "fontStyle": "normal",
           "fontWeight": "600",
+          "lineHeight": 16,
         },
         {
-          "color": "#555C70",
+          "alignSelf": "center",
+          "flexShrink": 1,
+          "letterSpacing": 0.5,
+          "textTransform": "uppercase",
         },
       ]
     }

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

@@ -6,7 +6,7 @@ import { Badge } from "../Badge";
 describe("Test Badge Components", () => {
   it("Badge Snapshot", () => {
     const badge = TestRenderer.create(
-      <Badge text={"text"} variant={"default"}></Badge>
+      <Badge text={"text"} variant={"default"} />
     ).toJSON();
     expect(badge).toMatchSnapshot();
   });
@@ -15,7 +15,7 @@ describe("Test Badge Components", () => {
 describe("Test Badge Components - Experimental Enabled", () => {
   it("Badge Snapshot", () => {
     const badge = TestRendererWithExperimentalEnabledContextProvider(
-      <Badge text={"text"} variant={"default"}></Badge>
+      <Badge text={"text"} variant={"default"} />
     ).toJSON();
     expect(badge).toMatchSnapshot();
   });

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>
     );