@pagopa/io-app-design-system 1.7.1 → 1.9.0

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>

package/src/components/listitems/ListItemNavAlert.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,13 @@ import {
   IOSpringValues,
   IOStyles,
   hexToRgba,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { Body, H6, LabelSmall } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
   value: string;
@@ -32,6 +40,15 @@ export type ListItemNavAlert = 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 ListItemNavAlert = ({
   value,
   description,
@@ -41,9 +58,38 @@ export const ListItemNavAlert = ({
   testID
 }: ListItemNavAlert) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const { isExperimental } = useIOExperimentalDesign();
 
   const theme = useIOTheme();
 
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyNavAlertText = (
+    <>
+      <Text style={[legacyStyles.textValue, { color: IOColors.bluegreyDark }]}>
+        {value}
+      </Text>
+      {description && (
+        <Body weight="SemiBold" color={theme.errorText}>
+          {description}
+        </Body>
+      )}
+    </>
+  );
+
+  const navAlertText = (
+    <>
+      <H6 color={theme["textBody-default"]}>{value}</H6>
+      {description && (
+        <LabelSmall weight="SemiBold" color={theme.errorText}>
+          {description}
+        </LabelSmall>
+      )}
+    </>
+  );
+
+  const navAlertTextComponent = isExperimental ? navAlertText : legacyNavAlertText;
+  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+  
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -117,17 +163,12 @@ export const ListItemNavAlert = ({
             </View>
           )}
           <View style={IOStyles.flex}>
-            <H6 color={theme["textBody-default"]}>{value}</H6>
-            {description && (
-              <LabelSmall weight="SemiBold" color={theme.errorText}>
-                {description}
-              </LabelSmall>
-            )}
+          {navAlertTextComponent}
           </View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="chevronRightListItem"
-              color={theme["interactiveElem-default"]}
+              color={iconColor}
               size={IOListItemVisualParams.chevronSize}
             />
           </View>

package/src/components/listitems/ListItemSwitch.tsx

@@ -8,7 +8,7 @@ import {
 } from "../../core";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall, Link } from "../typography";
+import { H6, LabelSmall, LabelLink } from "../typography";
 import { NativeSwitch } from "../switch/NativeSwitch";
 
 type Props = {
@@ -19,7 +19,7 @@ type Props = {
   action?: SwitchAction;
 };
 
-type SwitchAction = {
+export type SwitchAction = {
   label: string;
   onPress: (event: GestureResponderEvent) => void;
 };
@@ -91,9 +91,9 @@ export const ListItemSwitch = React.memo(
             {action && (
               <>
                 <VSpacer size={IOSelectionListItemVisualParams.actionMargin} />
-                <Link fontSize="small" onPress={action.onPress}>
+                <LabelLink fontSize="small" onPress={action.onPress}>
                   {action.label}
-                </Link>
+                </LabelLink>
               </>
             )}
           </View>