@pagopa/io-app-design-system 1.38.0 → 1.38.2

package/src/components/badge/Badge.tsx

@@ -1,11 +1,12 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import {
   IOBadgeHSpacing,
   IOBadgeRadius,
   IOBadgeVSpacing,
   IOColors,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
@@ -31,90 +32,11 @@ type SolidVariantProps = {
   foreground: IOColors;
 };
 
-const mapVariants: Record<NonNullable<Badge["variant"]>, SolidVariantProps> = {
-  default: {
-    foreground: "grey-700",
-    background: "grey-50"
-  },
-  info: {
-    foreground: "info-850",
-    background: "info-100"
-  },
-  warning: {
-    foreground: "warning-850",
-    background: "warning-100"
-  },
-  success: {
-    foreground: "success-850",
-    background: "success-100"
-  },
-  error: {
-    foreground: "error-850",
-    background: "error-100"
-  },
-  purple: {
-    foreground: "hanPurple-850",
-    background: "hanPurple-100"
-  },
-  lightBlue: {
-    foreground: "blueIO-850",
-    background: "blueIO-50"
-  },
-  blue: {
-    foreground: "white",
-    background: "blueIO-500"
-  },
-  turquoise: {
-    foreground: "turquoise-850",
-    background: "turquoise-50"
-  },
-  contrast: {
-    foreground: "grey-700",
-    background: "white"
-  }
-};
-
 type OutlinedVariantProps = {
   foreground: IOColors;
   background?: never;
 };
 
-const mapOutlineVariants: Record<
-  NonNullable<Badge["variant"]>,
-  OutlinedVariantProps
-> = {
-  default: {
-    foreground: "grey-700"
-  },
-  info: {
-    foreground: "info-850"
-  },
-  warning: {
-    foreground: "warning-850"
-  },
-  success: {
-    foreground: "success-850"
-  },
-  error: {
-    foreground: "error-850"
-  },
-  purple: {
-    foreground: "hanPurple-850"
-  },
-  lightBlue: {
-    foreground: "blueIO-850"
-  },
-  blue: {
-    foreground: "blueIO-500"
-  },
-  turquoise: {
-    foreground: "turquoise-850"
-  },
-  contrast: {
-    foreground: "grey-850"
-  }
-};
-
 const styles = StyleSheet.create({
   badge: {
     flexDirection: "row",
@@ -151,10 +73,93 @@ const styles = StyleSheet.create({
  */
 export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
-  const { background, foreground } = useMemo(
-    () => (outline ? mapOutlineVariants : mapVariants)[variant],
-    [outline, variant]
-  );
+  const theme = useIOTheme();
+
+  const mapVariants: Record<
+    NonNullable<Badge["variant"]>,
+    SolidVariantProps
+  > = {
+    default: {
+      foreground: "grey-700",
+      background: "grey-50"
+    },
+    info: {
+      foreground: "info-850",
+      background: "info-100"
+    },
+    warning: {
+      foreground: "warning-850",
+      background: "warning-100"
+    },
+    success: {
+      foreground: "success-850",
+      background: "success-100"
+    },
+    error: {
+      foreground: "error-850",
+      background: "error-100"
+    },
+    purple: {
+      foreground: "hanPurple-850",
+      background: "hanPurple-100"
+    },
+    lightBlue: {
+      foreground: "blueIO-850",
+      background: "blueIO-50"
+    },
+    blue: {
+      foreground: "white",
+      background: theme["interactiveElem-default"]
+    },
+    turquoise: {
+      foreground: "turquoise-850",
+      background: "turquoise-50"
+    },
+    contrast: {
+      foreground: "grey-700",
+      background: "white"
+    }
+  };
+
+  const mapOutlineVariants: Record<
+    NonNullable<Badge["variant"]>,
+    OutlinedVariantProps
+  > = {
+    default: {
+      foreground: "grey-700"
+    },
+    info: {
+      foreground: "info-850"
+    },
+    warning: {
+      foreground: "warning-850"
+    },
+    success: {
+      foreground: "success-850"
+    },
+    error: {
+      foreground: "error-850"
+    },
+    purple: {
+      foreground: "hanPurple-850"
+    },
+    lightBlue: {
+      foreground: "blueIO-850"
+    },
+    blue: {
+      foreground: theme["interactiveElem-default"]
+    },
+    turquoise: {
+      foreground: "turquoise-850"
+    },
+    contrast: {
+      foreground: "grey-850"
+    }
+  };
+
+  const { background, foreground } = (
+    outline ? mapOutlineVariants : mapVariants
+  )[variant];
 
   return (
     <View

package/src/components/listitems/ListItemHeader.tsx

@@ -79,7 +79,7 @@ export const ListItemHeader = ({
           endElement !== undefined && endElement.type !== "badge"
         }
       >
-        <H6 role="heading" weight="Regular" color={theme["textBody-tertiary"]}>
+        <H6 role="heading" color={theme["textBody-tertiary"]}>
           {label}
         </H6>
       </View>

package/src/components/listitems/ListItemRadio.tsx

@@ -274,7 +274,10 @@ export const ListItemRadio = ({
               </H6>
             </View>
             <HSpacer size={8} />
-            <View pointerEvents="none">
+            <View
+              pointerEvents="none"
+              importantForAccessibility="no-hide-descendants"
+            >
               <AnimatedRadio checked={selected ?? toggleValue} />
             </View>
           </View>

package/src/components/modules/ModuleAttachment.tsx

@@ -27,7 +27,7 @@ import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { VSpacer } from "../spacer";
-import { LabelSmall } from "../typography";
+import { LabelSmallAlt } from "../typography";
 
 type PartialProps = WithTestID<{
   title: string;
@@ -88,7 +88,12 @@ const ModuleAttachmentContent = ({
       const activityIndicatorTestId = testID
         ? `${testID}_activityIndicator`
         : undefined;
-      return <LoadingSpinner testID={activityIndicatorTestId} />;
+      return (
+        <LoadingSpinner
+          testID={activityIndicatorTestId}
+          color={theme["interactiveElem-default"]}
+        />
+      );
     }
 
     return (
@@ -103,14 +108,12 @@ const ModuleAttachmentContent = ({
   return (
     <>
       <View style={styles.innerContent}>
-        <LabelSmall
+        <LabelSmallAlt
           numberOfLines={1}
-          weight="SemiBold"
-          font="ReadexPro"
-          color="blueIO-500"
+          color={theme["interactiveElem-default"]}
         >
           {title}
-        </LabelSmall>
+        </LabelSmallAlt>
         <VSpacer size={4} />
         <View style={{ width: 44 }}>
           <Badge text={format.toUpperCase()} variant="default" />

package/src/components/modules/ModuleCredential.tsx

@@ -68,7 +68,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
       {(icon || image) && iconComponent}
       <View style={{ flexGrow: 1, flexShrink: 1, paddingRight: 8 }}>
         <LabelSmallAlt
-          color="blueIO-500"
+          color={theme["interactiveElem-default"]}
           numberOfLines={2}
           lineBreakMode="middle"
         >

package/src/components/modules/ModuleNavigation.tsx

@@ -71,7 +71,7 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
       {(icon || image) && iconComponent}
       <View style={{ flexGrow: 1, flexShrink: 1, paddingRight: 8 }}>
         <LabelSmallAlt
-          color="blueIO-500"
+          color={theme["interactiveElem-default"]}
           numberOfLines={2}
           lineBreakMode="middle"
         >

package/src/components/modules/ModulePaymentNotice.tsx

@@ -70,6 +70,7 @@ const ModulePaymentNoticeContent = ({
           <H6
             accessibilityLabel={getAccessibleAmountText(paymentNoticeAmount)}
             color={isExperimental ? "blueIO-500" : "blue"}
+            numberOfLines={1}
           >
             {paymentNoticeAmount}
           </H6>
@@ -107,7 +108,7 @@ const ModulePaymentNoticeContent = ({
           </LabelSmall>
         )}
       </View>
-      <View style={[styles.rightSection, { flexShrink: 1 }]}>
+      <View style={styles.rightSection}>
         <AmountOrBadgeComponent />
         <Icon
           name="chevronRightListItem"

package/src/components/searchInput/SearchInput.tsx

@@ -45,7 +45,7 @@ const iconMargin: IOSpacingScale = 8;
 const iconColor: IOColors = "grey-700";
 const iconSize: IOIconSizeScale = 16;
 const iconCloseSize: IOIconSizeScale = 24;
-const inputFontSizePlaceholder: number = 12;
+const inputFontSizePlaceholder: number = 14;
 const cancelButtonMargin: IOSpacingScale = 16;
 const inputTransitionDuration: number = 250;
 const inputHeightIOS: number = 36;

package/src/components/typography/LabelSmall.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { IOColors, IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, FontType, TypographyProps } from "./common";
+import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type PartialAllowedColors = Extract<
   IOColors,
@@ -24,8 +24,7 @@ type AllowedFontSize = { fontSize?: FontSize };
 type LabelSmallProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 > &
-  AllowedFontSize &
-  FontType;
+  AllowedFontSize;
 
 const fontName: FontFamily = "TitilliumSansPro";
 const legacyFontName: FontFamily = "TitilliumWeb";