[IOPLT-133] Implements NumberPad component

example/src/navigation/navigator.tsx

@@ -24,6 +24,7 @@ import { HeaderSecondLevelScreen } from "../pages/HeaderSecondLevel";
 import { StaticHeaderSecondLevelScreen } from "../pages/StaticHeaderSecondLevel";
 import { Toasts } from "../pages/Toasts";
 import { HeaderFirstLevelScreen } from "../pages/HeaderFirstLevel";
+import { NumberPadScreen } from "../pages/NumberPad";
 import { AppParamsList } from "./params";
 import APP_ROUTES from "./routes";
 
@@ -97,6 +98,14 @@ const AppNavigator = () => (
         headerBackTitleVisible: false
       }}
     />
+    <Stack.Screen
+      name={APP_ROUTES.COMPONENTS.NUMBER_PAD.route}
+      component={NumberPadScreen}
+      options={{
+        headerTitle: APP_ROUTES.COMPONENTS.NUMBER_PAD.title,
+        headerBackTitleVisible: false
+      }}
+    />
     <Stack.Screen
       name={APP_ROUTES.COMPONENTS.BUTTONS.route}
       component={Buttons}

example/src/navigation/params.ts

@@ -8,6 +8,7 @@ export type AppParamsList = {
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.ICONS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.PICTOGRAMS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.FOUNDATION.LOGOS.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.COMPONENTS.NUMBER_PAD.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.BUTTONS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.BADGE.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.SELECTION.route]: undefined;

example/src/navigation/routes.ts

@@ -9,6 +9,7 @@ const APP_ROUTES = {
     LOGOS: { route: "DESIGN_SYSTEM_LOGOS", title: "Logos" }
   },
   COMPONENTS: {
+    NUMBER_PAD: { route: "DESIGN_SYSTEM_NUMBER_PAD", title: "Number Pad" },
     BUTTONS: { route: "DESIGN_SYSTEM_BUTTONS", title: "Buttons" },
     LIST_ITEMS: { route: "DESIGN_SYSTEM_LIST_ITEMS", title: "List Items" },
     MODULES: { route: "DESIGN_SYSTEM_MODULES", title: "Modules" },

example/src/pages/MainScreen.tsx

@@ -65,7 +65,8 @@ const MainScreen = (props: Props) => {
     <ListItemNav
       accessibilityLabel={`Go to the ${title} page`}
       value={title}
-      onPress={() => props.navigation.navigate(route as keyof AppParamsList)}
+      // we're using as any cause of compilation error
+      onPress={() => props.navigation.navigate(route as any)}
     />
   );
 

example/src/pages/NumberPad.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Alert, View } from "react-native";
+import {
+  H1,
+  H5,
+  IOVisualCostants,
+  IOStyles,
+  VSpacer,
+  NumberPad,
+  H3
+} from "@pagopa/io-app-design-system";
+import { Screen } from "../components/Screen";
+
+/**
+ * This Screen is used to test components in isolation while developing.
+ * @returns a screen with a flexed view where you can test components
+ */
+export const NumberPadScreen = () => {
+  const [value, setValue] = React.useState("");
+  return (
+    <Screen>
+      <View
+        style={[
+          IOStyles.flex,
+          { paddingTop: IOVisualCostants.appMarginDefault }
+        ]}
+      >
+        <H1>NumberPad</H1>
+        <H5>{"Value Typed on the NumberPad component"}</H5>
+        <VSpacer />
+        <H3>{value}</H3>
+        <VSpacer />
+        <NumberPad
+          deleteAccessibilityLabel="Delete"
+          onValueChange={setValue}
+          variant="light"
+          biometricType="FACE_ID"
+          biometricAccessibilityLabel="Face ID"
+          onBiometricPress={() => Alert.alert("biometric")}
+        />
+      </View>
+    </Screen>
+  );
+};

src/components/buttons/IconButton.tsx

@@ -15,15 +15,22 @@ import {
   IOIconButtonStyles,
   IOScaleValues,
   IOSpringValues,
+  IOStyles,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
+import {
+  AnimatedIcon,
+  IOIconSizeScale,
+  IOIcons,
+  IconClassComponent
+} from "../icons";
 
 export type IconButton = WithTestID<{
   color?: "primary" | "neutral" | "contrast";
   icon: IOIcons;
+  iconSize?: IOIconSizeScale;
   disabled?: boolean;
   accessibilityLabel: string;
   accessibilityHint?: string;
@@ -102,6 +109,7 @@ const AnimatedIconClassComponent =
 export const IconButton = ({
   color = "primary",
   icon,
+  iconSize = 24,
   disabled = false,
   onPress,
   accessibilityLabel,
@@ -181,17 +189,24 @@ export const IconButton = ({
       <Animated.View
         style={[
           IOIconButtonStyles.buttonSizeSmall,
+          IOStyles.alignCenter,
+          IOStyles.centerJustified,
           !disabled && pressedAnimationStyle
         ]}
       >
         {!disabled ? (
           <AnimatedIconClassComponent
             name={icon}
+            size={iconSize}
             animatedProps={animatedColor}
             color={colorMap[color]?.icon?.default}
           />
         ) : (
-          <AnimatedIcon name={icon} color={colorMap[color]?.icon?.disabled} />
+          <AnimatedIcon
+            name={icon}
+            size={iconSize}
+            color={colorMap[color]?.icon?.disabled}
+          />
         )}
       </Animated.View>
     </Pressable>

src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -532,6 +532,12 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
           "height": 24,
           "width": 24,
         },
+        {
+          "alignItems": "center",
+        },
+        {
+          "justifyContent": "center",
+        },
         {
           "transform": [
             {

src/components/index.tsx

@@ -23,3 +23,4 @@ export * from "./toast";
 export * from "./typography";
 export * from "./textInput";
 export * from "./layout";
+export * from "./numberpad";

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>
+  );
+};