@pagopa/io-app-design-system 1.0.0-9 → 1.0.0

package/src/components/accordion/RawAccordion.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import {
-  View,
   AccessibilityProps,
   Animated,
   Easing,
   LayoutAnimation,
+  Platform,
   StyleSheet,
   TouchableWithoutFeedback,
   UIManager,
-  Platform
+  View
 } from "react-native";
 import { IOStyles, IOVisualCostants } from "../../core/IOStyles";
 import { Icon } from "../icons/Icon";
@@ -51,7 +51,7 @@ const getDegree = (isOpen: boolean) => (isOpen ? "-90deg" : "-270deg");
  * @param props
  * @constructor
  */
-export const RawAccordion: React.FunctionComponent<Props> = props => {
+export const RawAccordion: React.FC<Props> = props => {
   const [isOpen, setOpen] = useState<boolean>(false);
   const animatedController = useRef(new Animated.Value(1)).current;
   const shouldAnimate = props.animated ?? true;
@@ -62,9 +62,9 @@ export const RawAccordion: React.FunctionComponent<Props> = props => {
 
   const arrowAngle = shouldAnimate
     ? animatedController.interpolate({
-        inputRange: [0, 1],
-        outputRange: ["0deg", "-180deg"]
-      })
+      inputRange: [0, 1],
+      outputRange: ["0deg", "-180deg"]
+    })
     : getDegree(isOpen);
 
   useEffect(() => {

package/src/components/badge/__test__/badge.test.tsx

@@ -4,7 +4,9 @@ import { Badge } from "../Badge";
 
 describe("Test Badge Components", () => {
   it("Badge Snapshot", () => {
-    const badge = TestRenderer.create(<Badge text={"text"} variant={"default"}></Badge>).toJSON();
+    const badge = TestRenderer.create(
+      <Badge text={"text"} variant={"default"}></Badge>
+    ).toJSON();
     expect(badge).toMatchSnapshot();
   });
-});
+});

package/src/components/buttons/ButtonLink.tsx

@@ -1,96 +1,98 @@
 import React, { useCallback } from "react";
-import {
-    GestureResponderEvent,
-    Pressable,
-    StyleSheet
-} from "react-native";
+import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedProps,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedProps,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
-import { WithTestID } from "../../utils/types";
+import {
+  IOButtonStyles,
+  IOColors,
+  IOScaleValues,
+  IOSpringValues
+} from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
+import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons/Icon";
 import { HSpacer } from "../spacer/Spacer";
-import { IOScaleValues, IOSpringValues, IOColors, IOButtonStyles } from "../../core";
 
 type ColorButtonLink = "primary" | "error" | "warning" | "success" | "info";
 export type ButtonLink = WithTestID<{
-    color?: ColorButtonLink;
-    label: string;
-    disabled?: boolean;
-    // Icons
-    icon?: IOIcons;
-    iconPosition?: "start" | "end";
-    // Accessibility
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-    // Events
-    onPress: (event: GestureResponderEvent) => void;
+  color?: ColorButtonLink;
+  label: string;
+  disabled?: boolean;
+  // Icons
+  icon?: IOIcons;
+  iconPosition?: "start" | "end";
+  // Accessibility
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  // Events
+  onPress: (event: GestureResponderEvent) => void;
 }>;
 
 type ColorStates = {
-    label: {
-        default: string;
-        pressed: string;
-        disabled: string;
-    };
+  label: {
+    default: string;
+    pressed: string;
+    disabled: string;
+  };
 };
 
 const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
-    // Primary button
-    primary: {
-        label: {
-            default: IOColors["blueIO-500"],
-            pressed: IOColors["blueIO-600"],
-            disabled: IOColors["grey-700"]
-        }
-    },
-    error: {
-        label: {
-            default: IOColors["error-850"],
-            pressed: IOColors["error-850"],
-            disabled: IOColors["grey-700"]
-        }
-    },
-    warning: {
-        label: {
-            default: IOColors["warning-850"],
-            pressed: IOColors["warning-850"],
-            disabled: IOColors["grey-700"]
-        }
-    },
-    success: {
-        label: {
-            default: IOColors["success-850"],
-            pressed: IOColors["success-850"],
-            disabled: IOColors["grey-700"]
-        }
-    },
-    info: {
-        label: {
-            default: IOColors["info-850"],
-            pressed: IOColors["info-850"],
-            disabled: IOColors["grey-700"]
-        }
+  // Primary button
+  primary: {
+    label: {
+      default: IOColors["blueIO-500"],
+      pressed: IOColors["blueIO-600"],
+      disabled: IOColors["grey-700"]
+    }
+  },
+  error: {
+    label: {
+      default: IOColors["error-850"],
+      pressed: IOColors["error-850"],
+      disabled: IOColors["grey-700"]
+    }
+  },
+  warning: {
+    label: {
+      default: IOColors["warning-850"],
+      pressed: IOColors["warning-850"],
+      disabled: IOColors["grey-700"]
     }
+  },
+  success: {
+    label: {
+      default: IOColors["success-850"],
+      pressed: IOColors["success-850"],
+      disabled: IOColors["grey-700"]
+    }
+  },
+  info: {
+    label: {
+      default: IOColors["info-850"],
+      pressed: IOColors["info-850"],
+      disabled: IOColors["grey-700"]
+    }
+  }
 };
 
 const DISABLED_OPACITY = 0.5;
 const IOButtonStylesLocal = StyleSheet.create({
-    label: {
-        fontSize: 16,
-        ...makeFontStyleObject("Regular", false, "ReadexPro")
-    }
+  label: {
+    fontSize: 16,
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  }
 });
 
-export const ButtonLink = React.memo(({
+export const ButtonLink = React.memo(
+  ({
     color = "primary",
     label,
     disabled = false,
@@ -100,7 +102,7 @@ export const ButtonLink = React.memo(({
     accessibilityLabel,
     accessibilityHint,
     testID
-}: ButtonLink) => {
+  }: ButtonLink) => {
     const isPressed = useSharedValue(0);
 
     // Scaling transformation applied when the button is pressed
@@ -108,138 +110,136 @@ export const ButtonLink = React.memo(({
 
     // Using a spring-based animation for our interpolations
     const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
+      withSpring(isPressed.value, IOSpringValues.button)
     );
 
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => {
-        // Link color states to the pressed states
-
-        // Scale down button slightly when pressed
-        const scale = interpolate(
-            progressPressed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
-
-        return {
-            transform: [{ scale }]
-        };
+      // Link color states to the pressed states
+
+      // Scale down button slightly when pressed
+      const scale = interpolate(
+        progressPressed.value,
+        [0, 1],
+        [1, animationScaleValue],
+        Extrapolate.CLAMP
+      );
+
+      return {
+        transform: [{ scale }]
+      };
     });
 
     const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
-        // Link color states to the pressed states
-
-        /* ◀ REMOVE_LEGACY_COMPONENT: Remove the following condition */
-        const labelColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [
-                mapColorStates[color].label.default,
-                mapColorStates[color].label.pressed
-            ]
-        );
-
-        return {
-            color: labelColor
-        };
+      // Link color states to the pressed states
+
+      const labelColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [
+          mapColorStates[color].label.default,
+          mapColorStates[color].label.pressed
+        ]
+      );
+
+      return {
+        color: labelColor
+      };
     });
 
     // Animate the <Icon> color prop
     const pressedColorIconAnimationStyle = useAnimatedProps(() => {
-        const iconColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [
-                mapColorStates[color].label.default,
-                mapColorStates[color].label.pressed
-            ]
-        );
-
-        return { color: iconColor };
+      const iconColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [
+          mapColorStates[color].label.default,
+          mapColorStates[color].label.pressed
+        ]
+      );
+
+      return { color: iconColor };
     });
 
     const AnimatedIconClassComponent =
-        Animated.createAnimatedComponent(IconClassComponent);
+      Animated.createAnimatedComponent(IconClassComponent);
 
     const onPressIn = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 1;
+      // eslint-disable-next-line functional/immutable-data
+      isPressed.value = 1;
     }, [isPressed]);
     const onPressOut = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 0;
+      // eslint-disable-next-line functional/immutable-data
+      isPressed.value = 0;
     }, [isPressed]);
 
     // Icon size
     const iconSize = 24;
 
     return (
-        <Pressable
-            accessibilityLabel={accessibilityLabel}
-            accessibilityHint={accessibilityHint}
-            accessibilityRole={"button"}
-            testID={testID}
-            onPress={onPress}
-            onPressIn={onPressIn}
-            onPressOut={onPressOut}
-            accessible={true}
-            disabled={disabled}
-            hitSlop={{ top: 14, right: 24, bottom: 14, left: 24 }}
-            style={IOButtonStyles.dimensionsDefault}
-        >
-            <Animated.View
-                style={[
-                    IOButtonStyles.buttonLink,
-                    iconPosition === "end" && { flexDirection: "row-reverse" },
-                    disabled ? { opacity: DISABLED_OPACITY } : {},
-                    /* Prevent Reanimated from overriding background colors
+      <Pressable
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole={"button"}
+        testID={testID}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessible={true}
+        disabled={disabled}
+        hitSlop={{ top: 14, right: 24, bottom: 14, left: 24 }}
+        style={IOButtonStyles.dimensionsDefault}
+      >
+        <Animated.View
+          style={[
+            IOButtonStyles.buttonLink,
+            iconPosition === "end" && { flexDirection: "row-reverse" },
+            disabled ? { opacity: DISABLED_OPACITY } : {},
+            /* Prevent Reanimated from overriding background colors
                     if button is disabled */
-                    !disabled && pressedAnimationStyle
-                ]}
-            >
-                {icon && (
-                    <>
-                        {!disabled ? (
-                            <AnimatedIconClassComponent
-                                name={icon}
-                                animatedProps={pressedColorIconAnimationStyle}
-                                color={
-                                    mapColorStates[color]?.label?.default
-                                }
-                                size={iconSize}
-                            />
-                        ) : (
-                            <AnimatedIcon
-                                name={icon}
-                                color={mapColorStates[color]?.label?.disabled}
-                                size={iconSize}
-                            />
-                        )}
-                        <HSpacer size={8} />
-                    </>
-                )}
-                <Animated.Text
-                    style={[
-                        IOButtonStylesLocal.label,
-                        disabled
-                            ? { color: mapColorStates[color]?.label?.disabled }
-                            : { color: mapColorStates[color]?.label?.default },
-                        !disabled && pressedColorLabelAnimationStyle
-                    ]}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                /* A11y-related props:
+            !disabled && pressedAnimationStyle
+          ]}
+        >
+          {icon && (
+            <>
+              {!disabled ? (
+                <AnimatedIconClassComponent
+                  name={icon}
+                  animatedProps={pressedColorIconAnimationStyle}
+                  color={mapColorStates[color]?.label?.default}
+                  size={iconSize}
+                />
+              ) : (
+                <AnimatedIcon
+                  name={icon}
+                  color={mapColorStates[color]?.label?.disabled}
+                  size={iconSize}
+                />
+              )}
+              <HSpacer size={8} />
+            </>
+          )}
+          <Animated.Text
+            style={[
+              IOButtonStylesLocal.label,
+              disabled
+                ? { color: mapColorStates[color]?.label?.disabled }
+                : { color: mapColorStates[color]?.label?.default },
+              !disabled && pressedColorLabelAnimationStyle
+            ]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            /* A11y-related props:
                 DON'T UNCOMMENT THEM */
-                /* allowFontScaling
+            /* allowFontScaling
                 maxFontSizeMultiplier={1.3} */
-                >
-                    {label}
-                </Animated.Text>
-            </Animated.View>
-        </Pressable>
+          >
+            {label}
+          </Animated.Text>
+        </Animated.View>
+      </Pressable>
     );
-});
+  }
+);
 
 export default ButtonLink;

package/src/components/buttons/IconButton.tsx

@@ -10,7 +10,14 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOButtonStyles, IOColors, IOIconButtonStyles, IOScaleValues, IOSpringValues, hexToRgba } from "../../core";
+import {
+  IOButtonStyles,
+  IOColors,
+  IOIconButtonStyles,
+  IOScaleValues,
+  IOSpringValues,
+  hexToRgba
+} from "../../core";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
 
@@ -101,14 +108,10 @@ export const IconButton = ({
     const iconColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].icon.default,
-        mapColorStates[color].icon.pressed
-      ]
+      [mapColorStates[color].icon.default, mapColorStates[color].icon.pressed]
     );
     return { color: iconColor };
   });
-  /* REMOVE_LEGACY_COMPONENT: End ▶ */
 
   const handlePressIn = useCallback(() => {
     // eslint-disable-next-line functional/immutable-data