@pagopa/io-app-design-system 1.42.0 → 2.0.0-1

package/src/components/listitems/ListItemAction.tsx

@@ -1,11 +1,5 @@
 import React, { ComponentProps, useCallback, useMemo } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -21,15 +15,12 @@ import {
   IOListItemVisualParams,
   IOScaleValues,
   IOSpringValues,
-  IOStyles,
   hexToRgba,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons, Icon } from "../icons";
-import { buttonTextFontSize } from "../typography/ButtonText";
+import { AnimatedIcon, IOIcons } from "../icons";
+import { ButtonText } from "../typography/ButtonText";
 
 export type ListItemAction = WithTestID<{
   label: string;
@@ -42,23 +33,6 @@ export type ListItemAction = WithTestID<{
     "accessibilityLabel" | "accessibilityHint"
   >;
 
-const styles = StyleSheet.create({
-  label: {
-    fontSize: buttonTextFontSize,
-    lineHeight: 20,
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  }
-});
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyStyles = StyleSheet.create({
-  labelLegacy: {
-    fontSize: buttonTextFontSize,
-    lineHeight: 20,
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
-  }
-});
-
 export const ListItemAction = ({
   variant,
   label,
@@ -70,7 +44,6 @@ export const ListItemAction = ({
 }: ListItemAction) => {
   const isPressed = useSharedValue(0);
 
-  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
   const listItemAccessibilityLabel = useMemo(
@@ -83,53 +56,14 @@ export const ListItemAction = ({
     pressed: IOColors[theme["listItem-pressed"]]
   };
 
-  const mapLegacyForegroundColor: Record<
-    NonNullable<ListItemAction["variant"]>,
-    IOColors
-  > = {
-    primary: "blue",
-    danger: "error-600"
-  };
-
   const mapForegroundColor: Record<
     NonNullable<ListItemAction["variant"]>,
-    string
+    IOColors
   > = {
-    primary: IOColors[theme["interactiveElem-default"]],
-    danger: IOColors[theme.errorText]
+    primary: theme["interactiveElem-default"],
+    danger: 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;
 
@@ -194,11 +128,15 @@ export const ListItemAction = ({
         >
           {icon && (
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              {itemActionIconComponent(icon)}
+              <AnimatedIcon
+                name={icon}
+                color={IOColors[mapForegroundColor[variant]]}
+                size={IOListItemVisualParams.iconSize}
+              />
             </View>
           )}
-          <View style={IOStyles.flex}>
-            <Text style={textStyleComponent}>{label}</Text>
+          <View style={{ flexGrow: 1 }}>
+            <ButtonText color={mapForegroundColor[variant]}>{label}</ButtonText>
           </View>
         </Animated.View>
       </Animated.View>

package/src/components/listitems/ListItemAmount.tsx

@@ -54,9 +54,7 @@ export const ListItemAmount = ({
       importantForAccessibility={"no-hide-descendants"}
       accessibilityElementsHidden={false}
     >
-      <H6 weight="Regular" color={theme["textBody-tertiary"]}>
-        {label}
-      </H6>
+      <H6 color={theme["textBody-tertiary"]}>{label}</H6>
     </View>
   );
 
@@ -80,9 +78,8 @@ export const ListItemAmount = ({
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
         <HSpacer size={4} />
         <H3
-          weight={"Semibold"}
-          color={"black"}
           {...valueElementProps}
+          color={theme["textBody-default"]}
           accessibilityLabel={`${listItemAccessibilityLabel}; ${
             valueElementProps?.accessibilityLabel ?? ""
           }`}

package/src/components/listitems/ListItemSwitch.tsx

@@ -12,7 +12,7 @@ import { LoadingSpinner } from "../loadingSpinner";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HSpacer, VSpacer } from "../spacer";
 import { NativeSwitch } from "../switch/NativeSwitch";
-import { H6, LabelLink, LabelSmall } from "../typography";
+import { H6, LabelMini, LabelSmall } from "../typography";
 
 type PartialProps = WithTestID<{
   label: string;
@@ -186,9 +186,9 @@ export const ListItemSwitch = React.memo(
         {action && (
           <>
             <VSpacer size={IOSelectionListItemVisualParams.actionMargin} />
-            <LabelLink fontSize="small" onPress={action.onPress}>
+            <LabelMini asLink onPress={action.onPress}>
               {action.label}
-            </LabelLink>
+            </LabelMini>
           </>
         )}
       </View>