@pagopa/io-app-design-system 1.41.0 → 2.0.0-0

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -76,18 +76,18 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Readex Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "400",
-          },
-          {
-            "color": "#0B3EE3",
+            "lineHeight": undefined,
           },
           {
             "color": undefined,
@@ -183,25 +183,27 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Readex Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "lineHeight": undefined,
           },
-          {
-            "alignSelf": "center",
-          },
-          {
-            "color": "#0B3EE3",
-          },
-          {
-            "color": undefined,
-          },
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "color": undefined,
+            },
+          ],
         ]
       }
     >
@@ -300,36 +302,26 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
         accessibilityElementsHidden={true}
         accessible={false}
         allowFontScaling={true}
-        color="white"
-        defaultColor="white"
-        defaultWeight="Regular"
         ellipsizeMode="tail"
-        font="ReadexPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-          }
-        }
         importantForAccessibility="no-hide-descendants"
         maxFontSizeMultiplier={1.25}
         numberOfLines={1}
         style={
           [
-            {
-              "alignSelf": "center",
-            },
-            {
-              "fontSize": 16,
-            },
+            {},
             {
               "color": "#FFFFFF",
               "fontFamily": "Readex Pro",
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "lineHeight": 20,
+            },
+            {
+              "alignSelf": "center",
             },
           ]
         }
-        weight="Regular"
       >
         label
       </Text>
@@ -803,18 +795,18 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
       allowFontScaling={false}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "700",
-          },
-          {
-            "color": "#0073E6",
+            "lineHeight": undefined,
           },
           {
             "color": undefined,
@@ -909,24 +901,27 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
       allowFontScaling={false}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Titillium Sans Pro",
+            "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "700",
+            "lineHeight": undefined,
           },
-          {
-            "alignSelf": "center",
-          },
-          {
-            "color": "#0073E6",
-          },
-          {
-            "color": undefined,
-          },
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "color": undefined,
+            },
+          ],
         ]
       }
     >
@@ -1024,36 +1019,26 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
         accessibilityElementsHidden={true}
         accessible={false}
         allowFontScaling={false}
-        color="white"
-        defaultColor="white"
-        defaultWeight="Bold"
         ellipsizeMode="tail"
-        font="TitilliumSansPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-          }
-        }
         importantForAccessibility="no-hide-descendants"
         maxFontSizeMultiplier={1.25}
         numberOfLines={1}
         style={
           [
-            {
-              "alignSelf": "center",
-            },
-            {
-              "fontSize": 16,
-            },
+            {},
             {
               "color": "#FFFFFF",
               "fontFamily": "Titillium Sans Pro",
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "700",
+              "lineHeight": 20,
+            },
+            {
+              "alignSelf": "center",
             },
           ]
         }
-        weight="Bold"
       >
         label
       </Text>

package/src/components/featureInfo/FeatureInfo.tsx

@@ -8,7 +8,7 @@ import {
   IOPictogramSizeScale,
   IOPictograms,
   Icon,
-  LabelLink,
+  Label,
   Pictogram,
   VSpacer
 } from "../../components";
@@ -21,12 +21,13 @@ type PartialFeatureInfo = {
 
 type FeatureInfoActionProps =
   | {
-      actionLabel?: string;
-      actionOnPress: (event: GestureResponderEvent) => void;
+      action: {
+        label: string;
+        onPress: (event: GestureResponderEvent) => void;
+      };
     }
   | {
-      actionLabel?: never;
-      actionOnPress?: never;
+      action?: never;
     };
 
 type FeatureInfoGraphicProps =
@@ -56,8 +57,7 @@ export const FeatureInfo = ({
   iconName,
   pictogramName,
   body,
-  actionLabel,
-  actionOnPress
+  action
 }: FeatureInfoProps) => (
   <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
     {iconName && (
@@ -69,21 +69,21 @@ export const FeatureInfo = ({
     <HSpacer size={24} />
     <View style={{ flexShrink: 1 }}>
       {renderNode(body)}
-      {actionLabel && actionOnPress && (
+      {action && (
         <>
           {/* Add "marginTop" equivalent if body text is present.
           This verbose code could be deleted once we got "gap"
           property support */}
           {body && <VSpacer size={4} />}
-          <LabelLink
-            fontSize="regular"
-            onPress={actionOnPress}
+          <Label
+            asLink
+            onPress={action.onPress}
             accessible
             importantForAccessibility={"yes"}
             accessibilityElementsHidden={false}
           >
-            {actionLabel}
-          </LabelLink>
+            {action.label}
+          </Label>
         </>
       )}
     </View>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -24,10 +24,10 @@ import {
   useIOTheme
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { HSpacer } from "../spacer";
+import { IOText } from "../typography";
 import { ActionProp } from "./common";
 
 type ScrollValues = {
@@ -103,16 +103,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
     marginHorizontal: titleHorizontalMargin
-  },
-  headerTitle: {
-    fontSize: 14,
-    textAlign: "center"
-  },
-  headerTitleFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  headerTitleLegacyFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
   }
 });
 
@@ -144,6 +134,8 @@ export const HeaderSecondLevel = ({
   const insets = useSafeAreaInsets();
   const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
 
+  const AnimatedIOText = Animated.createAnimatedComponent(IOText);
+
   const iconButtonColor: ComponentProps<typeof IconButton>["color"] =
     variant === "neutral" ? "neutral" : "contrast";
   const titleColor: ColorValue =
@@ -240,20 +232,19 @@ export const HeaderSecondLevel = ({
           accessibilityRole="header"
           style={styles.titleContainer}
         >
-          <Animated.Text
+          <AnimatedIOText
+            size={14}
             numberOfLines={1}
             accessible={false}
+            font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+            weight={isExperimental ? "Regular" : "Semibold"}
             style={[
-              styles.headerTitle,
-              { color: titleColor },
-              isExperimental
-                ? styles.headerTitleFont
-                : styles.headerTitleLegacyFont,
+              { color: titleColor, textAlign: "center" },
               titleAnimatedStyle
             ]}
           >
             {title}
-          </Animated.Text>
+          </AnimatedIOText>
         </View>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type === "threeActions" && (

package/src/components/listitems/ListItemAction.tsx

@@ -1,11 +1,5 @@
-import React, { useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from "react-native";
+import React, { ComponentProps, useCallback, useMemo } from "react";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -21,41 +15,23 @@ 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;
   variant: "primary" | "danger";
   onPress: (event: GestureResponderEvent) => void;
   icon?: IOIcons;
-  // Accessibility
-  accessibilityLabel: string;
-}>;
-
-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")
-  }
-});
+}> &
+  Pick<
+    ComponentProps<typeof Pressable>,
+    "accessibilityLabel" | "accessibilityHint"
+  >;
 
 export const ListItemAction = ({
   variant,
@@ -63,65 +39,31 @@ export const ListItemAction = ({
   onPress,
   icon,
   accessibilityLabel,
+  accessibilityHint,
   testID
 }: ListItemAction) => {
   const isPressed = useSharedValue(0);
 
-  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
+  const listItemAccessibilityLabel = useMemo(
+    () => (accessibilityLabel ? accessibilityLabel : `${label}`),
+    [label, accessibilityLabel]
+  );
+
   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-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;
 
@@ -171,24 +113,30 @@ export const ListItemAction = ({
       onPressOut={handlePressOut}
       onTouchEnd={handlePressOut}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={listItemAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       testID={testID}
     >
       <Animated.View
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
         importantForAccessibility="no-hide-descendants"
+        accessibilityElementsHidden
       >
         <Animated.View
           style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
         >
           {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/ListItemInfoCopy.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ComponentProps, useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
@@ -30,9 +30,11 @@ export type ListItemInfoCopy = WithTestID<{
   numberOfLines?: number;
   onPress: (event: GestureResponderEvent) => void;
   icon?: IOIcons;
-  // Accessibility
-  accessibilityLabel: string;
-}>;
+}> &
+  Pick<
+    ComponentProps<typeof Pressable>,
+    "accessibilityLabel" | "accessibilityHint"
+  >;
 
 export const ListItemInfoCopy = ({
   label,
@@ -41,12 +43,26 @@ export const ListItemInfoCopy = ({
   onPress,
   icon,
   accessibilityLabel,
+  accessibilityHint,
   testID
 }: ListItemInfoCopy) => {
   const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
+  const componentValueToAccessibility = useMemo(
+    () => (typeof value === "string" ? value : ""),
+    [value]
+  );
+
+  const listItemAccessibilityLabel = useMemo(
+    () =>
+      accessibilityLabel
+        ? accessibilityLabel
+        : `${label}; ${componentValueToAccessibility}`,
+    [label, componentValueToAccessibility, accessibilityLabel]
+  );
+
   const foregroundColor = isExperimental
     ? theme["interactiveElem-default"]
     : "blue";
@@ -120,12 +136,14 @@ export const ListItemInfoCopy = ({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={listItemAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       testID={testID}
     >
       <Animated.View
         importantForAccessibility="no-hide-descendants"
+        accessibilityElementsHidden
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
       >
         <Animated.View

package/src/components/listitems/ListItemNavAlert.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { ComponentProps, useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
@@ -29,9 +29,11 @@ export type ListItemNavAlert = WithTestID<{
   description?: string | React.ReactNode;
   withoutIcon?: boolean;
   onPress: (event: GestureResponderEvent) => void;
-  // Accessibility
-  accessibilityLabel: string;
-}>;
+}> &
+  Pick<
+    ComponentProps<typeof Pressable>,
+    "accessibilityLabel" | "accessibilityHint"
+  >;
 
 export const ListItemNavAlert = ({
   value,
@@ -39,11 +41,33 @@ export const ListItemNavAlert = ({
   withoutIcon = false,
   onPress,
   accessibilityLabel,
+  accessibilityHint,
   testID
 }: ListItemNavAlert) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
 
+  const componentValueToAccessibility = useMemo(
+    () => (typeof value === "string" ? value : ""),
+    [value]
+  );
+
+  const componentDescriptionToAccessibility = useMemo(
+    () => (typeof description === "string" ? description : ""),
+    [description]
+  );
+
+  const listItemAccessibilityLabel = useMemo(
+    () =>
+      accessibilityLabel
+        ? accessibilityLabel
+        : `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`,
+    [
+      componentDescriptionToAccessibility,
+      componentValueToAccessibility,
+      accessibilityLabel
+    ]
+  );
   const theme = useIOTheme();
 
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
@@ -124,12 +148,15 @@ export const ListItemNavAlert = ({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       accessible={true}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={listItemAccessibilityLabel}
+      accessibilityHint={accessibilityHint}
       accessibilityRole="button"
       testID={testID}
     >
       <Animated.View
         style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+        importantForAccessibility="no-hide-descendants"
+        accessibilityElementsHidden
       >
         <Animated.View
           style={[IOListItemStyles.listItemInner, animatedScaleStyle]}

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>