@pagopa/io-app-design-system 5.0.7 → 5.1.0

package/lib/typescript/components/numberpad/NumberButton.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-type NumberButtonVariantType = "light" | "dark";
+type NumberButtonVariantType = "neutral" | "primary";
 type NumberButtonProps = {
     /**
-     * Used to choose the component color variant between `dark` and `light`.
+     * Used to choose the component color variant between `neutral` and `primary`.
      */
     variant: NumberButtonVariantType;
     /**

package/lib/typescript/components/numberpad/NumberButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberButton.d.ts","sourceRoot":"","sources":["../../../../src/components/numberpad/NumberButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,KAAK,uBAAuB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,OAAO,EAAE,uBAAuB,CAAC;IACjC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAqBF;;;;GAIG;AACH,eAAO,MAAM,YAAY,2DACQ,iBAAiB,uBAoDjD,CAAC"}
+{"version":3,"file":"NumberButton.d.ts","sourceRoot":"","sources":["../../../../src/components/numberpad/NumberButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAkB1D,KAAK,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAErD,KAAK,iBAAiB,GAAG;IACvB;;OAEG;IACH,OAAO,EAAE,uBAAuB,CAAC;IACjC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAQF;;;;GAIG;AACH,eAAO,MAAM,YAAY,2DACQ,iBAAiB,uBA0EjD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "5.0.7",
+  "version": "5.1.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/codeInput/CodeInput.tsx

@@ -11,7 +11,7 @@ type CodeInputProps = {
   onValueChange: (value: string) => void;
   length: number;
   onValidate: (value: string) => boolean;
-  variant?: "light" | "dark";
+  variant?: "primary" | "neutral";
 };
 
 const DOT_SIZE = 16;
@@ -47,35 +47,39 @@ export const CodeInput = ({
   length,
   value,
   onValueChange,
-  variant = "light",
+  variant = "primary",
   onValidate
 }: CodeInputProps) => {
   const [status, setStatus] = useState<"default" | "error">("default");
-  const { themeType } = useIOThemeContext();
+  const { themeType, theme } = useIOThemeContext();
 
   const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
 
   /* Empty Dot
   - Right color depending on both theme and variant */
   const emptyDotColorLightBg = IOColors["grey-650"];
-  const emptyDotColorDarkBg = hexToRgba(IOColors.white, 0.75);
+  const emptyDotColorDarkBg = IOColors["grey-300"];
+  const emptyDotColorAccentBg = hexToRgba(IOColors.white, 0.75);
+
   const emptyDotColorThemeBased =
     themeType === "light" ? emptyDotColorLightBg : emptyDotColorDarkBg;
 
   const emptyDotColor =
-    variant === "light" ? emptyDotColorDarkBg : emptyDotColorThemeBased;
+    variant === "primary" ? emptyDotColorAccentBg : emptyDotColorThemeBased;
 
   /* Filled Dot
   - Right color depending on theme, variant and status */
   const filledDotColorLightBg = IOColors.black;
   const filledDotColorDarkBg = IOColors.white;
+  const filledDotColorError =
+    variant === "primary" ? IOColors["error-400"] : IOColors[theme.errorText];
   const filledDotColorThemeBased =
     themeType === "light" ? filledDotColorLightBg : filledDotColorDarkBg;
 
   const filledDotColor =
     status === "error"
-      ? IOColors["error-600"]
-      : variant === "light"
+      ? filledDotColorError
+      : variant === "primary"
       ? filledDotColorDarkBg
       : filledDotColorThemeBased;
 

package/src/components/common/ScaleInOutAnimation.tsx

@@ -4,16 +4,12 @@ import { ViewStyle } from "react-native";
 import Animated, {
   LayoutAnimation,
   WithSpringConfig,
-  withDelay,
-  withSpring,
-  withTiming
+  withSpring
 } from "react-native-reanimated";
 
 type Props = {
   visible?: boolean;
   springConfig?: WithSpringConfig;
-  delayOut?: number;
-  delayIn?: number;
   children: React.ReactNode;
   style?: ViewStyle;
 };
@@ -21,8 +17,6 @@ type Props = {
 const ScaleInOutAnimation = ({
   visible = true,
   springConfig = { damping: 500, mass: 3, stiffness: 1000 },
-  delayOut = 0,
-  delayIn = 0,
   children,
   style
 }: Props) => {
@@ -30,10 +24,12 @@ const ScaleInOutAnimation = ({
     "worklet";
     return {
       initialValues: {
-        transform: [{ scale: 0 }]
+        opacity: 0,
+        transform: [{ scale: 0.5 }]
       },
       animations: {
-        transform: [{ scale: withDelay(delayIn, withSpring(1, springConfig)) }]
+        opacity: withSpring(1, springConfig),
+        transform: [{ scale: withSpring(1, springConfig) }]
       }
     };
   };
@@ -42,10 +38,12 @@ const ScaleInOutAnimation = ({
     "worklet";
     return {
       initialValues: {
+        opacity: 1,
         transform: [{ scale: 1 }]
       },
       animations: {
-        transform: [{ scale: withDelay(delayOut, withTiming(0)) }]
+        opacity: withSpring(0, springConfig),
+        transform: [{ scale: withSpring(0.5, springConfig) }]
       }
     };
   };

package/src/components/layout/ForceScrollDownView.tsx

@@ -1,4 +1,6 @@
 import React, {
+  ComponentProps,
+  ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -13,29 +15,51 @@ import {
   ScrollViewProps,
   StyleSheet
 } from "react-native";
-import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
 import { IOSpringValues, IOVisualCostants } from "../../core";
 import { IconButtonSolid } from "../buttons";
+import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
+import { FooterActions } from "./FooterActions";
+import { useFooterActionsInlineMeasurements } from "./hooks";
 
-type ForceScrollDownViewProps = {
+type ForceScrollDownViewActions = {
   /**
-   * The content to display inside the scroll view.
+   * The distance from the bottom is computed automatically based on the actions.
    */
-  children: React.ReactNode;
+  threshold?: never;
+  footerActions: Omit<
+    ComponentProps<typeof FooterActions>,
+    "fixed" | "onMeasure"
+  >;
+};
+
+type ForceScrollDownViewCustomSlot = {
   /**
    * The distance from the bottom of the scrollable content at which the "scroll to bottom" button
-   * should become hidden. Defaults to 100.
+   * should become hidden.
    */
-  threshold?: number;
+  threshold: number;
+  footerActions?: never;
+};
+
+type ForceScrollDownViewSlot =
+  | ForceScrollDownViewActions
+  | ForceScrollDownViewCustomSlot;
+
+export type ForceScrollDownView = {
+  /**
+   * The content to display inside the scroll view.
+   */
+  children: ReactNode;
   /**
    * A callback that will be called whenever the scroll view crosses the threshold. The callback
    * is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
    */
   onThresholdCrossed?: (crossed: boolean) => void;
-} & Pick<
-  ScrollViewProps,
-  "style" | "contentContainerStyle" | "scrollEnabled" | "testID"
->;
+} & ForceScrollDownViewSlot &
+  Pick<
+    ScrollViewProps,
+    "style" | "contentContainerStyle" | "scrollEnabled" | "testID"
+  >;
 
 /**
  * A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
@@ -44,26 +68,36 @@ type ForceScrollDownViewProps = {
  * `scrollEnabled` prop to `false`.
  */
 const ForceScrollDownView = ({
+  footerActions,
   children,
-  threshold = 100,
+  threshold: customThreshold,
   style,
   contentContainerStyle,
   scrollEnabled = true,
   onThresholdCrossed
-}: ForceScrollDownViewProps) => {
+}: ForceScrollDownView) => {
   const scrollViewRef = useRef<ScrollView>(null);
 
+  const {
+    footerActionsInlineMeasurements,
+    handleFooterActionsInlineMeasurements
+  } = useFooterActionsInlineMeasurements();
+
+  const threshold = footerActions
+    ? footerActionsInlineMeasurements.safeBottomAreaHeight
+    : customThreshold;
+
   /**
    * The height of the scroll view, used to determine whether or not the scrollable content fits inside
    * the scroll view and whether the "scroll to bottom" button should be displayed.
    */
-  const [scrollViewHeight, setScrollViewHeight] = useState<number>();
+  const [scrollViewHeight, setScrollViewHeight] = useState<number>(0);
 
   /**
    * The height of the scrollable content, used to determine whether or not the "scroll to bottom" button
    * should be displayed.
    */
-  const [contentHeight, setContentHeight] = useState<number>();
+  const [contentHeight, setContentHeight] = useState<number>(0);
 
   /**
    * Whether or not the scroll view has crossed the threshold from the bottom.
@@ -79,7 +113,7 @@ const ForceScrollDownView = ({
   /**
    * A callback that is called whenever the scroll view is scrolled. It checks whether or not the
    * scroll view has crossed the threshold from the bottom and updates the state accordingly.
-   * The callback is designed to updatr button visibility only when crossing the threshold.
+   * The callback is designed to update button visibility only when crossing the threshold.
    */
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -88,19 +122,14 @@ const ForceScrollDownView = ({
 
       const thresholdCrossed =
         layoutMeasurement.height + contentOffset.y >=
-        contentSize.height - threshold;
-
-      setThresholdCrossed(previousState => {
-        if (!previousState && thresholdCrossed) {
-          setButtonVisible(false);
-        }
-        if (previousState && !thresholdCrossed) {
-          setButtonVisible(true);
-        }
-        return thresholdCrossed;
-      });
+        contentSize.height - (threshold ?? 0);
+
+      if (isThresholdCrossed !== thresholdCrossed) {
+        setThresholdCrossed(thresholdCrossed);
+        setButtonVisible(!thresholdCrossed);
+      }
     },
-    [threshold]
+    [threshold, isThresholdCrossed]
   );
 
   /**
@@ -145,8 +174,8 @@ const ForceScrollDownView = ({
    */
   const needsScroll = useMemo(
     () =>
-      scrollViewHeight != null &&
-      contentHeight != null &&
+      scrollViewHeight > 0 &&
+      contentHeight > 0 &&
       scrollViewHeight < contentHeight,
     [scrollViewHeight, contentHeight]
   );
@@ -182,16 +211,22 @@ const ForceScrollDownView = ({
       <ScrollView
         testID={"ScrollView"}
         ref={scrollViewRef}
-        scrollIndicatorInsets={{ right: 1 }}
         scrollEnabled={scrollEnabled}
-        onScroll={handleScroll}
-        scrollEventThrottle={400}
         style={style}
+        onScroll={handleScroll}
+        scrollEventThrottle={8}
         onLayout={handleLayout}
         onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={contentContainerStyle}
       >
         {children}
+        {footerActions && (
+          <FooterActions
+            {...footerActions}
+            onMeasure={handleFooterActionsInlineMeasurements}
+            fixed={false}
+          />
+        )}
       </ScrollView>
       {scrollDownButton}
     </>

package/src/components/layout/__test__/ForceScrollDownView.test.tsx

@@ -13,7 +13,7 @@ describe("ForceScrollDownView", () => {
     const tChildren = <Text>{tContent}</Text>;
 
     const component = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     expect(component).toMatchSnapshot();
@@ -23,7 +23,7 @@ describe("ForceScrollDownView", () => {
     const tChildren = <Text>{tContent}</Text>;
 
     const { getByText } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     expect(getByText(tContent)).toBeDefined();
@@ -35,7 +35,7 @@ describe("ForceScrollDownView", () => {
     const tScreenHeight = 1000;
 
     const { getByTestId, queryByTestId } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     const scrollView = getByTestId("ScrollView");
@@ -72,7 +72,7 @@ describe("ForceScrollDownView", () => {
     const tScreenHeight = 1000;
 
     const { getByTestId, queryByTestId } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     const scrollView = getByTestId("ScrollView");

package/src/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap

@@ -6,12 +6,7 @@ exports[`ForceScrollDownView should match snapshot 1`] = `
   onLayout={[Function]}
   onScroll={[Function]}
   scrollEnabled={true}
-  scrollEventThrottle={400}
-  scrollIndicatorInsets={
-    {
-      "right": 1,
-    }
-  }
+  scrollEventThrottle={8}
   testID="ScrollView"
 >
   <View>

package/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { FooterActionsInlineMeasurements } from "../FooterActionsInline";
 
 type UseFooterActionsInlineMeasurementsProps = {
@@ -25,11 +25,12 @@ export const useFooterActionsInlineMeasurements =
       safeBottomAreaHeight: 0
     });
 
-    const handleFooterActionsInlineMeasurements = (
-      values: FooterActionsInlineMeasurements
-    ) => {
-      setFooterActionsInlineMeasurements(values);
-    };
+    const handleFooterActionsInlineMeasurements = useCallback(
+      (values: FooterActionsInlineMeasurements) => {
+        setFooterActionsInlineMeasurements(values);
+      },
+      []
+    );
 
     return {
       footerActionsInlineMeasurements,

package/src/components/layout/hooks/useFooterActionsMeasurements.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { FooterActionsMeasurements } from "../FooterActions";
 
 type UseFooterActionsMeasurementsProps = {
@@ -22,11 +22,12 @@ export const useFooterActionsMeasurements =
         safeBottomAreaHeight: 0
       });
 
-    const handleFooterActionsMeasurements = (
-      values: FooterActionsMeasurements
-    ) => {
-      setFooterActionsMeasurements(values);
-    };
+    const handleFooterActionsMeasurements = useCallback(
+      (values: FooterActionsMeasurements) => {
+        setFooterActionsMeasurements(values);
+      },
+      []
+    );
 
     return {
       footerActionsMeasurements,

package/src/components/numberpad/NumberButton.tsx

@@ -1,23 +1,26 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
 import {
+  hexToRgba,
   IOColors,
   IONumberPadButtonStyles,
-  useIONewTypeface
+  useIONewTypeface,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { IOText } from "../typography";
 
-type NumberButtonVariantType = "light" | "dark";
+type NumberButtonVariantType = "neutral" | "primary";
 
 type NumberButtonProps = {
   /**
-   * Used to choose the component color variant between `dark` and `light`.
+   * Used to choose the component color variant between `neutral` and `primary`.
    */
   variant: NumberButtonVariantType;
   /**
@@ -38,19 +41,6 @@ type ColorMapVariant = {
   foreground: IOColors;
 };
 
-const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
-  light: {
-    background: IOColors["grey-50"],
-    pressed: IOColors["grey-200"],
-    foreground: "blueIO-500"
-  },
-  dark: {
-    background: IOColors["blueIO-400"],
-    pressed: IOColors["blueIO-200"],
-    foreground: "white"
-  }
-};
-
 /**
  * Based on a `Pressable` element, it displays a number button with animations on press In and Out.
  *
@@ -58,11 +48,32 @@ const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
  */
 export const NumberButton = memo(
   ({ number, variant, onPress }: NumberButtonProps) => {
+    const theme = useIOTheme();
+
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation("slight");
+      useScaleAnimation("medium");
     const reducedMotion = useReducedMotion();
     const { newTypefaceEnabled } = useIONewTypeface();
 
+    const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = useMemo(
+      () => ({
+        neutral: {
+          background: hexToRgba(
+            IOColors[theme["interactiveElem-default"]],
+            0.1
+          ),
+          pressed: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.35),
+          foreground: theme["interactiveElem-default"]
+        },
+        primary: {
+          background: hexToRgba(IOColors.white, 0.15),
+          pressed: hexToRgba(IOColors.white, 0.5),
+          foreground: "white"
+        }
+      }),
+      [theme]
+    );
+
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => ({
       backgroundColor: interpolateColor(
@@ -73,6 +84,7 @@ export const NumberButton = memo(
     }));
 
     const handleOnPress = useCallback(() => {
+      ReactNativeHapticFeedback.trigger("impactLight");
       onPress(number);
     }, [number, onPress]);
 

package/src/components/numberpad/NumberPad.tsx

@@ -70,7 +70,7 @@ const mapIconSpecByBiometric: Record<
  * @returns {JSX.Element} The rendered numeric keyboard component.
  */
 export const NumberPad = ({
-  variant = "dark",
+  variant = "primary",
   biometricType,
   biometricAccessibilityLabel,
   deleteAccessibilityLabel,
@@ -101,7 +101,7 @@ export const NumberPad = ({
             <ButtonWrapper key={item}>
               <IconButton
                 icon="cancel"
-                color={variant === "dark" ? "contrast" : "primary"}
+                color={variant === "primary" ? "contrast" : "primary"}
                 onPress={onDeletePress}
                 accessibilityLabel={deleteAccessibilityLabel}
               />
@@ -114,7 +114,7 @@ export const NumberPad = ({
               <IconButton
                 icon={mapIconSpecByBiometric[biometricType].icon}
                 iconSize={mapIconSpecByBiometric[biometricType].size}
-                color={variant === "dark" ? "contrast" : "primary"}
+                color={variant === "primary" ? "contrast" : "primary"}
                 onPress={onBiometricPress}
                 accessibilityLabel={biometricAccessibilityLabel}
               />