@pagopa/io-app-design-system 1.1.3 → 1.3.0

package/src/components/listitems/ListItemIDP.tsx

@@ -1,149 +1,149 @@
 import * as React from "react";
 import { useCallback } from "react";
 import {
-    GestureResponderEvent,
-    Image,
-    ImageSourcePropType,
-    Platform,
-    Pressable,
-    StyleSheet,
-    Text
+  GestureResponderEvent,
+  Image,
+  ImageSourcePropType,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text
 } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
 import {
-    IOColors,
-    IOListItemIDPHSpacing,
-    IOListItemIDPRadius,
-    IOListItemIDPSavedVSpacing,
-    IOListItemIDPVSpacing,
-    IOListItemLogoMargin,
-    IOScaleValues,
-    IOSpringValues
+  IOColors,
+  IOListItemIDPHSpacing,
+  IOListItemIDPRadius,
+  IOListItemIDPSavedVSpacing,
+  IOListItemIDPVSpacing,
+  IOListItemLogoMargin,
+  IOScaleValues,
+  IOSpringValues
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 
 type ListItemIDP = WithTestID<{
-    name: string;
-    localLogo: ImageSourcePropType;
-    logo: ImageSourcePropType;
-    saved?: boolean;
-    onPress: (event: GestureResponderEvent) => void;
-    urlLogoIDP: string;
+  name: string;
+  localLogo: ImageSourcePropType;
+  logo: ImageSourcePropType;
+  saved?: boolean;
+  onPress: (event: GestureResponderEvent) => void;
+  urlLogoIDP: string;
 }>;
 
 const styles = StyleSheet.create({
-    button: {
-        borderWidth: 1,
-        borderColor: IOColors["grey-100"],
-        borderRadius: IOListItemIDPRadius,
-        backgroundColor: IOColors.white,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingVertical: IOListItemIDPVSpacing,
-        paddingHorizontal: IOListItemIDPHSpacing
-    },
-    idpName: {
-        color: IOColors["grey-700"],
-        fontSize: 12,
-        lineHeight: 16,
-        alignSelf: "center",
-        textTransform: "uppercase",
-        flexShrink: 1,
-        ...makeFontStyleObject("Regular", false, "ReadexPro")
-    },
-    idpLogo: {
-        marginStart: IOListItemLogoMargin,
-        width: 120,
-        height: 30,
-        resizeMode: "contain"
-    }
+  button: {
+    borderWidth: 1,
+    borderColor: IOColors["grey-100"],
+    borderRadius: IOListItemIDPRadius,
+    backgroundColor: IOColors.white,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: IOListItemIDPVSpacing,
+    paddingHorizontal: IOListItemIDPHSpacing
+  },
+  idpName: {
+    color: IOColors["grey-700"],
+    fontSize: 12,
+    lineHeight: 16,
+    alignSelf: "center",
+    textTransform: "uppercase",
+    flexShrink: 1,
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  idpLogo: {
+    marginStart: IOListItemLogoMargin,
+    width: 120,
+    height: 30,
+    resizeMode: "contain"
+  }
 });
 
 // https://github.com/facebook/react-native/issues/12606
 // Image cache forced refresh for Android by appending
 // the `ts` query parameter as DDMMYYYY to simulate a 24h TTL.
 const androidIdpLogoForcedRefreshed = () =>
-    Platform.OS === "android" ? `?ts=${toAndroidCacheTimestamp()}` : "";
+  Platform.OS === "android" ? `?ts=${toAndroidCacheTimestamp()}` : "";
 
 export const ListItemIDP = ({
-    name,
-    localLogo,
-    logo,
-    saved,
-    onPress,
-    testID,
+  name,
+  localLogo,
+  logo,
+  saved,
+  onPress,
+  testID
 }: ListItemIDP) => {
-    const isPressed = useSharedValue(0);
+  const isPressed = useSharedValue(0);
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
 
-    const scaleTraversed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
-    );
+  const scaleTraversed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
 
-    // Interpolate animation values from `isPressed` values
-    const animatedStyle = useAnimatedStyle(() => {
-        const scale = interpolate(
-            scaleTraversed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
+  // Interpolate animation values from `isPressed` values
+  const animatedStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      scaleTraversed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
 
-        return {
-            transform: [{ scale }]
-        };
-    });
+    return {
+      transform: [{ scale }]
+    };
+  });
 
-    const handlePressIn = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 1;
-    }, [isPressed]);
-    const handlePressOut = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 0;
-    }, [isPressed]);
+  const handlePressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const handlePressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
 
-    // eslint-disable-next-line no-console
-    const urlLogoIDP = localLogo
-        ? localLogo
-        : {
-            uri: `${logo}${androidIdpLogoForcedRefreshed()}`
-        };
-    return (
-        <Pressable
-            onPress={onPress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            onTouchEnd={handlePressOut}
-            accessible={true}
-            accessibilityRole={"button"}
-            accessibilityLabel={name}
-            testID={testID}
-        >
-            <Animated.View
-                style={[
-                    styles.button,
-                    saved && { paddingVertical: IOListItemIDPSavedVSpacing },
-                    animatedStyle
-                ]}
-            >
-                <Text style={styles.idpName}>{name}</Text>
-                <Image source={urlLogoIDP} style={styles.idpLogo} />
-            </Animated.View>
-        </Pressable>
-    );
+  // eslint-disable-next-line no-console
+  const urlLogoIDP = localLogo
+    ? localLogo
+    : {
+        uri: `${logo}${androidIdpLogoForcedRefreshed()}`
+      };
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onTouchEnd={handlePressOut}
+      accessible={true}
+      accessibilityRole={"button"}
+      accessibilityLabel={name}
+      testID={testID}
+    >
+      <Animated.View
+        style={[
+          styles.button,
+          saved && { paddingVertical: IOListItemIDPSavedVSpacing },
+          animatedStyle
+        ]}
+      >
+        <Text style={styles.idpName}>{name}</Text>
+        <Image source={urlLogoIDP} style={styles.idpLogo} />
+      </Animated.View>
+    </Pressable>
+  );
 };
 
 export default ListItemIDP;

package/src/components/listitems/ListItemNavAlert.tsx

@@ -1,136 +1,140 @@
 import React, { useCallback } from "react";
-import {
-    GestureResponderEvent,
-    Pressable,
-    View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
-import { IOColors, IOListItemStyles, IOListItemVisualParams, IOScaleValues, IOSpringValues, IOStyles, hexToRgba, useIOTheme } from "../../core";
+import {
+  IOColors,
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOScaleValues,
+  IOSpringValues,
+  IOStyles,
+  hexToRgba,
+  useIOTheme
+} from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
 import { H6, LabelSmall } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
-    value: string;
-    description?: string;
-    withoutIcon?: boolean;
-    onPress: (event: GestureResponderEvent) => void;
-    // Accessibility
-    accessibilityLabel: string;
+  value: string;
+  description?: string;
+  withoutIcon?: boolean;
+  onPress: (event: GestureResponderEvent) => void;
+  // Accessibility
+  accessibilityLabel: string;
 }>;
 
 export const ListItemNavAlert = ({
-    value,
-    description,
-    withoutIcon = false,
-    onPress,
-    accessibilityLabel,
-    testID
+  value,
+  description,
+  withoutIcon = false,
+  onPress,
+  accessibilityLabel,
+  testID
 }: ListItemNavAlert) => {
-    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
-    const theme = useIOTheme();
+  const theme = useIOTheme();
 
-    const mapBackgroundStates: Record<string, string> = {
-        default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-        pressed: IOColors[theme["listItem-pressed"]]
-    };
+  const mapBackgroundStates: Record<string, string> = {
+    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
+    pressed: IOColors[theme["listItem-pressed"]]
+  };
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-    const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
-    );
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
-    // Interpolate animation values from `isPressed` values
-    const animatedScaleStyle = useAnimatedStyle(() => {
-        const scale = interpolate(
-            progressPressed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
 
-        return {
-            transform: [{ scale }]
-        };
-    });
+  // Interpolate animation values from `isPressed` values
+  const animatedScaleStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
 
-    const animatedBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [mapBackgroundStates.default, mapBackgroundStates.pressed]
-        );
+    return {
+      transform: [{ scale }]
+    };
+  });
 
-        return {
-            backgroundColor
-        };
-    });
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [mapBackgroundStates.default, mapBackgroundStates.pressed]
+    );
 
-    const handlePressIn = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 1;
-    }, [isPressed]);
-    const handlePressOut = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 0;
-    }, [isPressed]);
+    return {
+      backgroundColor
+    };
+  });
 
+  const handlePressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const handlePressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
 
-    return (
-        <Pressable
-            onPress={onPress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="button"
-            testID={testID}
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      testID={testID}
+    >
+      <Animated.View
+        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+      >
+        <Animated.View
+          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
         >
-            <Animated.View
-                style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
-            >
-                <Animated.View
-                    style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
-                >
-                    {!withoutIcon && (
-                        <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                            <Icon
-                                name="errorFilled"
-                                color={theme.errorIcon}
-                                size={IOListItemVisualParams.iconSize}
-                            />
-                        </View>
-                    )}
-                    <View style={IOStyles.flex}>
-                        <H6 color={theme["textBody-default"]}>{value}</H6>
-                        {description && (
-                            <LabelSmall weight="SemiBold" color={theme.errorText}>
-                                {description}
-                            </LabelSmall>
-                        )}
-                    </View>
-                    <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-                        <Icon
-                            name="chevronRightListItem"
-                            color={theme["interactiveElem-default"]}
-                            size={IOListItemVisualParams.chevronSize}
-                        />
-                    </View>
-                </Animated.View>
-            </Animated.View>
-        </Pressable>
-    );
+          {!withoutIcon && (
+            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+              <Icon
+                name="errorFilled"
+                color={theme.errorIcon}
+                size={IOListItemVisualParams.iconSize}
+              />
+            </View>
+          )}
+          <View style={IOStyles.flex}>
+            <H6 color={theme["textBody-default"]}>{value}</H6>
+            {description && (
+              <LabelSmall weight="SemiBold" color={theme.errorText}>
+                {description}
+              </LabelSmall>
+            )}
+          </View>
+          <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+            <Icon
+              name="chevronRightListItem"
+              color={theme["interactiveElem-default"]}
+              size={IOListItemVisualParams.chevronSize}
+            />
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
 };
 
 export default ListItemNavAlert;

package/src/components/listitems/ListItemTransaction.tsx

@@ -101,13 +101,9 @@ export const ListItemTransaction = ({
           );
 
         case "failure":
-          return (
-            <Badge variant="error" text={"Failed"} />
-          );
+          return <Badge variant="error" text={"Failed"} />;
         case "pending":
-          return (
-            <Badge variant="info" text={"Cancelled"} />
-          );
+          return <Badge variant="info" text={"Cancelled"} />;
       }
     };
 

package/src/components/listitems/PressableListItemsBase.tsx

@@ -6,37 +6,37 @@ import { WithTestID } from "../../utils/types";
 import { useListItemSpringAnimation } from "./hooks/useListItemSpringAnimation";
 
 export type PressableBaseProps = WithTestID<{
-    accessibilityLabel?: string;
-    onPress?: () => void;
+  accessibilityLabel?: string;
+  onPress?: () => void;
 }>;
 export const PressableListItemBase = ({
-    onPress,
-    testID,
-    accessibilityLabel,
-    children
+  onPress,
+  testID,
+  accessibilityLabel,
+  children
 }: React.PropsWithChildren<PressableBaseProps>) => {
-    const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
-        useListItemSpringAnimation();
-    return (
-        <Pressable
-            onPress={onPress}
-            testID={testID}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            onPressIn={onPressIn}
-            onPressOut={onPressOut}
-            onTouchEnd={onPressOut}
-            accessibilityRole="button"
+  const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
+    useListItemSpringAnimation();
+  return (
+    <Pressable
+      onPress={onPress}
+      testID={testID}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
+      accessibilityRole="button"
+    >
+      <Animated.View
+        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+      >
+        <Animated.View
+          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
         >
-            <Animated.View
-                style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
-            >
-                <Animated.View
-                    style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
-                >
-                    {children}
-                </Animated.View>
-            </Animated.View>
-        </Pressable>
-    );
+          {children}
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
 };