@pagopa/io-app-design-system 2.0.0-1 → 2.0.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 };

package/src/components/modules/ModuleNavigation.tsx

@@ -10,13 +10,14 @@ import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
+  IOSpacer,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
-import { VSpacer } from "../spacer";
+import { HStack, VStack } from "../stack";
 import { Chip, LabelSmallAlt } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
@@ -52,33 +53,45 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
   const { icon, image, title, subtitle, onPress, badge, ...pressableProps } =
     props;
 
-  const iconComponent = (
-    <View style={{ marginRight: IOVisualCostants.iconMargin }}>
-      {icon && <Icon name={icon} size={24} color="grey-300" />}
-      {image && (
-        <Image
-          source={image}
-          style={styles.image}
-          accessibilityIgnoresInvertColors={true}
-        />
-      )}
-    </View>
+  const iconComponent = icon && (
+    <Icon
+      name={icon}
+      size={IOSelectionListItemVisualParams.iconSize}
+      color="grey-300"
+    />
+  );
+
+  const imageComponent = image && (
+    <Image
+      source={image}
+      style={styles.image}
+      accessibilityIgnoresInvertColors={true}
+    />
   );
 
   return (
     <PressableModuleBase {...pressableProps} onPress={onPress}>
-      {(icon || image) && iconComponent}
-      <View style={{ flexGrow: 1, flexShrink: 1, paddingRight: 8 }}>
-        <LabelSmallAlt
-          color={theme["interactiveElem-default"]}
-          numberOfLines={2}
-          lineBreakMode="middle"
+      <HStack space={8} style={{ alignItems: "center" }}>
+        <HStack
+          space={IOVisualCostants.iconMargin as IOSpacer}
+          style={{ alignItems: "center", flexGrow: 1, flexShrink: 1 }}
         >
-          {title}
-        </LabelSmallAlt>
-        {subtitle && <Chip color={theme["textBody-tertiary"]}>{subtitle}</Chip>}
-      </View>
-      <View>
+          {iconComponent ?? imageComponent}
+
+          <View style={{ flexShrink: 1 }}>
+            <LabelSmallAlt
+              color={theme["interactiveElem-default"]}
+              numberOfLines={2}
+              lineBreakMode="middle"
+              style={{ flexShrink: 1 }}
+            >
+              {title}
+            </LabelSmallAlt>
+            {subtitle && (
+              <Chip color={theme["textBody-tertiary"]}>{subtitle}</Chip>
+            )}
+          </View>
+        </HStack>
         {badge ? (
           <Badge {...badge} />
         ) : onPress ? (
@@ -88,7 +101,7 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
             size={IOListItemVisualParams.chevronSize}
           />
         ) : null}
-      </View>
+      </HStack>
     </PressableModuleBase>
   );
 };
@@ -96,16 +109,16 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
 const ModuleNavigationSkeleton = () => (
   <ModuleStatic
     startBlock={
-      <>
-        <View style={{ marginRight: IOVisualCostants.iconMargin }}>
-          <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
-        </View>
-        <View style={{ paddingRight: 8 }}>
+      <HStack
+        style={{ alignItems: "center" }}
+        space={IOVisualCostants.iconMargin as IOSpacer}
+      >
+        <Placeholder.Box animate="fade" width={24} height={24} radius={8} />
+        <VStack space={4}>
           <Placeholder.Box animate="fade" width={96} height={16} radius={8} />
-          <VSpacer size={4} />
           <Placeholder.Box animate="fade" width={160} height={12} radius={8} />
-        </View>
-      </>
+        </VStack>
+      </HStack>
     }
     endBlock={
       <Placeholder.Box animate="fade" width={64} height={24} radius={16} />

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,16 +1,12 @@
 import * as React from "react";
 import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
-import {
-  IOListItemVisualParams,
-  useIOExperimentalDesign,
-  useIOTheme
-} from "../../core";
+import { IOListItemVisualParams, IOSpacer, useIOTheme } from "../../core";
 import { getAccessibleAmountText } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
-import { VSpacer } from "../spacer";
+import { HStack, VStack } from "../stack";
 import { H6, LabelSmall, LabelSmallAlt } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
@@ -46,8 +42,7 @@ export type ModulePaymentNoticeProps = WithTestID<
 >;
 
 const styles = StyleSheet.create({
-  rightSection: {
-    marginLeft: IOListItemVisualParams.iconMargin,
+  endBlock: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-end"
@@ -62,7 +57,6 @@ const ModulePaymentNoticeContent = ({
   badgeText = ""
 }: Omit<ModulePaymentNoticeProps, "isLoading" | "onPress" | "testID">) => {
   const theme = useIOTheme();
-  const { isExperimental } = useIOExperimentalDesign();
 
   const AmountOrBadgeComponent = () => {
     switch (paymentNoticeStatus) {
@@ -70,7 +64,7 @@ const ModulePaymentNoticeContent = ({
         return (
           <H6
             accessibilityLabel={getAccessibleAmountText(paymentNoticeAmount)}
-            color={isExperimental ? "blueIO-500" : "blue"}
+            color={theme["interactiveElem-default"]}
             numberOfLines={1}
           >
             {paymentNoticeAmount}
@@ -92,8 +86,8 @@ const ModulePaymentNoticeContent = ({
   };
 
   return (
-    <>
-      <View style={{ flexGrow: 1, flexShrink: 1, paddingEnd: 8 }}>
+    <HStack space={IOListItemVisualParams.iconMargin as IOSpacer}>
+      <View style={{ flexGrow: 1, flexShrink: 1 }}>
         {title && (
           <LabelSmall
             numberOfLines={1}
@@ -112,15 +106,15 @@ const ModulePaymentNoticeContent = ({
           </LabelSmallAlt>
         )}
       </View>
-      <View style={styles.rightSection}>
+      <View style={styles.endBlock}>
         <AmountOrBadgeComponent />
         <Icon
           name="chevronRightListItem"
-          color={isExperimental ? "blueIO-500" : "blue"}
+          color={theme["interactiveElem-default"]}
           size={IOListItemVisualParams.chevronSize}
         />
       </View>
-    </>
+    </HStack>
   );
 };
 
@@ -161,17 +155,13 @@ export const ModulePaymentNotice = ({
 const ModulePaymentNoticeSkeleton = () => (
   <ModuleStatic
     startBlock={
-      <React.Fragment>
-        {/* Rewrite it using HStack and VStack */}
-        <View>
-          <Placeholder.Box animate="fade" radius={8} width={121} height={13} />
-          <VSpacer size={8} />
-          <Placeholder.Box animate="fade" radius={8} width={179} height={16} />
-        </View>
-      </React.Fragment>
+      <VStack space={4}>
+        <Placeholder.Box animate="fade" radius={8} width={120} height={12} />
+        <Placeholder.Box animate="fade" radius={8} width={180} height={16} />
+      </VStack>
     }
     endBlock={
-      <Placeholder.Box animate="fade" radius={16} width={62} height={24} />
+      <Placeholder.Box animate="fade" radius={16} width={64} height={24} />
     }
   />
 );

package/src/components/modules/ModuleStatic.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { PressableProps, View } from "react-native";
 import { IOColors, IOModuleStyles, useIOTheme } from "../../core";
+import { HStack } from "../stack";
 
 type ModuleStaticProps =
   | ModuleStaticSingleBlockProps
@@ -42,12 +43,14 @@ export const ModuleStatic = ({
       accessible={false}
     >
       {startBlock && (
-        <React.Fragment>
-          <View style={{ flexDirection: "row", alignItems: "center" }}>
+        <HStack space={8} style={{ alignItems: "center" }}>
+          <View
+            style={{ flexDirection: "row", alignItems: "center", flexGrow: 1 }}
+          >
             {startBlock}
           </View>
           {endBlock}
-        </React.Fragment>
+        </HStack>
       )}
 
       {children}

package/src/components/numberpad/NumberPad.tsx

@@ -1,10 +1,10 @@
-import React, { ComponentProps, Fragment, useCallback, useMemo } from "react";
+import React, { ComponentProps, useCallback, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
-import { BiometricsValidType, Optional } from "../../utils/types";
 import { IONumberPadButtonStyles, IOStyles } from "../../core";
-import { VSpacer } from "../spacer";
+import { BiometricsValidType, Optional } from "../../utils/types";
 import { IconButton } from "../buttons";
 import { IOIconSizeScale, IOIcons } from "../icons";
+import { VStack } from "../stack";
 import { NumberButton } from "./NumberButton";
 
 type BiometricAuthProps =
@@ -138,21 +138,23 @@ export const NumberPad = ({
   );
 
   // eslint-disable-next-line arrow-body-style
-  const numberPad = useMemo(() => {
-    return [
-      [1, 2, 3],
-      [4, 5, 6],
-      [7, 8, 9],
-      [biometricType, 0, "delete"]
-    ].map((row, i, self) => (
-      <Fragment key={i}>
-        <View style={[IOStyles.rowSpaceBetween, styles.numberPad]}>
-          {renderButtonsRow(row)}
-        </View>
-        {i < self.length - 1 && <VSpacer />}
-      </Fragment>
-    ));
-  }, [biometricType, renderButtonsRow]);
+  const numberPad = useMemo(
+    () => (
+      <VStack space={16}>
+        {[
+          [1, 2, 3],
+          [4, 5, 6],
+          [7, 8, 9],
+          [biometricType, 0, "delete"]
+        ].map((row, i) => (
+          <View key={i} style={[IOStyles.rowSpaceBetween, styles.numberPad]}>
+            {renderButtonsRow(row)}
+          </View>
+        ))}
+      </VStack>
+    ),
+    [biometricType, renderButtonsRow]
+  );
 
   return <View style={IOStyles.horizontalContentPadding}>{numberPad}</View>;
 };