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

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

@@ -0,0 +1,391 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Buttons Components IOButton Snapshot · Link variant 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": false,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  hitSlop={
+    {
+      "bottom": 14,
+      "left": 24,
+      "right": 24,
+      "top": 14,
+    }
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderCurve": "continuous",
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "textAlignVertical": "center",
+        },
+        {
+          "paddingHorizontal": 0,
+        },
+        {
+          "backgroundColor": "transparent",
+          "borderColor": "#0B3EE3",
+          "borderRadius": 8,
+          "borderWidth": 0,
+          "height": undefined,
+        },
+        {},
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+        {},
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "columnGap": 8,
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
+        maxFontSizeMultiplier={1.5}
+        numberOfLines={1}
+        style={
+          [
+            {},
+            {
+              "color": "#0E0F13",
+              "fontFamily": "Titillio",
+              "fontSize": 16,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": 20,
+            },
+            [
+              {
+                "textAlign": "auto",
+              },
+              {
+                "color": undefined,
+              },
+            ],
+          ]
+        }
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": false,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "auto",
+      "flexShrink": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderCurve": "continuous",
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "textAlignVertical": "center",
+        },
+        {
+          "paddingHorizontal": 24,
+        },
+        {
+          "backgroundColor": "rgba(9,50,182,0)",
+          "borderColor": "#0B3EE3",
+          "borderRadius": 8,
+          "borderWidth": 2,
+          "height": 48,
+        },
+        {},
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+        {
+          "backgroundColor": undefined,
+          "borderColor": undefined,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "columnGap": 8,
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
+        maxFontSizeMultiplier={1.5}
+        numberOfLines={1}
+        style={
+          [
+            {},
+            {
+              "color": "#0E0F13",
+              "fontFamily": "Titillio",
+              "fontSize": 16,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": undefined,
+            },
+            [
+              {
+                "textAlign": "auto",
+              },
+              {
+                "color": undefined,
+              },
+            ],
+          ]
+        }
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": false,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "auto",
+      "flexShrink": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "borderCurve": "continuous",
+          "elevation": 0,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "textAlignVertical": "center",
+        },
+        {
+          "paddingHorizontal": 24,
+        },
+        {
+          "backgroundColor": "#0B3EE3",
+          "borderColor": "#FFFFFF",
+          "borderRadius": 8,
+          "borderWidth": 0,
+          "height": 48,
+        },
+        {},
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+        {
+          "backgroundColor": undefined,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          {
+            "columnGap": 8,
+          },
+          false,
+        ]
+      }
+    >
+      <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        importantForAccessibility="no-hide-descendants"
+        maxFontSizeMultiplier={1.5}
+        numberOfLines={1}
+        style={
+          [
+            {},
+            {
+              "color": "#0E0F13",
+              "fontFamily": "Titillio",
+              "fontSize": 16,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": undefined,
+            },
+            [
+              {
+                "textAlign": "auto",
+              },
+              {
+                "color": undefined,
+              },
+            ],
+          ]
+        }
+      >
+        label
+      </Text>
+    </View>
+  </View>
+</View>
+`;

package/src/components/buttons/IOButton/index.tsx

@@ -0,0 +1 @@
+export * from "./IOButton";

package/src/components/buttons/IOButton/styles.tsx

@@ -0,0 +1,228 @@
+import {
+  interpolateColor,
+  SharedValue,
+  useAnimatedProps,
+  useAnimatedStyle
+} from "react-native-reanimated";
+import { IOColors, hexToRgba, useIOTheme } from "../../../core";
+import { IOButtonColor, IOButtonProps, IOButtonVariant } from "./IOButton";
+
+type ColorStates = {
+  background: {
+    default: string;
+    pressed: string;
+    disabled: string;
+  };
+  foreground: {
+    default: string;
+    pressed: string;
+    disabled: string;
+  };
+};
+
+export const useButtonColorMap = (variant: IOButtonVariant) => {
+  const theme = useIOTheme();
+
+  const mapColorStatesVariantSolid: Record<
+    NonNullable<IOButtonProps["color"]>,
+    ColorStates
+  > = {
+    // Primary
+    primary: {
+      background: {
+        default: IOColors[theme["interactiveElem-default"]],
+        pressed: IOColors[theme["interactiveElem-pressed"]],
+        disabled: IOColors[theme["interactiveElem-disabled"]]
+      },
+      foreground: {
+        default: IOColors[theme["buttonText-default"]],
+        pressed: IOColors[theme["buttonText-default"]],
+        disabled: IOColors[theme["buttonText-disabled"]]
+      }
+    },
+    // Danger
+    danger: {
+      background: {
+        default: IOColors["error-600"],
+        pressed: IOColors["error-500"],
+        disabled: IOColors[theme["interactiveElem-disabled"]]
+      },
+      foreground: {
+        default: IOColors[theme["buttonText-danger"]],
+        pressed: IOColors[theme["buttonText-danger"]],
+        disabled: IOColors[theme["buttonText-disabled"]]
+      }
+    },
+    // Contrast
+    contrast: {
+      background: {
+        default: IOColors.white,
+        pressed: IOColors["blueIO-50"],
+        disabled: IOColors["blueIO-50"]
+      },
+      foreground: {
+        default: IOColors["blueIO-500"],
+        pressed: IOColors["blueIO-500"],
+        disabled: IOColors["blueIO-500"]
+      }
+    }
+  };
+
+  const mapColorStatesVariantOutline: Record<
+    NonNullable<IOButtonProps["color"]>,
+    ColorStates
+  > = {
+    // Primary
+    primary: {
+      background: {
+        default: hexToRgba(IOColors[theme["interactiveElem-pressed"]], 0),
+        pressed: hexToRgba(IOColors[theme["interactiveElem-pressed"]], 0.1),
+        disabled: "transparent"
+      },
+      foreground: {
+        default: IOColors[theme["interactiveElem-default"]],
+        pressed: IOColors[theme["interactiveElem-pressed"]],
+        disabled: IOColors[theme["interactiveOutline-disabled"]]
+      }
+    },
+    // Danger
+    danger: {
+      background: {
+        default: hexToRgba(IOColors["error-600"], 0),
+        pressed: hexToRgba(IOColors["error-600"], 0.1),
+        disabled: "transparent"
+      },
+      foreground: {
+        default: IOColors[theme.errorText],
+        pressed: IOColors[theme.errorText],
+        disabled: IOColors[theme["buttonText-disabled"]]
+      }
+    },
+    // Contrast
+    contrast: {
+      background: {
+        default: hexToRgba(IOColors["blueIO-600"], 0),
+        pressed: hexToRgba(IOColors["blueIO-600"], 0.5),
+        disabled: "transparent"
+      },
+      foreground: {
+        default: IOColors.white,
+        pressed: IOColors.white,
+        disabled: IOColors["blueIO-200"]
+      }
+    }
+  };
+
+  const transparentLinkBackground: ColorStates["background"] = {
+    default: "transparent",
+    pressed: "transparent",
+    disabled: "transparent"
+  };
+
+  const mapColorStatesVariantLink: Record<
+    NonNullable<IOButtonProps["color"]>,
+    ColorStates
+  > = {
+    // Primary
+    primary: {
+      foreground: {
+        default: IOColors[theme["interactiveElem-default"]],
+        pressed: IOColors[theme["interactiveElem-pressed"]],
+        disabled: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.85)
+      },
+      background: transparentLinkBackground
+    },
+    // Danger
+    danger: {
+      foreground: {
+        default: IOColors[theme.errorText],
+        pressed: IOColors[theme.errorText],
+        disabled: hexToRgba(IOColors[theme.errorText], 0.85)
+      },
+      background: transparentLinkBackground
+    },
+    // Contrast
+    contrast: {
+      foreground: {
+        default: IOColors.white,
+        pressed: hexToRgba(IOColors.white, 0.85),
+        disabled: hexToRgba(IOColors.white, 0.5)
+      },
+      background: transparentLinkBackground
+    }
+  };
+
+  const colorMap = {
+    solid: mapColorStatesVariantSolid,
+    outline: mapColorStatesVariantOutline,
+    link: mapColorStatesVariantLink
+  };
+
+  return colorMap[variant];
+};
+
+export const useButtonAnimatedStyles = (
+  variant: IOButtonVariant,
+  color: IOButtonColor,
+  progress: SharedValue<number>
+) => {
+  const mapColorStates = useButtonColorMap(variant);
+
+  // Interpolate animation values from `isPressed` values
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // `link` variant doesn't need this animated style
+    if (variant === "link") {
+      return {};
+    }
+
+    const backgroundColor = interpolateColor(
+      progress.value,
+      [0, 1],
+      [
+        mapColorStates[color].background.default,
+        mapColorStates[color].background.pressed
+      ]
+    );
+
+    const borderColor = interpolateColor(
+      progress.value,
+      [0, 1],
+      [
+        mapColorStates[color].foreground.default,
+        mapColorStates[color].foreground.pressed
+      ]
+    );
+
+    return variant === "outline"
+      ? { backgroundColor, borderColor }
+      : { backgroundColor };
+  });
+
+  const pressedColorLabelAnimationStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(
+      progress.value,
+      [0, 1],
+      [
+        mapColorStates[color].foreground.default,
+        mapColorStates[color].foreground.pressed
+      ]
+    )
+  }));
+
+  const iconColorAnimatedStyle = useAnimatedProps(() => ({
+    color: interpolateColor(
+      progress.value,
+      [0, 1],
+      [
+        mapColorStates[color]?.foreground?.default,
+        mapColorStates[color]?.foreground?.pressed
+      ]
+    )
+  }));
+
+  return {
+    buttonAnimatedStyle: pressedAnimationStyle,
+    labelAnimatedStyle: pressedColorLabelAnimationStyle,
+    iconColorAnimatedStyle
+  };
+};

package/src/components/buttons/IconButton.tsx

@@ -8,7 +8,6 @@ import Animated, {
 import {
   IOColors,
   IOIconButtonStyles,
-  IOStyles,
   IOThemeLight,
   hexToRgba,
   useIOTheme
@@ -17,9 +16,9 @@ import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
+  AnimatedIconWithColorTransition,
   IOIconSizeScale,
-  IOIcons,
-  IconClassComponent
+  IOIcons
 } from "../icons";
 
 export type IconButton = WithTestID<{
@@ -41,9 +40,6 @@ type ColorStates = {
   };
 };
 
-const AnimatedIconClassComponent =
-  Animated.createAnimatedComponent(IconClassComponent);
-
 export const IconButton = ({
   color = "primary",
   persistentColorMode = false,
@@ -127,14 +123,13 @@ export const IconButton = ({
     >
       <Animated.View
         style={[
+          IOIconButtonStyles.button,
           IOIconButtonStyles.buttonSizeSmall,
-          IOStyles.alignCenter,
-          IOStyles.centerJustified,
           !disabled && !reducedMotion && scaleAnimatedStyle
         ]}
       >
         {!disabled ? (
-          <AnimatedIconClassComponent
+          <AnimatedIconWithColorTransition
             allowFontScaling
             name={icon}
             size={iconSize}

package/src/components/buttons/IconButtonContained.tsx

@@ -8,8 +8,8 @@ import Animated, {
 } from "react-native-reanimated";
 import {
   AnimatedIcon,
-  IOIcons,
-  IconClassComponent
+  AnimatedIconWithColorTransition,
+  IOIcons
 } from "../../components/icons";
 import { IOColors, IOIconButtonStyles, hexToRgba } from "../../core";
 import { useScaleAnimation } from "../../hooks";
@@ -82,9 +82,6 @@ const mapColorStates: Record<
   }
 };
 
-const AnimatedIconClassComponent =
-  Animated.createAnimatedComponent(IconClassComponent);
-
 export const IconButtonContained = ({
   icon,
   color = "primary",
@@ -141,7 +138,7 @@ export const IconButtonContained = ({
         ]}
       >
         {!disabled ? (
-          <AnimatedIconClassComponent
+          <AnimatedIconWithColorTransition
             name={icon}
             animatedProps={iconColorAnimationStyle}
             color={mapColorStates[color]?.icon?.default}