chore: [IOBP-352] Add paymentLogo prop into ListItemNav (#111)

## Short description
This PR introduces a new `ListItemNav` prop: `paymentLogo` which allows
to show an icon on the left side which is a payment logo instead of
IOIcons.

## List of changes proposed in this pull request
- Added a new prop `paymentLogo` into component

## How to test
Open the example app and navigate to "List item" section and you should
see a list item nav with a bancomat pay logo on the left

## Preview
<img width="305" alt="image"
src="https://github.com/pagopa/io-app-design-system/assets/34343582/ce35fa12-9605-4095-b1d1-41b08289cbd6">

example/src/pages/ListItem.tsx

@@ -133,6 +133,15 @@ const renderListItemNav = () => (
           }}
           accessibilityLabel="Empty just for testing purposes"
         />
+        <ListItemNav
+          value={"Value"}
+          description="This is a list item nav with a payment logo"
+          paymentLogo="bancomatPay"
+          onPress={() => {
+            alert("Action triggered");
+          }}
+          accessibilityLabel="Empty just for testing purposes"
+        />
       </View>
     </ComponentViewerBox>
     <ComponentViewerBox name="ListItemNavAlert">

src/components/listitems/ListItemNav.tsx

@@ -30,6 +30,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { Body, H6, LabelSmall } from "../typography";
+import { IOLogoPaymentType, LogoPayment } from "../logos";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyStyles = StyleSheet.create({
@@ -41,20 +42,27 @@ const legacyStyles = StyleSheet.create({
   }
 });
 
-export type ListItemNav = WithTestID<{
+type ListItemNavPartialProps = WithTestID<{
   value: string | React.ReactNode;
   description?: string | React.ReactNode;
   onPress: (event: GestureResponderEvent) => void;
-  icon?: IOIcons;
   // Accessibility
   accessibilityLabel: string;
 }>;
 
+export type ListItemNavGraphicProps =
+  | { icon?: never; paymentLogo: IOLogoPaymentType }
+  | { icon: IOIcons; paymentLogo?: never }
+  | { icon?: never; paymentLogo?: never };
+
+export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
+
 export const ListItemNav = ({
   value,
   description,
   onPress,
   icon,
+  paymentLogo,
   accessibilityLabel,
   testID
 }: ListItemNav) => {
@@ -94,9 +102,7 @@ export const ListItemNav = ({
     </>
   );
 
-  const navTextComponent = isExperimental
-    ? navText
-    : legacyNavText;
+  const navTextComponent = isExperimental ? navText : legacyNavText;
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -171,6 +177,14 @@ export const ListItemNav = ({
               />
             </View>
           )}
+          {paymentLogo && (
+            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+              <LogoPayment
+                name={paymentLogo}
+                size={IOListItemVisualParams.iconSize}
+              />
+            </View>
+          )}
           <View style={IOStyles.flex}>{navTextComponent}</View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon