@pagopa/io-app-design-system 1.14.0 → 1.16.0

package/src/components/modules/ModuleIDP.tsx

@@ -1,57 +1,30 @@
 import * as React from "react";
-import { useCallback } from "react";
 import {
-  GestureResponderEvent,
   Image,
   ImageSourcePropType,
   Platform,
-  Pressable,
   StyleSheet,
   Text
 } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
 import {
   IOColors,
-  IOModuleIDPHSpacing,
-  IOModuleIDPRadius,
-  IOModuleIDPSavedVSpacing,
-  IOModuleIDPVSpacing,
   IOListItemLogoMargin,
-  IOScaleValues,
-  IOSpringValues,
   useIOExperimentalDesign
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { makeFontStyleObject } from "../../utils/fonts";
-import { WithTestID } from "../../utils/types";
+import {
+  PressableModuleBase,
+  PressableModuleBaseProps
+} from "./PressableModuleBase";
 
-type ModuleIDP = WithTestID<{
+interface ModuleIDP extends PressableModuleBaseProps {
   name: string;
   localLogo: ImageSourcePropType;
   logo: ImageSourcePropType;
-  saved?: boolean;
-  onPress: (event: GestureResponderEvent) => void;
-}>;
+}
 
 const styles = StyleSheet.create({
-  button: {
-    borderWidth: 1,
-    borderColor: IOColors["grey-100"],
-    borderRadius: IOModuleIDPRadius,
-    backgroundColor: IOColors.white,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: IOModuleIDPVSpacing,
-    paddingHorizontal: IOModuleIDPHSpacing
-  },
   idpName: {
     color: IOColors["grey-700"],
     fontSize: 12,
@@ -84,41 +57,11 @@ export const ModuleIDP = ({
   name,
   localLogo,
   logo,
-  saved,
+  withLooseSpacing = false,
   onPress,
   testID
 }: ModuleIDP) => {
-  const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
-
-  const scaleTraversed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      scaleTraversed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      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]);
 
   // eslint-disable-next-line no-console
   const urlLogoIDP = localLogo
@@ -127,34 +70,21 @@ export const ModuleIDP = ({
         uri: `${logo}${androidIdpLogoForcedRefreshed()}`
       };
   return (
-    <Pressable
+    <PressableModuleBase
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onTouchEnd={handlePressOut}
-      accessible={true}
-      accessibilityRole={"button"}
-      accessibilityLabel={name}
       testID={testID}
+      withLooseSpacing={withLooseSpacing}
     >
-      <Animated.View
+      <Text
         style={[
-          styles.button,
-          saved && { paddingVertical: IOModuleIDPSavedVSpacing },
-          animatedStyle
+          styles.idpName,
+          isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
         ]}
       >
-        <Text
-          style={[
-            styles.idpName,
-            isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
-          ]}
-        >
-          {name}
-        </Text>
-        <Image source={urlLogoIDP} style={styles.idpLogo} />
-      </Animated.View>
-    </Pressable>
+        {name}
+      </Text>
+      <Image source={urlLogoIDP} style={styles.idpLogo} />
+    </PressableModuleBase>
   );
 };
 

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,19 +1,5 @@
 import * as React from "react";
-import { useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
 import { WithTestID } from "../../utils/types";
 import { getAccessibleAmountText } from "../../utils/accessibility";
@@ -21,14 +7,13 @@ import { H6, LabelSmall } from "../typography";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import {
-  IOColors,
   IOListItemVisualParams,
-  IOScaleValues,
-  IOSpringValues,
+  IOModuleStyles,
   IOStyles,
   useIOExperimentalDesign
 } from "../../core";
 import { VSpacer } from "../spacer";
+import { PressableModuleBase } from "./PressableModuleBase";
 
 export type PaymentNoticeStatus =
   | "default"
@@ -36,7 +21,8 @@ export type PaymentNoticeStatus =
   | "error"
   | "expired"
   | "revoked"
-  | "canceled";
+  | "canceled"
+  | "in-progress";
 
 export type ModulePaymentNoticeProps = WithTestID<
   {
@@ -60,19 +46,6 @@ export type ModulePaymentNoticeProps = WithTestID<
 >;
 
 const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderRadius: 8,
-    borderColor: IOColors.bluegreyLight,
-    backgroundColor: IOColors.white,
-    borderStyle: "solid",
-    borderWidth: 1
-  },
   rightSection: {
     marginLeft: IOListItemVisualParams.iconMargin,
     flexDirection: "row",
@@ -111,12 +84,14 @@ const ModulePaymentNoticeContent = ({
         return <Badge variant="default" text={badgeText} />;
       case "canceled":
         return <Badge variant="default" text={badgeText} />;
+      case "in-progress":
+        return <Badge variant="info" text={badgeText} />;
     }
   };
 
   return (
     <>
-      <View style={{ flexGrow: 1, flexShrink: 1 }}>
+      <View style={{ flexGrow: 1, flexShrink: 1, paddingEnd: 8 }}>
         {title && (
           <LabelSmall numberOfLines={1} weight="Regular" color="bluegrey">
             {title}
@@ -126,6 +101,7 @@ const ModulePaymentNoticeContent = ({
           weight="SemiBold"
           font={isExperimental ? "ReadexPro" : "TitilliumWeb"}
           color={isExperimental ? "blueIO-500" : "bluegrey"}
+          numberOfLines={2}
         >
           {subtitle}
         </LabelSmall>
@@ -161,62 +137,23 @@ export const ModulePaymentNotice = ({
   onPress,
   ...rest
 }: ModulePaymentNoticeProps) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
-
-  const scaleTraversed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const animatedStyle = useAnimatedStyle(() => {
-    const scale = interpolate(
-      scaleTraversed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      transform: [{ scale }]
-    };
-  });
-
-  const onPressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-
-  const onPressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
   if (isLoading) {
     return <SkeletonComponent />;
   }
 
   return (
-    <Pressable
-      testID={testID}
+    <PressableModuleBase
       onPress={onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      accessible={true}
-      accessibilityRole={"button"}
       accessibilityLabel={accessibilityLabel}
+      testID={testID}
     >
-      <Animated.View style={[styles.button, animatedStyle]}>
-        <ModulePaymentNoticeContent {...rest} />
-      </Animated.View>
-    </Pressable>
+      <ModulePaymentNoticeContent {...rest} />
+    </PressableModuleBase>
   );
 };
 
 const SkeletonComponent = () => (
-  <View style={styles.button} accessible={false}>
+  <View style={IOModuleStyles.button} accessible={false}>
     <View style={IOStyles.flex}>
       <Placeholder.Box animate="fade" radius={8} width={179} height={16} />
       <VSpacer size={4} />

package/src/components/modules/PressableModuleBase.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { GestureResponderEvent, Pressable } from "react-native";
+import Animated from "react-native-reanimated";
+import { IOModuleIDPSavedVSpacing, IOModuleStyles } from "../../core";
+import { WithTestID } from "../../utils/types";
+import { useModuleSpringAnimation } from "./hooks/useModuleSpringAnimation";
+
+export type PressableModuleBaseProps = WithTestID<{
+  accessibilityLabel?: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  withLooseSpacing?: boolean;
+}>;
+
+export const PressableModuleBase = ({
+  onPress,
+  testID,
+  accessibilityLabel,
+  withLooseSpacing = false,
+  children
+}: React.PropsWithChildren<PressableModuleBaseProps>) => {
+  const { handlePressIn, handlePressOut, animatedStyle } =
+    useModuleSpringAnimation();
+  return (
+    <Pressable
+      onPress={onPress}
+      testID={testID}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onTouchEnd={handlePressOut}
+      accessibilityRole="button"
+    >
+      <Animated.View
+        style={[
+          IOModuleStyles.button,
+          withLooseSpacing && { paddingVertical: IOModuleIDPSavedVSpacing },
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </Pressable>
+  );
+};

package/src/components/modules/hooks/useModuleSpringAnimation.ts

@@ -0,0 +1,49 @@
+import {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { useCallback } from "react";
+import { IOScaleValues, IOSpringValues } from "../../../core";
+
+export const useModuleSpringAnimation = () => {
+  const isPressed = useSharedValue(0);
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
+
+  const scaleTraversed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
+
+  // Interpolate animation values from `isPressed` values
+  const animatedStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      scaleTraversed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      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]);
+
+  return {
+    animatedStyle,
+    handlePressIn,
+    handlePressOut
+  };
+};

package/src/components/modules/index.tsx

@@ -1,2 +1,3 @@
 export * from "./ModuleIDP";
 export * from "./ModulePaymentNotice";
+export * from "./PressableModuleBase";

package/src/components/numberpad/NumberButton.tsx

@@ -0,0 +1,132 @@
+import React, { useCallback, useMemo } from "react";
+import { Pressable } from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import {
+  IOColors,
+  IONumberPadButtonStyles,
+  IOScaleValues,
+  IOSpringValues,
+  useIOExperimentalDesign
+} from "../../core";
+import { H3 } from "../typography";
+
+type NumberButtonVariantType = "light" | "dark";
+
+type NumberButtonProps = {
+  variant: NumberButtonVariantType;
+  number: number;
+  onPress: (number: number) => void;
+};
+
+type ColorMapVariant = {
+  background: IOColors;
+  pressed: IOColors;
+  foreground: IOColors;
+};
+
+const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
+  light: {
+    background: "grey-50",
+    pressed: "grey-200",
+    foreground: "blueIO-500"
+  },
+  dark: {
+    background: "blueIO-400",
+    pressed: "blueIO-200",
+    foreground: "white"
+  }
+};
+
+const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
+  light: {
+    background: "grey-50",
+    pressed: "grey-200",
+    foreground: "blue"
+  },
+  dark: {
+    background: "blue",
+    pressed: "blue-600",
+    foreground: "white"
+  }
+};
+
+export const NumberButton = ({
+  number,
+  variant,
+  onPress
+}: NumberButtonProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const colors = useMemo(
+    () => (isExperimental ? colorMap[variant] : legacyColorMap[variant]),
+    [variant, isExperimental]
+  );
+  const isPressed = useSharedValue(0);
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.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 bgColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [IOColors[colors.background], IOColors[colors.pressed]]
+    );
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      backgroundColor: bgColor,
+      transform: [{ scale }]
+    };
+  });
+
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  return (
+    <Pressable
+      accessible={true}
+      accessibilityRole={"button"}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onPress={() => onPress(number)}
+    >
+      <Animated.View
+        style={[
+          IONumberPadButtonStyles.button,
+          IONumberPadButtonStyles.circularShape,
+          IONumberPadButtonStyles.buttonSize,
+          pressedAnimationStyle
+        ]}
+      >
+        <H3 color={colors.foreground}>{number}</H3>
+      </Animated.View>
+    </Pressable>
+  );
+};

package/src/components/numberpad/NumberPad.tsx

@@ -0,0 +1,135 @@
+/* eslint-disable functional/immutable-data */
+import React, { ComponentProps, useRef } from "react";
+import { View } from "react-native";
+import { BiometricsValidType } from "../../utils/types";
+import { IONumberPadButtonStyles, IOStyles } from "../../core";
+import { VSpacer } from "../spacer";
+import { IconButton } from "../buttons";
+import { IOIconSizeScale, IOIcons } from "../icons";
+import { NumberButton } from "./NumberButton";
+
+type BiometricAuthProps =
+  | {
+      biometricType: BiometricsValidType;
+      onBiometricPress: () => void;
+      biometricAccessibilityLabel: string;
+    }
+  | {
+      biometricType?: never;
+      onBiometricPress?: never;
+      biometricAccessibilityLabel?: never;
+    };
+
+type NumberPadProps = {
+  onValueChange: (value: string) => void;
+  variant: ComponentProps<typeof NumberButton>["variant"];
+  deleteAccessibilityLabel: string;
+} & BiometricAuthProps;
+
+const mapIconSpecByBiometric: Record<
+  BiometricsValidType,
+  { icon: IOIcons; size: IOIconSizeScale }
+> = {
+  FACE_ID: { icon: "biomFaceID", size: 32 },
+  TOUCH_ID: { icon: "fingerprint", size: 24 },
+  BIOMETRICS: { icon: "fingerprint", size: 24 }
+};
+
+const ButtonWrapper = ({ children }: { children: React.ReactNode }) => (
+  <View
+    style={[
+      IONumberPadButtonStyles.buttonSize,
+      IOStyles.alignCenter,
+      IOStyles.centerJustified
+    ]}
+  >
+    {children}
+  </View>
+);
+export const NumberPad = ({
+  variant = "dark",
+  onValueChange,
+  biometricType,
+  onBiometricPress,
+  biometricAccessibilityLabel,
+  deleteAccessibilityLabel
+}: NumberPadProps) => {
+  const numberPadValue = useRef<string>("");
+
+  const numberPadPress = (number: number) => {
+    numberPadValue.current = `${numberPadValue.current}${number}`;
+    onValueChange(numberPadValue.current);
+  };
+
+  const onDeletePress = () => {
+    numberPadValue.current = numberPadValue.current.slice(0, -1);
+    onValueChange(numberPadValue.current);
+  };
+
+  type ButtonType = "biometric" | "delete";
+
+  const RowButtons = ({
+    buttons
+  }: {
+    buttons: ReadonlyArray<number | ButtonType>;
+  }) => (
+    <View
+      style={[
+        IOStyles.flex,
+        IOStyles.rowSpaceBetween,
+        { justifyContent: "space-between", alignItems: "center" }
+      ]}
+    >
+      {buttons.map(elem => {
+        if (typeof elem === "number") {
+          return (
+            <NumberButton
+              key={elem}
+              number={elem}
+              onPress={numberPadPress}
+              variant={variant}
+            />
+          );
+        }
+
+        if (elem === "delete") {
+          return (
+            <ButtonWrapper key={elem}>
+              <IconButton
+                icon="cancel"
+                color={variant === "dark" ? "contrast" : "primary"}
+                onPress={onDeletePress}
+                accessibilityLabel={deleteAccessibilityLabel}
+              />
+            </ButtonWrapper>
+          );
+        }
+        return biometricType ? (
+          <ButtonWrapper key={elem}>
+            <IconButton
+              icon={mapIconSpecByBiometric[biometricType].icon}
+              iconSize={mapIconSpecByBiometric[biometricType].size}
+              color={variant === "dark" ? "contrast" : "primary"}
+              onPress={onBiometricPress}
+              accessibilityLabel={biometricAccessibilityLabel}
+            />
+          </ButtonWrapper>
+        ) : (
+          <View key={"emptyElem"} style={IONumberPadButtonStyles.buttonSize} />
+        );
+      })}
+    </View>
+  );
+
+  return (
+    <View style={IOStyles.horizontalContentPadding}>
+      <RowButtons buttons={[1, 2, 3]} />
+      <VSpacer />
+      <RowButtons buttons={[4, 5, 6]} />
+      <VSpacer />
+      <RowButtons buttons={[7, 8, 9]} />
+      <VSpacer />
+      <RowButtons buttons={["biometric", 0, "delete"]} />
+    </View>
+  );
+};

package/src/components/numberpad/index.tsx

@@ -0,0 +1,2 @@
+// export * from "./NumberButton";
+export * from "./NumberPad";