feat(IT Wallet): [SIW-600] Update card component typography (#5103)

## Short description Depends on #5094 This PR updates the card component typography with a best match strategy as there's not a strict c correspondence between the FIGMA and the current available components. ## How to test The PID card should use the new typography in the wallet section and during the PID issuing. --------- Co-authored-by: Mario Perrotta <[email protected]>
pagopa · Oct 12, 2023 · 1f0a311 · 1f0a311
1 parent 95d78e6
commit 1f0a311
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/ts/features/it-wallet/components/ItwCredentialCard.tsx b/ts/features/it-wallet/components/ItwCredentialCard.tsx
@@ -6,7 +6,7 @@ import {
   StyleSheet,
   ImageSourcePropType
 } from "react-native";
-import { H3, H6, IOColors } from "@pagopa/io-app-design-system";
+import { Body, H6, IOColors, Label } from "@pagopa/io-app-design-system";
 import customVariables from "../../../theme/variables";
 
 /**
@@ -16,7 +16,7 @@ type Props = {
   title: string;
   name: string;
   fiscalCode: string;
-  textColor: React.ComponentProps<typeof H3>["color"];
+  textColor: Extract<IOColors, "black" | "white">;
   backgroundImage: ImageSourcePropType;
 };
 
@@ -39,7 +39,7 @@ const NAME_MARGIN_TOP = 380 * SCALE_FACTOR;
 
 const FISCAL_CODE_MARGIN_TOP = NAME_MARGIN_TOP + 55 * SCALE_FACTOR;
 
-const TITLE_MARGIN_TOP = 40 * SCALE_FACTOR;
+const TITLE_MARGIN_TOP = 50 * SCALE_FACTOR;
 
 const styles = StyleSheet.create({
   cardBackground: {
@@ -50,7 +50,8 @@ const styles = StyleSheet.create({
   text: {
     position: "absolute",
     marginLeft: TEXT_LEFT_MARGIN,
-    color: IOColors.white
+    color: IOColors.white,
+    fontWeight: "700"
   },
   fiscalCodeText: {
     marginTop: FISCAL_CODE_MARGIN_TOP,
@@ -82,27 +83,29 @@ const ItwCredentialCard = ({
 }: Props) => (
   <View>
     <Image source={backgroundImage} style={styles.cardBackground} />
-    <H3
+    <H6
       color={textColor}
       accessibilityLabel={name}
       style={[styles.text, styles.titleText]}
     >
       {title}
-    </H3>
-    <H6
+    </H6>
+    <Label
+      weight="Regular"
       color={textColor}
       style={[styles.text, styles.nameText]}
       accessibilityLabel={name}
     >
       {name}
-    </H6>
-    <H6
+    </Label>
+    <Body
+      weight="SemiBold"
       color={textColor}
       style={[styles.text, styles.fiscalCodeText]}
       accessibilityLabel={name}
     >
       {fiscalCode}
-    </H6>
+    </Body>
   </View>
 );
 

diff --git a/ts/features/it-wallet/utils/mocks.ts b/ts/features/it-wallet/utils/mocks.ts
@@ -1,9 +1,10 @@
 import { PidData } from "@pagopa/io-react-native-cie-pid";
-import { H3, IOIcons } from "@pagopa/io-app-design-system";
+import { IOIcons } from "@pagopa/io-app-design-system";
 import { ImageSourcePropType } from "react-native";
 import { PidWithToken } from "@pagopa/io-react-native-wallet/lib/typescript/pid/sd-jwt";
 import I18n from "../../../i18n";
 import { BulletItem } from "../components/ItwBulletList";
+import ItwCredentialCard from "../components/ItwCredentialCard";
 
 export const ISSUER_URL = "https://www.interno.gov.it/pid/";
 
@@ -57,7 +58,7 @@ export type CredentialCatalogItem = {
     taxIdCode: string;
     birthdate: string;
   };
-  textColor: React.ComponentProps<typeof H3>["color"];
+  textColor: React.ComponentProps<typeof ItwCredentialCard>["textColor"];
   image: ImageSourcePropType;
   requestedClaims: (decodedPid: PidWithToken) => ReadonlyArray<BulletItem>;
 };