@pagopa/io-app-design-system 4.2.0 → 4.2.1

package/src/components/modules/ModuleCredential.tsx

@@ -3,15 +3,13 @@ import {
   Image,
   ImageSourcePropType,
   ImageURISource,
-  StyleSheet,
-  View
+  StyleSheet
 } from "react-native";
 import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacer,
-  IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
@@ -43,26 +41,28 @@ type BaseModuleProps = {
 };
 
 type ModuleCredentialProps =
-  | LoadingModuleProps
-  | (BaseModuleProps & ImageProps & PressableModuleBaseProps);
+  | BaseModuleProps & ImageProps & PressableModuleBaseProps;
 
-const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
-  const theme = useIOTheme();
-
-  if (props.isLoading) {
-    return <ModuleCredentialSkeleton />;
-  }
+const ModuleCredential = (
+  props: WithTestID<LoadingModuleProps | ModuleCredentialProps>
+) =>
+  props.isLoading ? (
+    <ModuleCredentialSkeleton />
+  ) : (
+    <ModuleCredentialContent {...props} />
+  );
 
-  const {
-    testID,
-    icon,
-    image,
-    label,
-    onPress,
-    badge,
-    isFetching,
-    ...pressableProps
-  } = props;
+const ModuleCredentialContent = ({
+  testID,
+  icon,
+  image,
+  label,
+  onPress,
+  badge,
+  isFetching,
+  ...pressableProps
+}: WithTestID<ModuleCredentialProps>) => {
+  const theme = useIOTheme();
 
   const iconComponent = icon && (
     <Icon
@@ -80,6 +80,33 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
     />
   );
 
+  const endComponent = React.useMemo(() => {
+    if (isFetching) {
+      return (
+        <LoadingSpinner
+          testID={testID ? `${testID}_activityIndicator` : undefined}
+          color={theme["interactiveElem-default"]}
+        />
+      );
+    }
+    if (badge) {
+      return (
+        <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
+      );
+    }
+    if (onPress) {
+      return (
+        <Icon
+          testID={testID ? `${testID}_icon` : undefined}
+          name="chevronRightListItem"
+          color={theme["interactiveElem-default"]}
+          size={IOListItemVisualParams.chevronSize}
+        />
+      );
+    }
+    return null;
+  }, [testID, theme, isFetching, badge, onPress]);
+
   const ModuleContent = () => (
     <HStack space={8} style={{ alignItems: "center" }}>
       <HStack
@@ -99,24 +126,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
           {label}
         </BodySmall>
       </HStack>
-      <View style={IOStyles.row}>
-        {badge ? (
-          <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
-        ) : null}
-        {isFetching ? (
-          <LoadingSpinner
-            testID={testID ? `${testID}_activityIndicator` : undefined}
-            color={theme["interactiveElem-default"]}
-          />
-        ) : onPress ? (
-          <Icon
-            testID={testID ? `${testID}_icon` : undefined}
-            name="chevronRightListItem"
-            color={theme["interactiveElem-default"]}
-            size={IOListItemVisualParams.chevronSize}
-          />
-        ) : null}
-      </View>
+      {endComponent}
     </HStack>
   );
 

package/src/components/stack/Stack.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { View, ViewStyle } from "react-native";
+import { View, ViewProps, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
 
 type AllowedStyleProps = Pick<
@@ -7,10 +7,16 @@ type AllowedStyleProps = Pick<
   "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width"
 >;
 
+type A11YRelatedProps = Pick<
+  ViewProps,
+  "pointerEvents" | "accessibilityElementsHidden" | "importantForAccessibility"
+>;
+
 type Stack = PropsWithChildren<{
   space?: IOSpacer;
   style?: AllowedStyleProps;
-}>;
+}> &
+  A11YRelatedProps;
 
 type BaseStack = Stack & {
   orientation: "vertical" | "horizontal";
@@ -25,9 +31,11 @@ const Stack = ({
   space,
   style,
   orientation = "vertical",
-  children
+  children,
+  ...props
 }: BaseStack) => (
   <View
+    {...props}
     style={{
       display: "flex",
       flexDirection: orientation === "horizontal" ? "row" : "column",

package/src/components/typography/H6.tsx

@@ -11,7 +11,7 @@ export const h6LineHeight = 24;
 const fontName: IOFontFamily = "Titillio";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontSize: IOFontSize = 18;
+const legacyFontSize: IOFontSize = 17;
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**

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

@@ -553,7 +553,7 @@ exports[`Test Typography Components H6 Snapshot 1`] = `
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
-        "fontSize": 18,
+        "fontSize": 17,
         "fontStyle": "normal",
         "fontWeight": "600",
         "lineHeight": 24,

package/src/utils/fonts.ts

@@ -36,7 +36,7 @@ export type IOFontFamily = keyof typeof fonts;
  * Font Sizes
  */
 const fontSizes = [12, 14, 16, 20, 22, 26, 28, 32] as const;
-const fontSizesLegacy = [18, 28, 31, 35] as const;
+const fontSizesLegacy = [17, 28, 31, 35] as const;
 const allFontSizes = [...new Set([...fontSizes, ...fontSizesLegacy])];
 export type IOFontSize = (typeof allFontSizes)[number];