[IOPLT-155] Adding legacy variants to list items components

example/src/pages/ListItem.tsx

@@ -10,8 +10,10 @@ import {
   ListItemInfoCopy,
   ListItemNav,
   ListItemNavAlert,
+  ListItemSwitch,
   ListItemTransaction,
-  VSpacer
+  VSpacer,
+  useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { Alert, ImageSourcePropType, View } from "react-native";
@@ -22,68 +24,76 @@ const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
 };
 
-export const ListItems = () => (
-  <IOThemeContext.Consumer>
-    {theme => (
-      <Screen>
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemNav
-        </H2>
-        {renderListItemNav()}
+export const ListItems = () => {
+  const { isExperimental, setExperimental } = useIOExperimentalDesign();
+  return (
+    <IOThemeContext.Consumer>
+      {theme => (
+        <Screen>
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ListItemNav
+          </H2>
+          <ListItemSwitch
+            label="Abilita Design Sperimentale"
+            value={isExperimental}
+            onSwitchValueChange={setExperimental}
+          />
+          {renderListItemNav()}
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemInfoCopy
-        </H2>
-        {renderListItemInfoCopy()}
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ListItemInfoCopy
+          </H2>
+          {renderListItemInfoCopy()}
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemInfo
-        </H2>
-        {renderListItemInfo()}
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ListItemInfo
+          </H2>
+          {renderListItemInfo()}
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemAction
-        </H2>
-        {renderListItemAction()}
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ListItemAction
+          </H2>
+          {renderListItemAction()}
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemIDP
-        </H2>
-        {renderListItemIDP()}
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ListItemIDP
+          </H2>
+          {renderListItemIDP()}
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemTransaction
-        </H2>
-        {renderListItemTransaction()}
-        <VSpacer size={40} />
-      </Screen>
-    )}
-  </IOThemeContext.Consumer>
-);
+          <H2
+            color={theme["textHeading-default"]}
+            weight={"SemiBold"}
+            style={{ marginBottom: 16, marginTop: 16 }}
+          >
+            ListItemTransaction
+          </H2>
+          {renderListItemTransaction()}
+          <VSpacer size={40} />
+        </Screen>
+      )}
+    </IOThemeContext.Consumer>
+  );
+};
 
 const renderListItemNav = () => (
   <>

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,13 +66,22 @@ export const ListItemAction = ({
 }: ListItemAction) => {
   const isPressed = useSharedValue(0);
 
+  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     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>

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}