@pagopa/io-app-design-system 1.7.0 → 1.8.0

package/src/components/icons/svg/IconNotification.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconNotification = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17 8c2.2091 0 4-1.79086 4-4s-1.7909-4-4-4c-2.2091 0-4 1.79086-4 4s1.7909 4 4 4ZM8 1h3.8027c-.3377.58383-.5799 1.22984-.7052 1.91667H8c-1.65685 0-3 1.28718-3 2.875V19.2083c0 1.5879 1.34315 2.875 3 2.875h6c1.6569 0 3-1.2871 3-2.875V10c.7013 0 1.3744-.12031 2-.34141v9.54971C19 21.8547 16.7614 24 14 24H8c-2.76142 0-5-2.1453-5-4.7917V5.79167C3 3.1453 5.23858 1 8 1Zm4 18.2083c0 .5293-.4477.9584-1 .9584s-1-.4291-1-.9584c0-.5292.4477-.9583 1-.9583s1 .4291 1 .9583Z"
+    />
+  </Svg>
+);
+
+export default IconNotification;

package/src/components/icons/svg/IconOption.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconOption = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 6c0-1.65685 1.34315-3 3-3s3 1.34315 3 3-1.34315 3-3 3-3-1.34315-3-3Zm3-5C3.23858 1 1 3.23858 1 6s2.23858 5 5 5 5-2.23858 5-5-2.23858-5-5-5Zm12.0009 12c.5491 0 .9991.4477 1 1v3h2.9999c.5523 0 1 .4477 1 1s-.4477 1-1 1h-2.9999v3.0008c0 .5522-.4477 1-1 1s-1-.4478-1-1V19H14.002c-.5523 0-1-.4477-1-1s.4477-1 1-1h2.9989v-3c-.0009-.5523.4491-1 1-1ZM6 15c-1.65685 0-3 1.3431-3 3s1.34315 3 3 3 3-1.3431 3-3-1.34315-3-3-3Zm-5 3c0-2.7614 2.23858-5 5-5s5 2.2386 5 5-2.23858 5-5 5-5-2.2386-5-5ZM15 6c0-1.65685 1.3431-3 3-3s3 1.34315 3 3-1.3431 3-3 3-3-1.34315-3-3Zm3-5c-2.7614 0-5 2.23858-5 5s2.2386 5 5 5 5-2.23858 5-5-2.2386-5-5-5Z"
+    />
+  </Svg>
+);
+
+export default IconOption;

package/src/components/icons/svg/IconTransactions.tsx

@@ -7,7 +7,7 @@ const IconTransactions = ({ size, style, ...props }: SVGIconProps) => (
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M5 0C2.23858 0 0 2.23858 0 5v14c0 2.7614 2.23858 5 5 5h14c2.7614 0 5-2.2386 5-5V5c0-2.76142-2.2386-5-5-5H5ZM2 5c0-1.65685 1.34315-3 3-3h14c1.6569 0 3 1.34315 3 3v14c0 1.6569-1.3431 3-3 3H5c-1.65685 0-3-1.3431-3-3V5Zm7.70714.29289c.39056.39053.39056 1.02369 0 1.41422L7.41424 9H19c.5523 0 1 .44772 1 1 0 .5523-.4477 1-1 1H5.00003c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l4-4c.39053-.39052 1.02369-.39052 1.41422 0ZM14.2929 18.7071c-.3906-.3905-.3906-1.0237 0-1.4142L16.5858 15H4.99997c-.55228 0-1-.4477-1-1s.44772-1 1-1H19c.4044 0 .7691.2436.9239.6173.1547.3737.0692.8038-.2168 1.0898l-4 4c-.3905.3905-1.0237.3905-1.4142 0Z"
+      d="M8.70716 2.29289c.39053.39053.39053 1.02369 0 1.41422L3.41427 9H23.0001c.5522 0 1 .44772 1 1 0 .5523-.4478 1-1 1H1.00006c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l7-7c.39053-.39052 1.02369-.39052 1.41421 0ZM15.2929 21.7071c-.3905-.3905-.3905-1.0237 0-1.4142L20.5858 15H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h22c.4045 0 .7691.2436.9239.6173.1548.3737.0692.8038-.2168 1.0898l-7 7c-.3905.3905-1.0237.3905-1.4142 0Z"
       fill="currentColor"
     />
   </Svg>

package/src/components/icons/svg/IconTransactionsBoxed.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconTransactionsBoxed = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 0C2.23858 0 0 2.23858 0 5v14c0 2.7614 2.23858 5 5 5h14c2.7614 0 5-2.2386 5-5V5c0-2.76142-2.2386-5-5-5H5ZM2 5c0-1.65685 1.34315-3 3-3h14c1.6569 0 3 1.34315 3 3v14c0 1.6569-1.3431 3-3 3H5c-1.65685 0-3-1.3431-3-3V5Zm7.70714.29289c.39056.39053.39056 1.02369 0 1.41422L7.41424 9H19c.5523 0 1 .44772 1 1 0 .5523-.4477 1-1 1H5.00003c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l4-4c.39053-.39052 1.02369-.39052 1.41422 0ZM14.2929 18.7071c-.3906-.3905-.3906-1.0237 0-1.4142L16.5858 15H4.99997c-.55228 0-1-.4477-1-1s.44772-1 1-1H19c.4044 0 .7691.2436.9239.6173.1547.3737.0692.8038-.2168 1.0898l-4 4c-.3905.3905-1.0237.3905-1.4142 0Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconTransactionsBoxed;

package/src/components/icons/svg/originals/IconChange.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7071 16.2929C24.0976 16.6834 24.0976 17.3166 23.7071 17.7071C23.3166 18.0976 22.6834 18.0976 22.2929 17.7071L20 15.4142L20 17C20 20.866 16.866 24 13 24L5 24C4.44772 24 4 23.5523 4 23C4 22.4477 4.44772 22 5 22L13 22C15.7614 22 18 19.7614 18 17L18 15.4142L15.7071 17.7071C15.3166 18.0976 14.6834 18.0976 14.2929 17.7071C13.9024 17.3166 13.9024 16.6834 14.2929 16.2929L18.2929 12.2929C18.6834 11.9024 19.3166 11.9024 19.7071 12.2929L23.7071 16.2929ZM6 7C6 4.23858 8.23858 2 11 2L19 2C19.5523 2 20 1.55228 20 1C20 0.447716 19.5523 1.94416e-07 19 2.18557e-07L11 5.68248e-07C7.13401 7.37236e-07 4 3.13401 4 7L4 8.58579L1.70711 6.29289C1.31658 5.90237 0.683417 5.90237 0.292892 6.29289C-0.0976322 6.68342 -0.0976322 7.31658 0.292892 7.70711L4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L9.70711 7.70711C10.0976 7.31658 10.0976 6.68342 9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289L6 8.58578L6 7Z" fill="#2B2E38"/>
+</svg>

package/src/components/icons/svg/originals/IconDialpad.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12 19C10.9 19 10 19.9 10 21C10 22.1 10.9 23 12 23C13.1 23 14 22.1 14 21C14 19.9 13.1 19 12 19ZM6 1C4.9 1 4 1.9 4 3C4 4.1 4.9 5 6 5C7.1 5 8 4.1 8 3C8 1.9 7.1 1 6 1ZM6 7C4.9 7 4 7.9 4 9C4 10.1 4.9 11 6 11C7.1 11 8 10.1 8 9C8 7.9 7.1 7 6 7ZM6 13C4.9 13 4 13.9 4 15C4 16.1 4.9 17 6 17C7.1 17 8 16.1 8 15C8 13.9 7.1 13 6 13ZM18 5C19.1 5 20 4.1 20 3C20 1.9 19.1 1 18 1C16.9 1 16 1.9 16 3C16 4.1 16.9 5 18 5ZM12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13ZM18 13C16.9 13 16 13.9 16 15C16 16.1 16.9 17 18 17C19.1 17 20 16.1 20 15C20 13.9 19.1 13 18 13ZM18 7C16.9 7 16 7.9 16 9C16 10.1 16.9 11 18 11C19.1 11 20 10.1 20 9C20 7.9 19.1 7 18 7ZM12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9C14 7.9 13.1 7 12 7ZM12 1C10.9 1 10 1.9 10 3C10 4.1 10.9 5 12 5C13.1 5 14 4.1 14 3C14 1.9 13.1 1 12 1Z"
+  />
+</svg>

package/src/components/icons/svg/originals/IconKey.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16 12c0-1.6569 1.3431-3 3-3s3 1.3431 3 3-1.3431 3-3 3-3-1.3431-3-3Zm-1.901.9952A1.01133 1.01133 0 0 1 14 13H8v3c0 .5523-.44772 1-1 1s-1-.4477-1-1v-3H4v1c0 .5523-.44772 1-1 1s-1-.4477-1-1v-1H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h13c.0334 0 .0665.0016.099.0048C14.5604 8.72019 16.5793 7 19 7c2.7614 0 5 2.23858 5 5 0 2.7614-2.2386 5-5 5-2.4207 0-4.4396-1.7202-4.901-4.0048Z"
+  />
+</svg>

package/src/components/icons/svg/originals/IconNotification.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M17 8c2.2091 0 4-1.79086 4-4s-1.7909-4-4-4c-2.2091 0-4 1.79086-4 4s1.7909 4 4 4ZM8 1h3.8027c-.3377.58383-.5799 1.22984-.7052 1.91667H8c-1.65685 0-3 1.28718-3 2.875V19.2083c0 1.5879 1.34315 2.875 3 2.875h6c1.6569 0 3-1.2871 3-2.875V10c.7013 0 1.3744-.12031 2-.34141v9.54971C19 21.8547 16.7614 24 14 24H8c-2.76142 0-5-2.1453-5-4.7917V5.79167C3 3.1453 5.23858 1 8 1Zm4 18.2083c0 .5293-.4477.9584-1 .9584s-1-.4291-1-.9584c0-.5292.4477-.9583 1-.9583s1 .4291 1 .9583Z"
+  />
+</svg>

package/src/components/icons/svg/originals/IconOption.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M3 6c0-1.65685 1.34315-3 3-3s3 1.34315 3 3-1.34315 3-3 3-3-1.34315-3-3Zm3-5C3.23858 1 1 3.23858 1 6s2.23858 5 5 5 5-2.23858 5-5-2.23858-5-5-5Zm12.0009 12c.5491 0 .9991.4477 1 1v3h2.9999c.5523 0 1 .4477 1 1s-.4477 1-1 1h-2.9999v3.0008c0 .5522-.4477 1-1 1s-1-.4478-1-1V19H14.002c-.5523 0-1-.4477-1-1s.4477-1 1-1h2.9989v-3c-.0009-.5523.4491-1 1-1ZM6 15c-1.65685 0-3 1.3431-3 3s1.34315 3 3 3 3-1.3431 3-3-1.34315-3-3-3Zm-5 3c0-2.7614 2.23858-5 5-5s5 2.2386 5 5-2.23858 5-5 5-5-2.2386-5-5ZM15 6c0-1.65685 1.3431-3 3-3s3 1.34315 3 3-1.3431 3-3 3-3-1.34315-3-3Zm3-5c-2.7614 0-5 2.23858-5 5s2.2386 5 5 5 5-2.23858 5-5-2.2386-5-5-5Z"
+  />
+</svg>

package/src/components/icons/svg/originals/IconTransactions.svg

@@ -0,0 +1,8 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.70716 2.29289c.39053.39053.39053 1.02369 0 1.41422L3.41427 9H23.0001c.5522 0 1 .44772 1 1 0 .5523-.4478 1-1 1H1.00006c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l7-7c.39053-.39052 1.02369-.39052 1.41421 0ZM15.2929 21.7071c-.3905-.3905-.3905-1.0237 0-1.4142L20.5858 15H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h22c.4045 0 .7691.2436.9239.6173.1548.3737.0692.8038-.2168 1.0898l-7 7c-.3905.3905-1.0237.3905-1.4142 0Z"
+    fill="#BBC2D6"
+  />
+</svg>

package/src/components/icons/svg/originals/IconTransactionsBoxed.svg

@@ -0,0 +1,8 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5 0C2.23858 0 0 2.23858 0 5v14c0 2.7614 2.23858 5 5 5h14c2.7614 0 5-2.2386 5-5V5c0-2.76142-2.2386-5-5-5H5ZM2 5c0-1.65685 1.34315-3 3-3h14c1.6569 0 3 1.34315 3 3v14c0 1.6569-1.3431 3-3 3H5c-1.65685 0-3-1.3431-3-3V5Zm7.70714.29289c.39056.39053.39056 1.02369 0 1.41422L7.41424 9H19c.5523 0 1 .44772 1 1 0 .5523-.4477 1-1 1H5.00003c-.40446 0-.7691-.2436-.92388-.6173-.15478-.3737-.06923-.80381.21677-1.08981l4-4c.39053-.39052 1.02369-.39052 1.41422 0ZM14.2929 18.7071c-.3906-.3905-.3906-1.0237 0-1.4142L16.5858 15H4.99997c-.55228 0-1-.4477-1-1s.44772-1 1-1H19c.4044 0 .7691.2436.9239.6173.1547.3737.0692.8038-.2168 1.0898l-4 4c-.3905.3905-1.0237.3905-1.4142 0Z"
+    fill="#BBC2D6"
+  />
+</svg>

package/src/components/index.tsx

@@ -9,6 +9,7 @@ export * from "./divider";
 export * from "./icons";
 export * from "./listitems";
 export * from "./logos";
+export * from "./modules";
 export * from "./banner";
 export * from "./pictograms";
 export * from "./radio";

package/src/components/listitems/ListItemAction.tsx

@@ -23,11 +23,12 @@ import {
   IOSpringValues,
   IOStyles,
   hexToRgba,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons } from "../icons";
+import { AnimatedIcon, IOIcons, Icon } from "../icons";
 
 export type ListItemAction = WithTestID<{
   label: string;
@@ -46,6 +47,15 @@ const styles = StyleSheet.create({
   }
 });
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyStyles = StyleSheet.create({
+  labelLegacy: {
+    fontSize: 18,
+    lineHeight: 24,
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
+  }
+});
+
 export const ListItemAction = ({
   variant,
   label,
@@ -56,6 +66,7 @@ export const ListItemAction = ({
 }: ListItemAction) => {
   const isPressed = useSharedValue(0);
 
+  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
   const mapBackgroundStates: Record<string, string> = {
@@ -63,6 +74,14 @@ export const ListItemAction = ({
     pressed: IOColors[theme["listItem-pressed"]]
   };
 
+  const mapLegacyForegroundColor: Record<
+    NonNullable<ListItemAction["variant"]>,
+    IOColors
+  > = {
+    primary: "blue",
+    danger: "error-850"
+  };
+
   const mapForegroundColor: Record<
     NonNullable<ListItemAction["variant"]>,
     string
@@ -71,6 +90,37 @@ export const ListItemAction = ({
     danger: IOColors[theme.errorText]
   };
 
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyItemActionIcon = (icon: IOIcons) => (
+    <Icon
+      name={icon}
+      color={mapLegacyForegroundColor[variant]}
+      size={IOListItemVisualParams.iconSize}
+    />
+  );
+
+  const itemActionIcon = (icon: IOIcons) => (
+    <>
+      <AnimatedIcon
+        name={icon}
+        color={mapForegroundColor[variant] as IOColors}
+        size={IOListItemVisualParams.iconSize}
+      />
+    </>
+  );
+
+  const itemActionIconComponent = (icon: IOIcons) =>
+    isExperimental ? itemActionIcon(icon) : legacyItemActionIcon(icon);
+
+  const textStyle = [styles.label, { color: mapForegroundColor[variant] }];
+
+  const legacyTextStyle = [
+    legacyStyles.labelLegacy,
+    { color: IOColors[mapLegacyForegroundColor[variant]] }
+  ];
+
+  const textStyleComponent = isExperimental ? textStyle : legacyTextStyle;
+
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
@@ -132,19 +182,11 @@ export const ListItemAction = ({
         >
           {icon && (
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              <AnimatedIcon
-                name={icon}
-                color={mapForegroundColor[variant] as IOColors}
-                size={IOListItemVisualParams.iconSize}
-              />
+              {itemActionIconComponent(icon)}
             </View>
           )}
           <View style={IOStyles.flex}>
-            <Text
-              style={[styles.label, { color: mapForegroundColor[variant] }]}
-            >
-              {label}
-            </Text>
+            <Text style={textStyleComponent}>{label}</Text>
           </View>
         </Animated.View>
       </Animated.View>

package/src/components/listitems/ListItemInfo.tsx

@@ -1,14 +1,17 @@
 import React from "react";
-import { View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import {
+  IOColors,
   IOListItemStyles,
   IOListItemVisualParams,
   IOStyles,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import { Icon, IOIcons } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { IOIcons, Icon } from "../icons";
+import { Body, H6, LabelSmall } from "../typography";
 
 export type ListItemInfo = WithTestID<{
   label: string;
@@ -22,6 +25,15 @@ export type ListItemInfo = WithTestID<{
   accessibilityLabel: string;
 }>;
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyStyles = StyleSheet.create({
+  textValue: {
+    fontSize: 18,
+    lineHeight: 24,
+    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
+  }
+});
+
 export const ListItemInfo = ({
   label,
   value,
@@ -31,7 +43,46 @@ export const ListItemInfo = ({
   accessibilityLabel,
   testID
 }: ListItemInfo) => {
+  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyItemInfoText = (
+    <>
+      {/* Let developer using a custom component (e.g: skeleton) */}
+      {typeof label === "string" ? (
+        <Body weight="Regular">{label}</Body>
+      ) : (
+        label
+      )}
+      {typeof value === "string" ? (
+        <Text
+          style={[legacyStyles.textValue, { color: IOColors.bluegreyDark }]}
+          numberOfLines={numberOfLines}
+        >
+          {value}
+        </Text>
+      ) : (
+        value
+      )}
+    </>
+  );
+
+  const itemInfoText = (
+    <>
+      <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+        {label}
+      </LabelSmall>
+      <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
+        {value}
+      </H6>
+    </>
+  );
+
+  const itemInfoTextComponent = isExperimental
+    ? itemInfoText
+    : legacyItemInfoText;
+
   return (
     <View
       style={IOListItemStyles.listItem}
@@ -49,14 +100,7 @@ export const ListItemInfo = ({
             />
           </View>
         )}
-        <View style={IOStyles.flex}>
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-            {label}
-          </LabelSmall>
-          <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
-            {value}
-          </H6>
-        </View>
+        <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
         {action && (
           <View style={{ marginLeft: IOListItemVisualParams.actionMargin }}>
             {action}

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -1,5 +1,11 @@
 import React, { useCallback } from "react";
-import { GestureResponderEvent, Pressable, View } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -17,11 +23,14 @@ import {
   IOSpringValues,
   IOStyles,
   hexToRgba,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { VSpacer } from "../spacer";
+import { Body, H6, LabelSmall } from "../typography";
 
 export type ListItemInfoCopy = WithTestID<{
   label: string;
@@ -33,6 +42,15 @@ export type ListItemInfoCopy = WithTestID<{
   accessibilityLabel: string;
 }>;
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyStyles = StyleSheet.create({
+  textValue: {
+    fontSize: 18,
+    lineHeight: 24,
+    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
+  }
+});
+
 export const ListItemInfoCopy = ({
   label,
   value,
@@ -43,9 +61,53 @@ export const ListItemInfoCopy = ({
   testID
 }: ListItemInfoCopy) => {
   const isPressed = useSharedValue(0);
-
+  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyInfoCopyText = (
+    <>
+      <Body weight="Regular">{label}</Body>
+      <VSpacer size={4} />
+      {/* Let developer using a custom component (e.g: skeleton) */}
+      {typeof value === "string" ? (
+        <Text
+          style={[legacyStyles.textValue, { color: IOColors.blue }]}
+          numberOfLines={numberOfLines}
+        >
+          {value}
+        </Text>
+      ) : (
+        { value }
+      )}
+    </>
+  );
+
+  const infoCopyText = (
+    <>
+      <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              {label}
+            </LabelSmall>
+            {/* Let developer using a custom component (e.g: skeleton) */}
+            {typeof value === "string" ? (
+              <H6
+                color={theme["interactiveElem-default"]}
+                numberOfLines={numberOfLines}
+              >
+                {value}
+              </H6>
+            ) : (
+              { value }
+            )}
+    </>
+  );
+
+  const infoCopyTextComponent = isExperimental
+    ? infoCopyText
+    : legacyInfoCopyText;
+
+  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -119,25 +181,12 @@ export const ListItemInfoCopy = ({
             </View>
           )}
           <View style={IOStyles.flex}>
-            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-              {label}
-            </LabelSmall>
-            {/* Let developer using a custom component (e.g: skeleton) */}
-            {typeof value === "string" ? (
-              <H6
-                color={theme["interactiveElem-default"]}
-                numberOfLines={numberOfLines}
-              >
-                {value}
-              </H6>
-            ) : (
-              { value }
-            )}
+            {infoCopyTextComponent}
           </View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="copy"
-              color={theme["interactiveElem-default"]}
+              color={iconColor}
               size={IOListItemVisualParams.chevronSize}
             />
           </View>

package/src/components/listitems/ListItemNav.tsx

@@ -1,5 +1,11 @@
 import React, { useCallback } from "react";
-import { GestureResponderEvent, Pressable, View } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -17,11 +23,23 @@ import {
   IOSpringValues,
   IOStyles,
   hexToRgba,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+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({
+  textValue: {
+    fontSize: 18,
+    lineHeight: 24,
+    color: IOColors.bluegreyDark,
+    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
+  }
+});
 
 export type ListItemNav = WithTestID<{
   value: string | React.ReactNode;
@@ -41,14 +59,51 @@ export const ListItemNav = ({
   testID
 }: ListItemNav) => {
   const isPressed = useSharedValue(0);
-
+  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyNavText = (
+    <>
+      {/* Let developer using a custom component (e.g: skeleton) */}
+      {typeof value === "string" ? (
+        <Text style={legacyStyles.textValue}>{value}</Text>
+      ) : (
+        value
+      )}
+      {description && (
+        <>
+          {typeof description === "string" ? (
+            <Body weight="Regular">{description}</Body>
+          ) : (
+            description
+          )}
+        </>
+      )}
+    </>
+  );
+
+  const navText = (
+    <>
+      <H6 color={theme["textBody-default"]}>{value}</H6>
+      {description && (
+        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          {description}
+        </LabelSmall>
+      )}
+    </>
+  );
+
+  const navTextComponent = isExperimental
+    ? navText
+    : legacyNavText;
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
   };
 
+  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
@@ -116,18 +171,11 @@ export const ListItemNav = ({
               />
             </View>
           )}
-          <View style={IOStyles.flex}>
-            <H6 color={theme["textBody-default"]}>{value}</H6>
-            {description && (
-              <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-                {description}
-              </LabelSmall>
-            )}
-          </View>
+          <View style={IOStyles.flex}>{navTextComponent}</View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="chevronRightListItem"
-              color={theme["interactiveElem-default"]}
+              color={iconColor}
               size={IOListItemVisualParams.chevronSize}
             />
           </View>