chore: add iconColor prop to ListItemNav (#128)

## Short description
This PR adds the optional `iconColor` prop to the `ListItemNav`
component. The `iconColor` prop will allow to set custom colors for the
left icon int the list item.

<img
src="https://github.com/pagopa/io-app-design-system/assets/6160324/4e9a157a-0734-4dcc-972b-b32141b4fb8a"
width="200" />

## List of changes proposed in this pull request
-
[src/components/listitems/ListItemNav.tsx](https://github.com/pagopa/io-app-design-system/compare/add-icon-color-prop-to-listitemnav?expand=1#diff-664aca5d6d72fd3f1bdccf1f4c3fa1003a011e367b5e0b8fd40c8aaa465bf32e):
added `iconColor` prop with default `grey-450` color.

## How to test
In the example app, navigate to the List Item section to see the new
ListItemNav configuration at work.

example/src/pages/ListItem.tsx

@@ -131,6 +131,16 @@ const renderListItemNav = () => (
           }}
           accessibilityLabel="Empty just for testing purposes"
         />
+        <ListItemNav
+          value={"Value"}
+          description="Description"
+          icon="productPagoPA"
+          iconColor="blueIO-500"
+          onPress={() => {
+            alert("Action triggered");
+          }}
+          accessibilityLabel="Empty just for testing purposes"
+        />
         <ListItemNav
           value={"Value"}
           description="This is a list item nav with a payment logo"

src/components/listitems/ListItemNav.tsx

@@ -29,8 +29,8 @@ import {
 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";
+import { Body, H6, LabelSmall } from "../typography";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyStyles = StyleSheet.create({
@@ -51,9 +51,9 @@ type ListItemNavPartialProps = WithTestID<{
 }>;
 
 export type ListItemNavGraphicProps =
-  | { icon?: never; paymentLogo: IOLogoPaymentType }
-  | { icon: IOIcons; paymentLogo?: never }
-  | { icon?: never; paymentLogo?: never };
+  | { icon?: never; iconColor?: never; paymentLogo: IOLogoPaymentType }
+  | { icon: IOIcons; iconColor?: IOColors; paymentLogo?: never }
+  | { icon?: never; iconColor?: never; paymentLogo?: never };
 
 export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
 
@@ -62,6 +62,7 @@ export const ListItemNav = ({
   description,
   onPress,
   icon,
+  iconColor = "grey-450",
   paymentLogo,
   accessibilityLabel,
   testID
@@ -108,7 +109,9 @@ export const ListItemNav = ({
     pressed: IOColors[theme["listItem-pressed"]]
   };
 
-  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+  const navIconColor = isExperimental
+    ? theme["interactiveElem-default"]
+    : "blue";
 
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
@@ -172,7 +175,7 @@ export const ListItemNav = ({
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
               <Icon
                 name={icon}
-                color="grey-450"
+                color={iconColor}
                 size={IOListItemVisualParams.iconSize}
               />
             </View>
@@ -189,7 +192,7 @@ export const ListItemNav = ({
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="chevronRightListItem"
-              color={iconColor}
+              color={navIconColor}
               size={IOListItemVisualParams.chevronSize}
             />
           </View>