@pagopa/io-app-design-system 5.11.12 → 5.11.13

package/src/components/buttons/ButtonOutline.tsx

@@ -1,261 +0,0 @@
-import React, { ComponentProps, forwardRef } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
-import Animated, {
-  interpolateColor,
-  useAnimatedProps,
-  useAnimatedStyle,
-  useReducedMotion
-} from "react-native-reanimated";
-import { useIONewTypeface, useIOTheme } from "../../context";
-import { IOButtonStyles, IOColors, hexToRgba } from "../../core/";
-import { useScaleAnimation } from "../../hooks";
-import { WithTestID } from "../../utils/types";
-import {
-  AnimatedIcon,
-  AnimatedIconWithColorTransition,
-  IOIconSizeScale,
-  IOIcons
-} from "../icons";
-import { IOText, buttonTextFontSize } from "../typography";
-
-type ColorButtonOutline = "primary" | "contrast";
-export type ButtonOutline = WithTestID<
-  {
-    color?: ColorButtonOutline;
-    label: string;
-    fullWidth?: boolean;
-    // Icons
-    icon?: IOIcons;
-    iconPosition?: "start" | "end";
-    // Events
-    onPress: (event: GestureResponderEvent) => void;
-  } & Pick<
-    ComponentProps<typeof Pressable>,
-    "disabled" | "accessibilityLabel" | "accessibilityHint"
-  >
->;
-
-type ColorStates = {
-  background: {
-    default: string;
-    pressed: string;
-    disabled: string;
-  };
-  foreground: {
-    default: string;
-    pressed: string;
-    disabled: string;
-  };
-};
-
-// Icon size
-const iconSize: IOIconSizeScale = 20;
-
-const DISABLED_OPACITY = 0.5;
-const ICON_MARGIN = 8;
-
-const IOButtonStylesLocal = StyleSheet.create({
-  buttonWithBorder: {
-    borderWidth: 2
-  }
-});
-
-/**
- * @deprecated Use `Button` with variant `outline` instead
- */
-export const ButtonOutline = forwardRef<View, ButtonOutline>(
-  (
-    {
-      color = "primary",
-      label,
-      fullWidth = false,
-      disabled = false,
-      icon,
-      iconPosition = "start",
-      onPress,
-      accessibilityLabel,
-      accessibilityHint,
-      testID
-    },
-    ref
-  ) => {
-    const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
-    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation();
-    const reducedMotion = useReducedMotion();
-
-    const AnimatedIOText = Animated.createAnimatedComponent(IOText);
-
-    const mapColorStates: Record<
-      NonNullable<ButtonOutline["color"]>,
-      ColorStates
-    > = {
-      // Primary button
-      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"]]
-        }
-      },
-      // Contrast button
-      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"]
-        }
-      }
-    };
-
-    // Interpolate animation values from `isPressed` values
-    const pressedAnimationStyle = useAnimatedStyle(() => {
-      // Link color states to the pressed states
-      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 {
-        borderColor,
-        backgroundColor
-      };
-    });
-
-    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => ({
-      color: interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].foreground.default,
-          mapColorStates[color].foreground.pressed
-        ]
-      )
-    }));
-
-    // Animate the <Icon> color prop
-    const pressedColorIconAnimationStyle = useAnimatedProps(() => ({
-      color: interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].foreground.default,
-          mapColorStates[color].foreground.pressed
-        ]
-      )
-    }));
-
-    return (
-      <Pressable
-        ref={ref}
-        accessible={true}
-        accessibilityLabel={accessibilityLabel || label}
-        accessibilityHint={accessibilityHint}
-        accessibilityRole={"button"}
-        accessibilityState={{ disabled: disabled || false }}
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        style={
-          fullWidth
-            ? { flexShrink: 0, alignSelf: "stretch" }
-            : { flexShrink: 1, alignSelf: "auto" }
-        }
-        testID={testID}
-      >
-        <Animated.View
-          style={[
-            IOButtonStyles.button,
-            IOButtonStyles.buttonSizeDefault,
-            IOButtonStylesLocal.buttonWithBorder,
-            fullWidth && { paddingHorizontal: 16 },
-            { columnGap: ICON_MARGIN },
-            iconPosition === "end" && { flexDirection: "row-reverse" },
-            disabled
-              ? {
-                  backgroundColor: mapColorStates[color]?.background?.disabled,
-                  borderColor: mapColorStates[color]?.foreground?.disabled,
-                  opacity: DISABLED_OPACITY
-                }
-              : {
-                  backgroundColor: mapColorStates[color]?.background?.default,
-                  borderColor: mapColorStates[color]?.foreground.default
-                },
-            /* Prevent Reanimated from overriding background colors
-                    if button is disabled */
-            !reducedMotion && !disabled && scaleAnimatedStyle,
-            !disabled && pressedAnimationStyle
-          ]}
-        >
-          {icon &&
-            (!disabled ? (
-              <AnimatedIconWithColorTransition
-                allowFontScaling
-                name={icon}
-                animatedProps={pressedColorIconAnimationStyle}
-                color={mapColorStates[color]?.foreground?.default}
-                size={iconSize}
-              />
-            ) : (
-              <AnimatedIcon
-                allowFontScaling
-                name={icon}
-                color={mapColorStates[color]?.foreground?.disabled}
-                size={iconSize}
-              />
-            ))}
-          <AnimatedIOText
-            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
-            weight={"Semibold"}
-            size={buttonTextFontSize}
-            accessible={false}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            style={[
-              { alignSelf: "center" },
-              disabled
-                ? { color: mapColorStates[color]?.foreground?.disabled }
-                : { ...pressedColorLabelAnimationStyle }
-            ]}
-          >
-            {label}
-          </AnimatedIOText>
-        </Animated.View>
-      </Pressable>
-    );
-  }
-);
-
-export default ButtonOutline;

package/src/components/buttons/ButtonSolid.tsx

@@ -1,285 +0,0 @@
-import React, {
-  ComponentProps,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef
-} from "react";
-import {
-  ColorValue,
-  GestureResponderEvent,
-  Pressable,
-  View
-} from "react-native";
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import Animated, {
-  interpolateColor,
-  useAnimatedStyle,
-  useReducedMotion
-} from "react-native-reanimated";
-import { useIOTheme } from "../../context";
-import {
-  IOButtonStyles,
-  IOColors,
-  enterTransitionInnerContent,
-  enterTransitionInnerContentSmall,
-  exitTransitionInnerContent
-} from "../../core";
-import { useScaleAnimation } from "../../hooks";
-import { WithTestID } from "../../utils/types";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { LoadingSpinner } from "../loadingSpinner";
-import { ButtonText } from "../typography/ButtonText";
-
-export type ButtonSolidColor = "primary" | "danger" | "contrast";
-
-type ColorStates = {
-  background: {
-    default: string;
-    pressed: string;
-    disabled: string;
-  };
-  foreground: {
-    default: IOColors;
-    disabled: IOColors;
-  };
-};
-
-const ICON_MARGIN = 8;
-const DISABLED_OPACITY = 0.5;
-
-// Icon size
-const iconSize: IOIconSizeScale = 20;
-
-export type ButtonSolidProps = WithTestID<
-  {
-    /**
-     * @default primary
-     */
-    color?: ButtonSolidColor;
-    label: string;
-    /**
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * @default false
-     */
-    loading?: boolean;
-    icon?: IOIcons;
-    /**
-     * @default start
-     */
-    iconPosition?: "start" | "end";
-    onPress: (event: GestureResponderEvent) => void;
-  } & Pick<
-    ComponentProps<typeof Pressable>,
-    "disabled" | "accessibilityLabel" | "accessibilityHint"
-  >
->;
-
-/**
- * @deprecated Use `Button` with variant `solid` instead
- */
-export const ButtonSolid = forwardRef<View, ButtonSolidProps>(
-  (
-    {
-      color = "primary",
-      label,
-      fullWidth = false,
-      disabled = false,
-      loading = false,
-      icon,
-      iconPosition = "start",
-      onPress,
-      accessibilityLabel,
-      accessibilityHint,
-      testID
-    },
-    ref
-  ) => {
-    const theme = useIOTheme();
-    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation();
-    const reducedMotion = useReducedMotion();
-
-    const mapColorStates: Record<
-      NonNullable<ButtonSolidProps["color"]>,
-      ColorStates
-    > = {
-      // Primary button
-      primary: {
-        background: {
-          default: IOColors[theme["interactiveElem-default"]],
-          pressed: IOColors[theme["interactiveElem-pressed"]],
-          disabled: IOColors[theme["interactiveElem-disabled"]]
-        },
-        foreground: {
-          default: theme["buttonText-default"],
-          disabled: theme["buttonText-disabled"]
-        }
-      },
-      // Danger button
-      danger: {
-        background: {
-          default: IOColors["error-600"],
-          pressed: IOColors["error-500"],
-          disabled: IOColors[theme["interactiveElem-disabled"]]
-        },
-        foreground: {
-          default: theme["buttonText-danger"],
-          disabled: theme["buttonText-disabled"]
-        }
-      },
-      // Contrast button
-      contrast: {
-        background: {
-          default: IOColors.white,
-          pressed: IOColors["blueIO-50"],
-          disabled: IOColors["blueIO-50"]
-        },
-        foreground: {
-          default: "blueIO-500",
-          disabled: "blueIO-500"
-        }
-      }
-    };
-
-    /* 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
-    */
-    const isMounted = useRef(false);
-
-    useEffect(() => {
-      // eslint-disable-next-line functional/immutable-data
-      isMounted.current = true;
-    }, []);
-
-    // Interpolate animation values from `isPressed` values
-    const pressedAnimationStyle = useAnimatedStyle(() => {
-      // Link color states to the pressed states
-      const backgroundColor = interpolateColor(
-        progress.value,
-        [0, 1],
-        [
-          mapColorStates[color].background.default,
-          mapColorStates[color].background.pressed
-        ]
-      );
-
-      return { backgroundColor };
-    });
-
-    const handleOnPress = useCallback(
-      (event: GestureResponderEvent) => {
-        /* Don't call `onPress` if the button is
-        in loading state */
-        if (loading) {
-          return;
-        }
-        ReactNativeHapticFeedback.trigger("impactLight");
-        onPress(event);
-      },
-      [loading, onPress]
-    );
-
-    // Background
-    const backgroundColor: ColorValue = disabled
-      ? mapColorStates[color]?.background?.disabled
-      : mapColorStates[color]?.background?.default;
-
-    // Label & Icons colors
-    const foregroundColor: IOColors = disabled
-      ? mapColorStates[color]?.foreground?.disabled
-      : mapColorStates[color]?.foreground?.default;
-
-    return (
-      <Pressable
-        testID={testID}
-        ref={ref}
-        accessible={true}
-        // Using || operator because empty string is not an accepted value
-        accessibilityLabel={accessibilityLabel || label}
-        accessibilityHint={accessibilityHint}
-        accessibilityState={{
-          busy: loading,
-          disabled: disabled || false
-        }}
-        accessibilityRole={"button"}
-        onPress={handleOnPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        style={
-          fullWidth
-            ? { flexShrink: 0, alignSelf: "stretch" }
-            : { flexShrink: 1, alignSelf: "auto" }
-        }
-      >
-        <Animated.View
-          style={[
-            IOButtonStyles.button,
-            IOButtonStyles.buttonSizeDefault,
-            { backgroundColor, overflow: "hidden" },
-            fullWidth && { paddingHorizontal: 16 },
-            disabled ? { opacity: DISABLED_OPACITY } : {},
-            /* Prevent Reanimated from overriding background colors
-              if button is disabled */
-            !disabled && !reducedMotion && scaleAnimatedStyle,
-            !disabled && pressedAnimationStyle
-          ]}
-        >
-          {loading && (
-            <Animated.View
-              style={IOButtonStyles.buttonInner}
-              entering={
-                isMounted.current ? enterTransitionInnerContentSmall : undefined
-              }
-              exiting={exitTransitionInnerContent}
-            >
-              <LoadingSpinner color={IOColors[foregroundColor]} />
-            </Animated.View>
-          )}
-
-          {!loading && (
-            <Animated.View
-              style={[
-                IOButtonStyles.buttonInner,
-                { columnGap: ICON_MARGIN },
-                /* If 'iconPosition' is set to 'end', we use 
-                   reverse flex property to invert the position */
-                iconPosition === "end" && { flexDirection: "row-reverse" }
-              ]}
-              entering={
-                isMounted.current ? enterTransitionInnerContent : undefined
-              }
-            >
-              {icon && (
-                <Icon
-                  allowFontScaling
-                  name={icon}
-                  size={iconSize}
-                  color={foregroundColor}
-                />
-              )}
-              <ButtonText
-                color={foregroundColor}
-                style={IOButtonStyles.label}
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                accessible={false}
-                accessibilityElementsHidden
-                importantForAccessibility="no-hide-descendants"
-              >
-                {label}
-              </ButtonText>
-            </Animated.View>
-          )}
-        </Animated.View>
-      </Pressable>
-    );
-  }
-);
-
-export default ButtonSolid;