@pagopa/io-app-design-system 1.21.0 → 1.23.0

package/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap

@@ -82,7 +82,7 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
     color="bluegrey"
     defaultColor="bluegrey"
     defaultWeight="Regular"
-    font="TitilliumWeb"
+    font="TitilliumSansPro"
     fontStyle={
       {
         "fontSize": 16,
@@ -97,7 +97,7 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
         },
         {
           "color": "#475A6D",
-          "fontFamily": "Titillium Web",
+          "fontFamily": "Titillium Sans Pro",
           "fontStyle": "normal",
           "fontWeight": "400",
         },

package/src/components/accordion/AccordionItem.tsx

@@ -174,7 +174,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: 21,
     color: IOColors["grey-700"],
-    ...makeFontStyleObject("Regular", undefined, "TitilliumWeb")
+    ...makeFontStyleObject("Regular", undefined, "TitilliumSansPro")
   },
   textContainer: {
     padding: accordionBodySpacing,

package/src/components/avatar/Avatar.tsx

@@ -1,20 +1,19 @@
-// A component to provide organization logo
 import * as React from "react";
 import { Image, ImageURISource, StyleSheet, View } from "react-native";
 import { Icon } from "../../components/icons";
 import {
   IOColors,
   IOSpacingScale,
-  IOThemeContext,
   IOVisualCostants,
-  hexToRgba
+  hexToRgba,
+  useIOTheme
 } from "../../core";
 import { addCacheTimestampToUri } from "../../utils/image";
 
 type Avatar = {
   shape: "circle" | "square";
   size: "small" | "medium";
-  logoUri?: ImageURISource;
+  logoUri?: ImageURISource | ReadonlyArray<ImageURISource>;
 };
 
 const avatarBorderLightMode = hexToRgba(IOColors.black, 0.1);
@@ -55,16 +54,33 @@ const styles = StyleSheet.create({
   }
 });
 
+/**
+ * Avatar component is used to display the logo of an organization. It accepts the following props:
+ * - `logoUri`: the uri of the image to display. If not provided, a placeholder icon will be displayed. It can be a single uri or an array of uris, in which case the first one that is available will be used.
+ * - `shape`: the shape of the avatar, can be "circle" or "square"
+ * - `size`: the size of the avatar, can be "small" or "medium"
+ * @param AvatarProps
+ * @returns
+ */
 export const Avatar = ({ logoUri, shape, size }: Avatar) => {
-  const theme = React.useContext(IOThemeContext);
+  const theme = useIOTheme();
+  const indexValue = React.useRef<number>(0);
 
   const [imageSource, setImageSource] = React.useState(
-    !logoUri ? undefined : addCacheTimestampToUri(logoUri)
+    logoUri === undefined
+      ? undefined
+      : Array.isArray(logoUri)
+      ? addCacheTimestampToUri(logoUri[0])
+      : addCacheTimestampToUri(logoUri as ImageURISource)
   );
 
-  const isPlaceholder = !imageSource;
-
   const onError = () => {
+    if (Array.isArray(logoUri) && indexValue.current + 1 < logoUri.length) {
+      // eslint-disable-next-line functional/immutable-data
+      indexValue.current = indexValue.current + 1;
+      setImageSource(addCacheTimestampToUri(logoUri[indexValue.current]));
+      return;
+    }
     setImageSource(undefined);
   };
 
@@ -79,14 +95,16 @@ export const Avatar = ({ logoUri, shape, size }: Avatar) => {
             shape === "circle"
               ? getAvatarCircleShape(size)
               : dimensionsMap[size].radius,
-          backgroundColor: isPlaceholder ? IOColors["grey-50"] : IOColors.white,
-          padding: isPlaceholder
-            ? dimensionsMap[size].internalSpacePlaceholder
-            : dimensionsMap[size].internalSpace
+          backgroundColor:
+            imageSource === undefined ? IOColors["grey-50"] : IOColors.white,
+          padding:
+            imageSource === undefined
+              ? dimensionsMap[size].internalSpacePlaceholder
+              : dimensionsMap[size].internalSpace
         }
       ]}
     >
-      {isPlaceholder ? (
+      {imageSource === undefined ? (
         <Icon
           name="institution"
           color={theme["icon-decorative"]}

package/src/components/layout/HeaderSecondLevel.tsx

@@ -143,6 +143,7 @@ export const HeaderSecondLevel = ({
       : "transparent"
   }));
 
+  const isTitleAccessible = !!title.trim();
   const titleAnimatedStyle = useAnimatedStyle(() => ({
     opacity: scrollValues
       ? interpolate(
@@ -183,6 +184,7 @@ export const HeaderSecondLevel = ({
         )}
         <Animated.Text
           numberOfLines={1}
+          accessible={isTitleAccessible}
           style={[
             styles.headerTitle,
             isExperimental

package/src/components/listitems/ListItemHeader.tsx

@@ -125,7 +125,10 @@ export const ListItemHeader = ({
       accessible={endElement === undefined ? true : false}
       accessibilityLabel={listItemAccessibilityLabel}
     >
-      <View style={IOListItemStyles.listItemInner}>
+      <View
+        style={IOListItemStyles.listItemInner}
+        importantForAccessibility={endElement ? "auto" : "no-hide-descendants"}
+      >
         {iconName && (
           <View style={{ marginRight: iconMargin }}>
             <Icon

package/src/components/listitems/ListItemNav.tsx

@@ -26,6 +26,7 @@ import { IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HSpacer, VSpacer } from "../spacer";
 import { Caption, H6, LabelSmall } from "../typography";
+import { LoadingSpinner } from "../loadingSpinner";
 
 type ListItemTopElementProps =
   | {
@@ -40,6 +41,7 @@ type ListItemTopElementProps =
 type ListItemNavPartialProps = WithTestID<{
   value: string | React.ReactNode;
   description?: string | React.ReactNode;
+  loading?: boolean;
   onPress: (event: GestureResponderEvent) => void;
   // Accessibility
   accessibilityLabel: string;
@@ -64,7 +66,8 @@ export const ListItemNav = ({
   accessibilityLabel,
   testID,
   hideChevron = false,
-  topElement
+  topElement,
+  loading
 }: ListItemNav) => {
   const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
@@ -167,9 +170,17 @@ export const ListItemNav = ({
     isPressed.value = 0;
   }, [isPressed]);
 
+  const handleOnPress = (event: GestureResponderEvent) => {
+    if (!loading) {
+      onPress(event);
+    }
+  };
+
+  const primaryColor: IOColors = isExperimental ? "blueIO-500" : "blue";
+
   return (
     <Pressable
-      onPress={onPress}
+      onPress={handleOnPress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       accessible={true}
@@ -201,7 +212,8 @@ export const ListItemNav = ({
             </View>
           )}
           <View style={IOStyles.flex}>{listItemNavContent}</View>
-          {!hideChevron && (
+          {loading && <LoadingSpinner color={primaryColor} />}
+          {!loading && !hideChevron && (
             <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
               <Icon
                 name="chevronRightListItem"

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -233,7 +233,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
           color="grey-700"
           defaultColor="blue"
           defaultWeight="Bold"
-          font="TitilliumWeb"
+          font="TitilliumSansPro"
           fontStyle={
             {
               "fontSize": 14,
@@ -248,7 +248,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               },
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Web",
+                "fontFamily": "Titillium Sans Pro",
                 "fontStyle": "normal",
                 "fontWeight": "400",
               },
@@ -373,7 +373,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
           color="grey-700"
           defaultColor="blue"
           defaultWeight="Bold"
-          font="TitilliumWeb"
+          font="TitilliumSansPro"
           fontStyle={
             {
               "fontSize": 14,
@@ -388,7 +388,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               },
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Web",
+                "fontFamily": "Titillium Sans Pro",
                 "fontStyle": "normal",
                 "fontWeight": "400",
               },
@@ -1076,7 +1076,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             color="hanPurple-500"
             defaultColor="blue"
             defaultWeight="Bold"
-            font="TitilliumWeb"
+            font="TitilliumSansPro"
             fontStyle={
               {
                 "fontSize": 14,
@@ -1091,7 +1091,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                 },
                 {
                   "color": "#5517E3",
-                  "fontFamily": "Titillium Web",
+                  "fontFamily": "Titillium Sans Pro",
                   "fontStyle": "normal",
                   "fontWeight": "400",
                 },

package/src/components/modules/ModuleAttachment.tsx

@@ -0,0 +1,254 @@
+import React, { useCallback } from "react";
+import {
+  GestureResponderEvent,
+  Pressable,
+  PressableProps,
+  StyleSheet,
+  View
+} from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import Placeholder from "rn-placeholder";
+import {
+  IOColors,
+  IOListItemVisualParams,
+  IOScaleValues,
+  IOSpringValues,
+  useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { Icon } from "../icons";
+import { LabelSmall } from "../typography";
+import { VSpacer } from "../spacer";
+import { Badge } from "../badge";
+import { LoadingSpinner } from "../loadingSpinner";
+
+type PartialProps = WithTestID<{
+  title: string;
+  format: "doc" | "pdf";
+  isLoading?: boolean;
+  loadingAccessibilityLabel?: string;
+  isFetching?: boolean;
+  fetchingAccessibilityLabel?: string;
+  onPress: (event: GestureResponderEvent) => void;
+}>;
+
+export type ModuleAttachmentProps = PartialProps &
+  Pick<
+    PressableProps,
+    "onPress" | "accessibilityLabel" | "disabled" | "testID"
+  >;
+
+type SkeletonComponentProps = {
+  loadingAccessibilityLabel?: string;
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderRadius: 8,
+    borderColor: IOColors.bluegreyLight,
+    backgroundColor: IOColors.white,
+    borderStyle: "solid",
+    borderWidth: 1
+  },
+  innerContent: {
+    flex: 1,
+    flexDirection: "column"
+  },
+  rightSection: {
+    marginLeft: IOListItemVisualParams.iconMargin,
+    alignItems: "center"
+  }
+});
+
+const DISABLED_OPACITY = 0.5;
+
+const ModuleAttachmentContent = ({
+  isFetching,
+  format,
+  title,
+  testID
+}: Pick<
+  ModuleAttachmentProps,
+  "isFetching" | "format" | "title" | "testID"
+>) => {
+  const theme = useIOTheme();
+  const IconOrActivityIndicatorComponent = () => {
+    if (isFetching) {
+      const activityIndicatorTestId = testID
+        ? `${testID}_activityIndicator`
+        : undefined;
+      return <LoadingSpinner testID={activityIndicatorTestId} />;
+    }
+
+    return (
+      <Icon
+        name="chevronRightListItem"
+        color={theme["interactiveElem-default"]}
+        size={IOListItemVisualParams.chevronSize}
+      />
+    );
+  };
+
+  return (
+    <>
+      <View style={styles.innerContent}>
+        <LabelSmall
+          numberOfLines={1}
+          weight="SemiBold"
+          font="ReadexPro"
+          color="blueIO-500"
+        >
+          {title}
+        </LabelSmall>
+        <VSpacer size={4} />
+        <View style={{ width: 44 }}>
+          <Badge text={format.toUpperCase()} variant="default" />
+        </View>
+      </View>
+      <View style={styles.rightSection}>
+        <IconOrActivityIndicatorComponent />
+      </View>
+    </>
+  );
+};
+
+/**
+ * The `ModuleAttachment` component is a custom button component with an extended outline style.
+ * It provides an animated scaling effect when pressed.
+ *
+ * @param {string}   accessibilityLabel - Optional accessibility label.
+ * @param {boolean}  disabled - If true, the button is disabled.
+ * @param {string}   fetchingAccessibilityLabel - Optional accessibility label to use during fetching.
+ * @param {string}   format - Badge content. PDF or DOC.
+ * @param {boolean}  isLoading - If true, displays a skeleton loading component.
+ * @param {boolean}  isFetching - If true, displays an activity indicator.
+ * @param {string}   loadingAccessibilityLabel - Optional accessibility label to use during loading.
+ * @param {function} onPress - The function to be executed when the item is pressed.
+ * @param {string}   testID - The test ID for testing purposes.
+ * @param {string}   title - The title text to display.
+ *
+ */
+export const ModuleAttachment = ({
+  accessibilityLabel,
+  disabled = false,
+  fetchingAccessibilityLabel,
+  format,
+  isLoading = false,
+  isFetching = false,
+  loadingAccessibilityLabel,
+  onPress,
+  testID,
+  title
+}: ModuleAttachmentProps) => {
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
+
+  const scaleTraversed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
+
+  // Interpolate animation values from `isPressed` values
+  const animatedStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      scaleTraversed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      transform: [{ scale }]
+    };
+  });
+
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  const handleOnPress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (isFetching) {
+        return;
+      }
+      onPress(event);
+    },
+    [isFetching, onPress]
+  );
+
+  if (isLoading) {
+    return (
+      <SkeletonComponent
+        loadingAccessibilityLabel={loadingAccessibilityLabel}
+      />
+    );
+  }
+
+  const pressableAccessibilityLabel =
+    (isFetching && !!fetchingAccessibilityLabel
+      ? fetchingAccessibilityLabel
+      : accessibilityLabel) ?? title;
+  return (
+    <Pressable
+      testID={testID}
+      onPress={handleOnPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={true}
+      accessibilityRole={"button"}
+      accessibilityHint={format}
+      accessibilityLabel={pressableAccessibilityLabel}
+      disabled={disabled || isFetching}
+    >
+      <Animated.View
+        style={[
+          styles.button,
+          animatedStyle,
+          { opacity: disabled ? DISABLED_OPACITY : 1 }
+        ]}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no-hide-descendants"
+      >
+        <ModuleAttachmentContent
+          isFetching={isFetching}
+          title={title}
+          format={format}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const SkeletonComponent = ({
+  loadingAccessibilityLabel
+}: SkeletonComponentProps) => (
+  <View
+    style={styles.button}
+    accessible={true}
+    accessibilityLabel={loadingAccessibilityLabel}
+  >
+    <View style={styles.innerContent}>
+      <Placeholder.Box animate="fade" radius={8} width={107} height={22} />
+      <VSpacer size={4} />
+      <Placeholder.Box animate="fade" radius={8} width={44} height={22} />
+    </View>
+  </View>
+);

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,18 +1,18 @@
 import * as React from "react";
 import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
-import { WithTestID } from "../../utils/types";
-import { getAccessibleAmountText } from "../../utils/accessibility";
-import { H6, LabelSmall } from "../typography";
-import { Badge } from "../badge";
-import { Icon } from "../icons";
 import {
   IOListItemVisualParams,
   IOModuleStyles,
   IOStyles,
   useIOExperimentalDesign
 } from "../../core";
+import { getAccessibleAmountText } from "../../utils/accessibility";
+import { WithTestID } from "../../utils/types";
+import { Badge } from "../badge";
+import { Icon } from "../icons";
 import { VSpacer } from "../spacer";
+import { H6, LabelSmall, LabelSmallAlt } from "../typography";
 import { PressableModuleBase } from "./PressableModuleBase";
 
 export type PaymentNoticeStatus =
@@ -97,14 +97,15 @@ const ModulePaymentNoticeContent = ({
             {title}
           </LabelSmall>
         )}
-        <LabelSmall
-          weight="SemiBold"
-          font={isExperimental ? "ReadexPro" : "TitilliumWeb"}
-          color={isExperimental ? "blueIO-500" : "bluegrey"}
-          numberOfLines={2}
-        >
-          {subtitle}
-        </LabelSmall>
+        {isExperimental ? (
+          <LabelSmallAlt color={"blueIO-500"} numberOfLines={2}>
+            {subtitle}
+          </LabelSmallAlt>
+        ) : (
+          <LabelSmall weight="SemiBold" color={"bluegrey"} numberOfLines={2}>
+            {subtitle}
+          </LabelSmall>
+        )}
       </View>
       <View style={[styles.rightSection, { flexShrink: 1 }]}>
         <AmountOrBadgeComponent />

package/src/components/modules/index.tsx

@@ -2,3 +2,4 @@ export * from "./ModuleIDP";
 export * from "./ModulePaymentNotice";
 export * from "./PressableModuleBase";
 export * from "./ModuleCheckout";
+export * from "./ModuleAttachment";

package/src/components/tag/Tag.tsx

@@ -23,6 +23,7 @@ export type Tag = WithTestID<{
     | "success"
     | "attachment"
     | "noIcon";
+  iconAccessibilityLabel?: string;
 }>;
 
 type VariantProps = {
@@ -112,7 +113,7 @@ const styles = StyleSheet.create({
 /**
  * Tag component, used mainly for message list and details
  */
-export const Tag = ({ text, variant, testID }: Tag) => {
+export const Tag = ({ text, variant, testID, iconAccessibilityLabel }: Tag) => {
   const { isExperimental } = useIOExperimentalDesign();
   return (
     <View testID={testID} style={styles.tag}>
@@ -123,7 +124,13 @@ export const Tag = ({ text, variant, testID }: Tag) => {
           () => null,
           ({ iconColor, iconName }) => (
             <View style={styles.iconWrapper}>
-              <Icon name={iconName} color={iconColor} size={IOTagIconSize} />
+              <Icon
+                name={iconName}
+                color={iconColor}
+                size={IOTagIconSize}
+                accessible={!!iconAccessibilityLabel}
+                accessibilityLabel={iconAccessibilityLabel}
+              />
             </View>
           )
         )

package/src/components/toast/ToastNotification.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
+import { IOAlertRadius, IOColors } from "../../core";
 import { Icon } from "../icons";
-import { IOColors, IOAlertRadius } from "../../core";
+import { HSpacer } from "../spacer";
 import { ButtonText } from "../typography";
 import { Toast, ToastVariant } from "./types";
 
@@ -54,7 +55,12 @@ const ToastNotification = ({ message, variant = "neutral", icon }: Props) => {
       <ButtonText color={colors.stroke} style={styles.content}>
         {message}
       </ButtonText>
-      {icon && <Icon name={icon} size={24} color={colors.stroke} />}
+      {icon && (
+        <>
+          <HSpacer size={16} />
+          <Icon name={icon} size={24} color={colors.stroke} />
+        </>
+      )}
     </View>
   );
 };
@@ -69,6 +75,7 @@ const styles = StyleSheet.create({
     justifyContent: "space-between"
   },
   content: {
+    flexShrink: 1,
     paddingVertical: 2
   }
 });

package/src/components/typography/Body.tsx

@@ -1,4 +1,4 @@
-import { IOColors, IOTheme } from "../../core";
+import { IOColors, IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -14,7 +14,9 @@ type BodyProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-const fontName: FontFamily = "TitilliumWeb";
+const fontName: FontFamily = "TitilliumSansPro";
+const legacyFontName: FontFamily = "TitilliumWeb";
+
 export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
 export const bodyDefaultColor: AllowedColors = "bluegrey";
@@ -23,11 +25,14 @@ export const bodyDefaultWeight: AllowedWeight = "Regular";
 /**
  * `Body` typographic style
  */
-export const Body = (props: BodyProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const Body = (props: BodyProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: bodyDefaultWeight,
     defaultColor: bodyDefaultColor,
-    font: fontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
   });
+};

package/src/components/typography/H3.tsx

@@ -28,6 +28,7 @@ const legacyH3LineHeight = 34;
  */
 export const H3 = (props: H3Props) => {
   const { isExperimental } = useIOExperimentalDesign();
+
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,