@pagopa/io-app-design-system 5.0.0-2 → 5.0.0-3

package/src/components/layout/HeaderFirstLevel.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useEffect, useLayoutEffect } from "react";
+import { createRef, useEffect, useLayoutEffect } from "react";
 import {
   AccessibilityInfo,
   findNodeHandle,
@@ -7,7 +7,9 @@ import {
   View
 } from "react-native";
 import Animated, {
+  AnimatedRef,
   useAnimatedStyle,
+  useScrollViewOffset,
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
@@ -24,44 +26,15 @@ import { HStack } from "../stack";
 import { H3 } from "../typography";
 import { HeaderActionProps } from "./common";
 
-type CommonProps = WithTestID<{
+export type HeaderFirstLevel = WithTestID<{
   title: string;
-  // This Prop will be removed once all the screens on the first level routing will be refactored
-  backgroundColor?: "light" | "dark";
-  ignoreSafeAreaMargin?: boolean;
-}>;
-
-interface Base extends CommonProps {
-  type: "base";
-  firstAction?: never;
-  secondAction?: never;
-  thirdAction?: never;
-}
-
-interface OneAction extends CommonProps {
-  type: "singleAction";
-  firstAction: HeaderActionProps;
-  secondAction?: never;
-  thirdAction?: never;
-}
-
-interface TwoActions extends CommonProps {
-  type: "twoActions";
   firstAction: HeaderActionProps;
   secondAction: HeaderActionProps;
-  thirdAction?: never;
-}
-
-interface ThreeActions extends CommonProps {
-  type: "threeActions";
-  firstAction: HeaderActionProps;
-  secondAction: HeaderActionProps;
-  thirdAction: HeaderActionProps;
-}
-
-export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;
-
-const HEADER_BG_COLOR_DARK: IOColors = "bluegrey";
+  thirdAction?: HeaderActionProps;
+  animatedRef?: AnimatedRef<Animated.ScrollView>;
+  animatedFlatListRef?: AnimatedRef<Animated.FlatList<any>>;
+  ignoreSafeAreaMargin?: boolean;
+}>;
 
 const styles = StyleSheet.create({
   headerInner: {
@@ -71,20 +44,28 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between"
+  },
+  headerDivider: {
+    position: "absolute",
+    width: "100%",
+    height: StyleSheet.hairlineWidth,
+    left: 0,
+    right: 0,
+    bottom: 0
   }
 });
 
 export const HeaderFirstLevel = ({
   title,
-  type,
   testID,
-  backgroundColor = "light",
-  ignoreSafeAreaMargin = false,
   firstAction,
   secondAction,
-  thirdAction
+  thirdAction,
+  ignoreSafeAreaMargin = false,
+  animatedRef,
+  animatedFlatListRef
 }: HeaderFirstLevel) => {
-  const titleRef = React.createRef<View>();
+  const titleRef = createRef<View>();
   const insets = useSafeAreaInsets();
   const theme = useIOTheme();
   const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
@@ -96,6 +77,12 @@ export const HeaderFirstLevel = ({
     }
   });
 
+  /* We show the divider only when the header is scrolled down */
+  const offset = useScrollViewOffset(
+    (animatedRef as AnimatedRef<Animated.ScrollView>) ||
+      (animatedFlatListRef as AnimatedRef<Animated.FlatList<any>>)
+  );
+
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
     paddingTop.value = withTiming(
@@ -108,52 +95,47 @@ export const HeaderFirstLevel = ({
     paddingTop: paddingTop.value
   }));
 
+  const animatedDivider = useAnimatedStyle(() => ({
+    opacity: withTiming(offset.value > 0 ? 1 : 0, { duration: 200 })
+  }));
+
   return (
     <Animated.View
       style={[
-        {
-          backgroundColor:
-            backgroundColor === "light"
-              ? IOColors[theme["appBackground-primary"]]
-              : IOColors[HEADER_BG_COLOR_DARK]
-        },
+        { backgroundColor: IOColors[theme["appBackground-primary"]] },
         animatedStyle
       ]}
       accessibilityRole="header"
       testID={testID}
     >
+      {/* Divider */}
+      {(animatedRef || animatedFlatListRef) && (
+        <Animated.View
+          style={[
+            {
+              ...styles.headerDivider,
+              backgroundColor: IOColors[theme["divider-default"]]
+            },
+            animatedDivider
+          ]}
+        />
+      )}
+
       <View style={styles.headerInner}>
         <View ref={titleRef} accessible accessibilityRole="header">
           <H3
             weight="Bold"
             style={{ flexShrink: 1 }}
             numberOfLines={1}
-            color={
-              backgroundColor === "dark" ? "white" : theme["textBody-default"]
-            }
+            color={theme["textHeading-default"]}
           >
             {title}
           </H3>
         </View>
         <HStack space={16} style={{ flexShrink: 0 }}>
-          {type === "threeActions" && (
-            <IconButton
-              {...thirdAction}
-              color={backgroundColor === "dark" ? "contrast" : "primary"}
-            />
-          )}
-          {(type === "twoActions" || type === "threeActions") && (
-            <IconButton
-              {...secondAction}
-              color={backgroundColor === "dark" ? "contrast" : "primary"}
-            />
-          )}
-          {type !== "base" && (
-            <IconButton
-              {...firstAction}
-              color={backgroundColor === "dark" ? "contrast" : "primary"}
-            />
-          )}
+          {thirdAction && <IconButton {...thirdAction} color={"primary"} />}
+          <IconButton {...secondAction} color={"primary"} />
+          <IconButton {...firstAction} color={"primary"} />
         </HStack>
       </View>
     </Animated.View>

package/src/components/listitems/ListItemHeader.tsx

@@ -65,30 +65,19 @@ export const ListItemHeader = ({
   const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
     useIOFontDynamicScale();
 
-  const listItemAccessibilityLabel = useMemo(
-    () => (accessibilityLabel ? accessibilityLabel : `${label}`),
-    [label, accessibilityLabel]
-  );
-
   const itemInfoTextComponent = useMemo(
     () => (
       <View
-        accessible={endElement === undefined ? true : false}
-        importantForAccessibility={
-          endElement !== undefined && endElement.type !== "badge"
-            ? "no-hide-descendants"
-            : "yes"
-        }
-        accessibilityElementsHidden={
-          endElement !== undefined && endElement.type !== "badge"
-        }
+        accessible
+        accessibilityRole="header"
+        accessibilityLabel={accessibilityLabel ?? label}
       >
         <H6 role="heading" color={theme["textBody-tertiary"]}>
           {label}
         </H6>
       </View>
     ),
-    [label, theme, endElement]
+    [label, accessibilityLabel, theme]
   );
 
   const listItemAction = useCallback(() => {
@@ -97,21 +86,12 @@ export const ListItemHeader = ({
 
       switch (type) {
         case "buttonLink":
-          const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
-
           return (
-            <ButtonLink
-              {...componentProps}
-              accessibilityLabel={buttonLinkAccessibilityLabel}
-            />
+            <ButtonLink {...componentProps} />
           );
-        case "iconButton":
-          const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+        case "iconButton": 
           return (
-            <IconButton
-              {...componentProps}
-              accessibilityLabel={iconButtonAccessibilityLabel}
-            />
+            <IconButton {...componentProps} />
           );
         case "badge":
           return <Badge {...componentProps} />;
@@ -120,19 +100,14 @@ export const ListItemHeader = ({
       }
     }
     return <></>;
-  }, [endElement, listItemAccessibilityLabel]);
+  }, [endElement]);
 
   return (
     <View
       style={IOListItemStyles.listItem}
       testID={testID}
-      accessible={endElement === undefined ? true : false}
-      accessibilityLabel={listItemAccessibilityLabel}
     >
-      <View
-        style={IOListItemStyles.listItemInner}
-        importantForAccessibility={endElement ? "auto" : "no-hide-descendants"}
-      >
+      <View style={IOListItemStyles.listItemInner}>
         {iconName && !hugeFontEnabled && (
           <View
             style={{

package/src/components/listitems/ListItemInfo.tsx

@@ -1,11 +1,13 @@
-import React, { ComponentProps, useCallback, useMemo } from "react";
-import { AccessibilityRole, Platform, View } from "react-native";
+import React, { ComponentProps, ReactNode, useCallback, useMemo } from "react";
+import { AccessibilityRole, Platform, Pressable, View } from "react-native";
+import Animated from "react-native-reanimated";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
   IOStyles,
   useIOTheme
 } from "../../core";
+import { useListItemAnimation } from "../../hooks";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
@@ -13,7 +15,7 @@ import { ButtonLink, IconButton } from "../buttons";
 import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
-import { H6, BodySmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -35,25 +37,32 @@ type EndElementProps =
   | IconButtonActionProps
   | BadgeProps;
 
+type GraphicProps =
+  | {
+      paymentLogoIcon?: IOLogoPaymentType;
+      icon?: never;
+    }
+  | {
+      paymentLogoIcon?: never;
+      icon?: IOIcons;
+    };
+
+type InteractiveProps = Pick<
+  ComponentProps<typeof Pressable>,
+  "onLongPress" | "accessibilityActions" | "onAccessibilityAction"
+>;
+
 export type ListItemInfo = WithTestID<{
   label: string;
-  value: string | React.ReactNode;
+  value: string | ReactNode;
   numberOfLines?: number;
   endElement?: EndElementProps;
   // Accessibility
   accessibilityLabel?: string;
   accessibilityRole?: AccessibilityRole;
 }> &
-  (
-    | {
-        paymentLogoIcon?: IOLogoPaymentType;
-        icon?: never;
-      }
-    | {
-        icon?: IOIcons;
-        paymentLogoIcon?: never;
-      }
-  );
+  GraphicProps &
+  InteractiveProps;
 
 const PAYMENT_LOGO_SIZE: IOIconSizeScale = 24;
 
@@ -66,22 +75,25 @@ export const ListItemInfo = ({
   endElement,
   accessibilityLabel,
   accessibilityRole,
+  accessibilityActions,
+  onAccessibilityAction,
+  onLongPress,
   testID
 }: ListItemInfo) => {
   const theme = useIOTheme();
   const { dynamicFontScale, spacingScaleMultiplier, hugeFontEnabled } =
     useIOFontDynamicScale();
 
+  const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
+    useListItemAnimation();
+
   const componentValueToAccessibility = useMemo(
     () => (typeof value === "string" ? value : ""),
     [value]
   );
 
   const listItemAccessibilityLabel = useMemo(
-    () =>
-      accessibilityLabel
-        ? accessibilityLabel
-        : `${label}; ${componentValueToAccessibility}`,
+    () => accessibilityLabel ?? `${label}; ${componentValueToAccessibility}`,
     [label, componentValueToAccessibility, accessibilityLabel]
   );
 
@@ -136,44 +148,86 @@ export const ListItemInfo = ({
     return <></>;
   }, [endElement]);
 
-  return (
-    <View
-      style={IOListItemStyles.listItem}
-      testID={testID}
-      accessible={endElement === undefined ? true : false}
-      accessibilityLabel={listItemAccessibilityLabel}
-      accessibilityRole={accessibilityRole}
-    >
+  const ListItemInfoContent = () => (
+    <>
+      {icon && !hugeFontEnabled && (
+        <Icon
+          allowFontScaling
+          name={icon}
+          color="grey-450"
+          size={IOListItemVisualParams.iconSize}
+        />
+      )}
+      {paymentLogoIcon && (
+        <LogoPaymentWithFallback
+          brand={paymentLogoIcon}
+          size={PAYMENT_LOGO_SIZE}
+        />
+      )}
+      <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
+      {endElement && <View>{listItemInfoAction()}</View>}
+    </>
+  );
+
+  if (onLongPress) {
+    return (
+      <Pressable
+        onLongPress={onLongPress}
+        testID={testID}
+        accessible={!endElement}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onTouchEnd={onPressOut}
+        accessibilityRole={"button"}
+        accessibilityLabel={listItemAccessibilityLabel}
+        accessibilityActions={accessibilityActions}
+        onAccessibilityAction={onAccessibilityAction}
+      >
+        <Animated.View
+          style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
+        >
+          <Animated.View
+            style={[
+              IOListItemStyles.listItemInner,
+              {
+                columnGap:
+                  IOListItemVisualParams.iconMargin *
+                  dynamicFontScale *
+                  spacingScaleMultiplier
+              },
+              scaleAnimatedStyle
+            ]}
+          >
+            <ListItemInfoContent />
+          </Animated.View>
+        </Animated.View>
+      </Pressable>
+    );
+  } else {
+    return (
       <View
-        style={[
-          IOListItemStyles.listItemInner,
-          {
-            columnGap:
-              IOListItemVisualParams.iconMargin *
-              dynamicFontScale *
-              spacingScaleMultiplier
-          }
-        ]}
+        style={IOListItemStyles.listItem}
+        testID={testID}
+        accessible={!endElement}
+        accessibilityLabel={listItemAccessibilityLabel}
+        accessibilityRole={accessibilityRole}
       >
-        {icon && !hugeFontEnabled && (
-          <Icon
-            allowFontScaling
-            name={icon}
-            color="grey-450"
-            size={IOListItemVisualParams.iconSize}
-          />
-        )}
-        {paymentLogoIcon && (
-          <LogoPaymentWithFallback
-            brand={paymentLogoIcon}
-            size={PAYMENT_LOGO_SIZE}
-          />
-        )}
-        <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
-        {endElement && <View>{listItemInfoAction()}</View>}
+        <View
+          style={[
+            IOListItemStyles.listItemInner,
+            {
+              columnGap:
+                IOListItemVisualParams.iconMargin *
+                dynamicFontScale *
+                spacingScaleMultiplier
+            }
+          ]}
+        >
+          <ListItemInfoContent />
+        </View>
       </View>
-    </View>
-  );
+    );
+  }
 };
 
 export default ListItemInfo;

package/src/components/listitems/PressableListItemBase.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropsWithChildren } from "react";
+import { ComponentProps, PropsWithChildren } from "react";
 import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOListItemStyles, IOListItemVisualParams } from "../../core";
@@ -8,7 +8,7 @@ import { useListItemAnimation } from "../../hooks";
 
 export type PressableBaseProps = WithTestID<
   Pick<
-    React.ComponentProps<typeof Pressable>,
+    ComponentProps<typeof Pressable>,
     | "onPress"
     | "accessibilityLabel"
     | "accessibilityHint"
@@ -26,6 +26,7 @@ export const PressableListItemBase = ({
 }: PropsWithChildren<PressableBaseProps>) => {
   const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
     useListItemAnimation();
+
   return (
     <Pressable
       onPress={onPress}

package/src/components/modules/PressableModuleBase.tsx

@@ -1,14 +1,15 @@
 import * as React from "react";
-import { PropsWithChildren } from "react";
-import { Pressable } from "react-native";
+import { PropsWithChildren, useCallback } from "react";
+import { GestureResponderEvent, Pressable } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, { useReducedMotion } from "react-native-reanimated";
-import { useScaleAnimation } from "../../hooks";
 import {
   IOColors,
   IOModuleIDPSavedVSpacing,
   IOModuleStyles,
   useIOTheme
 } from "../../core";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 
 export type PressableModuleBaseProps = WithTestID<
@@ -39,9 +40,19 @@ export const PressableModuleBase = ({
   If we remove it, they they won't be able to understand
   if there's an ongoing interaction. */
 
+  const handleOnPress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (onPress) {
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      }
+    },
+    [onPress]
+  );
+
   return (
     <Pressable
-      onPress={onPress}
+      onPress={handleOnPress}
       testID={testID}
       accessible={true}
       onPressIn={onPressIn}

package/src/components/numberpad/NumberButton.tsx

@@ -5,9 +5,13 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import { IOColors, IONumberPadButtonStyles } from "../../core";
+import {
+  IOColors,
+  IONumberPadButtonStyles,
+  useIONewTypeface
+} from "../../core";
 import { useScaleAnimation } from "../../hooks";
-import { H3 } from "../typography";
+import { IOText } from "../typography";
 
 type NumberButtonVariantType = "light" | "dark";
 
@@ -57,6 +61,7 @@ export const NumberButton = memo(
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation("slight");
     const reducedMotion = useReducedMotion();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => ({
@@ -88,7 +93,18 @@ export const NumberButton = memo(
             !reducedMotion && scaleAnimatedStyle
           ]}
         >
-          <H3 color={colorMap[variant].foreground}>{number}</H3>
+          <IOText
+            size={22}
+            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
+            weight="Semibold"
+            color={colorMap[variant].foreground}
+            style={{
+              // Additional prop for Android
+              textAlignVertical: "center"
+            }}
+          >
+            {number}
+          </IOText>
         </Animated.View>
       </Pressable>
     );