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

package/src/components/layout/HeaderFirstLevel.tsx

@@ -1,12 +1,24 @@
 import * as React from "react";
+import { useEffect, useLayoutEffect } from "react";
 import {
   AccessibilityInfo,
+  findNodeHandle,
   StyleSheet,
-  View,
-  findNodeHandle
+  View
 } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { IOColors, IOStyles, IOVisualCostants, useIOTheme } from "../../core";
+import {
+  alertEdgeToEdgeInsetTransitionConfig,
+  IOColors,
+  IOStyles,
+  IOVisualCostants,
+  useIOTheme
+} from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import { HSpacer } from "../spacer";
@@ -17,6 +29,7 @@ type CommonProps = WithTestID<{
   title: string;
   // This Prop will be removed once all the screens on the first level routing will be refactored
   backgroundColor?: "light" | "dark";
+  ignoreSafeAreaMargin?: boolean;
 }>;
 
 interface Base extends CommonProps {
@@ -67,6 +80,7 @@ export const HeaderFirstLevel = ({
   type,
   testID,
   backgroundColor = "light",
+  ignoreSafeAreaMargin = false,
   firstAction,
   secondAction,
   thirdAction
@@ -74,23 +88,38 @@ export const HeaderFirstLevel = ({
   const titleRef = React.createRef<View>();
   const insets = useSafeAreaInsets();
   const theme = useIOTheme();
+  const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const reactNode = findNodeHandle(titleRef.current);
     if (reactNode !== null) {
       AccessibilityInfo.setAccessibilityFocus(reactNode);
     }
   });
 
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    paddingTop.value = withTiming(
+      ignoreSafeAreaMargin ? 0 : insets.top,
+      alertEdgeToEdgeInsetTransitionConfig
+    );
+  }, [ignoreSafeAreaMargin, insets.top, paddingTop]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    paddingTop: paddingTop.value
+  }));
+
   return (
-    <View
-      style={{
-        paddingTop: insets.top,
-        backgroundColor:
-          backgroundColor === "light"
-            ? IOColors[theme["appBackground-primary"]]
-            : IOColors[HEADER_BG_COLOR_DARK]
-      }}
+    <Animated.View
+      style={[
+        {
+          backgroundColor:
+            backgroundColor === "light"
+              ? IOColors[theme["appBackground-primary"]]
+              : IOColors[HEADER_BG_COLOR_DARK]
+        },
+        animatedStyle
+      ]}
       accessibilityRole="header"
       testID={testID}
     >
@@ -136,7 +165,7 @@ export const HeaderFirstLevel = ({
           )}
         </View>
       </View>
-    </View>
+    </Animated.View>
   );
 };
 

package/src/components/layout/HeaderSecondLevel.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentProps } from "react";
+import { ComponentProps, useEffect, useLayoutEffect } from "react";
 import {
   AccessibilityInfo,
   ColorValue,
@@ -9,15 +9,24 @@ import {
   findNodeHandle
 } from "react-native";
 import Animated, {
+  AnimatedRef,
+  SharedValue,
   interpolate,
   interpolateColor,
-  useAnimatedStyle
+  useAnimatedStyle,
+  useDerivedValue,
+  useScrollViewOffset,
+  useSharedValue,
+  withSpring,
+  withTiming
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   IOColors,
+  IOSpringValues,
   IOStyles,
   IOVisualCostants,
+  alertEdgeToEdgeInsetTransitionConfig,
   hexToRgba,
   iconBtnSizeSmall,
   useIOExperimentalDesign,
@@ -31,10 +40,20 @@ import { IOText } from "../typography";
 import { ActionProp } from "./common";
 
 type ScrollValues = {
-  contentOffsetY: Animated.SharedValue<number>;
+  contentOffsetY: SharedValue<number>;
   triggerOffset: number;
 };
 
+type DiscreteTransitionProps =
+  | {
+      enableDiscreteTransition: true;
+      animatedRef: AnimatedRef<Animated.ScrollView>;
+    }
+  | {
+      enableDiscreteTransition?: false;
+      animatedRef?: never;
+    };
+
 type BackProps =
   | {
       goBack: () => void;
@@ -54,7 +73,7 @@ type CommonProps = WithTestID<{
   transparent?: boolean;
   variant?: "neutral" | "contrast";
   backgroundColor?: string;
-  isModal?: boolean;
+  ignoreSafeAreaMargin?: boolean;
 }>;
 
 interface Base extends CommonProps {
@@ -86,6 +105,7 @@ interface ThreeActions extends CommonProps {
 }
 
 export type HeaderSecondLevel = BackProps &
+  DiscreteTransitionProps &
   (Base | OneAction | TwoActions | ThreeActions);
 
 const titleHorizontalMargin: IOSpacingScale = 16;
@@ -121,18 +141,24 @@ export const HeaderSecondLevel = ({
   variant = "neutral",
   backgroundColor,
   transparent = false,
-  isModal = false,
+  ignoreSafeAreaMargin = false,
+  enableDiscreteTransition = false,
+  animatedRef,
   testID,
   firstAction,
   secondAction,
   thirdAction
 }: HeaderSecondLevel) => {
+  const scrollOffset = useScrollViewOffset(
+    animatedRef as AnimatedRef<Animated.ScrollView>
+  );
   const titleRef = React.createRef<View>();
 
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
   const insets = useSafeAreaInsets();
   const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
+  const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
   const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
@@ -148,7 +174,10 @@ export const HeaderSecondLevel = ({
 
   const headerBgColorTransparentState = backgroundColor
     ? hexToRgba(backgroundColor, 0)
-    : hexToRgba(IOColors[HEADER_DEFAULT_BG_COLOR], 0);
+    : transparent
+    ? hexToRgba(IOColors[HEADER_DEFAULT_BG_COLOR], 0)
+    : IOColors[HEADER_DEFAULT_BG_COLOR];
+
   const headerBgColorSolidState =
     backgroundColor ?? IOColors[HEADER_DEFAULT_BG_COLOR];
 
@@ -157,7 +186,7 @@ export const HeaderSecondLevel = ({
     : hexToRgba(IOColors["grey-100"], 0);
   const borderColorSolidState = backgroundColor ?? IOColors["grey-100"];
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (isTitleAccessible) {
       const reactNode = findNodeHandle(titleRef.current);
       if (reactNode !== null) {
@@ -166,15 +195,43 @@ export const HeaderSecondLevel = ({
     }
   });
 
+  const bgColorDiscreteTransition = useDerivedValue(() =>
+    withSpring(scrollOffset.value > 0 ? 1 : 0, IOSpringValues.header)
+  );
+
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    paddingTop.value = withTiming(
+      ignoreSafeAreaMargin ? 0 : insets.top,
+      alertEdgeToEdgeInsetTransitionConfig
+    );
+  }, [ignoreSafeAreaMargin, insets.top, paddingTop]);
+
+  const animatedPaddingStyle = useAnimatedStyle(() => ({
+    marginTop: paddingTop.value
+  }));
+
   const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: scrollValues
+    backgroundColor: enableDiscreteTransition
+      ? interpolateColor(
+          bgColorDiscreteTransition.value,
+          [0, 1],
+          [headerBgColorTransparentState, headerBgColorSolidState]
+        )
+      : scrollValues
       ? interpolateColor(
           scrollValues.contentOffsetY.value,
           [0, scrollValues.triggerOffset],
           [headerBgColorTransparentState, headerBgColorSolidState]
         )
       : headerBgColorSolidState,
-    borderColor: scrollValues
+    borderColor: enableDiscreteTransition
+      ? interpolateColor(
+          bgColorDiscreteTransition.value,
+          [0, 1],
+          [borderColorTransparentState, borderColorSolidState]
+        )
+      : scrollValues
       ? interpolateColor(
           scrollValues.contentOffsetY.value,
           [0, scrollValues.triggerOffset],
@@ -184,7 +241,9 @@ export const HeaderSecondLevel = ({
   }));
 
   const titleAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: scrollValues
+    opacity: enableDiscreteTransition
+      ? interpolate(bgColorDiscreteTransition.value, [0, 1], [0, 1])
+      : scrollValues
       ? interpolate(
           scrollValues.contentOffsetY.value,
           [0, scrollValues.triggerOffset],
@@ -198,14 +257,14 @@ export const HeaderSecondLevel = ({
       accessibilityRole="header"
       style={[
         { borderBottomWidth: 1, borderColor: borderColorTransparentState },
-        isModal ? { borderColor: borderColorSolidState } : {},
+        ignoreSafeAreaMargin ? { borderColor: borderColorSolidState } : {},
         !transparent ? { backgroundColor: headerBgColorSolidState } : {},
         headerWrapperAnimatedStyle
       ]}
     >
       <Animated.View
         testID={testID}
-        style={[isModal ? {} : { marginTop: insets.top }, styles.headerInner]}
+        style={[animatedPaddingStyle, styles.headerInner]}
       >
         {goBack ? (
           <IconButton

package/src/components/listitems/ListItemInfo.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, useCallback, useMemo } from "react";
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
@@ -81,17 +81,7 @@ export const ListItemInfo = ({
 
   const itemInfoTextComponent = useMemo(
     () => (
-      <View
-        accessible={endElement === undefined ? true : false}
-        importantForAccessibility={
-          endElement !== undefined && endElement.type !== "badge"
-            ? "no-hide-descendants"
-            : "yes"
-        }
-        accessibilityElementsHidden={
-          endElement !== undefined && endElement.type !== "badge"
-        }
-      >
+      <View accessible={Platform.OS === "ios"}>
         <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
           {label}
         </LabelSmall>
@@ -104,7 +94,7 @@ export const ListItemInfo = ({
         )}
       </View>
     ),
-    [label, value, numberOfLines, theme, endElement]
+    [label, value, numberOfLines, theme]
   );
 
   const listItemInfoAction = useCallback(() => {
@@ -113,7 +103,9 @@ export const ListItemInfo = ({
 
       switch (type) {
         case "buttonLink":
-          const buttonLinkAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+          const buttonLinkAccessibilityLabel = `${
+            componentProps.accessibilityLabel ?? componentProps.label
+          }`;
 
           return (
             <ButtonLink
@@ -122,7 +114,7 @@ export const ListItemInfo = ({
             />
           );
         case "iconButton":
-          const iconButtonAccessibilityLabel = `${listItemAccessibilityLabel}; ${componentProps.accessibilityLabel}`;
+          const iconButtonAccessibilityLabel = `${componentProps.accessibilityLabel}`;
           return (
             <IconButton
               {...componentProps}
@@ -136,7 +128,7 @@ export const ListItemInfo = ({
       }
     }
     return <></>;
-  }, [endElement, listItemAccessibilityLabel]);
+  }, [endElement]);
 
   return (
     <View

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

@@ -234,9 +234,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
       }
     >
       <View
-        accessibilityElementsHidden={false}
         accessible={true}
-        importantForAccessibility="yes"
       >
         <Text
           allowFontScaling={true}
@@ -1933,9 +1931,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       }
     >
       <View
-        accessibilityElementsHidden={false}
         accessible={true}
-        importantForAccessibility="yes"
       >
         <Text
           allowFontScaling={false}

package/src/components/modules/ModuleAttachment.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback } from "react";
-import { GestureResponderEvent, PressableProps, View } from "react-native";
+import { GestureResponderEvent, PressableProps } from "react-native";
 import Placeholder from "rn-placeholder";
 import { IOListItemVisualParams, useIOTheme } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
-import { VSpacer } from "../spacer";
+import { HStack, VStack } from "../stack";
 import { LabelSmallAlt } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
@@ -61,21 +61,21 @@ const ModuleAttachmentContent = ({
   };
 
   return (
-    <>
-      <View style={{ alignItems: "flex-start", flexShrink: 1 }}>
+    <HStack space={8} style={{ alignItems: "center" }}>
+      <VStack
+        space={4}
+        style={{ alignItems: "flex-start", flexShrink: 1, flexGrow: 1 }}
+      >
         <LabelSmallAlt
           numberOfLines={2}
           color={theme["interactiveElem-default"]}
         >
           {title}
         </LabelSmallAlt>
-        <VSpacer size={4} />
         <Badge text={format.toUpperCase()} variant="default" />
-      </View>
-      <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-        <IconOrActivityIndicatorComponent />
-      </View>
-    </>
+      </VStack>
+      <IconOrActivityIndicatorComponent />
+    </HStack>
   );
 };
 
@@ -151,11 +151,10 @@ export const ModuleAttachment = ({
 const ModuleAttachmentSkeleton = () => (
   <ModuleStatic
     startBlock={
-      <View>
-        <Placeholder.Box animate="fade" radius={8} width={107} height={16} />
-        <VSpacer size={4} />
-        <Placeholder.Box animate="fade" radius={16} width={44} height={20} />
-      </View>
+      <VStack space={4}>
+        <Placeholder.Box animate="fade" radius={8} width={114} height={16} />
+        <Placeholder.Box animate="fade" radius={16} width={42} height={20} />
+      </VStack>
     }
   />
 );

package/src/components/modules/ModuleCheckout.tsx

@@ -14,7 +14,7 @@ import {
 } from "../../core";
 import { ButtonLink } from "../buttons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
-import { HSpacer, VSpacer } from "../spacer";
+import { HStack, VStack } from "../stack";
 import { H6, LabelSmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
@@ -42,33 +42,32 @@ export type ModuleCheckoutProps = LoadingProps | BaseProps;
 export const ModuleCheckout = (props: ModuleCheckoutProps) => {
   const theme = useIOTheme();
 
+  const imageMargin: IOSpacingScale = 12;
+
   if (props.isLoading) {
     return <ModuleCheckoutSkeleton />;
   }
 
   const { paymentLogo, image, title, subtitle, ctaText, onPress } = props;
 
-  const imageComponent = (
-    <>
-      {paymentLogo && (
-        <View style={styles.imageWrapper}>
-          <LogoPayment name={paymentLogo} />
-        </View>
-      )}
-      {image && (
-        <Image
-          source={image}
-          style={[styles.imageWrapper, styles.image]}
-          accessibilityIgnoresInvertColors={true}
-        />
-      )}
-    </>
+  const paymentLogoComponent = paymentLogo && (
+    <LogoPayment name={paymentLogo} />
+  );
+
+  const imageComponent = image && (
+    <Image
+      source={image}
+      style={styles.image}
+      accessibilityIgnoresInvertColors={true}
+    />
   );
 
   const ModuleBaseContent = () => (
-    <>
-      {imageComponent}
-      <View style={styles.content}>
+    <HStack space={imageMargin} style={{ alignItems: "center", flexShrink: 1 }}>
+      {/* Graphical elements */}
+      {paymentLogoComponent ?? imageComponent}
+
+      <View style={{ flexGrow: 1, flexShrink: 1 }}>
         <H6 color={theme["textBody-default"]}>{title}</H6>
         {subtitle && (
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
@@ -76,20 +75,21 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
           </LabelSmall>
         )}
       </View>
-    </>
+    </HStack>
   );
 
   return ctaText ? (
     <PressableModuleBase onPress={onPress}>
-      <ModuleBaseContent />
-      <HSpacer size={4} />
-      <View
-        pointerEvents="none"
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
-      >
-        <ButtonLink label={ctaText} onPress={() => null} />
-      </View>
+      <HStack space={4} style={{ alignItems: "center" }}>
+        <ModuleBaseContent />
+        <View
+          pointerEvents="none"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
+          <ButtonLink label={ctaText} onPress={() => null} />
+        </View>
+      </HStack>
     </PressableModuleBase>
   ) : (
     <ModuleStatic>
@@ -101,16 +101,13 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
 const ModuleCheckoutSkeleton = () => (
   <ModuleStatic
     startBlock={
-      <React.Fragment>
-        {/* Rewrite it using HStack and VStack */}
+      <HStack space={8} style={{ alignItems: "center" }}>
         <Placeholder.Box animate="fade" radius={8} height={24} width={24} />
-        <HSpacer size={8} />
-        <View>
+        <VStack space={8}>
           <Placeholder.Box animate="fade" radius={8} height={20} width={170} />
-          <VSpacer size={8} />
-          <Placeholder.Box animate="fade" radius={8} height={16} width={116} />
-        </View>
-      </React.Fragment>
+          <Placeholder.Box animate="fade" radius={8} height={16} width={110} />
+        </VStack>
+      </HStack>
     }
     endBlock={
       <Placeholder.Box animate="fade" width={64} height={16} radius={8} />
@@ -118,19 +115,10 @@ const ModuleCheckoutSkeleton = () => (
   />
 );
 
-const imageMarginRight: IOSpacingScale = 12;
-
 const styles = StyleSheet.create({
-  imageWrapper: {
-    marginRight: imageMarginRight
-  },
   image: {
     width: IOSelectionListItemVisualParams.iconSize,
     height: IOSelectionListItemVisualParams.iconSize,
     resizeMode: "contain"
-  },
-  content: {
-    flexGrow: 1,
-    flexShrink: 1
   }
 });

package/src/components/modules/ModuleCredential.tsx

@@ -10,6 +10,7 @@ import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
+  IOSpacer,
   IOStyles,
   IOVisualCostants,
   useIOTheme
@@ -18,6 +19,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
+import { HStack } from "../stack/Stack";
 import { LabelSmallAlt } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
@@ -62,28 +64,40 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
     ...pressableProps
   } = props;
 
+  const iconComponent = icon && (
+    <Icon
+      name={icon}
+      size={IOSelectionListItemVisualParams.iconSize}
+      color="grey-300"
+    />
+  );
+
+  const imageComponent = image && (
+    <Image
+      source={image}
+      style={styles.image}
+      accessibilityIgnoresInvertColors={true}
+    />
+  );
+
   const ModuleContent = () => (
-    <>
-      {icon ? (
-        <View style={styles.icon}>
-          <Icon name={icon} size={24} color="grey-300" />
-        </View>
-      ) : image ? (
-        <Image
-          source={image}
-          style={styles.image}
-          accessibilityIgnoresInvertColors={true}
-        />
-      ) : null}
-      <View style={styles.label}>
+    <HStack space={8} style={{ alignItems: "center" }}>
+      <HStack
+        space={IOVisualCostants.iconMargin as IOSpacer}
+        style={{ flexGrow: 1, flexShrink: 1, alignItems: "center" }}
+      >
+        {/* Graphical assets */}
+        {iconComponent ?? imageComponent}
+
         <LabelSmallAlt
           color={theme["interactiveElem-default"]}
           numberOfLines={2}
           lineBreakMode="middle"
+          style={{ flexShrink: 1 }}
         >
           {label}
         </LabelSmallAlt>
-      </View>
+      </HStack>
       <View style={IOStyles.row}>
         {badge ? (
           <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
@@ -102,7 +116,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
           />
         ) : null}
       </View>
-    </>
+    </HStack>
   );
 
   return onPress ? (
@@ -119,18 +133,13 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
 const ModuleCredentialSkeleton = () => (
   <ModuleStatic
     startBlock={
-      <>
-        {/* Rewrite it using HStack and VStack, when 0.72 will be used in the main app:
-            <HStack alignItems="center" space={IOVisualCostants.iconMargin as IOSpacer}>
-              <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
-              <Placeholder.Box animate="fade" width={96} height={16} radius={8} />
-            </HStack>
-      */}
-        <View style={{ marginRight: IOVisualCostants.iconMargin }}>
-          <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
-        </View>
+      <HStack
+        style={{ alignItems: "center" }}
+        space={IOVisualCostants.iconMargin as IOSpacer}
+      >
+        <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
         <Placeholder.Box animate="fade" width={96} height={16} radius={8} />
-      </>
+      </HStack>
     }
     endBlock={
       <Placeholder.Box animate="fade" width={64} height={24} radius={16} />
@@ -142,13 +151,8 @@ const styles = StyleSheet.create({
   image: {
     width: IOSelectionListItemVisualParams.iconSize,
     height: IOSelectionListItemVisualParams.iconSize,
-    marginRight: IOVisualCostants.iconMargin,
     resizeMode: "contain"
-  },
-  icon: {
-    marginRight: IOVisualCostants.iconMargin
-  },
-  label: { flexGrow: 1, flexShrink: 1, paddingRight: 8 }
+  }
 });
 
 export { ModuleCredential };