@pagopa/io-app-design-system 4.5.6 → 4.6.1

package/src/components/claimsSelector/index.tsx

@@ -0,0 +1 @@
+export * from "./ClaimsSelector";

package/src/components/index.tsx

@@ -5,6 +5,7 @@ export * from "./badge";
 export * from "./banner";
 export * from "./buttons";
 export * from "./checkbox";
+export * from "./claimsSelector";
 export * from "./codeInput";
 export * from "./contentWrapper";
 export * from "./divider";

package/src/components/listitems/ListItemInfo.tsx

@@ -60,6 +60,7 @@ export type ListItemInfo = WithTestID<{
   // Accessibility
   accessibilityLabel?: string;
   accessibilityRole?: AccessibilityRole;
+  reversed?: boolean;
 }> &
   GraphicProps &
   InteractiveProps;
@@ -70,6 +71,7 @@ export const ListItemInfo = ({
   label,
   value,
   numberOfLines = 2,
+  reversed = false,
   icon,
   paymentLogoIcon,
   endElement,
@@ -99,7 +101,10 @@ export const ListItemInfo = ({
 
   const itemInfoTextComponent = useMemo(
     () => (
-      <View accessible={Platform.OS === "ios"}>
+      <View
+        accessible={Platform.OS === "ios"}
+        style={{ flexDirection: reversed ? "column-reverse" : "column" }}
+      >
         <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
           {label}
         </BodySmall>
@@ -112,7 +117,7 @@ export const ListItemInfo = ({
         )}
       </View>
     ),
-    [label, value, numberOfLines, theme]
+    [label, value, numberOfLines, theme, reversed]
   );
 
   const listItemInfoAction = useCallback(() => {

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

@@ -239,6 +239,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
     >
       <View
         accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+          }
+        }
       >
         <Text
           allowFontScaling={true}
@@ -1909,6 +1914,11 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
     >
       <View
         accessible={true}
+        style={
+          {
+            "flexDirection": "column",
+          }
+        }
       >
         <Text
           allowFontScaling={true}

package/src/components/textInput/TextInputValidation.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { useCallback, useMemo, useState } from "react";
+import {
+  useCallback,
+  useMemo,
+  useState,
+  forwardRef,
+  useImperativeHandle
+} from "react";
 import { AccessibilityInfo, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { useIOTheme } from "../../core";
@@ -28,6 +34,14 @@ type TextInputValidationProps = Omit<
    * In case of a dynamic `errorMessage`, use the `onValidate` function with a `ValidationWithOptions` object as the return value to ensure that screen readers announce the correct value.
    */
   errorMessage: string;
+  /**
+   * Determines the validation mode. If "onBlur", validation occurs on blur. If "onContinue", validation occurs when an external button is pressed.
+   */
+  validationMode?: "onBlur" | "onContinue";
+  /**
+   * A string that will be read by screen readers when the field is not valid.
+   */
+  accessibilityErrorLabel?: string;
 };
 
 function isValidationWithOptions(
@@ -42,107 +56,136 @@ function isValidationWithOptions(
 
 const feedbackIconSize: IOIconSizeScale = 24;
 
-export const TextInputValidation = ({
-  onValidate,
-  errorMessage,
-  value,
-  bottomMessage,
-  onBlur,
-  onFocus,
-  ...props
-}: TextInputValidationProps) => {
-  const theme = useIOTheme();
-  const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
-  const [errMessage, setErrMessage] = useState(errorMessage);
-
-  const getErrorFeedback = useCallback((isValid: boolean, message: string) => {
-    setIsValid(isValid);
-    setErrMessage(message);
-
-    if (!isValid) {
-      triggerHaptic("notificationError");
-      AccessibilityInfo.announceForAccessibilityWithOptions(message, {
-        queue: true
-      });
-    } else {
-      triggerHaptic("notificationSuccess");
-    }
-  }, []);
-
-  const onBlurHandler = useCallback(() => {
-    const validation = onValidate(value);
-
-    if (isValidationWithOptions(validation)) {
-      getErrorFeedback(validation.isValid, validation.errorMessage);
-    } else {
-      getErrorFeedback(validation, errorMessage);
-    }
-    onBlur?.();
-  }, [value, errorMessage, onBlur, onValidate, getErrorFeedback]);
-
-  const onFocusHandler = useCallback(() => {
-    setIsValid(undefined);
-    onFocus?.();
-  }, [onFocus]);
-
-  const labelError = useMemo(
-    () => (isValid === false && errMessage ? errMessage : bottomMessage),
-    [isValid, errMessage, bottomMessage]
-  );
+export const TextInputValidation = forwardRef<
+  {
+    validateInput: () => void;
+  },
+  TextInputValidationProps
+>(
+  (
+    {
+      onValidate,
+      errorMessage,
+      value,
+      bottomMessage,
+      onBlur,
+      onFocus,
+      validationMode = "onBlur",
+      accessibilityErrorLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const theme = useIOTheme();
+    const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
+    const [errMessage, setErrMessage] = useState(errorMessage);
+
+    const getErrorFeedback = useCallback(
+      (isValid: boolean, message: string) => {
+        setIsValid(isValid);
+        setErrMessage(message);
+
+        if (!isValid) {
+          triggerHaptic("notificationError");
+          AccessibilityInfo.announceForAccessibilityWithOptions(
+            accessibilityErrorLabel ?? message,
+            {
+              queue: true
+            }
+          );
+        } else {
+          triggerHaptic("notificationSuccess");
+        }
+      },
+      [accessibilityErrorLabel]
+    );
 
-  const labelErrorColor: IOColors | undefined = useMemo(
-    () => (isValid === false && errMessage ? theme.errorText : undefined),
-    [isValid, errMessage, theme.errorText]
-  );
+    const validateInput = useCallback(() => {
+      const validation = onValidate(value);
 
-  const feedbackIconAttrMap: Record<
-    string,
-    { name: IOIcons; color: IOColors }
-  > = useMemo(
-    () => ({
-      valid: {
-        name: "success",
-        color: theme.successIcon
-      },
-      notValid: {
-        name: "errorFilled",
-        color: theme.errorIcon
+      if (isValidationWithOptions(validation)) {
+        getErrorFeedback(validation.isValid, validation.errorMessage);
+      } else {
+        getErrorFeedback(validation, errorMessage);
       }
-    }),
-    [theme]
-  );
+    }, [value, errorMessage, onValidate, getErrorFeedback]);
+
+    // Expose the validateInput function to the parent component
+    useImperativeHandle(ref, () => ({
+      validateInput
+    }));
 
-  const feedbackIcon = useMemo(() => {
-    const validationStatus = isValid ? "valid" : "notValid";
-
-    return isValid !== undefined ? (
-      <Animated.View
-        entering={enterTransitionInputIcon}
-        exiting={exitTransitionInputIcon}
-      >
-        <Icon
-          name={feedbackIconAttrMap[validationStatus].name}
-          color={feedbackIconAttrMap[validationStatus].color}
-          size={feedbackIconSize}
-        />
-      </Animated.View>
-    ) : (
-      <View style={{ width: feedbackIconSize, height: feedbackIconSize }} />
+    const onBlurHandler = useCallback(() => {
+      if (validationMode === "onBlur") {
+        validateInput();
+      }
+      onBlur?.();
+    }, [validationMode, validateInput, onBlur]);
+
+    const onFocusHandler = useCallback(() => {
+      setIsValid(undefined);
+      onFocus?.();
+    }, [onFocus]);
+
+    const labelError = useMemo(
+      () => (isValid === false && errMessage ? errMessage : bottomMessage),
+      [isValid, errMessage, bottomMessage]
     );
-  }, [feedbackIconAttrMap, isValid]);
 
-  return (
-    <TextInputBase
-      {...props}
-      value={value}
-      status={isValid === false ? "error" : undefined}
-      bottomMessage={labelError}
-      bottomMessageColor={labelErrorColor}
-      rightElement={feedbackIcon}
-      onBlur={onBlurHandler}
-      onFocus={onFocusHandler}
-    />
-  );
-};
+    const labelErrorColor: IOColors | undefined = useMemo(
+      () => (isValid === false && errMessage ? theme.errorText : undefined),
+      [isValid, errMessage, theme.errorText]
+    );
+
+    const feedbackIconAttrMap: Record<
+      string,
+      { name: IOIcons; color: IOColors }
+    > = useMemo(
+      () => ({
+        valid: {
+          name: "success",
+          color: theme.successIcon
+        },
+        notValid: {
+          name: "errorFilled",
+          color: theme.errorIcon
+        }
+      }),
+      [theme]
+    );
+
+    const feedbackIcon = useMemo(() => {
+      const validationStatus = isValid ? "valid" : "notValid";
+
+      return isValid !== undefined ? (
+        <Animated.View
+          entering={enterTransitionInputIcon}
+          exiting={exitTransitionInputIcon}
+        >
+          <Icon
+            name={feedbackIconAttrMap[validationStatus].name}
+            color={feedbackIconAttrMap[validationStatus].color}
+            size={feedbackIconSize}
+          />
+        </Animated.View>
+      ) : (
+        <View style={{ width: feedbackIconSize, height: feedbackIconSize }} />
+      );
+    }, [feedbackIconAttrMap, isValid]);
+
+    return (
+      <TextInputBase
+        {...props}
+        value={value}
+        status={isValid === false ? "error" : undefined}
+        bottomMessage={labelError}
+        bottomMessageColor={labelErrorColor}
+        rightElement={feedbackIcon}
+        onBlur={onBlurHandler}
+        onFocus={onFocusHandler}
+      />
+    );
+  }
+);
 
 export default TextInputValidation;

package/src/components/typography/markdown/MdH1.tsx

@@ -6,7 +6,6 @@ import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 /**
  * `MdH1` typographic style
  */
-
 export const MdH1 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
@@ -18,7 +17,7 @@ export const MdH1 = forwardRef<View, TypographicStyleProps>(
       weight: "Semibold",
       size: 20,
       lineHeight: 24,
-      color: customColor ?? theme["textHeading-tertiary"]
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/components/typography/markdown/MdH2.tsx

@@ -15,9 +15,9 @@ export const MdH2 = forwardRef<View, TypographicStyleProps>(
       ...props,
       font: isExperimental ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
-      size: 16,
+      size: 18,
       lineHeight: 24,
-      color: customColor ?? theme["textHeading-tertiary"]
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/components/typography/markdown/MdH3.tsx

@@ -14,10 +14,10 @@ export const MdH3 = forwardRef<View, TypographicStyleProps>(
     const MdH3Props: IOTextProps = {
       ...props,
       font: isExperimental ? "Titillio" : "TitilliumSansPro",
-      weight: "Regular",
+      weight: "Semibold",
       size: 16,
       lineHeight: 24,
-      color: customColor ?? theme["textHeading-tertiary"]
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/core/IOColors.ts

@@ -381,7 +381,7 @@ export const IOThemeDark: IOTheme = {
   "textHeading-tertiary": "grey-450",
   "textBody-default": "white",
   "textBody-secondary": "grey-100",
-  "textBody-tertiary": "grey-450",
+  "textBody-tertiary": "grey-300",
   // Design System related
   "cardBorder-default": "grey-850",
   "icon-default": "grey-450",

package/src/hooks/useAccordionAnimation.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useState } from "react";
+import { StyleSheet, type LayoutChangeEvent } from "react-native";
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { IOSpacingScale, IOSpringValues } from "../core";
+
+const accordionBodySpacing: IOSpacingScale = 16;
+
+type Params = {
+  defaultExpanded?: boolean;
+};
+
+export const useAccordionAnimation = ({
+  defaultExpanded = false
+}: Params = {}) => {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  // Disable animation when starting expanded
+  const animationEnabled = useSharedValue(!defaultExpanded);
+  const bodyHeight = useSharedValue(0);
+
+  const toggleAccordion = useCallback(() => {
+    // Re-enable animation when the user interacts with the accordion
+    animationEnabled.value = true; // eslint-disable-line functional/immutable-data
+    setExpanded(expanded => !expanded);
+  }, [animationEnabled]);
+
+  const iconAnimatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          rotate: withSpring(
+            expanded ? "180deg" : "0deg",
+            IOSpringValues.accordion
+          )
+        }
+      ]
+    }),
+    [expanded]
+  );
+
+  // The code below is a re-adaptation of Dima Portenko's code:
+  // https://github.com/dimaportenko/reanimated-collapsable-card-tutorial
+  const onBodyLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { height: onLayoutHeight } = event.nativeEvent.layout;
+
+      if (onLayoutHeight > 0 && bodyHeight.value !== onLayoutHeight) {
+        bodyHeight.value = onLayoutHeight; // eslint-disable-line functional/immutable-data
+      }
+    },
+    [bodyHeight]
+  );
+
+  const bodyAnimatedHeight = useAnimatedStyle(() => {
+    const nextHeight = expanded ? bodyHeight.value : 0;
+    return {
+      height: animationEnabled.value
+        ? withSpring(nextHeight, IOSpringValues.accordion)
+        : nextHeight
+    };
+  });
+
+  const bodyAnimatedStyle = [
+    bodyAnimatedHeight,
+    styles.accordionCollapsableContainer
+  ];
+  const bodyInnerStyle = styles.accordionBodyContainer;
+
+  return {
+    expanded,
+    /**
+     * Toggle the accordion expanded/collapsed state.
+     */
+    toggleAccordion,
+    /**
+     * The style to apply to the accordion icon.
+     */
+    iconAnimatedStyle,
+    /**
+     * Callback to execute on the body's inner container layout.
+     */
+    onBodyLayout,
+    /**
+     * The animated style to apply to the collapsible body container – it must be an `Animated.View`.
+     */
+    bodyAnimatedStyle,
+    /**
+     * The style to apply to the inner body container.
+     */
+    bodyInnerStyle
+  };
+};
+
+const styles = StyleSheet.create({
+  accordionCollapsableContainer: {
+    overflow: "hidden"
+  },
+  accordionBodyContainer: {
+    position: "absolute",
+    padding: accordionBodySpacing,
+    paddingTop: 0
+  }
+});

package/src/index.tsx

@@ -3,4 +3,5 @@ export * from "./core";
 export * from "./functions";
 export * from "./hooks";
 export * from "./utils/fonts";
+export * from "./utils/accessibility";
 export * from "./utils/types";