@pagopa/io-app-design-system 1.18.0 → 1.19.0

package/src/components/layout/HeaderSecondLevel.tsx

@@ -26,13 +26,22 @@ type ScrollValues = {
   triggerOffset: number;
 };
 
+type BackProps =
+  | {
+      goBack: () => void;
+      backAccessibilityLabel: string;
+    }
+  | {
+      goBack?: never;
+      backAccessibilityLabel?: never;
+    };
+
 type CommonProps = WithTestID<{
   scrollValues?: ScrollValues;
   title: string;
-  goBack: () => void;
-  backAccessibilityLabel: string;
   // Visual attributes
   transparent?: boolean;
+  isModal?: boolean;
 }>;
 
 interface Base extends CommonProps {
@@ -63,7 +72,8 @@ interface ThreeActions extends CommonProps {
   thirdAction: ActionProp;
 }
 
-export type HeaderSecondLevel = Base | OneAction | TwoActions | ThreeActions;
+export type HeaderSecondLevel = BackProps &
+  (Base | OneAction | TwoActions | ThreeActions);
 
 const HEADER_BG_COLOR: IOColors = "white";
 const borderColorDisabled = hexToRgba(IOColors["grey-100"], 0);
@@ -106,6 +116,7 @@ export const HeaderSecondLevel = ({
   title,
   type,
   transparent = false,
+  isModal = false,
   testID,
   firstAction,
   secondAction,
@@ -155,14 +166,21 @@ export const HeaderSecondLevel = ({
     >
       <Animated.View
         testID={testID}
-        style={[{ marginTop: insets.top }, styles.headerInner]}
+        style={[isModal ? {} : { marginTop: insets.top }, styles.headerInner]}
       >
-        <IconButton
-          icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
-          color="neutral"
-          onPress={goBack}
-          accessibilityLabel={backAccessibilityLabel}
-        />
+        {goBack ? (
+          <IconButton
+            icon={Platform.select({
+              android: "backAndroid",
+              default: "backiOS"
+            })}
+            color="neutral"
+            onPress={goBack}
+            accessibilityLabel={backAccessibilityLabel}
+          />
+        ) : (
+          <HSpacer size={32} />
+        )}
         <Animated.Text
           numberOfLines={1}
           style={[

package/src/components/listitems/ListItemHeader.tsx

@@ -3,14 +3,15 @@ import { View } from "react-native";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
+  IOSpacingScale,
   IOStyles,
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
+import { Badge } from "../badge";
+import { ButtonLink, IconButton } from "../buttons";
 import { IOIcons, Icon } from "../icons";
 import { H6 } from "../typography";
-import { ButtonLink, IconButton } from "../buttons";
-import { Badge } from "../badge";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -48,6 +49,8 @@ export type ListItemHeader = WithTestID<{
 }> &
   IconProps;
 
+const iconMargin: IOSpacingScale = 8;
+
 export const ListItemHeader = ({
   label,
   iconName,
@@ -124,7 +127,7 @@ export const ListItemHeader = ({
     >
       <View style={IOListItemStyles.listItemInner}>
         {iconName && (
-          <View style={{ marginRight: IOListItemVisualParams.actionMargin }}>
+          <View style={{ marginRight: iconMargin }}>
             <Icon
               name={iconName}
               color={iconColor ?? theme["icon-decorative"]}

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -10,6 +10,7 @@ import { LabelSmall } from "../typography/LabelSmall";
 import { PressableListItemBase } from "./PressableListItemsBase";
 
 export type ListItemRadioWithAmountProps = {
+  onValueChange?: (newValue: boolean) => void;
   selected?: boolean;
   label: string;
   formattedAmountString: string;
@@ -29,6 +30,9 @@ export const ListItemRadioWithAmount = (
   const pressHandler = () => {
     RNReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(val => !val);
+    if (props.onValueChange !== undefined) {
+      props.onValueChange(!toggleValue);
+    }
   };
   const isExperimental = useIOExperimentalDesign();
 
@@ -55,7 +59,7 @@ export const ListItemRadioWithAmount = (
       <View pointerEvents="none" style={{ flexDirection: "row" }}>
         <H6 color={interactiveColor}>{props.formattedAmountString}</H6>
         <HSpacer size={8} />
-        <AnimatedRadio checked={toggleValue} />
+        <AnimatedRadio checked={props.selected ?? toggleValue} />
       </View>
     </PressableListItemBase>
   );