@pagopa/io-app-design-system 1.18.0 → 1.20.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/ListItemNav.tsx

@@ -24,8 +24,18 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
-import { VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { HSpacer, VSpacer } from "../spacer";
+import { Caption, H6, LabelSmall } from "../typography";
+
+type ListItemTopElementProps =
+  | {
+      badgeProps: React.ComponentProps<typeof Badge>;
+      dateValue?: never;
+    }
+  | {
+      badgeProps?: never;
+      dateValue: string;
+    };
 
 type ListItemNavPartialProps = WithTestID<{
   value: string | React.ReactNode;
@@ -34,7 +44,7 @@ type ListItemNavPartialProps = WithTestID<{
   // Accessibility
   accessibilityLabel: string;
   hideChevron?: boolean;
-  badgeProps?: React.ComponentProps<typeof Badge>;
+  topElement?: ListItemTopElementProps;
 }>;
 
 export type ListItemNavGraphicProps =
@@ -54,7 +64,7 @@ export const ListItemNav = ({
   accessibilityLabel,
   testID,
   hideChevron = false,
-  badgeProps
+  topElement
 }: ListItemNav) => {
   const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
@@ -62,12 +72,28 @@ export const ListItemNav = ({
 
   const listItemNavContent = (
     <>
-      {badgeProps && (
+      {topElement && (
         <>
-          <View style={{ alignSelf: "flex-start" }}>
-            <Badge {...badgeProps} />
-          </View>
-          <VSpacer size={4} />
+          {topElement.badgeProps && (
+            <>
+              <View style={{ alignSelf: "flex-start" }}>
+                <Badge {...topElement.badgeProps} />
+              </View>
+              <VSpacer size={8} />
+            </>
+          )}
+          {topElement.dateValue && (
+            <>
+              <View style={{ alignSelf: "flex-start", flexDirection: "row" }}>
+                <Icon name="calendar" size={16} />
+                <HSpacer size={4} />
+                <Caption color={theme["textBody-tertiary"]}>
+                  {topElement.dateValue}
+                </Caption>
+              </View>
+              <VSpacer size={4} />
+            </>
+          )}
         </>
       )}
       {/* Let developer using a custom component (e.g: skeleton) */}

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,8 +30,11 @@ export const ListItemRadioWithAmount = (
   const pressHandler = () => {
     RNReactNativeHapticFeedback.trigger("impactLight");
     setToggleValue(val => !val);
+    if (props.onValueChange !== undefined) {
+      props.onValueChange(!toggleValue);
+    }
   };
-  const isExperimental = useIOExperimentalDesign();
+  const { isExperimental } = useIOExperimentalDesign();
 
   const interactiveColor: IOColors = isExperimental ? "blueIO-500" : "blue";
   const suggestColor: IOColors = "hanPurple-500";
@@ -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>
   );