@pagopa/io-app-design-system 5.3.8 → 5.4.0

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

@@ -0,0 +1,363 @@
+import React, {
+  ComponentProps,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef
+} from "react";
+import {
+  AccessibilityRole,
+  ColorValue,
+  GestureResponderEvent,
+  Pressable,
+  PressableProps,
+  StyleSheet,
+  TextProps,
+  TextStyle,
+  View,
+  ViewStyle
+} from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
+import Animated, { useReducedMotion } from "react-native-reanimated";
+import {
+  enterTransitionInnerContent,
+  enterTransitionInnerContentSmall,
+  exitTransitionInnerContent,
+  useIONewTypeface
+} from "../../../core";
+import { useScaleAnimation } from "../../../hooks";
+import { WithTestID } from "../../../utils/types";
+import {
+  AnimatedIcon,
+  AnimatedIconWithColorTransition,
+  IOIconSizeScale,
+  IOIcons
+} from "../../icons";
+import { LoadingSpinner } from "../../loadingSpinner";
+import { AnimatedIOText } from "../../typography";
+import {
+  buttonTextFontSize,
+  buttonTextLineHeight
+} from "../../typography/ButtonText";
+import { useButtonAnimatedStyles, useButtonColorMap } from "./styles";
+
+export type IOButtonColor = "primary" | "danger" | "contrast";
+export type IOButtonVariant = "solid" | "outline" | "link";
+
+export type IOButtonBlockSpecificProps = Omit<
+  ComponentProps<typeof IOButton>,
+  "numberOfLines" | "textAlign"
+>;
+
+export type IOButtonLinkSpecificProps = Omit<
+  ComponentProps<typeof IOButton>,
+  "fullWidth" | "loading"
+>;
+
+type IOButtonSpecificProps =
+  | {
+      variant?: "link";
+      numberOfLines?: TextProps["numberOfLines"];
+      textAlign?: TextStyle["textAlign"];
+      fullWidth?: never;
+      loading?: never;
+    }
+  | {
+      variant?: "solid" | "outline";
+      fullWidth?: boolean;
+      loading?: boolean;
+      numberOfLines?: never;
+      textAlign?: never;
+    };
+
+export type IOButtonProps = WithTestID<
+  IOButtonSpecificProps & {
+    /**
+     * @default primary
+     */
+    color?: IOButtonColor;
+    label: string;
+    icon?: IOIcons;
+    /**
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * @default start
+     */
+    iconPosition?: "start" | "end";
+    /**
+     * @default 1
+     */
+    numberOfLines?: number;
+    /**
+     * @default auto
+     */
+    textAlign?: TextStyle["textAlign"];
+    onPress: (event: GestureResponderEvent) => void;
+    /**
+     * @default button
+     */
+    accessibilityRole?: Extract<AccessibilityRole, "button" | "link">;
+  } & Pick<
+      ComponentProps<typeof Pressable>,
+      "disabled" | "accessibilityLabel" | "accessibilityHint"
+    >
+>;
+
+export const IOButton = forwardRef<View, IOButtonProps>(
+  (
+    {
+      variant = "solid",
+      color = "primary",
+      label,
+      fullWidth = false,
+      disabled = false,
+      loading = false,
+      numberOfLines = 1,
+      textAlign = "auto",
+      icon,
+      iconPosition = "start",
+      onPress,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityRole = "button",
+      testID
+    },
+    ref
+  ) => {
+    const mapColorStates = useButtonColorMap(variant);
+    const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
+      useScaleAnimation();
+    const { buttonAnimatedStyle, labelAnimatedStyle, iconColorAnimatedStyle } =
+      useButtonAnimatedStyles(variant, color, progress);
+    const reducedMotion = useReducedMotion();
+    const { newTypefaceEnabled } = useIONewTypeface();
+
+    const isLinkButton = variant === "link";
+
+    // ---------------------------------------
+    // VISUAL ATTRIBUTES
+    // ---------------------------------------
+    const btnIconSizeMap: Record<IOButtonVariant, IOIconSizeScale> = {
+      solid: 20,
+      outline: 20,
+      link: 24
+    };
+
+    const btnBorderWidthMap: Record<IOButtonVariant, ViewStyle["borderWidth"]> =
+      {
+        solid: 0,
+        outline: 2,
+        link: 0
+      };
+
+    const btnPaddingHorizontalMap: Record<
+      string,
+      ViewStyle["paddingHorizontal"]
+    > = {
+      default: 24,
+      fullWidth: 16,
+      link: 0
+    };
+
+    const btnLinkHitSlop: PressableProps["hitSlop"] = {
+      top: 14,
+      right: 24,
+      bottom: 14,
+      left: 24
+    };
+
+    const btnIconSize = btnIconSizeMap[variant];
+    const btnBorderWidth = btnBorderWidthMap[variant];
+    const btnBorderRadius = 8;
+    const btnSizeDefault = 48;
+
+    const ICON_MARGIN = 8;
+    const DISABLED_OPACITY = 0.5;
+
+    // Background color
+    const backgroundColor: ColorValue = disabled
+      ? mapColorStates[color].background.disabled
+      : mapColorStates[color].background.default;
+
+    // Label & Icons colors
+    const foregroundColor: ColorValue = disabled
+      ? mapColorStates[color]?.foreground?.disabled
+      : mapColorStates[color]?.foreground?.default;
+
+    // ---------------------------------------
+    // BUTTON INNER LOGIC
+    // ---------------------------------------
+
+    /* 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<boolean>(false);
+
+    useEffect(() => {
+      // eslint-disable-next-line functional/immutable-data
+      isMounted.current = true;
+    }, []);
+
+    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]
+    );
+
+    // ---------------------------------------
+    // BUTTON INNER CONTENT
+    // ---------------------------------------
+    const renderButtonContent = () => (
+      <>
+        {loading && (
+          <Animated.View
+            style={styles.buttonInner}
+            entering={
+              isMounted.current ? enterTransitionInnerContentSmall : undefined
+            }
+            exiting={exitTransitionInnerContent}
+          >
+            <LoadingSpinner color={foregroundColor} />
+          </Animated.View>
+        )}
+
+        {!loading && (
+          <Animated.View
+            style={[
+              styles.buttonInner,
+              { columnGap: ICON_MARGIN },
+              iconPosition === "end" && { flexDirection: "row-reverse" }
+            ]}
+            entering={
+              isMounted.current ? enterTransitionInnerContent : undefined
+            }
+          >
+            {icon &&
+              (!disabled ? (
+                <AnimatedIconWithColorTransition
+                  allowFontScaling
+                  name={icon}
+                  animatedProps={iconColorAnimatedStyle}
+                  size={btnIconSize}
+                />
+              ) : (
+                <AnimatedIcon
+                  allowFontScaling
+                  name={icon}
+                  color={mapColorStates[color]?.foreground?.disabled}
+                  size={btnIconSize}
+                />
+              ))}
+            <AnimatedIOText
+              font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
+              weight={"Semibold"}
+              size={buttonTextFontSize}
+              lineHeight={isLinkButton ? buttonTextLineHeight : undefined}
+              accessible={false}
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              numberOfLines={numberOfLines}
+              ellipsizeMode="tail"
+              style={[
+                { textAlign },
+                disabled
+                  ? { color: mapColorStates[color]?.foreground?.disabled }
+                  : { ...labelAnimatedStyle }
+              ]}
+            >
+              {label}
+            </AnimatedIOText>
+          </Animated.View>
+        )}
+      </>
+    );
+
+    return (
+      <Pressable
+        ref={ref}
+        accessible={true}
+        // Using || operator because empty string is not an accepted value
+        accessibilityLabel={accessibilityLabel || label}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole={accessibilityRole}
+        accessibilityState={{
+          busy: loading,
+          disabled: disabled || false
+        }}
+        onPress={handleOnPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        disabled={disabled}
+        hitSlop={isLinkButton ? btnLinkHitSlop : undefined}
+        style={
+          isLinkButton
+            ? { alignSelf: "flex-start" }
+            : fullWidth
+            ? { flexShrink: 0, alignSelf: "stretch" }
+            : { flexShrink: 1, alignSelf: "auto" }
+        }
+        testID={testID}
+      >
+        <Animated.View
+          style={[
+            styles.button,
+            {
+              paddingHorizontal: isLinkButton
+                ? btnPaddingHorizontalMap.link
+                : fullWidth
+                ? btnPaddingHorizontalMap.fullWidth
+                : btnPaddingHorizontalMap.default
+            },
+            {
+              height: isLinkButton ? undefined : btnSizeDefault,
+              backgroundColor,
+              borderWidth: btnBorderWidth,
+              borderRadius: btnBorderRadius,
+              borderColor: foregroundColor
+            },
+            disabled ? { opacity: DISABLED_OPACITY } : {},
+            /* Prevent Reanimated from overriding background colors
+                if button is disabled */
+            !disabled && !reducedMotion && scaleAnimatedStyle,
+            !disabled && buttonAnimatedStyle
+          ]}
+        >
+          {renderButtonContent()}
+        </Animated.View>
+      </Pressable>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlignVertical: "center", // Prop supported on Android only
+    borderCurve: "continuous",
+    overflow: "hidden",
+    elevation: 0
+  },
+  buttonInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+export default IOButton;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Alert } from "react-native";
+import * as TestRenderer from "react-test-renderer";
+import IOButton from "../IOButton";
+
+const onButtonPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+
+describe("Test Buttons Components", () => {
+  it("IOButton Snapshot · Solid variant", () => {
+    const buttonSolid = TestRenderer.create(
+      <IOButton
+        variant="solid"
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></IOButton>
+    ).toJSON();
+    expect(buttonSolid).toMatchSnapshot();
+  });
+
+  it("IOButton Snapshot · Link variant", () => {
+    const buttonLink = TestRenderer.create(
+      <IOButton
+        variant="link"
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></IOButton>
+    ).toJSON();
+    expect(buttonLink).toMatchSnapshot();
+  });
+
+  it("IOButton Snapshot · Outline variant", () => {
+    const buttonOutline = TestRenderer.create(
+      <IOButton
+        variant="outline"
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></IOButton>
+    ).toJSON();
+    expect(buttonOutline).toMatchSnapshot();
+  });
+});