@pagopa/io-app-design-system 6.0.0 → 6.0.4

package/src/components/logos/svg/LogoPaymentExtSatispay.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentExtUnionPay.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentExtVPay.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentExtVisa.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentExtVisaElectron.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentJCB.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentMaestro.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentMastercard.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentMyBank.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentPagoBancomat.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentPayPal.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentPostepay.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path, LinearGradient, Stop, Defs } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentSatispay.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path, Rect } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentUnionPay.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentVPay.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/logos/svg/LogoPaymentVisa.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Svg, Rect, Path } from "react-native-svg";
 import { SVGLogoProps } from "../types";
 

package/src/components/modules/ModuleAttachment.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { GestureResponderEvent, PressableProps } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOListItemVisualParams } from "../../core";
@@ -39,24 +39,6 @@ const ModuleAttachmentContent = ({
 >) => {
   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 (
     <HStack space={8} style={{ alignItems: "center" }}>
       <VStack
@@ -72,7 +54,17 @@ const ModuleAttachmentContent = ({
         </Body>
         <Badge text={format.toUpperCase()} variant="default" />
       </VStack>
-      <IconOrActivityIndicatorComponent />
+      {isFetching ? (
+        <LoadingSpinner
+          testID={testID ? `${testID}_activityIndicator` : undefined}
+        />
+      ) : (
+        <Icon
+          name="chevronRightListItem"
+          color={theme["interactiveElem-default"]}
+          size={IOListItemVisualParams.chevronSize}
+        />
+      )}
     </HStack>
   );
 };

package/src/components/modules/ModuleCheckout.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
   Image,
   ImageSourcePropType,
@@ -7,7 +6,7 @@ import {
   View
 } from "react-native";
 import { useIOTheme } from "../../context";
-import { IOSelectionListItemVisualParams, IOSpacingScale } from "../../core";
+import { IOSelectionListItemVisualParams, IOSpacer } from "../../core";
 import { IOButton } from "../buttons";
 import { HStack, VStack } from "../layout";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
@@ -37,37 +36,34 @@ type BaseProps = {
 
 export type ModuleCheckoutProps = LoadingProps | BaseProps;
 
-export const ModuleCheckout = (props: ModuleCheckoutProps) => {
-  const theme = useIOTheme();
-
-  const imageMargin: IOSpacingScale = 12;
-
-  if (props.isLoading) {
-    return (
-      <ModuleCheckoutSkeleton
-        loadingAccessibilityLabel={props.loadingAccessibilityLabel}
-      />
-    );
-  }
-
-  const { paymentLogo, image, title, subtitle, ctaText, onPress } = props;
-
-  const paymentLogoComponent = paymentLogo && (
-    <LogoPayment name={paymentLogo} />
-  );
+const IMAGE_MARGIN: IOSpacer = 12;
 
-  const imageComponent = image && (
-    <Image
-      source={image}
-      style={styles.image}
-      accessibilityIgnoresInvertColors={true}
-    />
-  );
+const ModuleBaseContent = ({
+  paymentLogo,
+  image,
+  title,
+  subtitle
+}: Pick<BaseProps, "paymentLogo" | "title" | "subtitle"> &
+  Pick<ImageProps, "image">) => {
+  const theme = useIOTheme();
 
-  const ModuleBaseContent = () => (
-    <HStack space={imageMargin} style={{ alignItems: "center", flexShrink: 1 }}>
+  return (
+    <HStack
+      space={IMAGE_MARGIN}
+      style={{ alignItems: "center", flexShrink: 1 }}
+    >
       {/* Graphical elements */}
-      {paymentLogoComponent ?? imageComponent}
+      {paymentLogo ? (
+        <LogoPayment name={paymentLogo} />
+      ) : (
+        image && (
+          <Image
+            source={image}
+            style={styles.image}
+            accessibilityIgnoresInvertColors={true}
+          />
+        )
+      )}
 
       <View style={{ flexGrow: 1, flexShrink: 1 }}>
         <H6 color={theme["textBody-default"]}>{title}</H6>
@@ -79,6 +75,18 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
       </View>
     </HStack>
   );
+};
+
+export const ModuleCheckout = (props: ModuleCheckoutProps) => {
+  if (props.isLoading) {
+    return (
+      <ModuleCheckoutSkeleton
+        loadingAccessibilityLabel={props.loadingAccessibilityLabel}
+      />
+    );
+  }
+
+  const { paymentLogo, image, title, subtitle, ctaText, onPress } = props;
 
   return ctaText ? (
     <PressableModuleBase
@@ -88,7 +96,12 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
       }
     >
       <HStack space={4} style={{ alignItems: "center" }}>
-        <ModuleBaseContent />
+        <ModuleBaseContent
+          title={title}
+          subtitle={subtitle}
+          paymentLogo={paymentLogo}
+          image={image}
+        />
         <View
           pointerEvents="none"
           accessibilityElementsHidden
@@ -100,7 +113,12 @@ export const ModuleCheckout = (props: ModuleCheckoutProps) => {
     </PressableModuleBase>
   ) : (
     <ModuleStatic>
-      <ModuleBaseContent />
+      <ModuleBaseContent
+        title={title}
+        subtitle={subtitle}
+        paymentLogo={paymentLogo}
+        image={image}
+      />
     </ModuleStatic>
   );
 };

package/src/components/modules/ModuleCredential.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { ReactNode, useMemo } from "react";
 import {
   Image,
   ImageSourcePropType,
@@ -29,7 +29,8 @@ import {
 
 type ImageProps =
   | { icon: IOIcons; image?: never }
-  | { icon?: never; image: ImageURISource | ImageSourcePropType };
+  | { icon?: never; image: ImageURISource | ImageSourcePropType }
+  | { icon?: never; image?: never };
 
 type LoadingModuleProps = {
   isLoading: true;
@@ -57,6 +58,57 @@ const ModuleCredential = (
     <ModuleCredentialContent {...props} />
   );
 
+const ModuleContent = ({
+  icon,
+  image,
+  label,
+  endComponent
+}: Pick<BaseModuleProps, "label"> &
+  Pick<ImageProps, "icon" | "image"> & {
+    endComponent: ReactNode;
+  }) => {
+  const theme = useIOTheme();
+  const { hugeFontEnabled } = useIOFontDynamicScale();
+
+  return (
+    <HStack space={8} style={{ alignItems: "center" }}>
+      <HStack
+        space={IOVisualCostants.iconMargin as IOSpacer}
+        style={{ flexGrow: 1, flexShrink: 1, alignItems: "center" }}
+      >
+        {/* Graphical assets */}
+        {icon && !hugeFontEnabled ? (
+          <Icon
+            allowFontScaling
+            name={icon}
+            size={IOSelectionListItemVisualParams.iconSize}
+            color={theme["icon-decorative"]}
+          />
+        ) : (
+          image && (
+            <Image
+              source={image}
+              style={styles.image}
+              accessibilityIgnoresInvertColors={true}
+            />
+          )
+        )}
+
+        <BodySmall
+          color={theme["interactiveElem-default"]}
+          weight="Semibold"
+          numberOfLines={2}
+          lineBreakMode="middle"
+          style={{ flexShrink: 1 }}
+        >
+          {label}
+        </BodySmall>
+      </HStack>
+      {endComponent}
+    </HStack>
+  );
+};
+
 const ModuleCredentialContent = ({
   testID,
   icon,
@@ -68,24 +120,6 @@ const ModuleCredentialContent = ({
   ...pressableProps
 }: WithTestID<ModuleCredentialProps>) => {
   const theme = useIOTheme();
-  const { hugeFontEnabled } = useIOFontDynamicScale();
-
-  const iconComponent = icon && !hugeFontEnabled && (
-    <Icon
-      allowFontScaling
-      name={icon}
-      size={IOSelectionListItemVisualParams.iconSize}
-      color={theme["icon-decorative"]}
-    />
-  );
-
-  const imageComponent = image && (
-    <Image
-      source={image}
-      style={styles.image}
-      accessibilityIgnoresInvertColors={true}
-    />
-  );
 
   const endComponent = useMemo(() => {
     const activityIndicatorTestID = testID
@@ -115,36 +149,23 @@ const ModuleCredentialContent = ({
     ) : null;
   }, [testID, theme, isFetching, badge, onPress]);
 
-  const ModuleContent = () => (
-    <HStack space={8} style={{ alignItems: "center" }}>
-      <HStack
-        space={IOVisualCostants.iconMargin as IOSpacer}
-        style={{ flexGrow: 1, flexShrink: 1, alignItems: "center" }}
-      >
-        {/* Graphical assets */}
-        {iconComponent ?? imageComponent}
-
-        <BodySmall
-          color={theme["interactiveElem-default"]}
-          weight="Semibold"
-          numberOfLines={2}
-          lineBreakMode="middle"
-          style={{ flexShrink: 1 }}
-        >
-          {label}
-        </BodySmall>
-      </HStack>
-      {endComponent}
-    </HStack>
-  );
-
   return onPress ? (
     <PressableModuleBase {...pressableProps} testID={testID} onPress={onPress}>
-      <ModuleContent />
+      <ModuleContent
+        icon={icon}
+        image={image}
+        label={label}
+        endComponent={endComponent}
+      />
     </PressableModuleBase>
   ) : (
     <ModuleStatic>
-      <ModuleContent />
+      <ModuleContent
+        icon={icon}
+        image={image}
+        label={label}
+        endComponent={endComponent}
+      />
     </ModuleStatic>
   );
 };

package/src/components/modules/ModuleIDP.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Image, ImageSourcePropType, StyleSheet } from "react-native";
 import { useIONewTypeface, useIOThemeContext, useIOTheme } from "../../context";
 import { IOListItemLogoMargin } from "../../core";
@@ -84,5 +83,3 @@ export const ModuleIDP = ({
     </PressableModuleBase>
   );
 };
-
-export default ModuleIDP;

package/src/components/modules/ModuleNavigation.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Image,
   ImageSourcePropType,

package/src/components/modules/ModuleNavigationAlt.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { isValidElement, ReactElement } from "react";
 import {
   Image,
   ImageSourcePropType,
@@ -36,10 +36,7 @@ type ImageProps =
   | { icon: IOIcons; image?: never }
   | {
       icon?: never;
-      image:
-        | ImageURISource
-        | ImageSourcePropType
-        | React.ReactElement<SvgProps>;
+      image: ImageURISource | ImageSourcePropType | ReactElement<SvgProps>;
     };
 
 type BaseProps = {
@@ -94,7 +91,7 @@ export const ModuleNavigationAlt = (
       return null;
     }
 
-    if (React.isValidElement(image)) {
+    if (isValidElement(image)) {
       return image;
     } else {
       return (

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOListItemVisualParams, IOSpacer } from "../../core";
@@ -56,6 +55,42 @@ const styles = StyleSheet.create({
   }
 });
 
+const AmountOrBadgeComponent = ({
+  status,
+  amount,
+  amountAccessibilityLabel,
+  badgeText
+}: {
+  status: PaymentNoticeStatus;
+  amount: string | undefined;
+  amountAccessibilityLabel: string | undefined;
+  badgeText: string;
+}) => {
+  const theme = useIOTheme();
+
+  switch (status) {
+    case "default":
+      return (
+        <H6
+          accessibilityLabel={amountAccessibilityLabel}
+          color={theme["interactiveElem-default"]}
+          numberOfLines={1}
+        >
+          {amount}
+        </H6>
+      );
+    case "paid":
+      return <Badge variant="success" text={badgeText} />;
+    case "error":
+      return <Badge variant="error" text={badgeText} />;
+    case "expired":
+    case "revoked":
+    case "canceled":
+    case "in-progress":
+      return <Badge variant="default" text={badgeText} />;
+  }
+};
+
 const ModulePaymentNoticeContent = ({
   title,
   subtitle,
@@ -64,33 +99,6 @@ const ModulePaymentNoticeContent = ({
 }: Omit<ModulePaymentNoticeProps, "isLoading" | "onPress" | "testID">) => {
   const theme = useIOTheme();
 
-  const AmountOrBadgeComponent = () => {
-    switch (status) {
-      case "default":
-        return (
-          <H6
-            accessibilityLabel={amountAccessibilityLabel}
-            color={theme["interactiveElem-default"]}
-            numberOfLines={1}
-          >
-            {amount}
-          </H6>
-        );
-      case "paid":
-        return <Badge variant="success" text={badgeText} />;
-      case "error":
-        return <Badge variant="error" text={badgeText} />;
-      case "expired":
-        return <Badge variant="default" text={badgeText} />;
-      case "revoked":
-        return <Badge variant="default" text={badgeText} />;
-      case "canceled":
-        return <Badge variant="default" text={badgeText} />;
-      case "in-progress":
-        return <Badge variant="default" text={badgeText} />;
-    }
-  };
-
   return (
     <HStack space={IOListItemVisualParams.iconMargin as IOSpacer}>
       <View style={{ flexGrow: 1, flexShrink: 1 }}>
@@ -114,7 +122,12 @@ const ModulePaymentNoticeContent = ({
         )}
       </View>
       <View style={styles.endBlock}>
-        <AmountOrBadgeComponent />
+        <AmountOrBadgeComponent
+          status={status}
+          amount={amount}
+          amountAccessibilityLabel={amountAccessibilityLabel}
+          badgeText={badgeText}
+        />
         <Icon
           name="chevronRightListItem"
           color={theme["interactiveElem-default"]}

package/src/components/modules/ModuleStatic.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { ReactNode } from "react";
 import { PressableProps, View, ViewProps } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOColors, IOModuleStyles } from "../../core";
@@ -11,8 +11,8 @@ type ModuleStaticProps = Pick<
   (ModuleStaticSingleBlockProps | ModuleStaticMultipleBlockProps);
 
 type ModuleStaticMultipleBlockProps = {
-  startBlock: React.ReactNode;
-  endBlock?: React.ReactNode;
+  startBlock: ReactNode;
+  endBlock?: ReactNode;
   children?: never;
   disabled?: PressableProps["disabled"];
 };
@@ -20,7 +20,7 @@ type ModuleStaticMultipleBlockProps = {
 type ModuleStaticSingleBlockProps = {
   startBlock?: never;
   endBlock?: never;
-  children: React.ReactNode;
+  children: ReactNode;
   disabled?: PressableProps["disabled"];
 };
 

package/src/components/modules/ModuleSummary.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { View } from "react-native";
 import { useIOTheme } from "../../context";
 import { IOIcons, Icon } from "../icons";

package/src/components/modules/PressableModuleBase.tsx

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { PropsWithChildren, useCallback } from "react";
+import { ComponentProps, PropsWithChildren, useCallback } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, { useReducedMotion } from "react-native-reanimated";
@@ -12,7 +11,7 @@ export type PressableModuleBaseProps = WithTestID<
   {
     withLooseSpacing?: boolean;
   } & Pick<
-    React.ComponentProps<typeof Pressable>,
+    ComponentProps<typeof Pressable>,
     "onPress" | "accessibilityLabel" | "accessibilityHint"
   >
 >;

package/src/components/modules/__test__/ModuleNavigationAlt.test.tsx

@@ -1,6 +1,6 @@
 // __tests__/ModuleNavigationAlt.test.tsx
 import { render } from "@testing-library/react-native";
-import React from "react";
+
 import { Alert } from "react-native";
 import { renderWithExperimentalEnabledContextProvider } from "../../../utils/testing";
 import { ModuleNavigationAlt } from "../ModuleNavigationAlt";