@pagopa/io-app-design-system 4.4.1 → 5.0.0-0

package/src/components/listitems/ListItemNav.tsx

@@ -6,7 +6,8 @@ import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
-  IOStyles,
+  IOSpacer,
+  IOVisualCostants,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -95,8 +96,7 @@ export const ListItemNav = ({
     useListItemAnimation();
   const theme = useIOTheme();
 
-  const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
-    useIOFontDynamicScale();
+  const { dynamicFontScale, hugeFontEnabled } = useIOFontDynamicScale();
 
   const listItemNavContent = (
     <>
@@ -176,16 +176,7 @@ export const ListItemNav = ({
         style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
       >
         <Animated.View
-          style={[
-            IOListItemStyles.listItemInner,
-            {
-              columnGap:
-                IOListItemVisualParams.iconMargin *
-                dynamicFontScale *
-                spacingScaleMultiplier
-            },
-            scaleAnimatedStyle
-          ]}
+          style={[IOListItemStyles.listItemInner, scaleAnimatedStyle]}
         >
           {/* Possibile graphical assets
           - Icon
@@ -193,28 +184,50 @@ export const ListItemNav = ({
           - Avatar
           */}
           {icon && !hugeFontEnabled && (
-            <Icon
-              allowFontScaling
-              name={icon}
-              color={iconColor}
-              size={IOListItemVisualParams.iconSize}
-            />
+            <>
+              <Icon
+                allowFontScaling
+                name={icon}
+                color={iconColor}
+                size={IOListItemVisualParams.iconSize}
+              />
+              <HSpacer
+                allowScaleSpacing
+                size={IOVisualCostants.iconMargin as IOSpacer}
+              />
+            </>
           )}
           {paymentLogoUri && (
-            <Image
-              accessibilityIgnoresInvertColors
-              source={{ uri: paymentLogoUri }}
-              style={{
-                width:
-                  IOSelectionListItemVisualParams.iconSize * dynamicFontScale,
-                height:
-                  IOSelectionListItemVisualParams.iconSize * dynamicFontScale
-              }}
-            />
+            <>
+              <Image
+                accessibilityIgnoresInvertColors
+                source={{ uri: paymentLogoUri }}
+                style={{
+                  width:
+                    IOSelectionListItemVisualParams.iconSize * dynamicFontScale,
+                  height:
+                    IOSelectionListItemVisualParams.iconSize * dynamicFontScale
+                }}
+              />
+              <HSpacer
+                allowScaleSpacing
+                size={IOVisualCostants.iconMargin as IOSpacer}
+              />
+            </>
+          )}
+          {avatar && (
+            <>
+              <Avatar size="small" {...avatar} />
+              <HSpacer
+                allowScaleSpacing
+                size={IOVisualCostants.iconMargin as IOSpacer}
+              />
+            </>
           )}
-          {avatar && <Avatar size="small" {...avatar} />}
 
-          <View style={IOStyles.flex}>{listItemNavContent}</View>
+          <View style={{ flexGrow: 1, flexShrink: 1 }}>
+            {listItemNavContent}
+          </View>
           {loading && <LoadingSpinner color={interactiveColor} />}
           {!loading && !hideChevron && (
             <Icon

package/src/components/listitems/ListItemNavAlert.tsx

@@ -5,7 +5,6 @@ import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOStyles,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { useListItemAnimation } from "../../hooks";
@@ -38,7 +37,6 @@ export const ListItemNavAlert = ({
   const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
     useListItemAnimation();
   const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
-  const { isExperimental } = useIOExperimentalDesign();
 
   const componentValueToAccessibility = typeof value === "string" ? value : "";
   const componentDescriptionToAccessibility =
@@ -71,7 +69,7 @@ export const ListItemNavAlert = ({
     </>
   );
 
-  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+  const iconColor = theme["interactiveElem-default"];
 
   return (
     <Pressable
@@ -111,7 +109,6 @@ export const ListItemNavAlert = ({
             />
           )}
           <View style={IOStyles.flex}>{listItemNavAlertContent}</View>
-
           <Icon
             allowFontScaling
             name="chevronRightListItem"

package/src/components/listitems/ListItemTransaction.tsx

@@ -9,7 +9,6 @@ import {
   IOListItemVisualParams,
   IOStyles,
   IOVisualCostants,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 
@@ -114,16 +113,13 @@ export const ListItemTransaction = ({
   numberOfLines = 2,
   accessible
 }: ListItemTransaction) => {
-  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
   if (isLoading) {
     return <SkeletonComponent />;
   }
 
-  const interactiveColor: IOColors = isExperimental
-    ? theme["interactiveElem-default"]
-    : "blue";
+  const interactiveColor: IOColors = theme["interactiveElem-default"];
 
   const amountColorDefault: IOColors = theme["textBody-default"];
   const amountColorRefund: IOColors = theme.successText;
@@ -156,7 +152,7 @@ export const ListItemTransaction = ({
           </BodySmall>
         </View>
       </HStack>
-      <HStack style={{ alignItems: "center" }}>
+      <HStack space={4} style={{ alignItems: "center" }}>
         {badge ? (
           <Badge variant={badge?.variant} text={badge?.text} />
         ) : (

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -530,9 +530,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
-          {
-            "columnGap": 12,
-          },
           {
             "transform": [
               {
@@ -546,7 +543,8 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
       <View
         style={
           {
-            "flex": 1,
+            "flexGrow": 1,
+            "flexShrink": 1,
           }
         }
       >
@@ -1760,7 +1758,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Titillium Sans Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
@@ -1852,7 +1850,7 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
           },
           {
             "color": "#555C70",
-            "fontFamily": "Titillium Sans Pro",
+            "fontFamily": "Titillio",
             "fontSize": 12,
             "fontStyle": "normal",
             "fontWeight": "600",
@@ -1921,7 +1919,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
               {},
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Sans Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -1942,8 +1940,8 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2047,7 +2045,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               {},
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Sans Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -2068,8 +2066,8 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2202,9 +2200,6 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
-          {
-            "columnGap": 12,
-          },
           {
             "transform": [
               {
@@ -2218,7 +2213,8 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
       <View
         style={
           {
-            "flex": 1,
+            "flexGrow": 1,
+            "flexShrink": 1,
           }
         }
       >
@@ -2231,8 +2227,8 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2456,8 +2452,8 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2488,7 +2484,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               "borderWidth": 0,
             },
             {
-              "color": "#0073E6",
+              "color": "#0B3EE3",
             },
             {
               "flex": 0,
@@ -2497,7 +2493,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
             },
           ]
         }
-        tintColor="#0073E6"
+        tintColor="#0B3EE3"
         vbHeight={24}
         vbWidth={24}
         width={24}
@@ -2619,8 +2615,8 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2706,7 +2702,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                 {},
                 {
                   "color": "#5517E3",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
@@ -2740,8 +2736,8 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2804,7 +2800,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                   "width": 24,
                 },
                 {
-                  "borderColor": "#475A6D",
+                  "borderColor": "#636B82",
                 },
               ]
             }
@@ -2823,7 +2819,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                   "width": 24,
                 },
                 {
-                  "backgroundColor": "#0073E6",
+                  "backgroundColor": "#0B3EE3",
                 },
                 {
                   "opacity": 1,
@@ -2992,8 +2988,8 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -3025,8 +3021,8 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -3089,7 +3085,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
                   "width": 24,
                 },
                 {
-                  "borderColor": "#475A6D",
+                  "borderColor": "#636B82",
                 },
               ]
             }
@@ -3108,7 +3104,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
                   "width": 24,
                 },
                 {
-                  "backgroundColor": "#0073E6",
+                  "backgroundColor": "#0B3EE3",
                 },
                 {
                   "opacity": 0,

package/src/components/modules/ModuleIDP.tsx

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { Image, ImageSourcePropType, StyleSheet } from "react-native";
+import { IOListItemLogoMargin, useIONewTypeface, useIOTheme } from "../../core";
 import { addCacheTimestampToUri } from "../../utils/image";
-import {
-  IOListItemLogoMargin,
-  useIOExperimentalDesign,
-  useIOTheme
-} from "../../core";
 import { IOText } from "../typography";
 import {
   PressableModuleBase,
@@ -38,8 +34,7 @@ export const ModuleIDP = ({
   accessibilityLabel
 }: ModuleIDP) => {
   const theme = useIOTheme();
-  const { isExperimental } = useIOExperimentalDesign();
-
+  const { newTypefaceEnabled } = useIONewTypeface();
   // eslint-disable-next-line no-console
   const urlLogoIDP = localLogo ? localLogo : addCacheTimestampToUri(logo);
 
@@ -50,7 +45,7 @@ export const ModuleIDP = ({
       withLooseSpacing={withLooseSpacing}
     >
       <IOText
-        font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+        font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
         weight={"Semibold"}
         size={12}
         lineHeight={16}

package/src/components/numberpad/NumberButton.tsx

@@ -1,16 +1,11 @@
-import React, { memo, useCallback, useMemo } from "react";
+import React, { memo, useCallback } from "react";
 import { Pressable } from "react-native";
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import {
-  IOColors,
-  IONumberPadButtonStyles,
-  hexToRgba,
-  useIOExperimentalDesign
-} from "../../core";
+import { IOColors, IONumberPadButtonStyles } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { H3 } from "../typography";
 
@@ -52,18 +47,6 @@ const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
   }
 };
 
-const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
-  light: {
-    background: IOColors["grey-100"],
-    pressed: IOColors["grey-200"],
-    foreground: "blue"
-  },
-  dark: {
-    background: hexToRgba(IOColors.black, 0.1),
-    pressed: hexToRgba(IOColors.white, 0.5),
-    foreground: "white"
-  }
-};
 /**
  * Based on a `Pressable` element, it displays a number button with animations on press In and Out.
  *
@@ -74,19 +57,13 @@ export const NumberButton = memo(
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation("slight");
     const reducedMotion = useReducedMotion();
-    const { isExperimental } = useIOExperimentalDesign();
-
-    const colors = useMemo(
-      () => (isExperimental ? colorMap[variant] : legacyColorMap[variant]),
-      [variant, isExperimental]
-    );
 
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => ({
       backgroundColor: interpolateColor(
         progress.value,
         [0, 1],
-        [colors.background, colors.pressed]
+        [colorMap[variant].background, colorMap[variant].pressed]
       )
     }));
 
@@ -111,7 +88,7 @@ export const NumberButton = memo(
             !reducedMotion && scaleAnimatedStyle
           ]}
         >
-          <H3 color={colors.foreground}>{number}</H3>
+          <H3 color={colorMap[variant].foreground}>{number}</H3>
         </Animated.View>
       </Pressable>
     );

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

@@ -100,7 +100,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -181,7 +181,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -262,7 +262,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -359,7 +359,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -440,7 +440,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -521,7 +521,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -618,7 +618,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -699,7 +699,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -780,7 +780,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -1018,7 +1018,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",

package/src/components/radio/AnimatedRadio.tsx

@@ -14,13 +14,9 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
-import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
-import {
-  IOSelectionTickLegacyVisualParams,
-  IOSelectionTickVisualParams
-} from "../../core/IOStyles";
+import { IOSelectionTickVisualParams } from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -56,24 +52,8 @@ export const AnimatedRadio = ({
 }: OwnProps) => {
   const isChecked = checked ?? false;
 
-  const { isExperimental } = useIOExperimentalDesign();
-  const borderColorOffState =
-    IOColors[IOSelectionTickVisualParams.borderColorOffState];
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyBorderColorOffState =
-    IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState];
-  const borderColorProp = isExperimental
-    ? borderColorOffState
-    : legacyBorderColorOffState;
-
-  const backgroundColorOnState =
-    IOColors[IOSelectionTickVisualParams.bgColorOnState];
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyBackgroundColorOnState =
-    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
-  const backgroundColorProp = isExperimental
-    ? backgroundColorOnState
-    : legacyBackgroundColorOnState;
+  const borderColor = IOColors[IOSelectionTickVisualParams.borderColorOffState];
+  const backgroundColor = IOColors[IOSelectionTickVisualParams.bgColorOnState];
 
   const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
@@ -121,21 +101,13 @@ export const AnimatedRadio = ({
       style={radioButtonWrapperSizeStyle}
     >
       <View
-        style={[
-          styles.radioBorder,
-          radioButtonSizeStyle,
-          {
-            borderColor: borderColorProp
-          }
-        ]}
+        style={[styles.radioBorder, radioButtonSizeStyle, { borderColor }]}
       />
       <Animated.View
         style={[
           styles.radioCircle,
           radioButtonSizeStyle,
-          {
-            backgroundColor: backgroundColorProp
-          },
+          { backgroundColor },
           animatedCheckboxSquare
         ]}
       />