chore(Cross): [IOAPPX-435] Improve overall UI typography + Update io-app-design-system to 4.0.1

locales/en/index.yml

@@ -669,7 +669,7 @@ authentication:
   wizards:
     cie_id_wizard:
       title: Do you have the CieID app?
-      description: "If you have the CieID app on your device, enter the code you have set for the CieID app or use your face or fingerprint.\n\nTo enter the IO app without physically using the Electronic Identity Card,you must first enable Level 1 and Level 2 access in the CieID application."
+      description: "If you have the CieID app on your device, enter the code you have set for the CieID app or use your face or fingerprint.\n\nTo enter the IO app without physically using the Electronic Identity Card, you must first enable Level 1 and Level 2 access in the CieID application."
       actions:
         primary:
           label: Yes, log in with CieID

package.json

@@ -109,7 +109,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "3.1.0",
+    "@pagopa/io-app-design-system": "4.0.1",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",
     "@pagopa/io-react-native-crypto": "^0.3.0",

ts/components/AppVersion.tsx

@@ -5,7 +5,7 @@ import {
   StyleSheet,
   View
 } from "react-native";
-import { LabelSmall } from "@pagopa/io-app-design-system";
+import { BodySmall } from "@pagopa/io-app-design-system";
 import I18n from "../i18n";
 import { WithTestID } from "../types/WithTestID";
 import { getAppVersion } from "../utils/appVersion";
@@ -33,9 +33,9 @@ const AppVersion = ({ onPress, testID }: AppVersion) => {
       accessibilityLabel={appVersionText}
     >
       <View style={[styles.versionButton, IOStyles.row, IOStyles.alignCenter]}>
-        <LabelSmall numberOfLines={1} weight="Semibold" color="grey-650">
+        <BodySmall numberOfLines={1} weight="Semibold" color="grey-650">
           {appVersionText}
-        </LabelSmall>
+        </BodySmall>
       </View>
     </Pressable>
   );

ts/components/BonusCard/BonusCard.tsx

@@ -3,7 +3,7 @@ import {
   H2,
   HSpacer,
   IOColors,
-  LabelSmall,
+  BodySmall,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import React from "react";
@@ -72,12 +72,12 @@ const BonusCardContent = (props: BonusCard) => {
         {name}
       </H2>
       <VSpacer size={4} />
-      <LabelSmall
+      <BodySmall
         weight="Regular"
         style={{ textAlign: "center", marginHorizontal: 16 }}
       >
         {organizationName}
-      </LabelSmall>
+      </BodySmall>
       <VSpacer size={16} />
       <BonusCardStatus>{status}</BonusCardStatus>
       <VSpacer size={16} />

ts/components/BonusCard/__tests__/BonusCard.test.tsx

@@ -1,15 +1,15 @@
+import { LabelMini } from "@pagopa/io-app-design-system";
 import { render } from "@testing-library/react-native";
 import React from "react";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
-import { Chip } from "@pagopa/io-app-design-system";
+import I18n from "../../../i18n";
 import { applicationChangeState } from "../../../store/actions/application";
 import { appReducer } from "../../../store/reducers";
 import { GlobalState } from "../../../store/reducers/types";
+import { format } from "../../../utils/dates";
 import { BonusCard } from "../BonusCard";
 import { BonusCardCounter } from "../BonusCardCounter";
-import I18n from "../../../i18n";
-import { format } from "../../../utils/dates";
 
 jest.mock("react-native-safe-area-context", () => {
   const useSafeAreaInsets = () => ({ top: 0 });
@@ -60,11 +60,11 @@ describe("Test BonusCard", () => {
         name: T_NAME,
         organizationName: T_ORG_NAME,
         status: (
-          <Chip color="grey-650">
+          <LabelMini weight="Regular" color="grey-650">
             {I18n.t("bonusCard.validUntil", {
               endDate: format(T_END_DATE, "DD/MM/YY")
             })}
-          </Chip>
+          </LabelMini>
         ),
         counters: [T_COUNTER_WITH_PROGRESS, T_COUNTER]
       });

ts/components/IOMarkdown/renderRules.tsx

@@ -13,7 +13,6 @@ import {
   IOPictogramsBleed,
   IOStyles,
   IOToast,
-  Label,
   Nullable,
   VSpacer
 } from "@pagopa/io-app-design-system";
@@ -160,7 +159,7 @@ export const DEFAULT_RULES: IOMarkdownRenderRules = {
    */
   Strong(strong: TxtStrongNode, render: Renderer) {
     return (
-      <Text key={getTxtNodeKey(strong)} style={{ fontWeight: "800" }}>
+      <Text key={getTxtNodeKey(strong)} style={{ fontWeight: "600" }}>
         {strong.children.map(render)}
       </Text>
     );
@@ -186,9 +185,14 @@ export const DEFAULT_RULES: IOMarkdownRenderRules = {
     };
 
     return (
-      <Label asLink key={getTxtNodeKey(link)} onPress={handleOpenLink}>
+      <Body
+        weight="Semibold"
+        asLink
+        key={getTxtNodeKey(link)}
+        onPress={handleOpenLink}
+      >
         {link.children.map(render)}
-      </Label>
+      </Body>
     );
   },
   /**

ts/components/__tests__/__snapshots__/IOMarkdown.test.tsx.snap

@@ -78,7 +78,7 @@ exports[`IOMarkdown Should match snapshot 1`] = `
     <Text
       style={
         {
-          "fontWeight": "800",
+          "fontWeight": "600",
         }
       }
     >
@@ -694,6 +694,7 @@ exports[`IOMarkdown Should match snapshot 1`] = `
     <Text
       accessibilityRole="link"
       allowFontScaling={false}
+      dynamicTypeRamp="body"
       maxFontSizeMultiplier={1.25}
       onPress={[Function]}
       style={

ts/components/__tests__/__snapshots__/LoadingSpinnerOverlay.test.tsx.snap

@@ -349,7 +349,7 @@ exports[`LoadingSpinnerOverlay Should match all-properties and loading snapshot
                     "fontFamily": "Titillium Sans Pro",
                     "fontSize": 16,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
+                    "fontWeight": "600",
                     "lineHeight": undefined,
                   },
                   [

ts/components/debug/DebugPrettyPrint.tsx

@@ -3,12 +3,12 @@ WARNING: This component is not referenced anywhere, but is used
 for development purposes. Please, Don't REMOVE it, thank you!
 */
 import {
+  BodySmall,
   HStack,
   IOColors,
+  IOText,
   IconButton,
-  LabelSmall,
-  useIOToast,
-  useTypographyFactory
+  useIOToast
 } from "@pagopa/io-app-design-system";
 import React from "react";
 import { StyleSheet, View } from "react-native";
@@ -53,9 +53,15 @@ export const DebugPrettyPrint = withDebugEnabled(
 
       return (
         <View style={styles.content} pointerEvents="box-only">
-          <CustomBodyMonospace>
+          <IOText
+            font="DMMono"
+            size={12}
+            lineHeight={18}
+            color="bluegrey"
+            weight="Medium"
+          >
             {JSON.stringify(truncateObjectStrings(data), null, 2)}
-          </CustomBodyMonospace>
+          </IOText>
         </View>
       );
     }, [data, expandable, expanded]);
@@ -82,9 +88,9 @@ export const DebugPrettyPrint = withDebugEnabled(
     return (
       <View testID="DebugPrettyPrintTestID" style={styles.container}>
         <View style={styles.header}>
-          <LabelSmall weight="Bold" color="white">
+          <BodySmall weight="Semibold" color="white">
             {title}
-          </LabelSmall>
+          </BodySmall>
           <HStack space={16}>
             <IconButton
               icon={"shareiOs"}
@@ -119,15 +125,6 @@ export const DebugPrettyPrint = withDebugEnabled(
   }
 );
 
-const CustomBodyMonospace = (props: { children?: React.ReactNode }) =>
-  useTypographyFactory({
-    ...props,
-    defaultWeight: "Medium",
-    defaultColor: "bluegrey",
-    font: "DMMono",
-    fontStyle: { fontSize: 12, lineHeight: 18 }
-  });
-
 const styles = StyleSheet.create({
   container: {
     borderRadius: 4,

ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap

@@ -365,7 +365,7 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "rowGap": 24,
+                                "gap": 24,
                               }
                             }
                           >
@@ -962,7 +962,7 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "rowGap": 24,
+                                "gap": 24,
                               }
                             }
                           >
@@ -1559,7 +1559,7 @@ exports[`LoadingScreenContent should match the snapshot with title, no children,
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "rowGap": 24,
+                                "gap": 24,
                               }
                             }
                           >
@@ -2153,7 +2153,7 @@ exports[`LoadingScreenContent should match the snapshot with title, no children,
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "rowGap": 24,
+                                "gap": 24,
                               }
                             }
                           >

ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap

@@ -541,7 +541,7 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
                                               "fontFamily": "Titillium Sans Pro",
                                               "fontSize": 16,
                                               "fontStyle": "normal",
-                                              "fontWeight": "700",
+                                              "fontWeight": "600",
                                               "lineHeight": 20,
                                             },
                                             {
@@ -657,7 +657,7 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
                                             "fontFamily": "Titillium Sans Pro",
                                             "fontSize": 16,
                                             "fontStyle": "normal",
-                                            "fontWeight": "700",
+                                            "fontWeight": "600",
                                             "lineHeight": undefined,
                                           },
                                           {

ts/components/ui/BannerErrorState.tsx

@@ -1,4 +1,5 @@
 import {
+  Body,
   ButtonLink,
   Icon,
   IOBannerBigSpacing,
@@ -8,7 +9,6 @@ import {
   IOScaleValues,
   IOSpringValues,
   IOStyles,
-  Label,
   VSpacer,
   WithTestID
 } from "@pagopa/io-app-design-system";
@@ -135,9 +135,7 @@ export const BannerErrorState = ({
         )}
         {label && (
           <>
-            <Label color={colorContent} weight={"Regular"}>
-              {label}
-            </Label>
+            <Body color={colorContent}>{label}</Body>
             {actionText && <VSpacer size={8} />}
           </>
         )}

ts/components/ui/IOScrollViewWithLargeHeader.tsx

@@ -6,7 +6,7 @@ import {
   H2,
   HeaderSecondLevel,
   IOStyles,
-  LabelSmall,
+  BodySmall,
   VSpacer,
   useIOTheme
 } from "@pagopa/io-app-design-system";
@@ -119,9 +119,9 @@ export const IOScrollViewWithLargeHeader = forwardRef<View, Props>(
           onLayout={getTitleHeight}
         >
           {title.section && (
-            <LabelSmall weight="Semibold" color={theme["textBody-tertiary"]}>
+            <BodySmall weight="Semibold" color={theme["textBody-tertiary"]}>
               {title.section}
-            </LabelSmall>
+            </BodySmall>
           )}
           <H2
             color={theme["textHeading-default"]}