@pagopa/io-app-design-system 1.0.0-9 → 1.0.0

package/src/components/buttons/IconButtonContained.tsx

@@ -0,0 +1,201 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { GestureResponderEvent, Pressable } from "react-native";
+import Animated, {
+    Extrapolate,
+    interpolate,
+    interpolateColor,
+    useAnimatedProps,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withSpring
+} from "react-native-reanimated";
+import { WithTestID } from "src/utils/types";
+import {
+    AnimatedIcon,
+    IOIcons,
+    IconClassComponent
+} from "../../components/icons";
+import {
+    IOButtonStyles,
+    IOColors,
+    IOIconButtonStyles,
+    IOScaleValues,
+    IOSpringValues,
+    hexToRgba
+} from "../../core";
+
+export type IconButtonContained = WithTestID<{
+  icon: IOIcons;
+  color?: "primary" | "neutral" | "contrast";
+  disabled?: boolean;
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+  onPress: (event: GestureResponderEvent) => void;
+}>;
+
+type ColorStates = {
+  background: {
+    default: string;
+    pressed: string;
+    disabled: string;
+  };
+  icon: {
+    default: string;
+    pressed: string;
+    disabled: string;
+  };
+};
+
+const mapColorStates: Record<
+  NonNullable<IconButtonContained["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    background: {
+      default: hexToRgba(IOColors["blueIO-500"], 0),
+      pressed: hexToRgba(IOColors["blueIO-500"], 0.15),
+      disabled: "transparent"
+    },
+    icon: {
+      default: IOColors["blueIO-500"],
+      pressed: IOColors["blueIO-600"],
+      disabled: hexToRgba(IOColors["blueIO-500"], 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);
+
+export const IconButtonContained = ({
+  icon,
+  color = "primary",
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  testID
+}: IconButtonContained) => {
+  const isPressed = useSharedValue(0);
+
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
+
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
+
+  // Interpolate animation values from `isPressed` values
+
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+    const backgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [
+        mapColorStates[color].background.default,
+        mapColorStates[color].background.pressed
+      ]
+    );
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      backgroundColor,
+      transform: [{ scale }]
+    };
+  });
+
+  // Animate the <Icon> color prop
+  const animatedColor = useAnimatedProps(() => {
+    const iconColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [mapColorStates[color].icon.default, mapColorStates[color].icon.pressed]
+    );
+    return { color: iconColor };
+  });
+
+  const handlePressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const handlePressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={"button"}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessible={true}
+      disabled={disabled}
+      style={IOButtonStyles.dimensionsDefault}
+    >
+      <Animated.View
+        style={[
+          IOIconButtonStyles.button,
+          IOIconButtonStyles.buttonSizeDefault,
+          !disabled && pressedAnimationStyle
+        ]}
+      >
+        {!disabled ? (
+          <AnimatedIconClassComponent
+            name={icon}
+            animatedProps={animatedColor}
+            color={mapColorStates[color]?.icon?.default}
+          />
+        ) : (
+          <AnimatedIcon
+            name={icon}
+            color={mapColorStates[color]?.icon?.disabled}
+          />
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+export default IconButtonContained;

package/src/components/buttons/IconButtonSolid.tsx

@@ -0,0 +1,168 @@
+import * as React from "react";
+import { useCallback } from "react";
+import { GestureResponderEvent, Pressable } from "react-native";
+import Animated, {
+    Extrapolate,
+    interpolate,
+    interpolateColor,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withSpring
+} from "react-native-reanimated";
+import {
+    IOButtonStyles,
+    IOIconButtonStyles,
+    IOScaleValues,
+    IOSpringValues
+} from "../../core";
+import { IOColors, hexToRgba } from "../../core/IOColors";
+import { WithTestID } from "../../utils/types";
+import { AnimatedIcon, IOIcons } from "../icons";
+
+export type IconButtonSolid = WithTestID<{
+  icon: IOIcons;
+  color?: "primary" | "contrast";
+  disabled?: boolean;
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+  onPress: (event: GestureResponderEvent) => void;
+}>;
+
+type ColorStates = {
+  background: {
+    default: string;
+    pressed: string;
+    disabled: string;
+  };
+  icon: {
+    default: string;
+    disabled: string;
+  };
+};
+
+const mapColorStates: Record<
+  NonNullable<IconButtonSolid["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    background: {
+      default: IOColors["blueIO-500"],
+      pressed: IOColors["blueIO-600"],
+      disabled: IOColors["grey-100"]
+    },
+    icon: {
+      default: IOColors.white,
+      disabled: IOColors["grey-450"]
+    }
+  },
+  contrast: {
+    background: {
+      default: IOColors.white,
+      pressed: IOColors["blueIO-50"],
+      disabled: hexToRgba(IOColors.white, 0.25)
+    },
+    icon: {
+      default: IOColors["blueIO-500"],
+      disabled: IOColors["blueIO-500"]
+    }
+  }
+};
+
+export const IconButtonSolid = ({
+  icon,
+  color = "primary",
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  testID
+}: IconButtonSolid) => {
+  const isPressed = useSharedValue(0);
+
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
+
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
+
+  // Interpolate animation values from `isPressed` values
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [
+        mapColorStates[color].background.default,
+        mapColorStates[color].background.pressed
+      ]
+    );
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      backgroundColor,
+      transform: [{ scale }]
+    };
+  });
+
+  const handlePressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const handlePressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  const NewButton = () => (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={"button"}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessible={true}
+      disabled={disabled}
+      style={IOButtonStyles.dimensionsDefault}
+    >
+      <Animated.View
+        style={[
+          IOIconButtonStyles.button,
+          IOIconButtonStyles.buttonSizeLarge,
+          !disabled && pressedAnimationStyle,
+          disabled
+            ? {
+                backgroundColor: mapColorStates[color]?.background?.disabled
+              }
+            : {
+                backgroundColor: mapColorStates[color]?.background?.default
+              }
+        ]}
+      >
+        <AnimatedIcon
+          name={icon}
+          color={
+            !disabled
+              ? mapColorStates[color]?.icon?.default
+              : mapColorStates[color]?.icon?.disabled
+          }
+        />
+      </Animated.View>
+    </Pressable>
+  );
+
+  return <NewButton />;
+};
+
+export default IconButtonSolid;