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

package/src/components/buttons/IconButtonContained.tsx

@@ -15,8 +15,7 @@ import {
   IOButtonStyles,
   IOColors,
   IOIconButtonStyles,
-  hexToRgba,
-  useIOExperimentalDesign
+  hexToRgba
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -88,51 +87,6 @@ const mapColorStates: Record<
   }
 };
 
-const mapLegacyColorStates: Record<
-  NonNullable<IconButtonContained["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    background: {
-      default: hexToRgba(IOColors.blue, 0),
-      pressed: hexToRgba(IOColors.blue, 0.15),
-      disabled: "transparent"
-    },
-    icon: {
-      default: IOColors.blue,
-      pressed: IOColors.blue,
-      disabled: hexToRgba(IOColors.blue, 0.25)
-    }
-  },
-  // Neutral button
-  neutral: {
-    background: {
-      default: IOColors.white,
-      pressed: IOColors.greyUltraLight,
-      disabled: "transparent"
-    },
-    icon: {
-      default: IOColors.bluegrey,
-      pressed: IOColors.black,
-      disabled: IOColors.grey
-    }
-  },
-  // Contrast button
-  contrast: {
-    background: {
-      default: hexToRgba(IOColors.white, 0),
-      pressed: hexToRgba(IOColors.white, 0.2),
-      disabled: "transparent"
-    },
-    icon: {
-      default: IOColors.white,
-      pressed: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.25)
-    }
-  }
-};
-
 const AnimatedIconClassComponent =
   Animated.createAnimatedComponent(IconClassComponent);
 
@@ -145,22 +99,18 @@ export const IconButtonContained = ({
   accessibilityHint,
   testID
 }: IconButtonContained) => {
-  const { isExperimental } = useIOExperimentalDesign();
-
   const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("exaggerated");
   const reducedMotion = useReducedMotion();
 
-  const colorMap = React.useMemo(
-    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-    [isExperimental]
-  );
-
   const backgroundColorAnimationStyle = useAnimatedStyle(() => ({
     backgroundColor: interpolateColor(
       progress.value,
       [0, 1],
-      [colorMap[color].background.default, colorMap[color].background.pressed]
+      [
+        mapColorStates[color].background.default,
+        mapColorStates[color].background.pressed
+      ]
     )
   }));
 
@@ -169,7 +119,7 @@ export const IconButtonContained = ({
     color: interpolateColor(
       progress.value,
       [0, 1],
-      [colorMap[color].icon.default, colorMap[color].icon.pressed]
+      [mapColorStates[color].icon.default, mapColorStates[color].icon.pressed]
     )
   }));
 
@@ -199,10 +149,13 @@ export const IconButtonContained = ({
           <AnimatedIconClassComponent
             name={icon}
             animatedProps={iconColorAnimationStyle}
-            color={colorMap[color]?.icon?.default}
+            color={mapColorStates[color]?.icon?.default}
           />
         ) : (
-          <AnimatedIcon name={icon} color={colorMap[color]?.icon?.disabled} />
+          <AnimatedIcon
+            name={icon}
+            color={mapColorStates[color]?.icon?.disabled}
+          />
         )}
       </Animated.View>
     </Pressable>

package/src/components/buttons/IconButtonSolid.tsx

@@ -5,11 +5,7 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import {
-  IOButtonStyles,
-  IOIconButtonStyles,
-  useIOExperimentalDesign
-} from "../../core";
+import { IOButtonStyles, IOIconButtonStyles } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -65,36 +61,6 @@ const mapColorStates: Record<
   }
 };
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const mapLegacyColorStates: Record<
-  NonNullable<IconButtonSolid["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    background: {
-      default: IOColors.blue,
-      pressed: IOColors["blue-600"],
-      disabled: IOColors["grey-100"]
-    },
-    icon: {
-      default: IOColors.white,
-      disabled: IOColors["grey-450"]
-    }
-  },
-  contrast: {
-    background: {
-      default: IOColors.white,
-      pressed: IOColors["blue-50"],
-      disabled: hexToRgba(IOColors.white, 0.25)
-    },
-    icon: {
-      default: IOColors.blue,
-      disabled: IOColors.blue
-    }
-  }
-};
-
 export const IconButtonSolid = ({
   icon,
   color = "primary",
@@ -104,22 +70,18 @@ export const IconButtonSolid = ({
   accessibilityHint,
   testID
 }: IconButtonSolid) => {
-  const { isExperimental } = useIOExperimentalDesign();
-
   const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("exaggerated");
   const reducedMotion = useReducedMotion();
 
-  const colorMap = React.useMemo(
-    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-    [isExperimental]
-  );
-
   const backgroundColorAnimationStyle = useAnimatedStyle(() => ({
     backgroundColor: interpolateColor(
       progress.value,
       [0, 1],
-      [colorMap[color].background.default, colorMap[color].background.pressed]
+      [
+        mapColorStates[color].background.default,
+        mapColorStates[color].background.pressed
+      ]
     )
   }));
 
@@ -145,10 +107,10 @@ export const IconButtonSolid = ({
           !disabled && backgroundColorAnimationStyle,
           disabled
             ? {
-                backgroundColor: colorMap[color]?.background?.disabled
+                backgroundColor: mapColorStates[color]?.background?.disabled
               }
             : {
-                backgroundColor: colorMap[color]?.background?.default
+                backgroundColor: mapColorStates[color]?.background?.default
               }
         ]}
       >
@@ -157,8 +119,8 @@ export const IconButtonSolid = ({
           name={icon}
           color={
             !disabled
-              ? colorMap[color]?.icon?.default
-              : colorMap[color]?.icon?.disabled
+              ? mapColorStates[color]?.icon?.default
+              : mapColorStates[color]?.icon?.disabled
           }
         />
       </Animated.View>

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

@@ -159,13 +159,13 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
           "paddingHorizontal": 24,
           "textAlignVertical": "center",
         },
-        false,
         {
-          "borderWidth": 2,
+          "height": 48,
         },
         {
-          "height": 48,
+          "borderWidth": 2,
         },
+        false,
         {
           "columnGap": 8,
         },
@@ -277,12 +277,12 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
           "textAlignVertical": "center",
         },
         {
-          "overflow": "hidden",
+          "height": 48,
         },
-        false,
         {
-          "height": 48,
+          "overflow": "hidden",
         },
+        false,
         {
           "backgroundColor": "#0B3EE3",
         },
@@ -829,7 +829,7 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
           {},
           {
             "color": "#0E0F13",
-            "fontFamily": "Titillium Sans Pro",
+            "fontFamily": "Titillio",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "600",
@@ -891,27 +891,28 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 4,
+          "borderCurve": "continuous",
+          "borderRadius": 8,
           "elevation": 0,
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingHorizontal": 16,
+          "paddingHorizontal": 24,
           "textAlignVertical": "center",
         },
-        false,
         {
-          "borderWidth": 1,
+          "height": 48,
         },
         {
-          "height": 40,
+          "borderWidth": 2,
         },
+        false,
         {
           "columnGap": 8,
         },
         false,
         {
-          "backgroundColor": "rgba(0,115,230,0)",
-          "borderColor": "#0073E6",
+          "backgroundColor": "rgba(231,236,252,0)",
+          "borderColor": "#0B3EE3",
         },
         {
           "transform": [
@@ -940,7 +941,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
           {},
           {
             "color": "#0E0F13",
-            "fontFamily": "Titillium Sans Pro",
+            "fontFamily": "Titillio",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "600",
@@ -1007,22 +1008,23 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 4,
+          "borderCurve": "continuous",
+          "borderRadius": 8,
           "elevation": 0,
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingHorizontal": 16,
+          "paddingHorizontal": 24,
           "textAlignVertical": "center",
         },
         {
-          "overflow": "hidden",
+          "height": 48,
         },
-        false,
         {
-          "height": 40,
+          "overflow": "hidden",
         },
+        false,
         {
-          "backgroundColor": "#0073E6",
+          "backgroundColor": "#0B3EE3",
         },
         {
           "transform": [
@@ -1066,7 +1068,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
             {},
             {
               "color": "#FFFFFF",
-              "fontFamily": "Titillium Sans Pro",
+              "fontFamily": "Titillio",
               "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "600",
@@ -1168,7 +1170,7 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
             "borderWidth": 0,
           },
           {
-            "color": "#0073E6",
+            "color": "#0B3EE3",
           },
           {
             "flex": 0,
@@ -1177,7 +1179,7 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
           },
         ]
       }
-      tintColor="#0073E6"
+      tintColor="#0B3EE3"
       vbHeight={24}
       vbWidth={24}
       width={24}
@@ -1302,7 +1304,7 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
             "borderWidth": 0,
           },
           {
-            "color": "#0073E6",
+            "color": "#0B3EE3",
           },
           {
             "flex": 0,
@@ -1311,7 +1313,7 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
           },
         ]
       }
-      tintColor="#0073E6"
+      tintColor="#0B3EE3"
       vbHeight={24}
       vbWidth={24}
       width={24}
@@ -1409,7 +1411,7 @@ exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
           "backgroundColor": undefined,
         },
         {
-          "backgroundColor": "#0073E6",
+          "backgroundColor": "#0B3EE3",
         },
       ]
     }

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -14,14 +14,10 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
-import { useIOFontDynamicScale } from "../../utils/accessibility";
-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 { useIOFontDynamicScale } from "../../utils/accessibility";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -62,24 +58,8 @@ export const AnimatedCheckbox = ({
   const { dynamicFontScale } = useIOFontDynamicScale();
   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 squareAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
@@ -127,21 +107,13 @@ export const AnimatedCheckbox = ({
       testID="AnimatedCheckboxInput"
     >
       <View
-        style={[
-          styles.checkboxBorder,
-          checkboxSizeStyle,
-          {
-            borderColor: borderColorProp
-          }
-        ]}
+        style={[styles.checkboxBorder, checkboxSizeStyle, { borderColor }]}
       />
       <Animated.View
         style={[
           styles.checkBoxSquare,
           checkboxSizeStyle,
-          {
-            backgroundColor: backgroundColorProp
-          },
+          { backgroundColor },
           animatedCheckboxSquare
         ]}
       />

package/src/components/checkbox/AnimatedMessageCheckbox.tsx

@@ -8,12 +8,10 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
-import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
 import { IOSpacingScale } from "../../core/IOSpacing";
 import {
-  IOSelectionTickLegacyVisualParams,
   IOSelectionTickVisualParams,
   IOVisualCostants
 } from "../../core/IOStyles";
@@ -53,18 +51,11 @@ export const AnimatedMessageCheckbox = ({
   onPress
 }: AnimatedMessageCheckbox) => {
   const isChecked = !!checked;
-  const { isExperimental } = useIOExperimentalDesign();
 
   const shapeAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
-  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 backgroundColor = IOColors[IOSelectionTickVisualParams.bgColorOnState];
 
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
@@ -100,9 +91,7 @@ export const AnimatedMessageCheckbox = ({
       <Animated.View
         style={[
           styles.checkBoxShape,
-          {
-            backgroundColor: backgroundColorProp
-          },
+          { backgroundColor },
           animatedCheckboxShape
         ]}
       />

package/src/components/layout/FooterActions.tsx

@@ -17,7 +17,6 @@ import {
   IOVisualCostants,
   buttonSolidHeight,
   hexToRgba,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
@@ -128,7 +127,6 @@ export const FooterActions = ({
   debugMode = false
 }: FooterActionsProps) => {
   const theme = useIOTheme();
-  const { isExperimental } = useIOExperimentalDesign();
 
   const { bottomMargin, extraBottomMargin } = useBottomMargins(
     !!actions?.secondary,
@@ -143,13 +141,12 @@ export const FooterActions = ({
      (both light and dark themes) */
   const HEADER_BG_COLOR: ColorValue = IOColors[theme["appBackground-primary"]];
   const TRANSPARENT_BG_COLOR: ColorValue = "transparent";
-  const BUTTONSOLID_HEIGHT = isExperimental ? buttonSolidHeight : 40;
 
   /* Safe background block. Cover everything until it reaches
      the half of the primary action button. It avoids
      glitchy behavior underneath.  */
   const safeBackgroundBlockHeight =
-    bottomMargin + actionBlockHeight - BUTTONSOLID_HEIGHT / 2;
+    bottomMargin + actionBlockHeight - buttonSolidHeight / 2;
 
   const getActionBlockMeasurements = (event: LayoutChangeEvent) => {
     const { height } = event.nativeEvent.layout;

package/src/components/layout/HeaderSecondLevel.tsx

@@ -28,7 +28,7 @@ import {
   alertEdgeToEdgeInsetTransitionConfig,
   hexToRgba,
   iconBtnSizeSmall,
-  useIOExperimentalDesign,
+  useIONewTypeface,
   useIOTheme,
   useIOThemeContext
 } from "../../core";
@@ -155,7 +155,8 @@ export const HeaderSecondLevel = ({
   );
   const titleRef = React.createRef<View>();
 
-  const { isExperimental } = useIOExperimentalDesign();
+  const { newTypefaceEnabled } = useIONewTypeface();
+
   const theme = useIOTheme();
   const { themeType } = useIOThemeContext();
   const insets = useSafeAreaInsets();
@@ -300,7 +301,7 @@ export const HeaderSecondLevel = ({
             size={14}
             numberOfLines={1}
             accessible={false}
-            font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
             weight={"Semibold"}
             style={[
               { color: titleColor, textAlign: "center" },

package/src/components/layout/ModalBSHeader.tsx

@@ -1,19 +1,14 @@
 import * as React from "react";
 import { useLayoutEffect } from "react";
 import {
-  View,
+  AccessibilityInfo,
   StyleSheet,
-  findNodeHandle,
-  AccessibilityInfo
+  View,
+  findNodeHandle
 } from "react-native";
-import {
-  IOColors,
-  IOVisualCostants,
-  useIOExperimentalDesign,
-  IOStyles
-} from "../../core";
-import { H4 } from "../typography";
+import { IOColors, IOStyles, IOVisualCostants } from "../../core";
 import { IconButton } from "../buttons";
+import { H4 } from "../typography";
 
 const styles = StyleSheet.create({
   container: {
@@ -45,7 +40,6 @@ export const ModalBSHeader = ({
   onClose,
   closeAccessibilityLabel
 }: Props) => {
-  const { isExperimental } = useIOExperimentalDesign();
   const headerRef = React.createRef<View>();
 
   useLayoutEffect(() => {
@@ -69,24 +63,12 @@ export const ModalBSHeader = ({
           <H4>{title}</H4>
         </View>
       )}
-      {/* ◀ REMOVE_LEGACY_COMPONENT: Remove the following condition */}
-      {isExperimental ? (
-        <IconButton
-          color="neutral"
-          onPress={onClose}
-          icon="closeMedium"
-          accessibilityLabel={closeAccessibilityLabel}
-        />
-      ) : (
-        <View style={{ opacity: 0.5 }}>
-          <IconButton
-            color="neutral"
-            onPress={onClose}
-            icon="closeMedium"
-            accessibilityLabel={closeAccessibilityLabel}
-          />
-        </View>
-      )}
+      <IconButton
+        color="neutral"
+        onPress={onClose}
+        icon="closeMedium"
+        accessibilityLabel={closeAccessibilityLabel}
+      />
     </View>
   );
 };