@pagopa/io-app-design-system 1.2.0 → 1.3.1

package/src/components/listitems/ListItemAction.tsx

@@ -1,154 +1,155 @@
 import React, { useCallback } from "react";
 import {
-    GestureResponderEvent,
-    Pressable,
-    StyleSheet,
-    Text,
-    View
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  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
+  IOColors,
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOScaleValues,
+  IOSpringValues,
+  IOStyles,
+  hexToRgba,
+  useIOTheme
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons } from "../icons";
 
 export type ListItemAction = WithTestID<{
-    label: string;
-    variant: "primary" | "danger";
-    onPress: (event: GestureResponderEvent) => void;
-    icon?: IOIcons;
-    // Accessibility
-    accessibilityLabel: string;
+  label: string;
+  variant: "primary" | "danger";
+  onPress: (event: GestureResponderEvent) => void;
+  icon?: IOIcons;
+  // Accessibility
+  accessibilityLabel: string;
 }>;
 
 const styles = StyleSheet.create({
-    label: {
-        fontSize: 16,
-        lineHeight: 20,
-        ...makeFontStyleObject("Regular", false, "ReadexPro")
-    },
+  label: {
+    fontSize: 16,
+    lineHeight: 20,
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  }
 });
 
 export const ListItemAction = ({
-    variant,
-    label,
-    onPress,
-    icon,
-    accessibilityLabel,
-    testID
+  variant,
+  label,
+  onPress,
+  icon,
+  accessibilityLabel,
+  testID
 }: ListItemAction) => {
-    const isPressed = useSharedValue(0);
+  const isPressed = 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"]]
+  };
 
-    const mapForegroundColor: Record<
-        NonNullable<ListItemAction["variant"]>,
-        string
-    > = {
-        primary: IOColors[theme["interactiveElem-default"]],
-        danger: IOColors[theme.errorText]
-    };
+  const mapForegroundColor: Record<
+    NonNullable<ListItemAction["variant"]>,
+    string
+  > = {
+    primary: IOColors[theme["interactiveElem-default"]],
+    danger: IOColors[theme.errorText]
+  };
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
-    const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
-    );
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
 
-    // Interpolate animation values from `isPressed` values
-    const animatedScaleStyle = useAnimatedStyle(() => {
-        const scale = interpolate(
-            progressPressed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
+  // Interpolate animation values from `isPressed` values
+  const animatedScaleStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
 
-        return {
-            transform: [{ scale }]
-        };
-    });
+    return {
+      transform: [{ scale }]
+    };
+  });
 
-    const animatedBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [mapBackgroundStates.default, mapBackgroundStates.pressed]
-        );
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [mapBackgroundStates.default, mapBackgroundStates.pressed]
+    );
 
-        return {
-            backgroundColor
-        };
-    });
+    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]);
+  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}
-            onTouchEnd={handlePressOut}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="button"
-            testID={testID}
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onTouchEnd={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]}
+          {icon && (
+            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+              <AnimatedIcon
+                name={icon}
+                color={mapForegroundColor[variant] as IOColors}
+                size={IOListItemVisualParams.iconSize}
+              />
+            </View>
+          )}
+          <View style={IOStyles.flex}>
+            <Text
+              style={[styles.label, { color: mapForegroundColor[variant] }]}
             >
-                <Animated.View
-                    style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
-                >
-                    {icon && (
-                        <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                            <AnimatedIcon
-                                name={icon}
-                                color={mapForegroundColor[variant] as IOColors}
-                                size={IOListItemVisualParams.iconSize}
-                            />
-                        </View>
-                    )}
-                    <View style={IOStyles.flex}>
-                        <Text
-                            style={[styles.label, { color: mapForegroundColor[variant] }]}
-                        >
-                            {label}
-                        </Text>
-                    </View>
-                </Animated.View>
-            </Animated.View>
-        </Pressable>
-    );
+              {label}
+            </Text>
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
 };
 
 export default ListItemAction;

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;