@pagopa/io-app-design-system 4.4.4 → 5.0.0-1

package/src/components/buttons/ButtonLink.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo } from "react";
+import React, { forwardRef } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -7,6 +7,7 @@ import {
 } from "react-native";
 import Animated, {
   interpolateColor,
+  useAnimatedProps,
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
@@ -15,7 +16,7 @@ import {
   IOColors,
   IOSpacingScale,
   hexToRgba,
-  useIOExperimentalDesign
+  useIONewTypeface
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -78,28 +79,6 @@ const mapColorStates: Record<
   }
 };
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const mapLegacyColorStates: Record<
-  NonNullable<ButtonLinkProps["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    label: {
-      default: IOColors.blue,
-      pressed: IOColors["blue-600"],
-      disabled: IOColors["grey-700"]
-    }
-  },
-  contrast: {
-    label: {
-      default: IOColors.white,
-      pressed: hexToRgba(IOColors.white, 0.85),
-      disabled: hexToRgba(IOColors.white, 0.5)
-    }
-  }
-};
-
 const DISABLED_OPACITY = 0.5;
 const ICON_MARGIN = 8;
 
@@ -120,25 +99,43 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
     },
     ref
   ) => {
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation();
     const reducedMotion = useReducedMotion();
 
-    const colorMap = useMemo(
-      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-      [isExperimental]
-    );
-
     const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
-    const pressedColorAnimationStyle = useAnimatedStyle(() => ({
-      color: interpolateColor(
+    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
+      // Link color states to the pressed states
+
+      const labelColor = interpolateColor(
+        progress.value,
+        [0, 1],
+        [
+          mapColorStates[color].label.default,
+          mapColorStates[color].label.pressed
+        ]
+      );
+
+      return {
+        color: labelColor
+      };
+    });
+
+    // Animate the <Icon> color prop
+    const pressedColorIconAnimationStyle = useAnimatedProps(() => {
+      const iconColor = interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].label.default, colorMap[color].label.pressed]
-      )
-    }));
+        [
+          mapColorStates[color].label.default,
+          mapColorStates[color].label.pressed
+        ]
+      );
+
+      return { color: iconColor };
+    });
 
     const AnimatedIconClassComponent =
       Animated.createAnimatedComponent(IconClassComponent);
@@ -181,15 +178,15 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
               <AnimatedIconClassComponent
                 allowFontScaling
                 name={icon}
-                animatedProps={pressedColorAnimationStyle}
-                color={colorMap[color]?.label?.default}
+                animatedProps={pressedColorIconAnimationStyle}
+                color={mapColorStates[color]?.label?.default}
                 size={iconSize}
               />
             ) : (
               <AnimatedIcon
                 allowFontScaling
                 name={icon}
-                color={colorMap[color]?.label?.disabled}
+                color={mapColorStates[color]?.label?.disabled}
                 size={iconSize}
               />
             ))}
@@ -197,14 +194,14 @@ export const ButtonLink = forwardRef<View, ButtonLinkProps>(
             accessible={false}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
-            font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
             weight={"Semibold"}
             size={buttonTextFontSize}
             lineHeight={buttonTextLineHeight}
             style={[
               disabled
-                ? { color: colorMap[color]?.label?.disabled }
-                : { ...pressedColorAnimationStyle },
+                ? { color: mapColorStates[color]?.label?.disabled }
+                : { ...pressedColorLabelAnimationStyle },
               { textAlign }
             ]}
             numberOfLines={numberOfLines}

package/src/components/buttons/ButtonOutline.tsx

@@ -12,11 +12,10 @@ import Animated, {
   useReducedMotion
 } from "react-native-reanimated";
 import {
-  IOButtonLegacyStyles,
   IOButtonStyles,
   IOColors,
   hexToRgba,
-  useIOExperimentalDesign
+  useIONewTypeface
 } from "../../core/";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -123,74 +122,6 @@ const mapColorStates: Record<
   }
 };
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const mapLegacyColorStates: Record<
-  NonNullable<ButtonOutline["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    border: {
-      default: IOColors.blue,
-      pressed: IOColors.blue,
-      disabled: IOColors.bluegreyLight
-    },
-    background: {
-      default: hexToRgba(IOColors.blue, 0),
-      pressed: hexToRgba(IOColors.blue, 0.15),
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.blue,
-      pressed: IOColors.blue,
-      disabled: IOColors.grey
-    }
-  },
-  // Contrast button
-  contrast: {
-    border: {
-      default: IOColors.white,
-      pressed: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
-    },
-    background: {
-      default: hexToRgba(IOColors.white, 0),
-      pressed: hexToRgba(IOColors.white, 0.2),
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.white,
-      pressed: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
-    }
-  },
-  // Danger button
-  danger: {
-    border: {
-      default: IOColors.red,
-      pressed: IOColors.red,
-      disabled: IOColors.bluegreyLight
-    },
-    background: {
-      default: hexToRgba(IOColors.red, 0),
-      pressed: hexToRgba(IOColors.red, 0.15),
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.red,
-      pressed: IOColors.red,
-      disabled: IOColors.grey
-    }
-  }
-};
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const IOButtonLegacyStylesLocal = StyleSheet.create({
-  buttonWithBorder: {
-    borderWidth: 1
-  }
-});
-
 // Icon size
 const iconSize: IOIconSizeScale = 20;
 
@@ -219,41 +150,32 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
     },
     ref
   ) => {
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation();
     const reducedMotion = useReducedMotion();
 
     const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
-    const colorMap = React.useMemo(
-      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-      [isExperimental]
-    );
-
-    const buttonStyles = React.useMemo(
-      () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
-      [isExperimental]
-    );
-
-    const buttonStylesLocal = React.useMemo(
-      () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
-      [isExperimental]
-    );
-
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => {
       // Link color states to the pressed states
       const backgroundColor = interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].background.default, colorMap[color].background.pressed]
+        [
+          mapColorStates[color].background.default,
+          mapColorStates[color].background.pressed
+        ]
       );
 
       const borderColor = interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].border.default, colorMap[color].border.pressed]
+        [
+          mapColorStates[color].border.default,
+          mapColorStates[color].border.pressed
+        ]
       );
 
       return {
@@ -266,7 +188,10 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
       color: interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].border.default, colorMap[color].border.pressed]
+        [
+          mapColorStates[color].border.default,
+          mapColorStates[color].border.pressed
+        ]
       )
     }));
 
@@ -275,7 +200,10 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
       color: interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].label.default, colorMap[color].label.pressed]
+        [
+          mapColorStates[color].label.default,
+          mapColorStates[color].label.pressed
+        ]
       )
     }));
 
@@ -299,21 +227,21 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
       >
         <Animated.View
           style={[
-            buttonStyles.button,
-            isExperimental && fullWidth && { paddingHorizontal: 16 },
-            buttonStylesLocal.buttonWithBorder,
-            buttonStyles.buttonSizeDefault,
+            IOButtonStyles.button,
+            IOButtonStyles.buttonSizeDefault,
+            IOButtonStylesLocal.buttonWithBorder,
+            fullWidth && { paddingHorizontal: 16 },
             { columnGap: ICON_MARGIN },
             iconPosition === "end" && { flexDirection: "row-reverse" },
             disabled
               ? {
-                  backgroundColor: colorMap[color]?.background?.disabled,
-                  borderColor: colorMap[color]?.border?.disabled,
+                  backgroundColor: mapColorStates[color]?.background?.disabled,
+                  borderColor: mapColorStates[color]?.border?.disabled,
                   opacity: DISABLED_OPACITY
                 }
               : {
-                  backgroundColor: colorMap[color]?.background?.default,
-                  borderColor: colorMap[color]?.border.default
+                  backgroundColor: mapColorStates[color]?.background?.default,
+                  borderColor: mapColorStates[color]?.border.default
                 },
             /* Prevent Reanimated from overriding background colors
                     if button is disabled */
@@ -327,19 +255,19 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
                 allowFontScaling
                 name={icon}
                 animatedProps={pressedColorIconAnimationStyle}
-                color={colorMap[color]?.label?.default}
+                color={mapColorStates[color]?.label?.default}
                 size={iconSize}
               />
             ) : (
               <AnimatedIcon
                 allowFontScaling
                 name={icon}
-                color={colorMap[color]?.label?.disabled}
+                color={mapColorStates[color]?.label?.disabled}
                 size={iconSize}
               />
             ))}
           <AnimatedIOText
-            font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
             weight={"Semibold"}
             size={buttonTextFontSize}
             accessible={false}
@@ -348,9 +276,9 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
             numberOfLines={1}
             ellipsizeMode="tail"
             style={[
-              buttonStyles.label,
+              IOButtonStyles.label,
               disabled
-                ? { color: colorMap[color]?.label?.disabled }
+                ? { color: mapColorStates[color]?.label?.disabled }
                 : { ...pressedColorLabelAnimationStyle }
             ]}
           >

package/src/components/buttons/ButtonSolid.tsx

@@ -12,13 +12,11 @@ import Animated, {
   useReducedMotion
 } from "react-native-reanimated";
 import {
-  IOButtonLegacyStyles,
   IOButtonStyles,
   IOColors,
   enterTransitionInnerContent,
   enterTransitionInnerContentSmall,
-  exitTransitionInnerContent,
-  useIOExperimentalDesign
+  exitTransitionInnerContent
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -37,15 +35,6 @@ type ColorStates = {
   };
 };
 
-// Disabled state
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const colorPrimaryLegacyButtonDisabled: IOColors = "bluegreyLight";
-const legacyStyles = StyleSheet.create({
-  backgroundDisabled: {
-    backgroundColor: IOColors[colorPrimaryLegacyButtonDisabled]
-  }
-});
-
 const colorPrimaryButtonDisabled: IOColors = "grey-200";
 const ICON_MARGIN = 8;
 const DISABLED_OPACITY = 0.5;
@@ -120,40 +109,6 @@ const mapColorStates: Record<
   }
 };
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const mapLegacyColorStates: Record<
-  NonNullable<ButtonSolidProps["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    default: IOColors.blue,
-    pressed: IOColors["blue-600"],
-    label: {
-      default: "white",
-      disabled: "white"
-    }
-  },
-  // Danger button
-  danger: {
-    default: IOColors["error-600"],
-    pressed: IOColors["error-500"],
-    label: {
-      default: "white",
-      disabled: "white"
-    }
-  },
-  // Contrast button
-  contrast: {
-    default: IOColors.white,
-    pressed: IOColors["blue-50"],
-    label: {
-      default: "blue",
-      disabled: "white"
-    }
-  }
-};
-
 export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
   (
     {
@@ -171,21 +126,10 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
     },
     ref
   ) => {
-    const { isExperimental } = useIOExperimentalDesign();
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation();
     const reducedMotion = useReducedMotion();
 
-    const colorMap = React.useMemo(
-      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-      [isExperimental]
-    );
-
-    const buttonStyles = React.useMemo(
-      () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
-      [isExperimental]
-    );
-
     /* Prevent the component from triggering the `isEntering' transition
        on the on the first render. Solution from this discussion:
        https://github.com/software-mansion/react-native-reanimated/discussions/2513
@@ -203,7 +147,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       const backgroundColor = interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].default, colorMap[color].pressed]
+        [mapColorStates[color].default, mapColorStates[color].pressed]
       );
 
       return { backgroundColor };
@@ -224,8 +168,8 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
 
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
-      ? colorMap[color]?.label?.disabled
-      : colorMap[color]?.label?.default;
+      ? mapColorStates[color]?.label?.disabled
+      : mapColorStates[color]?.label?.default;
 
     return (
       <Pressable
@@ -248,15 +192,13 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       >
         <Animated.View
           style={[
-            buttonStyles.button,
+            IOButtonStyles.button,
+            IOButtonStyles.buttonSizeDefault,
             { overflow: "hidden" },
-            isExperimental && fullWidth && { paddingHorizontal: 16 },
-            buttonStyles.buttonSizeDefault,
+            fullWidth && { paddingHorizontal: 16 },
             disabled
-              ? isExperimental
-                ? styles.backgroundDisabled
-                : legacyStyles.backgroundDisabled
-              : { backgroundColor: colorMap[color]?.default },
+              ? styles.backgroundDisabled
+              : { backgroundColor: mapColorStates[color]?.default },
             /* Prevent Reanimated from overriding background colors
               if button is disabled */
             !disabled && !reducedMotion && scaleAnimatedStyle,
@@ -265,7 +207,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
         >
           {loading && (
             <Animated.View
-              style={buttonStyles.buttonInner}
+              style={IOButtonStyles.buttonInner}
               entering={
                 isMounted.current ? enterTransitionInnerContentSmall : undefined
               }
@@ -278,7 +220,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
           {!loading && (
             <Animated.View
               style={[
-                buttonStyles.buttonInner,
+                IOButtonStyles.buttonInner,
                 { columnGap: ICON_MARGIN },
                 /* If 'iconPosition' is set to 'end', we use 
                    reverse flex property to invert the position */

package/src/components/buttons/IconButton.tsx

@@ -1,17 +1,11 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
   interpolateColor,
   useAnimatedProps,
   useReducedMotion
 } from "react-native-reanimated";
-import {
-  IOColors,
-  IOIconButtonStyles,
-  IOStyles,
-  hexToRgba,
-  useIOExperimentalDesign
-} from "../../core";
+import { IOColors, IOIconButtonStyles, IOStyles, hexToRgba } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import {
@@ -39,37 +33,6 @@ type ColorStates = {
   };
 };
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const mapLegacyColorStates: Record<
-  NonNullable<IconButton["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    icon: {
-      default: IOColors.blue,
-      pressed: IOColors["blue-600"],
-      disabled: hexToRgba(IOColors.blue, 0.25)
-    }
-  },
-  // Neutral button
-  neutral: {
-    icon: {
-      default: IOColors.black,
-      pressed: IOColors.bluegreyDark,
-      disabled: IOColors.grey
-    }
-  },
-  // Contrast button
-  contrast: {
-    icon: {
-      default: IOColors.white,
-      pressed: hexToRgba(IOColors.white, 0.85),
-      disabled: hexToRgba(IOColors.white, 0.25)
-    }
-  }
-};
-
 const mapColorStates: Record<NonNullable<IconButton["color"]>, ColorStates> = {
   // Primary button
   primary: {
@@ -114,19 +77,12 @@ export const IconButton = ({
     useScaleAnimation("exaggerated");
   const reducedMotion = useReducedMotion();
 
-  const { isExperimental } = useIOExperimentalDesign();
-
-  const colorMap = useMemo(
-    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-    [isExperimental]
-  );
-
   // Animate the <Icon> color prop
   const animatedColor = useAnimatedProps(() => {
     const iconColor = interpolateColor(
       progress.value,
       [0, 1],
-      [colorMap[color].icon.default, colorMap[color].icon.pressed]
+      [mapColorStates[color].icon.default, mapColorStates[color].icon.pressed]
     );
     return { color: iconColor };
   });
@@ -164,14 +120,14 @@ export const IconButton = ({
             name={icon}
             size={iconSize}
             animatedProps={animatedColor}
-            color={colorMap[color]?.icon?.default}
+            color={mapColorStates[color]?.icon?.default}
           />
         ) : (
           <AnimatedIcon
             allowFontScaling
             name={icon}
             size={iconSize}
-            color={colorMap[color]?.icon?.disabled}
+            color={mapColorStates[color]?.icon?.disabled}
           />
         )}
       </Animated.View>