@pagopa/io-app-design-system 5.12.1 → 6.0.0-0

package/src/components/claimsSelector/ClaimsSelector.tsx

@@ -2,14 +2,9 @@ import React, { Fragment } from "react";
 import { Image, StyleSheet, View } from "react-native";
 import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import LinearGradient from "react-native-linear-gradient";
-import Animated from "react-native-reanimated";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { useIOTheme } from "../../context";
-import {
-  hexToRgba,
-  IOAccordionRadius,
-  IOColors,
-  IOSpacingScale
-} from "../../core";
+import { IOAccordionRadius, IOColors, IOSpacingScale } from "../../core";
 import { useAccordionAnimation } from "../../hooks/useAccordionAnimation";
 import { Icon } from "../icons";
 import { Divider } from "../layout";
@@ -18,6 +13,12 @@ import { H6 } from "../typography";
 
 const accordionBodySpacing: IOSpacingScale = 16;
 
+// Threshold to determine when the accordion is considered fully collapsed
+const COLLAPSED_RADIUS_THRESHOLD = 0.001;
+
+// Border width offset to ensure gradient fits within the border curves
+const COLLAPSIBLE_BORDER = 1;
+
 type Props = {
   /**
    * The accordion title.
@@ -50,6 +51,10 @@ type Props = {
    */
   onToggle?: (expanded: boolean) => void;
   accessibilityLabel?: string;
+  /**
+   * Accordion header gradient colors.
+   */
+  headerGradientColors?: Array<string>;
 };
 
 type Item = {
@@ -57,6 +62,7 @@ type Item = {
   value: string;
   description: string;
   type?: "text" | "image";
+  endElement?: ListItemInfo["endElement"];
 };
 
 export const ClaimsSelector = ({
@@ -67,7 +73,8 @@ export const ClaimsSelector = ({
   onToggle,
   accessibilityLabel,
   selectedItemIds,
-  selectionEnabled = true
+  selectionEnabled = true,
+  headerGradientColors
 }: Props) => {
   const theme = useIOTheme();
   const {
@@ -76,12 +83,13 @@ export const ClaimsSelector = ({
     onBodyLayout,
     iconAnimatedStyle,
     bodyAnimatedStyle,
-    bodyInnerStyle
+    bodyInnerStyle,
+    progress
   } = useAccordionAnimation({
     defaultExpanded
   });
 
-  const accordionBackground: IOColors = theme["appBackground-secondary"];
+  const accordionBackground: IOColors = theme["appBackground-primary"];
   const accordionBorder: IOColors = theme["cardBorder-default"];
 
   const onItemPress = () => {
@@ -89,8 +97,32 @@ export const ClaimsSelector = ({
     onToggle?.(!expanded);
   };
 
+  const hasHeaderGradient =
+    headerGradientColors && headerGradientColors.length >= 2;
+
+  const headerForegroundColor: IOColors = hasHeaderGradient
+    ? "black"
+    : theme["textBody-default"];
+
+  const headerRadiusAnimatedStyle = useAnimatedStyle(() => {
+    /**
+     * Dynamically adjust bottom corner radius based on the expansion progress.
+     * Bottom corners are rounded only when the accordion is fully collapsed to
+     * ensure visual consistency with the outer container.
+     */
+    const bottomRadius =
+      progress.value < COLLAPSED_RADIUS_THRESHOLD ? IOAccordionRadius : 0;
+    return {
+      borderTopLeftRadius: IOAccordionRadius - COLLAPSIBLE_BORDER,
+      borderTopRightRadius: IOAccordionRadius - COLLAPSIBLE_BORDER,
+      borderBottomLeftRadius: bottomRadius - COLLAPSIBLE_BORDER,
+      borderBottomRightRadius: bottomRadius - COLLAPSIBLE_BORDER,
+      overflow: "hidden"
+    };
+  });
+
   const renderClaimItem = (item: Item, index: number) => {
-    const { id, value, description, type = "text" } = item;
+    const { id, value, description, type = "text", endElement } = item;
     return (
       <Fragment key={id}>
         {index !== 0 && <Divider />}
@@ -124,6 +156,7 @@ export const ClaimsSelector = ({
               label={description}
               accessibilityRole={type}
               reversed
+              endElement={endElement}
             />
           )
         }
@@ -148,15 +181,20 @@ export const ClaimsSelector = ({
         accessibilityLabel={accessibilityLabel ?? title}
         onPress={onItemPress}
       >
-        <View style={styles.textContainer}>
-          <H6 color={theme["textBody-default"]}>{title}</H6>
-          <Animated.View style={iconAnimatedStyle}>
-            <Icon
-              name="chevronBottom"
-              color={theme["interactiveElem-default"]}
+        <Animated.View
+          style={[styles.textContainer, headerRadiusAnimatedStyle]}
+        >
+          {hasHeaderGradient && (
+            <LinearGradient
+              colors={headerGradientColors}
+              style={StyleSheet.absoluteFill}
             />
+          )}
+          <H6 color={headerForegroundColor}>{title}</H6>
+          <Animated.View style={iconAnimatedStyle}>
+            <Icon name="chevronBottom" color={headerForegroundColor} />
           </Animated.View>
-        </View>
+        </Animated.View>
       </TouchableWithoutFeedback>
 
       <Animated.View style={bodyAnimatedStyle}>
@@ -167,16 +205,6 @@ export const ClaimsSelector = ({
           {items.map(renderClaimItem)}
         </View>
       </Animated.View>
-
-      {/* This gradient adds a smooth end to the content. If it is missing,
-      the content will be cut sharply during the height transition. */}
-      <LinearGradient
-        style={styles.linearGradient}
-        colors={[
-          hexToRgba(IOColors[accordionBackground], 0),
-          IOColors[accordionBackground]
-        ]}
-      />
     </View>
   );
 };
@@ -196,15 +224,6 @@ const styles = StyleSheet.create({
   bodyInnerContainer: {
     width: "100%"
   },
-  linearGradient: {
-    height: accordionBodySpacing,
-    position: "absolute",
-    // Place at the bottom
-    bottom: 0,
-    // Avoid gradient overlaps with border radius
-    left: accordionBodySpacing,
-    right: accordionBodySpacing
-  },
   imageClaim: {
     width: 160,
     aspectRatio: 3 / 4