@pagopa/io-app-design-system 5.3.9 → 5.4.1

package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

@@ -19,17 +19,12 @@ exports[`NumberPad Should match the snapshot 1`] = `
   >
     <View
       style={
-        [
-          {
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          },
-          {
-            "alignItems": "center",
-            "flexGrow": 1,
-            "justifyContent": "space-between",
-          },
-        ]
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexGrow": 1,
+          "justifyContent": "space-between",
+        }
       }
     >
       <View
@@ -69,11 +64,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -152,11 +145,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -235,11 +226,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -284,17 +273,12 @@ exports[`NumberPad Should match the snapshot 1`] = `
     </View>
     <View
       style={
-        [
-          {
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          },
-          {
-            "alignItems": "center",
-            "flexGrow": 1,
-            "justifyContent": "space-between",
-          },
-        ]
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexGrow": 1,
+          "justifyContent": "space-between",
+        }
       }
     >
       <View
@@ -334,11 +318,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -417,11 +399,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -500,11 +480,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -549,17 +527,12 @@ exports[`NumberPad Should match the snapshot 1`] = `
     </View>
     <View
       style={
-        [
-          {
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          },
-          {
-            "alignItems": "center",
-            "flexGrow": 1,
-            "justifyContent": "space-between",
-          },
-        ]
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexGrow": 1,
+          "justifyContent": "space-between",
+        }
       }
     >
       <View
@@ -599,11 +572,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -682,11 +653,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -765,11 +734,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -814,17 +781,12 @@ exports[`NumberPad Should match the snapshot 1`] = `
     </View>
     <View
       style={
-        [
-          {
-            "flexDirection": "row",
-            "justifyContent": "space-between",
-          },
-          {
-            "alignItems": "center",
-            "flexGrow": 1,
-            "justifyContent": "space-between",
-          },
-        ]
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "flexGrow": 1,
+          "justifyContent": "space-between",
+        }
       }
     >
       <View
@@ -836,8 +798,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
             },
             {
               "alignItems": "center",
-            },
-            {
               "justifyContent": "center",
             },
           ]
@@ -880,15 +840,13 @@ exports[`NumberPad Should match the snapshot 1`] = `
           <View
             style={
               [
-                {
-                  "height": 24,
-                  "width": 24,
-                },
                 {
                   "alignItems": "center",
+                  "justifyContent": "center",
                 },
                 {
-                  "justifyContent": "center",
+                  "height": 24,
+                  "width": 24,
                 },
                 {
                   "transform": [
@@ -907,6 +865,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               align="xMidYMid"
               bbHeight={24}
               bbWidth={24}
+              color="#FFFFFF"
               focusable={false}
               height={24}
               importantForAccessibility="no-hide-descendants"
@@ -919,9 +878,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  {
-                    "color": "#FFFFFF",
-                  },
                   {
                     "flex": 0,
                     "height": 24,
@@ -934,7 +890,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
               width={24}
             >
               <RNSVGGroup
-                color="#FFFFFF"
                 fill={
                   {
                     "payload": 4278190080,
@@ -1000,11 +955,9 @@ exports[`NumberPad Should match the snapshot 1`] = `
             [
               {
                 "alignItems": "center",
+                "borderRadius": 28,
                 "justifyContent": "center",
               },
-              {
-                "borderRadius": 100,
-              },
               {
                 "height": 56,
                 "width": 56,
@@ -1055,8 +1008,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
             },
             {
               "alignItems": "center",
-            },
-            {
               "justifyContent": "center",
             },
           ]
@@ -1099,15 +1050,13 @@ exports[`NumberPad Should match the snapshot 1`] = `
           <View
             style={
               [
-                {
-                  "height": 24,
-                  "width": 24,
-                },
                 {
                   "alignItems": "center",
+                  "justifyContent": "center",
                 },
                 {
-                  "justifyContent": "center",
+                  "height": 24,
+                  "width": 24,
                 },
                 {
                   "transform": [
@@ -1126,6 +1075,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
               align="xMidYMid"
               bbHeight={24}
               bbWidth={24}
+              color="#FFFFFF"
               focusable={false}
               height={24}
               importantForAccessibility="no-hide-descendants"
@@ -1138,9 +1088,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
                     "backgroundColor": "transparent",
                     "borderWidth": 0,
                   },
-                  {
-                    "color": "#FFFFFF",
-                  },
                   {
                     "flex": 0,
                     "height": 24,
@@ -1153,7 +1100,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
               width={24}
             >
               <RNSVGGroup
-                color="#FFFFFF"
                 fill={
                   {
                     "payload": 4278190080,

package/src/components/otpInput/OTPInput.tsx

@@ -9,7 +9,6 @@ import {
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { IOStyles } from "../../core/IOStyles";
 import { useIOTheme } from "../../core";
 import { triggerHaptic } from "../../functions";
 import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
@@ -138,7 +137,7 @@ export const OTPInput = forwardRef<View, Props>(
             setHasFocus(true);
           }}
           ref={ref}
-          style={[IOStyles.row, { justifyContent: "space-around" }]}
+          style={{ flexDirection: "row", justifyContent: "space-around" }}
           accessible={true}
           accessibilityLabel={accessibilityLabel}
           accessibilityHint={accessibilityHint}

package/src/components/radio/RadioButtonLabel.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { ComponentProps, useState } from "react";
 import { Pressable, View } from "react-native";
 import { IOSelectionTickVisualParams, useIOTheme } from "../../core";
-import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { H6 } from "../typography/H6";
@@ -69,15 +68,13 @@ export const RadioButtonLabel = ({
       testID="AnimatedRadioButton"
     >
       <View
-        style={[
-          IOStyles.row,
-          {
-            alignItems: "flex-start",
-            flexShrink: 1,
-            width: "100%",
-            columnGap: 8 * dynamicFontScale * spacingScaleMultiplier
-          }
-        ]}
+        style={{
+          flexDirection: "row",
+          alignItems: "flex-start",
+          flexShrink: 1,
+          width: "100%",
+          columnGap: 8 * dynamicFontScale * spacingScaleMultiplier
+        }}
       >
         <View
           pointerEvents="none"

package/src/components/stepper/Stepper.tsx

@@ -1,12 +1,6 @@
 import * as React from "react";
 import { ColorValue, View } from "react-native";
-import {
-  IOColors,
-  IOSpacer,
-  IOStyles,
-  IOVisualCostants,
-  useIOTheme
-} from "../../core";
+import { IOColors, IOSpacer, IOVisualCostants, useIOTheme } from "../../core";
 
 type StepperProps = {
   steps: number;
@@ -26,11 +20,12 @@ export const Stepper = ({ steps, currentStep }: StepperProps) => {
   return (
     <View style={{ paddingHorizontal: IOVisualCostants.appMarginDefault }}>
       <View
-        style={[
-          IOStyles.flex,
-          IOStyles.rowSpaceBetween,
-          { gap: STEPPER_SPACE }
-        ]}
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          gap: STEPPER_SPACE
+        }}
       >
         {[...Array(steps)].map((_, i) => (
           <View

package/src/components/typography/IOText.tsx

@@ -7,6 +7,7 @@ import {
   TextStyle,
   View
 } from "react-native";
+import Animated from "react-native-reanimated";
 import { IOColors, useIOTheme } from "../../core";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
@@ -154,3 +155,5 @@ export const IOText = forwardRef<View, IOTextProps>(
     );
   }
 );
+
+export const AnimatedIOText = Animated.createAnimatedComponent(IOText);

package/src/core/IOStyles.ts

@@ -1,4 +1,4 @@
-import { Platform, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { IOIconSizeScale } from "../components/icons";
 import { IOColors } from "./IOColors";
 import { IOModuleIDPRadius } from "./IOShapes";
@@ -43,31 +43,6 @@ export const IOVisualCostants: IOVisualCostants = {
 };
 
 export const IOStyles = StyleSheet.create({
-  flex: {
-    flex: 1
-  },
-  selfCenter: {
-    alignSelf: "center"
-  },
-  alignCenter: {
-    alignItems: "center"
-  },
-  horizontalContentPadding: {
-    paddingHorizontal: IOVisualCostants.appMarginDefault
-  },
-  row: {
-    flexDirection: "row"
-  },
-  column: {
-    flexDirection: "column"
-  },
-  rowSpaceBetween: {
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  centerJustified: {
-    justifyContent: "center"
-  },
   // The following styles come from the original
   // NativeBase's `View`. They are moved here to
   // prevent UI regressions.
@@ -85,14 +60,6 @@ export const IOStyles = StyleSheet.create({
     shadowOpacity: 0.5,
     shadowRadius: 37,
     elevation: 20 // Prop supported on Android only
-  },
-  bgWhite: {
-    backgroundColor: IOColors.white
-    // https://github.com/pagopa/io-app/pull/4387
-  },
-  topListBorderBelowTabsStyle: {
-    borderTopWidth: Platform.OS === "android" ? 0.1 : undefined,
-    elevation: 0.1
   }
 });
 
@@ -113,12 +80,11 @@ export const buttonSolidHeight: number = btnSizeDefault;
 // TODO: Replace the number type with the new IOIconSizeScale
 export const iconBtnSizeSmall: number = 24;
 
-export const numberPadBtnSize: number = 56;
-
 export const IOButtonStyles = StyleSheet.create({
   /* BaseButton, used in the:
   ButtonSolid, ButtonOutline
   */
+  /* DELETE THIS, ONCE WE REMOVE `ButtonSolid`, `ButtonOutline` COMPONENTS */
   button: {
     flexDirection: "row",
     alignItems: "center",
@@ -174,9 +140,7 @@ export const IOIconButtonStyles = StyleSheet.create({
   /* IconButton */
   button: {
     alignItems: "center",
-    justifyContent: "center",
-    // Reset default visual parameters
-    elevation: 0
+    justifyContent: "center"
   },
   buttonSizeSmall: {
     width: iconBtnSizeSmall,
@@ -194,22 +158,6 @@ export const IOIconButtonStyles = StyleSheet.create({
   }
 });
 
-export const IONumberPadButtonStyles = StyleSheet.create({
-  /* IconButton */
-  button: {
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  circularShape: {
-    // Circular shape
-    borderRadius: 100
-  },
-  buttonSize: {
-    width: numberPadBtnSize,
-    height: numberPadBtnSize
-  }
-});
-
 /**
  * LIST ITEM STYLES
  */