chore(Cross): [IOAPPX-435] Improve overall UI typography + Update `io…

…-app-design-system` to `4.0.1` (#6422) ## Short description This PR improves overall UI typography. ## List of changes proposed in this pull request - Update `io-app-design-system` to the new major `4.0.1` version - Update font weight in the `HeaderFirstLevel` to make the title bolder - Improve **Strong** markdown style by replacing `Bold` with the `Semibold` style - Decrease font weight of the subtitle in the `ServicesHeader` component - Improve formatting of the `MessageListItem` - Replace removed `Chip` typographic style with `LabelMini` - Replace removed `Label` typographic style with `Body` - Replace removed `LabelSmall` typographic style with the new `BodySmall` - **[extra]** Fix typo in the English locale (`CIEIdWizard`) > [!note] > **For the reviewers:** the default weight of `LabelSmall` was `Semibold`, while the default weight for `BodySmall` is `Regular`. That's why `LabelSmall` set without the `weight` prop was replaced by `BodySmall` with the `weight` prop set to `Semibold`. The same should happen to the `Label` typographic style ### Preview | Actual UI | New UI | |--------|--------| | ![Simulator Screenshot - iPhone 16 Pro - 2024-11-21 at 11 47 43](https://github.com/user-attachments/assets/70ddf413-a5a7-40be-ac54-d8d1d81ce040) | ![Simulator Screenshot - iPhone 16 Pro - 2024-11-21 at 11 52 44](https://github.com/user-attachments/assets/f1616c82-bd68-49f7-bda0-92947039b79f) | #### Old vs New <details><summary><code>Messages Home</code></summary> <p> | Before | After | |--------|--------| | ![Simulator Screenshot - iPhone 16 Pro - 2024-12-05 at 15 19 58](https://github.com/user-attachments/assets/13dcd29c-a097-4fde-a010-c1517a73a299) | ![Simulator Screenshot - iPhone 16 Pro - 2024-12-05 at 15 22 33](https://github.com/user-attachments/assets/f10f92c9-8b49-4827-adac-9ed0d73561ac) | </p> </details> <details><summary><code>Payments Home</code></summary> <p> | Before | After | |--------|--------| | ![Simulator Screenshot - iPhone 16 Pro - 2024-12-05 at 15 20 22](https://github.com/user-attachments/assets/10cae2b8-c71b-42ac-8e27-f3f328ab4bd8) | ![Simulator Screenshot - iPhone 16 Pro - 2024-12-05 at 15 23 51](https://github.com/user-attachments/assets/0ad36333-7cdc-4d0a-af13-cc442bb46577) | </p> </details> ### Related PRs * pagopa/io-app-design-system#360 * pagopa/io-app-design-system#361 ## How to test Check each DS component and navigate through the app to check if everything is OK --------- Co-authored-by: Emanuele Dall'Ara <71103219+LeleDallas@users.noreply.github.com> Co-authored-by: Alice Di Rico <83651704+Ladirico@users.noreply.github.com>
pagopa · Dec 5, 2024 · b9d3233 · b9d3233
1 parent 4e19eaa
commit b9d3233
Show file tree

Hide file tree

Showing 154 changed files with 1,585 additions and 1,656 deletions.
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -667,7 +667,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

diff --git a/package.json b/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",

diff --git a/ts/components/AppVersion.tsx b/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>
   );

diff --git a/ts/components/BonusCard/BonusCard.tsx b/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} />

diff --git a/ts/components/BonusCard/__tests__/BonusCard.test.tsx b/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]
       });

diff --git a/ts/components/IOMarkdown/renderRules.tsx b/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>
     );
   },
   /**

diff --git a/ts/components/__tests__/__snapshots__/IOMarkdown.test.tsx.snap b/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={

diff --git a/ts/components/__tests__/__snapshots__/LoadingSpinnerOverlay.test.tsx.snap b/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,
                   },
                   [

diff --git a/ts/components/debug/DebugPrettyPrint.tsx b/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,

diff --git a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap
@@ -366,7 +366,7 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "rowGap": 24,
+                                "gap": 24,
                               }
                             }
                           >
@@ -964,7 +964,7 @@ exports[`LoadingScreenContent should match the snapshot with title, a child, hea
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "rowGap": 24,
+                                "gap": 24,
                               }
                             }
                           >
@@ -1562,7 +1562,7 @@ exports[`LoadingScreenContent should match the snapshot with title, no children,
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "rowGap": 24,
+                                "gap": 24,
                               }
                             }
                           >
@@ -2157,7 +2157,7 @@ exports[`LoadingScreenContent should match the snapshot with title, no children,
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "column",
-                                "rowGap": 24,
+                                "gap": 24,
                               }
                             }
                           >

diff --git a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap
@@ -542,7 +542,7 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
                                               "fontFamily": "Titillium Sans Pro",
                                               "fontSize": 16,
                                               "fontStyle": "normal",
-                                              "fontWeight": "700",
+                                              "fontWeight": "600",
                                               "lineHeight": 20,
                                             },
                                             {
@@ -658,7 +658,7 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
                                             "fontFamily": "Titillium Sans Pro",
                                             "fontSize": 16,
                                             "fontStyle": "normal",
-                                            "fontWeight": "700",
+                                            "fontWeight": "600",
                                             "lineHeight": undefined,
                                           },
                                           {

diff --git a/ts/components/ui/BannerErrorState.tsx b/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} />}
           </>
         )}

diff --git a/ts/components/ui/IOScrollViewWithLargeHeader.tsx b/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"]}