@pagopa/io-app-design-system 4.4.8 → 4.5.0

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/textInput/TextInputBase.tsx

@@ -1,5 +1,12 @@
 /* eslint-disable functional/immutable-data */
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import {
   ColorValue,
   LayoutChangeEvent,
@@ -46,7 +53,7 @@ type InputTextProps = WithTestID<{
   inputType?: InputType;
   status?: InputStatus;
   icon?: IOIcons;
-  rightElement?: React.ReactNode;
+  rightElement?: ReactNode;
   counterLimit?: number;
   bottomMessage?: string;
   bottomMessageColor?: IOColors;
@@ -67,12 +74,8 @@ const inputLabelScaleFactor: number = 0.75; /* 16pt becomes 12pt */
 const inputLabelFontSize: IOFontSize = 16;
 const inputDisabledOpacity: number = 0.5;
 const inputRightElementMargin: IOSpacingScale = 8;
-const iconColor: IOColors = "grey-300";
 const iconSize: IOIconSizeScale = 24;
 const iconMargin: IOSpacingScale = 8;
-const inputLabelColor: ColorValue = IOColors["grey-700"];
-const inputTextColor: ColorValue = IOColors.black;
-const inputDisabledTextColor: ColorValue = IOColors["grey-850"];
 
 const styles = StyleSheet.create({
   textInput: {
@@ -126,11 +129,9 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   textInputLabel: {
-    color: inputLabelColor,
     ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular")
   },
   textInputLabelLegacyFont: {
-    color: inputLabelColor,
     ...makeFontStyleObject(
       inputLabelFontSize,
       "TitilliumSansPro",
@@ -149,10 +150,15 @@ const HelperRow = ({
   value,
   counterLimit,
   bottomMessage,
-  bottomMessageColor = "grey-700"
+  bottomMessageColor
 }: InputTextHelperRow) => {
+  const theme = useIOTheme();
   const valueCount = useMemo(() => value.length, [value]);
 
+  const bottomMessageColorDefault: IOColors = theme["textBody-tertiary"];
+  const bottomMessageColorValue =
+    bottomMessageColor ?? bottomMessageColorDefault;
+
   const helperRowStyle: ViewStyle = useMemo(() => {
     if (counterLimit && bottomMessage) {
       return {
@@ -189,14 +195,14 @@ const HelperRow = ({
       }
     >
       {bottomMessage && (
-        <BodySmall weight="Regular" color={bottomMessageColor}>
+        <BodySmall weight="Regular" color={bottomMessageColorValue}>
           {bottomMessage}
         </BodySmall>
       )}
       {counterLimit && (
         <BodySmall
           weight="Regular"
-          color="grey-700"
+          color={bottomMessageColorValue}
         >{`${valueCount} / ${counterLimit}`}</BodySmall>
       )}
     </View>
@@ -226,7 +232,7 @@ export const TextInputBase = ({
 }: InputTextProps) => {
   const inputRef = useRef<TextInput>(null);
   const isSecretInput = useMemo(() => isPassword, [isPassword]);
-  const [inputStatus, setInputStatus] = React.useState<InputStatus>(
+  const [inputStatus, setInputStatus] = useState<InputStatus>(
     disabled ? "disabled" : "initial"
   );
   const focusedState = useSharedValue<number>(0);
@@ -234,9 +240,14 @@ export const TextInputBase = ({
   const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
 
   const theme = useIOTheme();
+  const iconColor: IOColors = theme["icon-decorative"];
+  const inputLabelColor: ColorValue = IOColors[theme["textInputLabel-default"]];
+  const inputTextColor: ColorValue = IOColors[theme["textInputValue-default"]];
+  const inputDisabledTextColor: ColorValue =
+    IOColors[theme["textInputValue-disabled"]];
 
   /* Get the label width to enable the correct translation */
-  const [labelWidth, setLabelWidth] = React.useState<number>(0);
+  const [labelWidth, setLabelWidth] = useState<number>(0);
 
   const getLabelWidth = ({ nativeEvent }: LayoutChangeEvent) => {
     setLabelWidth(nativeEvent.layout.width);
@@ -255,10 +266,10 @@ export const TextInputBase = ({
 
   const borderColorMap: Record<InputStatus, string> = useMemo(
     () => ({
-      initial: IOColors["grey-200"],
-      disabled: IOColors["grey-200"],
+      initial: IOColors[theme["textInputBorder-default"]],
+      disabled: IOColors[theme["textInputBorder-default"]],
       focused: IOColors[theme["interactiveElem-default"]],
-      error: IOColors["error-600"]
+      error: IOColors[theme.errorText]
     }),
     [theme]
   );
@@ -467,6 +478,7 @@ export const TextInputBase = ({
               isExperimental
                 ? styles.textInputLabel
                 : styles.textInputLabelLegacyFont,
+              { color: inputLabelColor },
               animatedLabelStyle
             ]}
           >

package/src/components/textInput/TextInputValidation.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useCallback, useMemo, useState } from "react";
 import { AccessibilityInfo, View } from "react-native";
 import Animated from "react-native-reanimated";
+import { useIOTheme } from "../../core";
 import { IOColors } from "../../core/IOColors";
 import {
   enterTransitionInputIcon,
@@ -18,8 +19,8 @@ type TextInputValidationProps = Omit<
   "rightElement" | "status" | "bottomMessageColor" | "isPassword"
 > & {
   /**
-   * This function can return either a `boolean` or a `ValidationWithOptions` object. 
-   * If a `boolean` is returned and the field is not valid, the value of the errorMessage prop will be displayed/announced. 
+   * This function can return either a `boolean` or a `ValidationWithOptions` object.
+   * If a `boolean` is returned and the field is not valid, the value of the errorMessage prop will be displayed/announced.
    * If a `ValidationWithOptions` object is returned and the field is not valid, the value displayed/announced will be the one contained within this object.
    */
   onValidate: (value: string) => boolean | ValidationWithOptions;
@@ -29,8 +30,14 @@ type TextInputValidationProps = Omit<
   errorMessage: string;
 };
 
-function isValidationWithOptions(validation: boolean | ValidationWithOptions): validation is ValidationWithOptions {
-  return typeof validation === 'object' && 'isValid' in validation && 'errorMessage' in validation;
+function isValidationWithOptions(
+  validation: boolean | ValidationWithOptions
+): validation is ValidationWithOptions {
+  return (
+    typeof validation === "object" &&
+    "isValid" in validation &&
+    "errorMessage" in validation
+  );
 }
 
 const feedbackIconSize: IOIconSizeScale = 24;
@@ -44,6 +51,7 @@ export const TextInputValidation = ({
   onFocus,
   ...props
 }: TextInputValidationProps) => {
+  const theme = useIOTheme();
   const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
   const [errMessage, setErrMessage] = useState(errorMessage);
 
@@ -78,13 +86,13 @@ export const TextInputValidation = ({
   }, [onFocus]);
 
   const labelError = useMemo(
-    () => (isValid === false && errMessage ? errMessage : bottomMessage),
+    () => (!isValid && errMessage ? errMessage : bottomMessage),
     [isValid, errMessage, bottomMessage]
   );
 
   const labelErrorColor: IOColors | undefined = useMemo(
-    () => (isValid === false && errMessage ? "error-600" : undefined),
-    [isValid, errMessage]
+    () => (!isValid && errMessage ? theme.errorText : undefined),
+    [isValid, errMessage, theme.errorText]
   );
 
   const feedbackIconAttrMap: Record<
@@ -94,14 +102,14 @@ export const TextInputValidation = ({
     () => ({
       valid: {
         name: "success",
-        color: "green"
+        color: theme.successIcon
       },
       notValid: {
         name: "errorFilled",
-        color: "error-600"
+        color: theme.errorIcon
       }
     }),
-    []
+    [theme]
   );
 
   const feedbackIcon = useMemo(() => {

package/src/core/IOColors.ts

@@ -276,12 +276,19 @@ const themeKeys = [
   "textBody-tertiary",
   // Design System related
   "cardBorder-default",
+  "textInputBorder-default",
   "icon-default",
   "icon-decorative",
+  // Inputs
+  "textInputBorder-default",
+  "textInputLabel-default",
+  "textInputValue-default",
+  "textInputValue-disabled",
   // Layout
   "divider-header",
   "divider-default",
   "divider-bottomBar",
+  "pdfViewer-background",
   // Status
   "errorIcon",
   "errorText",
@@ -320,10 +327,16 @@ export const IOThemeLight: IOTheme = {
   "cardBorder-default": "grey-100",
   "icon-default": "grey-650",
   "icon-decorative": "grey-300",
+  // Inputs
+  "textInputBorder-default": "grey-200",
+  "textInputLabel-default": "grey-700",
+  "textInputValue-default": "black",
+  "textInputValue-disabled": "grey-850",
   // Layout
   "divider-header": "grey-100",
   "divider-default": "grey-200",
   "divider-bottomBar": "grey-200",
+  "pdfViewer-background": "grey-700",
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
@@ -365,6 +378,11 @@ export const IOThemeDark: IOTheme = {
   "cardBorder-default": "grey-850",
   "icon-default": "grey-450",
   "icon-decorative": "grey-650",
+  // Inputs
+  "textInputBorder-default": "grey-850",
+  "textInputLabel-default": "grey-450",
+  "textInputValue-default": "white",
+  "textInputValue-disabled": "grey-100",
   // Layout
   "divider-header": "grey-850",
   "divider-default": "grey-850",

package/src/core/IOThemeContextProvider.tsx

@@ -1,5 +1,12 @@
-import React, { useMemo } from "react";
-import { Appearance } from "react-native";
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import { Appearance, ColorSchemeName } from "react-native";
 import {
   IOTheme,
   IOThemeDark,
@@ -10,39 +17,44 @@ import { useIOExperimentalDesign } from "./IODSExperimentalContextProvider";
 
 export const IOThemes = { light: IOThemeLight, dark: IOThemeDark };
 export const legacyIOThemes = { light: IOThemeLightLegacy, dark: IOThemeDark };
-type IOThemeType = keyof typeof IOThemes;
+// type IOThemeType = keyof typeof IOThemes | null;
 
 type IOThemeContextType = {
-  themeType: IOThemeType;
+  themeType: ColorSchemeName;
   theme: IOTheme;
-  setTheme: (theme: IOThemeType) => void;
+  setTheme: (theme: ColorSchemeName) => void;
 };
 
 export const IOThemeContext: React.Context<IOThemeContextType> =
-  React.createContext<IOThemeContextType>({
-    themeType: Appearance.getColorScheme() === "dark" ? "dark" : "light",
+  createContext<IOThemeContextType>({
+    themeType: Appearance.getColorScheme(),
     theme:
       Appearance.getColorScheme() === "dark" ? IOThemes.dark : IOThemes.light,
-    setTheme: () => void 0
+    setTheme: (theme: ColorSchemeName) => Appearance.setColorScheme(theme)
   });
 
-export const useIOThemeContext = () => React.useContext(IOThemeContext);
+export const useIOThemeContext = () => useContext(IOThemeContext);
 
 export const useIOTheme = () => useIOThemeContext().theme;
 
 type IOThemeContextProviderProps = {
-  theme?: IOThemeType;
+  theme?: ColorSchemeName;
 };
 
 export const IOThemeContextProvider = ({
   children,
   theme
-}: React.PropsWithChildren<IOThemeContextProviderProps>) => {
-  const [currentTheme, setCurrentTheme] = React.useState<IOThemeType>(
-    theme ?? "light"
+}: PropsWithChildren<IOThemeContextProviderProps>) => {
+  const [currentTheme, setCurrentTheme] = useState<ColorSchemeName>(
+    theme ?? Appearance.getColorScheme()
   );
   const { isExperimental } = useIOExperimentalDesign();
 
+  const handleThemeChange = useCallback((newTheme: ColorSchemeName) => {
+    setCurrentTheme(newTheme);
+    Appearance.setColorScheme(newTheme);
+  }, []);
+
   const themeMap = useMemo(
     () => (isExperimental ? IOThemes : legacyIOThemes),
     [isExperimental]
@@ -52,8 +64,8 @@ export const IOThemeContextProvider = ({
     <IOThemeContext.Provider
       value={{
         themeType: currentTheme,
-        theme: themeMap[currentTheme],
-        setTheme: setCurrentTheme
+        theme: themeMap[currentTheme ?? "light"],
+        setTheme: handleThemeChange
       }}
     >
       {children}