@pagopa/io-app-design-system 1.15.0 → 1.16.1

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -223,55 +223,71 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
         }
       }
     >
-      <Text
-        allowFontScaling={false}
-        color="bluegrey"
-        defaultColor="bluegrey"
-        defaultWeight="Regular"
-        font="TitilliumWeb"
-        fontStyle={
-          {
-            "fontSize": 16,
-            "lineHeight": 24,
+      <View
+        accessibilityElementsHidden={false}
+        accessible={true}
+        importantForAccessibility="yes"
+      >
+        <Text
+          allowFontScaling={false}
+          color="grey-700"
+          defaultColor="blue"
+          defaultWeight="Bold"
+          font="TitilliumWeb"
+          fontStyle={
+            {
+              "fontSize": 14,
+            }
           }
-        }
-        style={
-          [
+          style={
+            [
+              {
+                "fontSize": 14,
+              },
+              {
+                "color": "#555C70",
+                "fontFamily": "Titillium Web",
+                "fontStyle": "normal",
+                "fontWeight": "400",
+              },
+            ]
+          }
+          weight="Regular"
+        >
+          label
+        </Text>
+        <Text
+          allowFontScaling={false}
+          color="black"
+          defaultColor="black"
+          defaultWeight="SemiBold"
+          font="TitilliumWeb"
+          fontStyle={
             {
               "fontSize": 16,
               "lineHeight": 24,
-            },
-            {
-              "color": "#475A6D",
-              "fontFamily": "Titillium Web",
-              "fontStyle": "normal",
-              "fontWeight": "400",
-            },
-          ]
-        }
-        weight="Regular"
-      >
-        label
-      </Text>
-      <Text
-        numberOfLines={2}
-        style={
-          [
-            {
-              "fontFamily": "Titillium Web",
-              "fontSize": 18,
-              "fontStyle": "normal",
-              "fontWeight": "600",
-              "lineHeight": 24,
-            },
-            {
-              "color": "#17324D",
-            },
-          ]
-        }
-      >
-        testValue
-      </Text>
+            }
+          }
+          numberOfLines={2}
+          style={
+            [
+              {
+                "fontSize": 16,
+                "lineHeight": 24,
+              },
+              {
+                "color": "#0E0F13",
+                "fontFamily": "Titillium Web",
+                "fontStyle": "normal",
+                "fontWeight": "600",
+              },
+            ]
+          }
+          weight="SemiBold"
+        >
+          testValue
+        </Text>
+      </View>
     </View>
   </View>
 </View>

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";

package/src/components/pictograms/Pictogram.tsx

@@ -79,6 +79,46 @@ import PictogramBleedCie from "./svg/PictogramBleedCie";
 import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
 import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
 import PictogramBleedNotification from "./svg/PictogramBleedNotification";
+import PictogramStar from "./svg/PictogramStar";
+import PictogramBleedStar from "./svg/PictogramBleedStar";
+import PictogramBleedEmpty from "./svg/PictogramBleedEmpty";
+import PictogramBleedAttention from "./svg/PictogramBleedAttention";
+import PictogramBleedSuccess from "./svg/PictogramBleedSuccess";
+import PictogramBleedFatalError from "./svg/PictogramBleedFatalError";
+import PictogramBleedIdentity from "./svg/PictogramBleedIdentity";
+import PictogramBleedIdentityAdd from "./svg/PictogramBleedIdentityAdd";
+import PictogramBleedIdentityCheck from "./svg/PictogramBleedIdentityCheck";
+import PictogramBleedIdentityRefresh from "./svg/PictogramBleedIdentityRefresh";
+import PictogramBleedAccessDenied from "./svg/PictogramBleedAccessDenied";
+import PictogramBleedStopSecurity from "./svg/PictogramBleedStopSecurity";
+import PictogramBleedTime from "./svg/PictogramBleedTime";
+import PictogramBleedPasscode from "./svg/PictogramBleedPasscode";
+import PictogramTiming from "./svg/PictogramTiming";
+import PictogramBleedTiming from "./svg/PictogramBleedTiming";
+import PictogramCardIssue from "./svg/PictogramCardIssue";
+import PictogramCardQuestion from "./svg/PictogramCardQuestion";
+import PictogramCardFavourite from "./svg/PictogramCardFavourite";
+import PictogramCardAdd from "./svg/PictogramCardAdd";
+import PictogramBleedCardAdd from "./svg/PictogramBleedCardAdd";
+import PictogramBleedCardFavourite from "./svg/PictogramBleedCardFavourite";
+import PictogramBleedCardQuestion from "./svg/PictogramBleedCardQuestion";
+import PictogramBleedCardIssue from "./svg/PictogramBleedCardIssue";
+import PictogramSearchLens from "./svg/PictogramSearchLens";
+import PictogramBleedSearch from "./svg/PictogramBleedSearch";
+import PictogramBleedDoc from "./svg/PictogramBleedDoc";
+import PictogramDoc from "./svg/PictogramDoc";
+import PictogramPending from "./svg/PictogramPending";
+import PictogramBleedPending from "./svg/PictogramBleedPending";
+import PictogramMessage from "./svg/PictogramMessage";
+import PictogramBleedMessage from "./svg/PictogramBleedMessage";
+import PictogramIdea from "./svg/PictogramIdea";
+import PictogramBleedIdea from "./svg/PictogramBleedIdea";
+import PictogramMoneyCheck from "./svg/PictogramMoneyCheck";
+import PictogramReactivate from "./svg/PictogramReactivate";
+import PictogramActivate from "./svg/PictogramActivate";
+import PictogramNFCScanAndroid from "./svg/PictogramNFCScanAndroid";
+import PictogramNFCScaniOS from "./svg/PictogramNFCScaniOS";
+import PictogramAttachment from "./svg/PictogramAttachment";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -116,9 +156,11 @@ export const IOPictograms = {
   feature: PictogramFeature,
   charity: PictogramCharity,
   attention: PictogramAttention,
+  message: PictogramMessage,
   emptyArchive: PictogramEmptyArchive,
   umbrellaNew: PictogramUmbrellaNew,
   feedback: PictogramFeedback,
+  idea: PictogramIdea,
   cameraRequest: PictogramCameraRequest,
   cameraDenied: PictogramCameraDenied,
   success: PictogramSuccess,
@@ -134,9 +176,24 @@ export const IOPictograms = {
   stopSecurity: PictogramStopSecurity,
   security: PictogramSecurity,
   cie: PictogramCie,
+  pending: PictogramPending,
   time: PictogramTime,
+  timing: PictogramTiming,
+  searchLens: PictogramSearchLens,
   passcode: PictogramPasscode,
   notification: PictogramNotification,
+  star: PictogramStar,
+  doc: PictogramDoc,
+  cardAdd: PictogramCardAdd,
+  cardFavourite: PictogramCardFavourite,
+  cardQuestion: PictogramCardQuestion,
+  cardIssue: PictogramCardIssue,
+  moneyCheck: PictogramMoneyCheck,
+  reactivate: PictogramReactivate,
+  activate: PictogramActivate,
+  nfcScanAndroid: PictogramNFCScanAndroid,
+  nfcScaniOS: PictogramNFCScaniOS,
+  attachment: PictogramAttachment,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -222,32 +279,80 @@ export const Pictogram = ({
 */
 
 export type IOPictogramsBleed = Extract<
+  | "empty"
   | "charity"
+  | "attention"
+  | "message"
   | "help"
   | "feedback"
+  | "idea"
   | "itWallet"
   | "security"
   | "feature"
   | "cie"
+  | "identity"
+  | "identityAdd"
+  | "identityCheck"
+  | "identityRefresh"
   | "cameraRequest"
   | "cameraDenied"
-  | "notification",
+  | "cardAdd"
+  | "cardFavourite"
+  | "cardQuestion"
+  | "cardIssue"
+  | "accessDenied"
+  | "stopSecurity"
+  | "time"
+  | "pending"
+  | "timing"
+  | "searchLens"
+  | "passcode"
+  | "success"
+  | "fatalError"
+  | "notification"
+  | "star"
+  | "doc"
+  | "notification"
+  | "star",
   IOPictograms
 >;
 
 export const IOPictogramsBleed: {
   [key in IOPictogramsBleed]: ({ size }: SVGPictogramProps) => JSX.Element;
 } = {
+  empty: PictogramBleedEmpty,
   charity: PictogramBleedCharity,
   help: PictogramBleedHelp,
+  attention: PictogramBleedAttention,
+  message: PictogramBleedMessage,
   feedback: PictogramBleedFeedback,
+  idea: PictogramBleedIdea,
   itWallet: PictogramBleedITWallet,
   security: PictogramBleedSecurity,
   feature: PictogramBleedFeature,
   cie: PictogramBleedCie,
+  identity: PictogramBleedIdentity,
+  identityAdd: PictogramBleedIdentityAdd,
+  identityCheck: PictogramBleedIdentityCheck,
+  identityRefresh: PictogramBleedIdentityRefresh,
   cameraRequest: PictogramBleedCameraRequest,
   cameraDenied: PictogramBleedCameraDenied,
-  notification: PictogramBleedNotification
+  cardAdd: PictogramBleedCardAdd,
+  cardFavourite: PictogramBleedCardFavourite,
+  cardQuestion: PictogramBleedCardQuestion,
+  cardIssue: PictogramBleedCardIssue,
+  accessDenied: PictogramBleedAccessDenied,
+  stopSecurity: PictogramBleedStopSecurity,
+  time: PictogramBleedTime,
+  pending: PictogramBleedPending,
+  timing: PictogramBleedTiming,
+  searchLens: PictogramBleedSearch,
+  passcode: PictogramBleedPasscode,
+  success: PictogramBleedSuccess,
+  fatalError: PictogramBleedFatalError,
+  notification: PictogramBleedNotification,
+  star: PictogramBleedStar,
+  doc: PictogramBleedDoc
 };
 
 export const PictogramBleed = ({