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

package/src/components/alert/AlertEdgeToEdgeWrapper.tsx

@@ -0,0 +1,22 @@
+import React, { ComponentProps } from "react";
+import Animated, { LinearTransition } from "react-native-reanimated";
+import { WithTestID } from "../../utils/types";
+import { IOStyles } from "../../core";
+import { AlertEdgeToEdge } from "./AlertEdgeToEdge";
+
+type AlertEdgeToEdgeWrapperProps = React.PropsWithChildren<
+  WithTestID<{
+    alertProps?: ComponentProps<typeof AlertEdgeToEdge>;
+  }>
+>;
+export const AlertEdgeToEdgeWrapper = ({
+  children,
+  alertProps
+}: AlertEdgeToEdgeWrapperProps) => (
+  <>
+    {alertProps && <AlertEdgeToEdge {...alertProps} />}
+    <Animated.View layout={LinearTransition} style={IOStyles.flex}>
+      {children}
+    </Animated.View>
+  </>
+);

package/src/components/alert/index.tsx

@@ -1 +1,3 @@
 export * from "./Alert";
+export { type AlertEdgeToEdgeProps } from "./AlertEdgeToEdge";
+export * from "./AlertEdgeToEdgeWrapper";

package/src/components/badge/Badge.tsx

@@ -149,6 +149,7 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
 
   return (
     <View
+      accessible={true}
       testID={testID}
       style={[
         styles.badge,

package/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
 <View
+  accessible={true}
   style={
     [
       {
@@ -51,6 +52,7 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
 
 exports[`Test Badge Components Badge Snapshot 1`] = `
 <View
+  accessible={true}
   style={
     [
       {

package/src/components/codeInput/CodeInput.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOColors, IOStyles } from "../../core";
 import { triggerHaptic } from "../../functions";
-import { HSpacer } from "../spacer";
 import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
+import { HStack } from "../stack";
 
 type CodeInputProps = {
   value: string;
@@ -86,21 +86,13 @@ export const CodeInput = ({
 
   return (
     <Animated.View style={[IOStyles.row, styles.wrapper, animatedStyle]}>
-      {[...Array(length)].map((_, i, arr) => (
-        <React.Fragment key={i}>
-          {value[i] ? (
-            <>
-              <FilletDot color={fillColor} />
-              {i !== arr.length - 1 && <HSpacer size={DOT_SIZE} />}
-            </>
-          ) : (
-            <>
-              <EmptyDot />
-              {i !== arr.length - 1 && <HSpacer size={DOT_SIZE} />}
-            </>
-          )}
-        </React.Fragment>
-      ))}
+      <HStack space={DOT_SIZE}>
+        {[...Array(length)].map((_, i) => (
+          <React.Fragment key={i}>
+            {value[i] ? <FilletDot color={fillColor} /> : <EmptyDot />}
+          </React.Fragment>
+        ))}
+      </HStack>
     </Animated.View>
   );
 };

package/src/components/icons/Icon.tsx

@@ -172,6 +172,7 @@ import IconStarEmpty from "./svg/IconStarEmpty";
 import IconStarFilled from "./svg/IconStarFilled";
 import IconStarOff from "./svg/IconStarOff";
 import IconSuccess from "./svg/IconSuccess";
+import IconSwitchCard from "./svg/IconSwitchCard";
 import IconSwitchOff from "./svg/IconSwitchOff";
 import IconSystemAppsAndroid from "./svg/IconSystemAppsAndroid";
 import IconSystemBiometricRecognitionOS from "./svg/IconSystemBiometricRecognitionOS";
@@ -302,6 +303,7 @@ export const IOIcons = {
   heartFilled: IconHeartFilled,
   heartOff: IconHeartOff,
   switchOff: IconSwitchOff,
+  switchCard: IconSwitchCard,
   fingerprint: IconFingerprint,
   touch: IconTouch,
   device: IconDevice,

package/src/components/icons/svg/IconSwitchCard.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore (ignore Path unused component)
+import { Path, Svg } from "react-native-svg";
+import { SVGIconProps } from "../types";
+
+// The `generateNewIcons.js`s script uses this template to generate
+// the new `Icon…` component. Don't edit this file to avoid
+// adding breaking changes to the process.
+
+const IconSwitchCard = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.47364 6.80676C3.58714 5.35067 4.61099 4 6.1079 4H17.8904C19.3873 4 20.4112 5.35067 20.5247 6.80676H21.1C22.7027 6.80676 24 8.17682 24 9.86438C24 11.5542 22.7006 12.922 21.1 12.922H20.5352V15.924C20.5352 17.4783 19.4793 19 17.8904 19H6.1079C4.51903 19 3.46313 17.4783 3.46313 15.924V15.0689H5.36002V15.924C5.36002 16.6639 5.82216 17 6.1079 17H17.8904C18.1761 17 18.6383 16.6639 18.6383 15.924V12.922H13.3412V10.922H18.6383V7.07602C18.6383 6.33611 18.1761 6 17.8904 6H6.1079C5.82216 6 5.36002 6.33611 5.36002 7.07602V10.922H8.69395L7.53674 9.70924C7.16523 9.3199 7.16342 8.68673 7.53269 8.29503C7.90196 7.90333 8.50248 7.90142 8.87399 8.29076L11.7193 11.2727C12.0893 11.6604 12.0929 12.2903 11.7274 12.6826L8.9161 15.7007C8.54907 16.0947 7.94857 16.1004 7.57485 15.7135C7.20113 15.3265 7.19571 14.6933 7.56275 14.2993L8.84568 12.922H2.89999C1.29943 12.922 0 11.5542 0 9.86438C0 8.17682 1.29728 6.80676 2.89999 6.80676H3.47364ZM3.46313 8.80676H2.89999C2.34574 8.80676 1.89689 9.28051 1.89689 9.86438C1.89689 10.4488 2.34622 10.922 2.89999 10.922H3.46313V8.80676ZM20.5352 10.922H21.1C21.6538 10.922 22.1031 10.4488 22.1031 9.86438C22.1031 9.28051 21.6543 8.80676 21.1 8.80676H20.5352V10.922Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconSwitchCard;

package/src/components/icons/svg/originals/IconSwitchCard.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.47364 6.80676C3.58714 5.35067 4.61099 4 6.1079 4H17.8904C19.3873 4 20.4112 5.35067 20.5247 6.80676H21.1C22.7027 6.80676 24 8.17682 24 9.86438C24 11.5542 22.7006 12.922 21.1 12.922H20.5352V15.924C20.5352 17.4783 19.4793 19 17.8904 19H6.1079C4.51903 19 3.46313 17.4783 3.46313 15.924V15.0689H5.36002V15.924C5.36002 16.6639 5.82216 17 6.1079 17H17.8904C18.1761 17 18.6383 16.6639 18.6383 15.924V12.922H13.3412V10.922H18.6383V7.07602C18.6383 6.33611 18.1761 6 17.8904 6H6.1079C5.82216 6 5.36002 6.33611 5.36002 7.07602V10.922H8.69395L7.53674 9.70924C7.16523 9.3199 7.16342 8.68673 7.53269 8.29503C7.90196 7.90333 8.50248 7.90142 8.87399 8.29076L11.7193 11.2727C12.0893 11.6604 12.0929 12.2903 11.7274 12.6826L8.9161 15.7007C8.54907 16.0947 7.94857 16.1004 7.57485 15.7135C7.20113 15.3265 7.19571 14.6933 7.56275 14.2993L8.84568 12.922H2.89999C1.29943 12.922 0 11.5542 0 9.86438C0 8.17682 1.29728 6.80676 2.89999 6.80676H3.47364ZM3.46313 8.80676H2.89999C2.34574 8.80676 1.89689 9.28051 1.89689 9.86438C1.89689 10.4488 2.34622 10.922 2.89999 10.922H3.46313V8.80676ZM20.5352 10.922H21.1C21.6538 10.922 22.1031 10.4488 22.1031 9.86438C22.1031 9.28051 21.6543 8.80676 21.1 8.80676H20.5352V10.922Z" fill="#BBC2D6"/>
+</svg>

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>
     }
   />
 );