@pagopa/io-app-design-system 1.13.1 → 1.15.0

package/src/components/banner/Banner.tsx

@@ -197,7 +197,14 @@ export const Banner = ({
 
   const renderMainBlock = () => (
     <>
-      <View style={[IOStyles.flex, IOStyles.selfCenter]}>
+      <View
+        style={[IOStyles.flex, IOStyles.selfCenter]}
+        accessible={true}
+        // A11y related props
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole={action !== undefined ? "button" : undefined}
+      >
         {title && (
           <>
             {/* Once we get 'gap' property, we can get rid of
@@ -250,11 +257,7 @@ export const Banner = ({
       onPress={onPress}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
-      // A11y related props
-      accessible={true}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityRole={"button"}
+      accessible={false}
     >
       <Animated.View
         style={[

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

@@ -2,7 +2,6 @@
 
 exports[`Test Banner Components Banner Snapshot 1`] = `
 <View
-  accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
@@ -20,7 +19,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       "text": undefined,
     }
   }
-  accessible={true}
+  accessible={false}
   collapsable={false}
   focusable={true}
   onBlur={[Function]}
@@ -58,6 +57,8 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
     }
   >
     <View
+      accessibilityRole="button"
+      accessible={true}
       style={
         [
           {

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

@@ -5,10 +5,10 @@ import { SVGIconProps } from "../Icon";
 const IconInstitution = ({ size, style, ...props }: SVGIconProps) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
     <Path
+      fill="currentColor"
       fillRule="evenodd"
+      d="M10.402 2.685a2.997 2.997 0 0 1 3.219 0l7.918 5.04a.999.999 0 0 1 .463.842l-.023 1.423H1.999l.022-1.423c0-.342.174-.66.463-.843l7.918-5.039ZM14.693.999A4.995 4.995 0 0 0 9.33 1L1.41 6.04A2.997 2.997 0 0 0 .024 8.566L0 10.989a1 1 0 0 0 .999 1h1v9.99h-1a.999.999 0 1 0 0 1.998H22.978a1 1 0 0 0 0-1.998h-.999v-9.99h1a1 1 0 0 0 .998-1L24 8.567a2.997 2.997 0 0 0-1.388-2.529L14.693 1ZM5.994 21.98H3.996v-9.99h1.998v9.99Zm9.99-9.99v9.99H7.993v-9.99h7.993Zm3.997 9.99h-1.998v-9.99h1.998v9.99ZM13.51 6.471a1.499 1.499 0 1 1-2.997 0 1.499 1.499 0 0 1 2.997 0Z"
       clipRule="evenodd"
-      d="M10.4023 2.68517c.9818-.62476 2.2365-.62476 3.2182 0l7.9187 5.03918a.999.999 0 0 1 .4627.84286l-.0229 1.42337H1.99809l.02288-1.42337a.99903.99903 0 0 1 .46269-.84286l7.91864-5.03918Zm4.291-1.68572c-1.6363-1.04126-3.7274-1.04126-5.36368 0L1.41093 6.03864C.54641 6.58878.02288 7.54248.02288 8.56721L0 10.9896c0 .5518.44729.9991.99905.9991h.99904v9.9905H.99905c-.55176 0-.99905.4473-.99905.999 0 .5518.44729.9991.99905.9991H22.9781c.5517 0 .999-.4473.999-.9991 0-.5517-.4473-.999-.999-.999h-.9991v-9.9905h.9991c.5517 0 .999-.4473.999-.9991L24 8.56721c0-1.02473-.5235-1.97843-1.388-2.52858L14.6933.99945ZM5.99428 21.9792H3.99619v-9.9905h1.99809v9.9905Zm9.99042-9.9905v9.9905H7.99237v-9.9905h7.99233Zm3.9962 9.9905h-1.9981v-9.9905h1.9981v9.9905ZM13.51 6.47125c0 .82764-.6709 1.49857-1.4986 1.49857-.8276 0-1.4985-.67093-1.4985-1.49857 0-.82764.6709-1.49858 1.4985-1.49858.8277 0 1.4986.67094 1.4986 1.49858Z"
-      fill="currentColor"
     />
   </Svg>
 );

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

@@ -1,8 +1,3 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M10.4023 2.68517c.9818-.62476 2.2365-.62476 3.2182 0l7.9187 5.03918a.999.999 0 0 1 .4627.84286l-.0229 1.42337H1.99809l.02288-1.42337a.99903.99903 0 0 1 .46269-.84286l7.91864-5.03918Zm4.291-1.68572c-1.6363-1.04126-3.7274-1.04126-5.36368 0L1.41093 6.03864C.54641 6.58878.02288 7.54248.02288 8.56721L0 10.9896c0 .5518.44729.9991.99905.9991h.99904v9.9905H.99905c-.55176 0-.99905.4473-.99905.999 0 .5518.44729.9991.99905.9991H22.9781c.5517 0 .999-.4473.999-.9991 0-.5517-.4473-.999-.999-.999h-.9991v-9.9905h.9991c.5517 0 .999-.4473.999-.9991L24 8.56721c0-1.02473-.5235-1.97843-1.388-2.52858L14.6933.99945ZM5.99428 21.9792H3.99619v-9.9905h1.99809v9.9905Zm9.99042-9.9905v9.9905H7.99237v-9.9905h7.99233Zm3.9962 9.9905h-1.9981v-9.9905h1.9981v9.9905ZM13.51 6.47125c0 .82764-.6709 1.49857-1.4986 1.49857-.8276 0-1.4985-.67093-1.4985-1.49857 0-.82764.6709-1.49858 1.4985-1.49858.8277 0 1.4986.67094 1.4986 1.49858Z"
-    fill="#0E0F13"
-  />
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4023 2.68497C11.3841 2.06021 12.6388 2.06021 13.6205 2.68497L21.5392 7.72414C21.8274 7.90752 22.0019 8.22542 22.0019 8.56699L21.979 9.99037H1.99809L2.02097 8.56699C2.02097 8.22542 2.19548 7.90752 2.48366 7.72414L10.4023 2.68497ZM14.6933 0.999255C13.057 -0.0420089 10.9659 -0.0420063 9.32962 0.999256L1.41093 6.03842C0.54641 6.58857 0.0228809 7.54227 0.0228809 8.56699L0 10.9894C0 11.5412 0.447288 11.9885 0.999047 11.9885H1.99809V21.979H0.999047C0.447288 21.979 0 22.4262 0 22.978C0 23.5298 0.447288 23.9771 0.999047 23.9771H2.99714H6.99333H16.9838H20.98H22.9781C23.5298 23.9771 23.9771 23.5298 23.9771 22.978C23.9771 22.4262 23.5298 21.979 22.9781 21.979H21.979V11.9885H22.9781C23.5298 11.9885 23.9771 11.5412 23.9771 10.9894L24 8.56699C24 7.54227 23.4765 6.58857 22.612 6.03842L14.6933 0.999255ZM5.99428 21.979H3.99619V11.9885H5.99428V21.979ZM15.9847 11.9885V21.979H7.99237V11.9885H15.9847ZM19.9809 21.979H17.9828V11.9885H19.9809V21.979ZM13.51 6.47104C13.51 7.29868 12.8391 7.96961 12.0114 7.96961C11.1838 7.96961 10.5129 7.29868 10.5129 6.47104C10.5129 5.6434 11.1838 4.97247 12.0114 4.97247C12.8391 4.97247 13.51 5.6434 13.51 6.47104Z" fill="#2B2E38"/>
 </svg>

package/src/components/listitems/ListItemNav.tsx

@@ -30,6 +30,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { Body, H6, LabelSmall } from "../typography";
+import { IOLogoPaymentType, LogoPayment } from "../logos";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyStyles = StyleSheet.create({
@@ -41,20 +42,27 @@ const legacyStyles = StyleSheet.create({
   }
 });
 
-export type ListItemNav = WithTestID<{
+type ListItemNavPartialProps = WithTestID<{
   value: string | React.ReactNode;
   description?: string | React.ReactNode;
   onPress: (event: GestureResponderEvent) => void;
-  icon?: IOIcons;
   // Accessibility
   accessibilityLabel: string;
 }>;
 
+export type ListItemNavGraphicProps =
+  | { icon?: never; paymentLogo: IOLogoPaymentType }
+  | { icon: IOIcons; paymentLogo?: never }
+  | { icon?: never; paymentLogo?: never };
+
+export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
+
 export const ListItemNav = ({
   value,
   description,
   onPress,
   icon,
+  paymentLogo,
   accessibilityLabel,
   testID
 }: ListItemNav) => {
@@ -94,9 +102,7 @@ export const ListItemNav = ({
     </>
   );
 
-  const navTextComponent = isExperimental
-    ? navText
-    : legacyNavText;
+  const navTextComponent = isExperimental ? navText : legacyNavText;
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -171,6 +177,14 @@ export const ListItemNav = ({
               />
             </View>
           )}
+          {paymentLogo && (
+            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+              <LogoPayment
+                name={paymentLogo}
+                size={IOListItemVisualParams.iconSize}
+              />
+            </View>
+          )}
           <View style={IOStyles.flex}>{navTextComponent}</View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,13 +1,10 @@
-import React from "react";
-import {
-  ActivityIndicator,
-  GestureResponderEvent,
-  Switch,
-  View
-} from "react-native";
+import React, { useMemo } from "react";
+import { GestureResponderEvent, Switch, View } from "react-native";
 import {
+  IOColors,
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { IOIcons, Icon } from "../icons";
@@ -16,6 +13,7 @@ import { H6, LabelSmall, LabelLink } from "../typography";
 import { NativeSwitch } from "../switch/NativeSwitch";
 import { Badge } from "../badge";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
+import { LoadingSpinner } from "../loadingSpinner";
 
 type PartialProps = {
   label: string;
@@ -52,15 +50,25 @@ export const ListItemSwitch = React.memo(
     description,
     icon,
     paymentLogo,
-    value,
+    value = false,
     disabled,
     action,
     isLoading,
     badge,
     onSwitchValueChange
   }: ListItemSwitchProps) => {
+    const { isExperimental } = useIOExperimentalDesign();
     const theme = useIOTheme();
 
+    // If we have a badge or we are loading, we can't render the switch
+    // this affects the accessibility tree and the rendering of the component
+    const canRenderSwitch = useMemo(
+      () => !isLoading && !badge,
+      [isLoading, badge]
+    );
+
+    const primaryColor: IOColors = isExperimental ? "blueIO-500" : "blue";
+
     return (
       <View
         testID="ListItemSwitch"
@@ -72,12 +80,14 @@ export const ListItemSwitch = React.memo(
         ]}
         pointerEvents={disabled ? "none" : "auto"}
         needsOffscreenAlphaCompositing={true}
+        accessible={false}
       >
         <View
           style={[
             IOSelectionListItemStyles.listItemInner,
             { alignItems: "center" }
           ]}
+          accessible={false}
         >
           <View
             style={{
@@ -85,6 +95,10 @@ export const ListItemSwitch = React.memo(
               flexDirection: "row",
               alignItems: "center"
             }}
+            accessible={!canRenderSwitch}
+            importantForAccessibility={
+              !canRenderSwitch ? "yes" : "no-hide-descendants"
+            }
           >
             {icon && (
               <View
@@ -114,7 +128,14 @@ export const ListItemSwitch = React.memo(
               </View>
             )}
 
-            <H6 color={"black"} style={{ flex: 1 }}>
+            <H6
+              color={"black"}
+              style={{ flex: 1 }}
+              accessible={!canRenderSwitch}
+              importantForAccessibility={
+                !canRenderSwitch ? "yes" : "no-hide-descendants"
+              }
+            >
               {label}
             </H6>
           </View>
@@ -133,9 +154,13 @@ export const ListItemSwitch = React.memo(
                 testID={badge.testID}
               />
             )}
-            {isLoading && <ActivityIndicator color={"black"} />}
-            {!isLoading && !badge && (
-              <NativeSwitch value={value} onValueChange={onSwitchValueChange} />
+            {isLoading && <LoadingSpinner size={24} color={primaryColor} />}
+            {canRenderSwitch && (
+              <NativeSwitch
+                value={value}
+                accessibilityLabel={label}
+                onValueChange={onSwitchValueChange}
+              />
             )}
           </View>
         </View>

package/src/components/listitems/ListItemTransaction.tsx

@@ -91,7 +91,7 @@ const MUNICIPALITY_LOGO_SIZE = 44;
 
 const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
   if (isImageUri(logoIcon)) {
-    return <Avatar logoUri={[logoIcon]} size="small" shape="circle" />;
+    return <Avatar logoUri={logoIcon} size="small" shape="circle" />;
   }
   if (React.isValidElement(logoIcon)) {
     return <>{logoIcon}</>;

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

@@ -146,7 +146,7 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
           "paddingHorizontal": 16,
           "paddingVertical": 16,
         },
-        undefined,
+        false,
         {
           "transform": [
             {

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -20,8 +20,8 @@ export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
 
 const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
   24: 3,
-  48: 6,
-  76: 9
+  48: 5,
+  76: 7
 };
 
 const startRotationAnimation = (
@@ -41,7 +41,7 @@ const startRotationAnimation = (
 export const LoadingSpinner = ({
   color = "blueIO-500",
   size = 24,
-  durationMs = 750,
+  durationMs = 850,
   accessibilityHint,
   accessibilityLabel,
   testID = "LoadingSpinnerTestID"

package/src/components/modules/ModuleIDP.tsx

@@ -1,57 +1,30 @@
 import * as React from "react";
-import { useCallback } from "react";
 import {
-  GestureResponderEvent,
   Image,
   ImageSourcePropType,
   Platform,
-  Pressable,
   StyleSheet,
   Text
 } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
 import {
   IOColors,
-  IOModuleIDPHSpacing,
-  IOModuleIDPRadius,
-  IOModuleIDPSavedVSpacing,
-  IOModuleIDPVSpacing,
   IOListItemLogoMargin,
-  IOScaleValues,
-  IOSpringValues,
   useIOExperimentalDesign
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { makeFontStyleObject } from "../../utils/fonts";
-import { WithTestID } from "../../utils/types";
+import {
+  PressableModuleBase,
+  PressableModuleBaseProps
+} from "./PressableModuleBase";
 
-type ModuleIDP = WithTestID<{
+interface ModuleIDP extends PressableModuleBaseProps {
   name: string;
   localLogo: ImageSourcePropType;
   logo: ImageSourcePropType;
-  saved?: boolean;
-  onPress: (event: GestureResponderEvent) => void;
-}>;
+}
 
 const styles = StyleSheet.create({
-  button: {
-    borderWidth: 1,
-    borderColor: IOColors["grey-100"],
-    borderRadius: IOModuleIDPRadius,
-    backgroundColor: IOColors.white,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingVertical: IOModuleIDPVSpacing,
-    paddingHorizontal: IOModuleIDPHSpacing
-  },
   idpName: {
     color: IOColors["grey-700"],
     fontSize: 12,
@@ -84,41 +57,11 @@ export const ModuleIDP = ({
   name,
   localLogo,
   logo,
-  saved,
+  withLooseSpacing = false,
   onPress,
   testID
 }: ModuleIDP) => {
-  const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
-  // 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 handlePressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
 
   // eslint-disable-next-line no-console
   const urlLogoIDP = localLogo
@@ -127,34 +70,21 @@ export const ModuleIDP = ({
         uri: `${logo}${androidIdpLogoForcedRefreshed()}`
       };
   return (
-    <Pressable
+    <PressableModuleBase
       onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onTouchEnd={handlePressOut}
-      accessible={true}
-      accessibilityRole={"button"}
-      accessibilityLabel={name}
       testID={testID}
+      withLooseSpacing={withLooseSpacing}
     >
-      <Animated.View
+      <Text
         style={[
-          styles.button,
-          saved && { paddingVertical: IOModuleIDPSavedVSpacing },
-          animatedStyle
+          styles.idpName,
+          isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
         ]}
       >
-        <Text
-          style={[
-            styles.idpName,
-            isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
-          ]}
-        >
-          {name}
-        </Text>
-        <Image source={urlLogoIDP} style={styles.idpLogo} />
-      </Animated.View>
-    </Pressable>
+        {name}
+      </Text>
+      <Image source={urlLogoIDP} style={styles.idpLogo} />
+    </PressableModuleBase>
   );
 };
 

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,19 +1,5 @@
 import * as React from "react";
-import { useCallback } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
+import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
 import { WithTestID } from "../../utils/types";
 import { getAccessibleAmountText } from "../../utils/accessibility";
@@ -21,14 +7,13 @@ import { H6, LabelSmall } from "../typography";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import {
-  IOColors,
   IOListItemVisualParams,
-  IOScaleValues,
-  IOSpringValues,
+  IOModuleStyles,
   IOStyles,
   useIOExperimentalDesign
 } from "../../core";
 import { VSpacer } from "../spacer";
+import { PressableModuleBase } from "./PressableModuleBase";
 
 export type PaymentNoticeStatus =
   | "default"
@@ -36,7 +21,8 @@ export type PaymentNoticeStatus =
   | "error"
   | "expired"
   | "revoked"
-  | "canceled";
+  | "canceled"
+  | "in-progress";
 
 export type ModulePaymentNoticeProps = WithTestID<
   {
@@ -60,19 +46,6 @@ export type ModulePaymentNoticeProps = WithTestID<
 >;
 
 const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    borderRadius: 8,
-    borderColor: IOColors.bluegreyLight,
-    backgroundColor: IOColors.white,
-    borderStyle: "solid",
-    borderWidth: 1
-  },
   rightSection: {
     marginLeft: IOListItemVisualParams.iconMargin,
     flexDirection: "row",
@@ -111,12 +84,14 @@ const ModulePaymentNoticeContent = ({
         return <Badge variant="default" text={badgeText} />;
       case "canceled":
         return <Badge variant="default" text={badgeText} />;
+      case "in-progress":
+        return <Badge variant="info" text={badgeText} />;
     }
   };
 
   return (
     <>
-      <View style={{ flexGrow: 1, flexShrink: 1 }}>
+      <View style={{ flexGrow: 1, flexShrink: 1, paddingEnd: 8 }}>
         {title && (
           <LabelSmall numberOfLines={1} weight="Regular" color="bluegrey">
             {title}
@@ -126,6 +101,7 @@ const ModulePaymentNoticeContent = ({
           weight="SemiBold"
           font={isExperimental ? "ReadexPro" : "TitilliumWeb"}
           color={isExperimental ? "blueIO-500" : "bluegrey"}
+          numberOfLines={2}
         >
           {subtitle}
         </LabelSmall>
@@ -161,62 +137,23 @@ export const ModulePaymentNotice = ({
   onPress,
   ...rest
 }: ModulePaymentNoticeProps) => {
-  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]);
-
   if (isLoading) {
     return <SkeletonComponent />;
   }
 
   return (
-    <Pressable
-      testID={testID}
+    <PressableModuleBase
       onPress={onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      accessible={true}
-      accessibilityRole={"button"}
       accessibilityLabel={accessibilityLabel}
+      testID={testID}
     >
-      <Animated.View style={[styles.button, animatedStyle]}>
-        <ModulePaymentNoticeContent {...rest} />
-      </Animated.View>
-    </Pressable>
+      <ModulePaymentNoticeContent {...rest} />
+    </PressableModuleBase>
   );
 };
 
 const SkeletonComponent = () => (
-  <View style={styles.button} accessible={false}>
+  <View style={IOModuleStyles.button} accessible={false}>
     <View style={IOStyles.flex}>
       <Placeholder.Box animate="fade" radius={8} width={179} height={16} />
       <VSpacer size={4} />

package/src/components/modules/PressableModuleBase.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { GestureResponderEvent, Pressable } from "react-native";
+import Animated from "react-native-reanimated";
+import { IOModuleIDPSavedVSpacing, IOModuleStyles } from "../../core";
+import { WithTestID } from "../../utils/types";
+import { useModuleSpringAnimation } from "./hooks/useModuleSpringAnimation";
+
+export type PressableModuleBaseProps = WithTestID<{
+  accessibilityLabel?: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  withLooseSpacing?: boolean;
+}>;
+
+export const PressableModuleBase = ({
+  onPress,
+  testID,
+  accessibilityLabel,
+  withLooseSpacing = false,
+  children
+}: React.PropsWithChildren<PressableModuleBaseProps>) => {
+  const { handlePressIn, handlePressOut, animatedStyle } =
+    useModuleSpringAnimation();
+  return (
+    <Pressable
+      onPress={onPress}
+      testID={testID}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onTouchEnd={handlePressOut}
+      accessibilityRole="button"
+    >
+      <Animated.View
+        style={[
+          IOModuleStyles.button,
+          withLooseSpacing && { paddingVertical: IOModuleIDPSavedVSpacing },
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </Pressable>
+  );
+};