@pagopa/io-app-design-system 1.6.0 → 1.7.0

package/src/components/buttons/ButtonLink.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
 import Animated, {
   Extrapolate,
@@ -14,14 +14,15 @@ import {
   IOButtonStyles,
   IOColors,
   IOScaleValues,
-  IOSpringValues
+  IOSpringValues,
+  useIOExperimentalDesign
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons/Icon";
 import { HSpacer } from "../spacer/Spacer";
 
-type ColorButtonLink = "primary" | "error" | "warning" | "success" | "info";
+type ColorButtonLink = "primary";
 export type ButtonLink = WithTestID<{
   color?: ColorButtonLink;
   label: string;
@@ -52,32 +53,19 @@ const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
       pressed: IOColors["blueIO-600"],
       disabled: IOColors["grey-700"]
     }
-  },
-  error: {
-    label: {
-      default: IOColors["error-850"],
-      pressed: IOColors["error-850"],
-      disabled: IOColors["grey-700"]
-    }
-  },
-  warning: {
-    label: {
-      default: IOColors["warning-850"],
-      pressed: IOColors["warning-850"],
-      disabled: IOColors["grey-700"]
-    }
-  },
-  success: {
-    label: {
-      default: IOColors["success-850"],
-      pressed: IOColors["success-850"],
-      disabled: IOColors["grey-700"]
-    }
-  },
-  info: {
+  }
+};
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const mapLegacyColorStates: Record<
+  NonNullable<ButtonLink["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
     label: {
-      default: IOColors["info-850"],
-      pressed: IOColors["info-850"],
+      default: IOColors.blue,
+      pressed: IOColors["blue-600"],
       disabled: IOColors["grey-700"]
     }
   }
@@ -91,6 +79,14 @@ const IOButtonStylesLocal = StyleSheet.create({
   }
 });
 
+// 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, "TitilliumWeb")
+  }
+});
+
 export const ButtonLink = React.memo(
   ({
     color = "primary",
@@ -104,6 +100,16 @@ export const ButtonLink = React.memo(
     testID
   }: ButtonLink) => {
     const isPressed = useSharedValue(0);
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const colorMap = useMemo(
+      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+      [isExperimental]
+    );
+    const buttonStylesLocal = useMemo(
+      () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
+      [isExperimental]
+    );
 
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
@@ -136,10 +142,7 @@ export const ButtonLink = React.memo(
       const labelColor = interpolateColor(
         progressPressed.value,
         [0, 1],
-        [
-          mapColorStates[color].label.default,
-          mapColorStates[color].label.pressed
-        ]
+        [colorMap[color].label.default, colorMap[color].label.pressed]
       );
 
       return {
@@ -152,10 +155,7 @@ export const ButtonLink = React.memo(
       const iconColor = interpolateColor(
         progressPressed.value,
         [0, 1],
-        [
-          mapColorStates[color].label.default,
-          mapColorStates[color].label.pressed
-        ]
+        [colorMap[color].label.default, colorMap[color].label.pressed]
       );
 
       return { color: iconColor };
@@ -207,13 +207,13 @@ export const ButtonLink = React.memo(
                 <AnimatedIconClassComponent
                   name={icon}
                   animatedProps={pressedColorIconAnimationStyle}
-                  color={mapColorStates[color]?.label?.default}
+                  color={colorMap[color]?.label?.default}
                   size={iconSize}
                 />
               ) : (
                 <AnimatedIcon
                   name={icon}
-                  color={mapColorStates[color]?.label?.disabled}
+                  color={colorMap[color]?.label?.disabled}
                   size={iconSize}
                 />
               )}
@@ -222,10 +222,10 @@ export const ButtonLink = React.memo(
           )}
           <Animated.Text
             style={[
-              IOButtonStylesLocal.label,
+              buttonStylesLocal.label,
               disabled
-                ? { color: mapColorStates[color]?.label?.disabled }
-                : { color: mapColorStates[color]?.label?.default },
+                ? { color: colorMap[color]?.label?.disabled }
+                : { color: colorMap[color]?.label?.default },
               !disabled && pressedColorLabelAnimationStyle
             ]}
             numberOfLines={1}

package/src/components/buttons/ButtonOutline.tsx

@@ -11,15 +11,22 @@ import Animated, {
   withSpring
 } from "react-native-reanimated";
 import {
+  IOButtonLegacyStyles,
   IOButtonStyles,
   IOColors,
   IOScaleValues,
   IOSpringValues,
-  hexToRgba
+  hexToRgba,
+  useIOExperimentalDesign
 } from "../../core/";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
+import {
+  AnimatedIcon,
+  IOIconSizeScale,
+  IOIcons,
+  IconClassComponent
+} from "../icons";
 import { HSpacer } from "../spacer/Spacer";
 
 type ColorButtonOutline = "primary" | "neutral" | "contrast" | "danger";
@@ -134,12 +141,105 @@ 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
+    }
+  },
+  // Neutral button
+  neutral: {
+    border: {
+      default: IOColors.grey,
+      pressed: IOColors.bluegrey,
+      disabled: IOColors.bluegreyLight
+    },
+    background: {
+      default: IOColors.white,
+      pressed: IOColors.greyUltraLight,
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors.bluegrey,
+      pressed: IOColors.bluegreyDark,
+      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({
+  // eslint-disable-next-line react-native/no-unused-styles
+  label: {
+    ...makeFontStyleObject("Bold")
+  },
+  // eslint-disable-next-line react-native/no-unused-styles
+  buttonWithBorder: {
+    borderWidth: 1
+  }
+});
+
 const DISABLED_OPACITY = 0.5;
 
 const IOButtonStylesLocal = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-unused-styles
   label: {
     ...makeFontStyleObject("Regular", false, "ReadexPro")
   },
+  // eslint-disable-next-line react-native/no-unused-styles
   buttonWithBorder: {
     borderWidth: 2
   }
@@ -158,8 +258,23 @@ export const ButtonOutline = ({
   accessibilityHint,
   testID
 }: ButtonOutline) => {
+  const { isExperimental } = useIOExperimentalDesign();
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
+  const colorMap = React.useMemo(
+    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+    [isExperimental]
+  );
+
+  const buttonStyles = React.useMemo(
+    () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
+    [isExperimental]
+  );
+
+  const buttonStylesLocal = React.useMemo(
+    () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
+    [isExperimental]
+  );
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
@@ -174,19 +289,13 @@ export const ButtonOutline = ({
     const backgroundColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].background.default,
-        mapColorStates[color].background.pressed
-      ]
+      [colorMap[color].background.default, colorMap[color].background.pressed]
     );
 
     const borderColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].border.default,
-        mapColorStates[color].border.pressed
-      ]
+      [colorMap[color].border.default, colorMap[color].border.pressed]
     );
 
     // Scale down button slightly when pressed
@@ -210,10 +319,7 @@ export const ButtonOutline = ({
     const labelColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].border.default,
-        mapColorStates[color].border.pressed
-      ]
+      [colorMap[color].border.default, colorMap[color].border.pressed]
     );
 
     return {
@@ -226,7 +332,7 @@ export const ButtonOutline = ({
     const iconColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [mapColorStates[color].label.default, mapColorStates[color].label.pressed]
+      [colorMap[color].label.default, colorMap[color].label.pressed]
     );
     return { color: iconColor };
   });
@@ -243,7 +349,10 @@ export const ButtonOutline = ({
     isPressed.value = 0;
   }, [isPressed]);
 
-  const Button = () => (
+  // Icon size
+  const iconSize: IOIconSizeScale = small ? 16 : 20;
+
+  return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -258,21 +367,19 @@ export const ButtonOutline = ({
     >
       <Animated.View
         style={[
-          IOButtonStyles.button,
-          IOButtonStylesLocal.buttonWithBorder,
+          buttonStyles.button,
+          buttonStylesLocal.buttonWithBorder,
           iconPosition === "end" && { flexDirection: "row-reverse" },
-          small
-            ? IOButtonStyles.buttonSizeSmall
-            : IOButtonStyles.buttonSizeDefault,
+          small ? buttonStyles.buttonSizeSmall : buttonStyles.buttonSizeDefault,
           disabled
             ? {
-                backgroundColor: mapColorStates[color]?.background?.disabled,
-                borderColor: mapColorStates[color]?.border?.disabled,
+                backgroundColor: colorMap[color]?.background?.disabled,
+                borderColor: colorMap[color]?.border?.disabled,
                 opacity: DISABLED_OPACITY
               }
             : {
-                backgroundColor: mapColorStates[color]?.background?.default,
-                borderColor: mapColorStates[color]?.border.default
+                backgroundColor: colorMap[color]?.background?.default,
+                borderColor: colorMap[color]?.border.default
               },
           /* Prevent Reanimated from overriding background colors
                     if button is disabled */
@@ -285,12 +392,14 @@ export const ButtonOutline = ({
               <AnimatedIconClassComponent
                 name={icon}
                 animatedProps={pressedColorIconAnimationStyle}
-                color={mapColorStates[color]?.label?.default}
+                color={colorMap[color]?.label?.default}
+                size={iconSize}
               />
             ) : (
               <AnimatedIcon
                 name={icon}
-                color={mapColorStates[color]?.label?.disabled}
+                color={colorMap[color]?.label?.disabled}
+                size={iconSize}
               />
             )}
             <HSpacer size={8} />
@@ -298,14 +407,12 @@ export const ButtonOutline = ({
         )}
         <Animated.Text
           style={[
-            IOButtonStylesLocal.label,
-            IOButtonStyles.label,
-            small
-              ? IOButtonStyles.labelSizeSmall
-              : IOButtonStyles.labelSizeDefault,
+            buttonStylesLocal.label,
+            buttonStyles.label,
+            small ? buttonStyles.labelSizeSmall : buttonStyles.labelSizeDefault,
             disabled
-              ? { color: mapColorStates[color]?.label?.disabled }
-              : { color: mapColorStates[color]?.label?.default },
+              ? { color: colorMap[color]?.label?.disabled }
+              : { color: colorMap[color]?.label?.default },
             !disabled && pressedColorLabelAnimationStyle
           ]}
           numberOfLines={1}
@@ -320,8 +427,6 @@ export const ButtonOutline = ({
       </Animated.View>
     </Pressable>
   );
-
-  return <Button />;
 };
 
 export default ButtonOutline;

package/src/components/buttons/ButtonSolid.tsx

@@ -9,13 +9,18 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
-import { IOColors } from "../../core/IOColors";
-import { IOButtonStyles } from "../../core/IOStyles";
 import { IOIcons, Icon } from "../icons";
 import { WithTestID } from "../../utils/types";
 import { HSpacer } from "../spacer/Spacer";
 import { BaseTypography } from "../typography/BaseTypography";
+import {
+  IOButtonLegacyStyles,
+  IOButtonStyles,
+  IOColors,
+  IOScaleValues,
+  IOSpringValues,
+  useIOExperimentalDesign
+} from "../../core";
 
 type ButtonSolidColor = "primary" | "danger" | "contrast";
 
@@ -28,6 +33,15 @@ 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 DISABLED_OPACITY = 0.5;
 
@@ -100,6 +114,40 @@ 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.memo(
   ({
     color = "primary",
@@ -115,10 +163,23 @@ export const ButtonSolid = React.memo(
     testID
   }: ButtonSolidProps) => {
     const isPressed = useSharedValue(0);
-
+    const { isExperimental } = useIOExperimentalDesign();
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
+    const colorMap = React.useMemo(
+      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+      [isExperimental]
+    );
+
+    const buttonStyles = React.useMemo(
+      () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
+      [isExperimental]
+    );
+
+    // Icon size
+    const iconSize = React.useMemo(() => (small ? 16 : 20), [small]);
+
     // Using a spring-based animation for our interpolations
     const progressPressed = useDerivedValue(() =>
       withSpring(isPressed.value, IOSpringValues.button)
@@ -130,7 +191,7 @@ export const ButtonSolid = React.memo(
       const bgColor = interpolateColor(
         progressPressed.value,
         [0, 1],
-        [mapColorStates[color].default, mapColorStates[color].pressed]
+        [colorMap[color].default, colorMap[color].pressed]
       );
 
       // Scale down button slightly when pressed
@@ -158,13 +219,10 @@ export const ButtonSolid = React.memo(
 
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
-      ? mapColorStates[color]?.label?.disabled
-      : mapColorStates[color]?.label?.default;
-
-    // Icon size
-    const iconSize = small ? 16 : 20;
+      ? colorMap[color]?.label?.disabled
+      : colorMap[color]?.label?.default;
 
-    const Button = () => (
+    return (
       <Pressable
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
@@ -179,14 +237,16 @@ export const ButtonSolid = React.memo(
       >
         <Animated.View
           style={[
-            IOButtonStyles.button,
+            buttonStyles.button,
             iconPosition === "end" && { flexDirection: "row-reverse" },
             small
-              ? IOButtonStyles.buttonSizeSmall
-              : IOButtonStyles.buttonSizeDefault,
+              ? buttonStyles.buttonSizeSmall
+              : buttonStyles.buttonSizeDefault,
             disabled
-              ? styles.backgroundDisabled
-              : { backgroundColor: mapColorStates[color]?.default },
+              ? isExperimental
+                ? styles.backgroundDisabled
+                : legacyStyles.backgroundDisabled
+              : { backgroundColor: colorMap[color]?.default },
             /* Prevent Reanimated from overriding background colors
                     if button is disabled */
             !disabled && pressedAnimationStyle
@@ -203,14 +263,14 @@ export const ButtonSolid = React.memo(
             </>
           )}
           <BaseTypography
-            font="ReadexPro"
-            weight={"Regular"}
+            font={isExperimental ? "ReadexPro" : undefined}
+            weight={isExperimental ? "Regular" : "Bold"}
             color={foregroundColor}
             style={[
-              IOButtonStyles.label,
+              buttonStyles.label,
               small
-                ? IOButtonStyles.labelSizeSmall
-                : IOButtonStyles.labelSizeDefault
+                ? buttonStyles.labelSizeSmall
+                : buttonStyles.labelSizeDefault
             ]}
             numberOfLines={1}
             ellipsizeMode="tail"
@@ -224,7 +284,6 @@ export const ButtonSolid = React.memo(
         </Animated.View>
       </Pressable>
     );
-    return <Button />;
   }
 );
 

package/src/components/buttons/IconButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
   Extrapolate,
@@ -15,7 +15,8 @@ import {
   IOIconButtonStyles,
   IOScaleValues,
   IOSpringValues,
-  hexToRgba
+  hexToRgba,
+  useIOExperimentalDesign
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
@@ -37,6 +38,37 @@ 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: {
@@ -78,6 +110,13 @@ export const IconButton = ({
 }: IconButton) => {
   const isPressed = useSharedValue(0);
 
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const colorMap = useMemo(
+    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+    [isExperimental]
+  );
+
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
 
@@ -107,7 +146,7 @@ export const IconButton = ({
     const iconColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [mapColorStates[color].icon.default, mapColorStates[color].icon.pressed]
+      [colorMap[color].icon.default, colorMap[color].icon.pressed]
     );
     return { color: iconColor };
   });
@@ -149,13 +188,10 @@ export const IconButton = ({
           <AnimatedIconClassComponent
             name={icon}
             animatedProps={animatedColor}
-            color={mapColorStates[color]?.icon?.default}
+            color={colorMap[color]?.icon?.default}
           />
         ) : (
-          <AnimatedIcon
-            name={icon}
-            color={mapColorStates[color]?.icon?.disabled}
-          />
+          <AnimatedIcon name={icon} color={colorMap[color]?.icon?.disabled} />
         )}
       </Animated.View>
     </Pressable>