@pagopa/io-app-design-system 2.1.1 → 3.0.0

package/src/components/listitems/ListItemTransaction.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { ImageURISource, StyleSheet, View } from "react-native";
+import React, { ReactNode } from "react";
+import { ImageURISource, View } from "react-native";
 import Placeholder from "rn-placeholder";
 
 import {
@@ -20,38 +20,26 @@ import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
+import { HStack } from "../stack";
 import { H6, LabelSmall } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
 } from "./PressableListItemsBase";
 
-export type ListItemTransactionStatus =
-  | "success"
-  | "failure"
-  | "pending"
-  | "cancelled"
-  | "refunded"
-  | "reversal";
-
-export type ListItemTransactionStatusWithoutBadge = Extract<
-  ListItemTransactionStatus,
-  "success" | "refunded"
->;
-
-export type ListItemTransactionStatusWithBadge = Exclude<
-  ListItemTransactionStatus,
-  "success" | "refunded"
->;
+export type ListItemTransactionBadge = {
+  text: string;
+  variant: Badge["variant"];
+};
 
 export type ListItemTransactionLogo =
   | IOLogoPaymentType
   | ImageURISource
-  | React.ReactNode;
+  | ReactNode;
 
 export type ListItemTransaction = WithTestID<
   PressableBaseProps & {
-    hasChevronRight?: boolean;
+    showChevron?: boolean;
     isLoading?: boolean;
     /**
      * A logo that will be displayed on the left of the list item.
@@ -72,32 +60,32 @@ export type ListItemTransaction = WithTestID<
           transaction: {
             amount: string;
             amountAccessibilityLabel: string;
-            status: ListItemTransactionStatusWithoutBadge;
+            badge?: never;
+            refund?: boolean;
           };
-          badgeText?: string;
         }
       | {
           transaction: {
             amount?: string;
             amountAccessibilityLabel?: string;
-            status: ListItemTransactionStatusWithBadge;
+            badge: ListItemTransactionBadge;
+            refund?: never;
           };
-          badgeText: string;
         }
     )
 >;
 
-type LeftComponentProps = {
-  logoIcon: ListItemTransactionLogo;
-};
-
 const CARD_LOGO_SIZE: IOIconSizeScale = 24;
 const MUNICIPALITY_LOGO_SIZE = 44;
 // this is the <Avatar/>'s "small" size,
 // since it is bigger than the card logos, we use
 // it as a base size for homogeneous sizing via container size.
 
-const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
+const StartComponent = ({
+  logoIcon
+}: {
+  logoIcon: ListItemTransactionLogo;
+}) => {
   if (isImageUri(logoIcon)) {
     return <Avatar logoUri={logoIcon} size="small" />;
   }
@@ -114,23 +102,20 @@ const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
 
 export const ListItemTransaction = ({
   accessibilityLabel,
-  hasChevronRight = false,
+  showChevron = false,
   isLoading = false,
   paymentLogoIcon,
   onPress,
   subtitle,
   testID,
   title,
-  transaction: { amount, amountAccessibilityLabel, status = "success" },
-  badgeText,
+  transaction: { amount, amountAccessibilityLabel, badge, refund },
   numberOfLines = 2,
   accessible
 }: ListItemTransaction) => {
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
-  const maybeBadgeText = badgeText ?? "-";
-
   if (isLoading) {
     return <SkeletonComponent />;
   }
@@ -139,56 +124,28 @@ export const ListItemTransaction = ({
     ? theme["interactiveElem-default"]
     : "blue";
 
-  const amountColor: IOColors = theme["textBody-default"];
-  const successColor: IOColors = theme.successText;
+  const amountColorDefault: IOColors = theme["textBody-default"];
+  const amountColorRefund: IOColors = theme.successText;
 
-  const ListItemTransactionContent = () => {
-    const TransactionAmountOrBadgeComponent = () => {
-      switch (status) {
-        case "success":
-          return (
-            <H6
-              accessibilityLabel={amountAccessibilityLabel}
-              color={hasChevronRight ? interactiveColor : amountColor}
-              numberOfLines={numberOfLines}
-            >
-              {amount || ""}
-            </H6>
-          );
-        case "refunded":
-          return (
-            <H6
-              accessibilityLabel={amountAccessibilityLabel}
-              color={hasChevronRight ? interactiveColor : successColor}
-              numberOfLines={numberOfLines}
-            >
-              {amount || ""}
-            </H6>
-          );
-        case "failure":
-        case "cancelled":
-          return <Badge variant="error" text={maybeBadgeText} />;
-        case "reversal":
-          return <Badge variant="lightBlue" text={maybeBadgeText} />;
-        case "pending":
-          return <Badge variant="info" text={maybeBadgeText} />;
-      }
-    };
+  const amountColor = refund ? amountColorRefund : amountColorDefault;
 
-    return (
-      <>
+  const ListItemTransactionContent = () => (
+    <>
+      <HStack
+        space={IOListItemLogoMargin}
+        style={{ alignItems: "center", flexShrink: 1 }}
+      >
         {paymentLogoIcon && (
           <View
             style={{
-              marginRight: IOListItemLogoMargin,
               width: MUNICIPALITY_LOGO_SIZE,
               alignItems: "center"
             }}
           >
-            <LeftComponent logoIcon={paymentLogoIcon} />
+            <StartComponent logoIcon={paymentLogoIcon} />
           </View>
         )}
-        <View style={IOStyles.flex}>
+        <View style={{ flexShrink: 1 }}>
           <LabelSmall
             numberOfLines={numberOfLines}
             color={theme["textBody-default"]}
@@ -200,19 +157,29 @@ export const ListItemTransaction = ({
             {subtitle}
           </LabelSmall>
         </View>
-        <View style={Styles.rightSection}>
-          <TransactionAmountOrBadgeComponent />
-          {hasChevronRight && (
-            <Icon
-              name="chevronRightListItem"
-              color={interactiveColor}
-              size={IOListItemVisualParams.chevronSize}
-            />
-          )}
-        </View>
-      </>
-    );
-  };
+      </HStack>
+      <HStack style={{ alignItems: "center" }}>
+        {badge ? (
+          <Badge variant={badge?.variant} text={badge?.text} />
+        ) : (
+          <H6
+            accessibilityLabel={amountAccessibilityLabel}
+            color={showChevron ? interactiveColor : amountColor}
+            numberOfLines={numberOfLines}
+          >
+            {amount}
+          </H6>
+        )}
+        {showChevron && (
+          <Icon
+            name="chevronRightListItem"
+            color={interactiveColor}
+            size={IOListItemVisualParams.chevronSize}
+          />
+        )}
+      </HStack>
+    </>
+  );
 
   if (onPress) {
     return (
@@ -232,7 +199,12 @@ export const ListItemTransaction = ({
         accessible={accessible}
         accessibilityLabel={accessibilityLabel}
       >
-        <View style={IOListItemStyles.listItemInner}>
+        <View
+          style={[
+            IOListItemStyles.listItemInner,
+            { columnGap: IOListItemVisualParams.iconMargin }
+          ]}
+        >
           <ListItemTransactionContent />
         </View>
       </View>
@@ -262,12 +234,3 @@ const SkeletonComponent = () => (
     </View>
   </View>
 );
-
-const Styles = StyleSheet.create({
-  rightSection: {
-    marginLeft: IOListItemVisualParams.iconMargin,
-    flexDirection: "row",
-    alignItems: "center",
-    height: "100%"
-  }
-});

package/src/components/listitems/PressableListItemsBase.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Pressable } from "react-native";
 import Animated from "react-native-reanimated";
-import { IOListItemStyles } from "../../core";
+import { IOListItemStyles, IOListItemVisualParams } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { useListItemSpringAnimation } from "./hooks/useListItemSpringAnimation";
 
@@ -40,7 +40,11 @@ export const PressableListItemBase = ({
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
       >
         <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
+          style={[
+            IOListItemStyles.listItemInner,
+            { columnGap: IOListItemVisualParams.iconMargin },
+            animatedScaleStyle
+          ]}
         >
           {children}
         </Animated.View>

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -920,6 +920,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -1069,13 +1072,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           }
         }
       >
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
@@ -1308,6 +1304,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -1357,13 +1356,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           }
         }
       >
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
@@ -1678,6 +1670,9 @@ exports[`Test List Item Components - Experimental Enabled  PressableListItemsBas
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -2612,6 +2607,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -2761,13 +2759,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
           }
         }
       >
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <Text
           allowFontScaling={false}
           dynamicTypeRamp="headline"
@@ -3000,6 +2991,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -3049,13 +3043,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
           }
         }
       >
-        <View
-          style={
-            {
-              "width": 8,
-            }
-          }
-        />
         <Text
           allowFontScaling={false}
           dynamicTypeRamp="headline"
@@ -3370,6 +3357,9 @@ exports[`Test List Item Components PressableListItemsBase Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {

package/src/components/listitems/__test__/listitem.test.tsx

@@ -81,7 +81,6 @@ describe("Test List Item Components", () => {
         title="TITLE"
         subtitle="subtitle"
         transaction={{
-          status: "success",
           amount: "€ 1.000,00",
           amountAccessibilityLabel: "€ 1.000,00"
         }}
@@ -184,7 +183,6 @@ describe("Test List Item Components - Experimental Enabled ", () => {
         title="TITLE"
         subtitle="subtitle"
         transaction={{
-          status: "success",
           amount: "€ 1.000,00",
           amountAccessibilityLabel: "€ 1.000,00"
         }}