@pagopa/io-app-design-system 1.25.0 → 1.26.0

package/src/components/buttons/ButtonOutline.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback } from "react";
-import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -213,183 +218,191 @@ const IOButtonStylesLocal = StyleSheet.create({
   }
 });
 
-export const ButtonOutline = ({
-  color = "primary",
-  label,
-  fullWidth = false,
-  disabled = false,
-  icon,
-  iconPosition = "start",
-  onPress,
-  accessibilityLabel,
-  accessibilityHint,
-  testID
-}: ButtonOutline) => {
-  const { isExperimental } = useIOExperimentalDesign();
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
-  const colorMap = React.useMemo(
-    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-    [isExperimental]
-  );
-
-  const buttonStyles = React.useMemo(
-    () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
-    [isExperimental]
-  );
-
-  const buttonStylesLocal = React.useMemo(
-    () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
-    [isExperimental]
-  );
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
+export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
+  (
+    {
+      color = "primary",
+      label,
+      fullWidth = false,
+      disabled = false,
+      icon,
+      iconPosition = "start",
+      onPress,
+      accessibilityLabel,
+      accessibilityHint,
+      testID
+    },
+    ref
+  ) => {
+    const { isExperimental } = useIOExperimentalDesign();
+    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
+    const colorMap = React.useMemo(
+      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+      [isExperimental]
+    );
 
-  // Interpolate animation values from `isPressed` values
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
-    const backgroundColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].background.default, colorMap[color].background.pressed]
+    const buttonStyles = React.useMemo(
+      () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
+      [isExperimental]
     );
 
-    const borderColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].border.default, colorMap[color].border.pressed]
+    const buttonStylesLocal = React.useMemo(
+      () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
+      [isExperimental]
     );
+    // Scaling transformation applied when the button is pressed
+    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
+    // Using a spring-based animation for our interpolations
+    const progressPressed = useDerivedValue(() =>
+      withSpring(isPressed.value, IOSpringValues.button)
     );
 
-    return {
-      borderColor,
-      backgroundColor,
-      transform: [{ scale }]
-    };
-  });
+    // Interpolate animation values from `isPressed` values
+    const pressedAnimationStyle = useAnimatedStyle(() => {
+      // Link color states to the pressed states
+      const backgroundColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [colorMap[color].background.default, colorMap[color].background.pressed]
+      );
 
-  const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
+      const borderColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [colorMap[color].border.default, colorMap[color].border.pressed]
+      );
 
-    const labelColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].border.default, colorMap[color].border.pressed]
-    );
+      // Scale down button slightly when pressed
+      const scale = interpolate(
+        progressPressed.value,
+        [0, 1],
+        [1, animationScaleValue],
+        Extrapolate.CLAMP
+      );
 
-    return {
-      color: labelColor
-    };
-  });
+      return {
+        borderColor,
+        backgroundColor,
+        transform: [{ scale }]
+      };
+    });
 
-  // Animate the <Icon> color prop
-  const pressedColorIconAnimationStyle = useAnimatedProps(() => {
-    const iconColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [colorMap[color].label.default, colorMap[color].label.pressed]
-    );
-    return { color: iconColor };
-  });
+    const pressedColorLabelAnimationStyle = useAnimatedStyle(() => {
+      // Link color states to the pressed states
 
-  const AnimatedIconClassComponent =
-    Animated.createAnimatedComponent(IconClassComponent);
+      const labelColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [colorMap[color].border.default, colorMap[color].border.pressed]
+      );
 
-  const onPressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const onPressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
+      return {
+        color: labelColor
+      };
+    });
 
-  return (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityRole={"button"}
-      testID={testID}
-      onPress={onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      accessible={true}
-      disabled={disabled}
-      style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
-    >
-      <Animated.View
-        style={[
-          buttonStyles.button,
-          isExperimental && fullWidth && { paddingHorizontal: 16 },
-          buttonStylesLocal.buttonWithBorder,
-          buttonStyles.buttonSizeDefault,
-          iconPosition === "end" && { flexDirection: "row-reverse" },
-          disabled
-            ? {
-                backgroundColor: colorMap[color]?.background?.disabled,
-                borderColor: colorMap[color]?.border?.disabled,
-                opacity: DISABLED_OPACITY
-              }
-            : {
-                backgroundColor: colorMap[color]?.background?.default,
-                borderColor: colorMap[color]?.border.default
-              },
-          /* Prevent Reanimated from overriding background colors
-                    if button is disabled */
-          !disabled && pressedAnimationStyle
-        ]}
+    // Animate the <Icon> color prop
+    const pressedColorIconAnimationStyle = useAnimatedProps(() => {
+      const iconColor = interpolateColor(
+        progressPressed.value,
+        [0, 1],
+        [colorMap[color].label.default, colorMap[color].label.pressed]
+      );
+      return { color: iconColor };
+    });
+
+    const AnimatedIconClassComponent =
+      Animated.createAnimatedComponent(IconClassComponent);
+
+    const onPressIn = useCallback(() => {
+      // eslint-disable-next-line functional/immutable-data
+      isPressed.value = 1;
+    }, [isPressed]);
+    const onPressOut = useCallback(() => {
+      // eslint-disable-next-line functional/immutable-data
+      isPressed.value = 0;
+    }, [isPressed]);
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole={"button"}
+        testID={testID}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessible={true}
+        disabled={disabled}
+        style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
       >
-        {icon && (
-          <>
-            {!disabled ? (
-              <AnimatedIconClassComponent
-                name={icon}
-                animatedProps={pressedColorIconAnimationStyle}
-                color={colorMap[color]?.label?.default}
-                size={iconSize}
-              />
-            ) : (
-              <AnimatedIcon
-                name={icon}
-                color={colorMap[color]?.label?.disabled}
-                size={iconSize}
-              />
-            )}
-            <HSpacer size={8} />
-          </>
-        )}
-        <Animated.Text
+        <Animated.View
           style={[
-            buttonStylesLocal.label,
-            buttonStyles.label,
+            buttonStyles.button,
+            isExperimental && fullWidth && { paddingHorizontal: 16 },
+            buttonStylesLocal.buttonWithBorder,
+            buttonStyles.buttonSizeDefault,
+            iconPosition === "end" && { flexDirection: "row-reverse" },
             disabled
-              ? { color: colorMap[color]?.label?.disabled }
-              : { color: colorMap[color]?.label?.default },
-            !disabled && pressedColorLabelAnimationStyle
+              ? {
+                  backgroundColor: colorMap[color]?.background?.disabled,
+                  borderColor: colorMap[color]?.border?.disabled,
+                  opacity: DISABLED_OPACITY
+                }
+              : {
+                  backgroundColor: colorMap[color]?.background?.default,
+                  borderColor: colorMap[color]?.border.default
+                },
+            /* Prevent Reanimated from overriding background colors
+                    if button is disabled */
+            !disabled && pressedAnimationStyle
           ]}
-          numberOfLines={1}
-          ellipsizeMode="tail"
-          allowFontScaling={isExperimental}
-          maxFontSizeMultiplier={1.3}
-          importantForAccessibility="no-hide-descendants"
         >
-          {label}
-        </Animated.Text>
-      </Animated.View>
-    </Pressable>
-  );
-};
+          {icon && (
+            <>
+              {!disabled ? (
+                <AnimatedIconClassComponent
+                  name={icon}
+                  animatedProps={pressedColorIconAnimationStyle}
+                  color={colorMap[color]?.label?.default}
+                  size={iconSize}
+                />
+              ) : (
+                <AnimatedIcon
+                  name={icon}
+                  color={colorMap[color]?.label?.disabled}
+                  size={iconSize}
+                />
+              )}
+              <HSpacer size={8} />
+            </>
+          )}
+          <Animated.Text
+            style={[
+              buttonStylesLocal.label,
+              buttonStyles.label,
+              disabled
+                ? { color: colorMap[color]?.label?.disabled }
+                : { color: colorMap[color]?.label?.default },
+              !disabled && pressedColorLabelAnimationStyle
+            ]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            allowFontScaling={isExperimental}
+            maxFontSizeMultiplier={1.3}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
+            {label}
+          </Animated.Text>
+        </Animated.View>
+      </Pressable>
+    );
+  }
+);
 
 export default ButtonOutline;

package/src/components/buttons/ButtonSolid.tsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   Extrapolate,
@@ -155,20 +160,23 @@ const mapLegacyColorStates: Record<
   }
 };
 
-export const ButtonSolid = React.memo(
-  ({
-    color = "primary",
-    label,
-    fullWidth = false,
-    disabled = false,
-    loading = false,
-    icon,
-    iconPosition = "start",
-    onPress,
-    accessibilityLabel,
-    accessibilityHint,
-    testID
-  }: ButtonSolidProps) => {
+export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
+  (
+    {
+      color = "primary",
+      label,
+      fullWidth = false,
+      disabled = false,
+      loading = false,
+      icon,
+      iconPosition = "start",
+      onPress,
+      accessibilityLabel,
+      accessibilityHint,
+      testID
+    },
+    ref
+  ) => {
     const isPressed = useSharedValue(0);
     const { isExperimental } = useIOExperimentalDesign();
     // Scaling transformation applied when the button is pressed
@@ -253,6 +261,7 @@ export const ButtonSolid = React.memo(
     return (
       <Pressable
         testID={testID}
+        ref={ref}
         accessible={true}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
@@ -320,6 +329,8 @@ export const ButtonSolid = React.memo(
                 ellipsizeMode="tail"
                 allowFontScaling={isExperimental}
                 maxFontSizeMultiplier={1.3}
+                accessible={false}
+                accessibilityElementsHidden
                 importantForAccessibility="no-hide-descendants"
               >
                 {label}

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -39,7 +39,8 @@ exports[`Test Buttons Components - Experimental Enabled ButtonExtendedOutline Sn
         {
           "alignItems": "center",
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#CCD4DC",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "borderStyle": "solid",
           "borderWidth": 1,
@@ -233,8 +234,11 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
     }
   >
     <Text
+      accessibilityElementsHidden={true}
+      accessible={false}
       allowFontScaling={true}
       ellipsizeMode="tail"
+      importantForAccessibility="no-hide-descendants"
       maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
@@ -304,6 +308,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
       [
         {
           "alignItems": "center",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "elevation": 0,
           "flexDirection": "row",
@@ -336,6 +341,8 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
     }
   >
     <Text
+      accessibilityElementsHidden={true}
+      accessible={false}
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
@@ -411,6 +418,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
       [
         {
           "alignItems": "center",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "elevation": 0,
           "flexDirection": "row",
@@ -453,6 +461,8 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
       }
     >
       <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
         allowFontScaling={true}
         color="white"
         defaultColor="white"
@@ -902,7 +912,8 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
         {
           "alignItems": "center",
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#CCD4DC",
+          "borderColor": "#E8EBF1",
+          "borderCurve": "continuous",
           "borderRadius": 8,
           "borderStyle": "solid",
           "borderWidth": 1,
@@ -1096,8 +1107,11 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
     }
   >
     <Text
+      accessibilityElementsHidden={true}
+      accessible={false}
       allowFontScaling={false}
       ellipsizeMode="tail"
+      importantForAccessibility="no-hide-descendants"
       maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
@@ -1199,6 +1213,8 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
     }
   >
     <Text
+      accessibilityElementsHidden={true}
+      accessible={false}
       allowFontScaling={false}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
@@ -1315,6 +1331,8 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       }
     >
       <Text
+        accessibilityElementsHidden={true}
+        accessible={false}
         allowFontScaling={false}
         color="white"
         defaultColor="white"

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -37,7 +37,8 @@ const styles = StyleSheet.create({
     width: IOSelectionTickVisualParams.size,
     height: IOSelectionTickVisualParams.size,
     borderWidth: IOSelectionTickVisualParams.borderWidth,
-    borderRadius: checkBoxRadius
+    borderRadius: checkBoxRadius,
+    borderCurve: "continuous"
   },
   checkBoxSquare: {
     position: "absolute",
@@ -45,7 +46,8 @@ const styles = StyleSheet.create({
     top: 0,
     width: IOSelectionTickVisualParams.size,
     height: IOSelectionTickVisualParams.size,
-    borderRadius: checkBoxRadius
+    borderRadius: checkBoxRadius,
+    borderCurve: "continuous"
   }
 });
 

package/src/components/divider/Divider.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { IOColors, IOThemeContext } from "../../core";
+import { IOColors, useIOTheme } from "../../core";
 
 type DividerOrientation = "vertical" | "horizontal";
 
@@ -15,7 +15,7 @@ Native `Divider` component
 @param  {DividerOrientation} orientation
  */
 const BaseDivider = React.memo(({ orientation }: DividerProps) => {
-  const theme = React.useContext(IOThemeContext);
+  const theme = useIOTheme();
   const baseStyle = {
     backgroundColor: IOColors[theme["divider-default"]],
     ...(orientation === "vertical"

package/src/components/layout/BlockButtons.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { HSpacer } from "../spacer/Spacer";
-import { ButtonOutline, ButtonSolid, ButtonSolidProps } from "../buttons";
+import { ButtonOutline, ButtonSolid } from "../buttons";
 import { IOStyles } from "../../core";
 
 const styles = StyleSheet.create({
@@ -23,7 +23,7 @@ type CommonProps = Readonly<{
 
 export type BlockButtonProps = {
   type: "Solid" | "Outline";
-  buttonProps: Omit<ButtonSolidProps, "fullWidth">;
+  buttonProps: Omit<React.ComponentProps<typeof ButtonSolid>, "fullWidth">;
 };
 
 /**

package/src/components/layout/GradientBottomActions.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { Easing, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { easeGradient } from "react-native-easing-gradient";
 import LinearGradient from "react-native-linear-gradient";
 import Animated from "react-native-reanimated";
 import { IOColors, IOSpacer, IOVisualCostants, hexToRgba } from "../../core";
@@ -33,6 +34,15 @@ type GradientBottomActionsDimensions = {
 // Background color should be app main background (both light and dark themes)
 const HEADER_BG_COLOR: IOColors = "white";
 
+const { colors, locations } = easeGradient({
+  colorStops: {
+    0: { color: hexToRgba(IOColors[HEADER_BG_COLOR], 0) },
+    1: { color: IOColors[HEADER_BG_COLOR] }
+  },
+  easing: Easing.ease,
+  extraColorStopsPerTransition: 20
+});
+
 const styles = StyleSheet.create({
   buttonContainer: {
     paddingHorizontal: IOVisualCostants.appMarginDefault,
@@ -84,14 +94,18 @@ export const GradientBottomActions = ({
       ]}
       pointerEvents="none"
     >
+      {/* 100% opacity bg color fills at least 45% of the area */}
       <LinearGradient
-        style={{ height: dimensions.gradientAreaHeight }}
-        // 100% opacity bg color fills at least 50% of the area
-        locations={[0, 0.5]}
-        colors={[
-          hexToRgba(IOColors[HEADER_BG_COLOR], 0),
-          IOColors[HEADER_BG_COLOR]
-        ]}
+        style={{ height: dimensions.gradientAreaHeight * 0.55 }}
+        locations={locations}
+        colors={colors}
+      />
+      <View
+        style={{
+          bottom: 0,
+          height: dimensions.gradientAreaHeight * 0.45,
+          backgroundColor: IOColors[HEADER_BG_COLOR]
+        }}
       />
     </Animated.View>
 

package/src/components/layout/GradientScrollView.tsx

@@ -28,7 +28,7 @@ export type GradientScrollView = WithTestID<{
 }>;
 
 // Extended gradient area above the actions
-export const gradientSafeArea: IOSpacingScale = 80;
+export const gradientSafeArea: IOSpacingScale = 96;
 // End content margin before the actions
 const contentEndMargin: IOSpacingScale = 32;
 // Margin between primary action and secondary one