chore(Cross): [IOAPPX-442] Fix dark mode text on light backgrounds + …

…Fix overflow text on cards + Extend dark mode support (#6473) > [!caution] > This PR depends on: > * #6422 > * pagopa/io-app-design-system#364 ## Short description This PR disables the dark mode appearance of text placed on light backgrounds, such as wallet cards. It also extends dark mode support to other DS components. ## List of changes proposed in this pull request - Update `io-app-design-system` to `4.2.0` - Extend dark mode support to `Alert`, `Banner` and `FeatureInfo` - Fix `CgnCard` and `PaymentCard` dark mode appearance - Force light mode on `Tag` in the `ItwCredentialCard` component - Enable larger and bolder text on the `ItwCredentialCard` component by replacing the native `Text` with properly configured `IOText` (cc @mastro993) - Remove preview version of `ItwCredentialCard` - Fix `CgnCard` and `PaymentCard` expired tag overflow when larger text is set - Remove unused `PaymentCardBig` component to reduce the likelihood of misunderstandings ### Preview A look at an _unlikely_ edge case <img width="300" src="https://github.com/user-attachments/assets/a3a8d013-5fe6-4fde-ad10-886a7b419ee8" /> Dark mode support extended to the `Banner` component <img width="300" src="https://github.com/user-attachments/assets/5f528249-9045-4d2f-8183-aa0b4a4deab5" /> ## How to test Increase the text size to extreme levels and check all the cards in the DS section --------- Co-authored-by: Emanuele Dall'Ara <[email protected]> Co-authored-by: Federico Mastrini <[email protected]>
pagopa · Dec 16, 2024 · a5f2871 · a5f2871
1 parent 3ac2969
commit a5f2871
Show file tree

Hide file tree

Showing 27 changed files with 1,772 additions and 3,872 deletions.
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": "4.0.2",
+    "@pagopa/io-app-design-system": "4.2.0",
     "@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/features/bonus/cgn/components/CgnCard.tsx b/ts/features/bonus/cgn/components/CgnCard.tsx
@@ -44,6 +44,7 @@ export const CgnCard = ({ expireDate, withEycaLogo }: CgnCardProps) => {
   const expiredTag = (
     <View>
       <Tag
+        forceLightMode
         testID="cgnExpiredTagTestID"
         variant="error"
         text={I18n.t("bonus.cgn.detail.status.badge.expired")}
@@ -58,7 +59,13 @@ export const CgnCard = ({ expireDate, withEycaLogo }: CgnCardProps) => {
       </View>
       <View style={styles.content}>
         <View style={styles.header}>
-          <H6>{I18n.t("bonus.cgn.name")}</H6>
+          <H6
+            color="blueItalia-850"
+            style={{ flexShrink: 1 }}
+            numberOfLines={1}
+          >
+            {I18n.t("bonus.cgn.name")}
+          </H6>
           {isExpired && expiredTag}
         </View>
         <BodySmall

diff --git a/ts/features/design-system/components/DSSpacerViewerBox.tsx b/ts/features/design-system/components/DSSpacerViewerBox.tsx
@@ -5,13 +5,12 @@ import {
   VSpacer,
   HSpacer,
   IOSpacer,
-  SpacerOrientation,
   useIOTheme
 } from "@pagopa/io-app-design-system";
 
 type DSSpacerViewerBoxProps = {
   size: IOSpacer;
-  orientation?: SpacerOrientation;
+  orientation?: "horizontal" | "vertical";
 };
 
 type DSSpacerLabelProps = {

diff --git a/ts/features/design-system/core/DSCards.tsx b/ts/features/design-system/core/DSCards.tsx
@@ -21,7 +21,6 @@ import {
   ItwStoredCredentialsMocks
 } from "../../itwallet/common/utils/itwMocksUtils";
 import { PaymentCard } from "../../payments/common/components/PaymentCard";
-import { PaymentCardBig } from "../../payments/common/components/PaymentCardBig";
 import { PaymentCardSmall } from "../../payments/common/components/PaymentCardSmall";
 import {
   PaymentCardsCarousel,
@@ -208,49 +207,6 @@ const PaymentCards = () => (
             </HStack>
           </ScrollView>
         </DSComponentViewerBox>
-        <DSComponentViewerBox name="PaymentCardBig (Pre ITW)">
-          <ScrollView
-            horizontal={true}
-            showsHorizontalScrollIndicator={false}
-            style={{ marginHorizontal: -IOVisualCostants.appMarginDefault }}
-            contentContainerStyle={{
-              paddingHorizontal: IOVisualCostants.appMarginDefault
-            }}
-          >
-            <HStack space={cardHorizontalScrollGap}>
-              <PaymentCardBig
-                cardType={"PAGOBANCOMAT"}
-                expirationDate={new Date()}
-                holderName="A very very very long citizen name"
-                abiCode="03069"
-              />
-              <PaymentCardBig
-                cardType={"PAYPAL"}
-                holderEmail="[email protected]"
-              />
-              <PaymentCardBig
-                cardType={"COBADGE"}
-                holderName="Mario Rossi"
-                abiCode="08509"
-                expirationDate={new Date()}
-                cardIcon="visa"
-              />
-              <PaymentCardBig
-                cardType={"COBADGE"}
-                holderName="Mario Rossi"
-                abiCode="08508"
-                expirationDate={new Date()}
-                cardIcon="visa"
-              />
-              <PaymentCardBig
-                cardType={"BANCOMATPAY"}
-                holderName="Mario Rossi"
-                phoneNumber="+39 1234567890"
-              />
-              <PaymentCardBig isLoading={true} />
-            </HStack>
-          </ScrollView>
-        </DSComponentViewerBox>
       </VStack>
     </DesignSystemSection>
     <DesignSystemSection title="PaymentCardSmall">
@@ -389,12 +345,6 @@ const ItwCards = () => (
   <VStack space={blockMargin}>
     <DesignSystemSection title="Driving License">
       <VStack space={componentMargin}>
-        <DSComponentViewerBox name="Preview">
-          <ItwCredentialCard
-            credentialType={CredentialType.DRIVING_LICENSE}
-            isPreview={true}
-          />
-        </DSComponentViewerBox>
         <DSComponentViewerBox name="Valid">
           <ItwCredentialCard credentialType={CredentialType.DRIVING_LICENSE} />
         </DSComponentViewerBox>
@@ -442,12 +392,6 @@ const ItwCards = () => (
     </DesignSystemSection>
     <DesignSystemSection title="Disability Card">
       <VStack space={componentMargin}>
-        <DSComponentViewerBox name="Preview">
-          <ItwCredentialCard
-            credentialType={CredentialType.EUROPEAN_DISABILITY_CARD}
-            isPreview={true}
-          />
-        </DSComponentViewerBox>
         <DSComponentViewerBox name="Valid">
           <ItwCredentialCard
             credentialType={CredentialType.EUROPEAN_DISABILITY_CARD}
@@ -479,12 +423,6 @@ const ItwCards = () => (
     </DesignSystemSection>
     <DesignSystemSection title="Health Insurance Card">
       <VStack space={componentMargin}>
-        <DSComponentViewerBox name="Preview">
-          <ItwCredentialCard
-            credentialType={CredentialType.EUROPEAN_HEALTH_INSURANCE_CARD}
-            isPreview={true}
-          />
-        </DSComponentViewerBox>
         <DSComponentViewerBox name="Valid">
           <ItwCredentialCard
             credentialType={CredentialType.EUROPEAN_HEALTH_INSURANCE_CARD}

diff --git a/ts/features/itwallet/common/components/ItwCredentialCard.tsx b/ts/features/itwallet/common/components/ItwCredentialCard.tsx
@@ -1,11 +1,6 @@
-import {
-  HStack,
-  IOColors,
-  makeFontStyleObject,
-  Tag
-} from "@pagopa/io-app-design-system";
+import { HStack, IOColors, IOText, Tag } from "@pagopa/io-app-design-system";
 import React from "react";
-import { ImageSourcePropType, StyleSheet, Text, View } from "react-native";
+import { ImageSourcePropType, StyleSheet, View } from "react-native";
 import { AnimatedImage } from "../../../../components/AnimatedImage";
 import {
   borderColorByStatus,
@@ -21,13 +16,11 @@ import { ItwDigitalVersionBadge } from "./ItwDigitalVersionBadge";
 export type ItwCredentialCard = {
   credentialType: string;
   status?: ItwCredentialStatus;
-  isPreview?: boolean;
 };
 
 export const ItwCredentialCard = ({
   status = "valid",
-  credentialType,
-  isPreview = false
+  credentialType
 }: ItwCredentialCard) => {
   const isValid = validCredentialStatuses.includes(status);
   const theme = getThemeColorByCredentialType(credentialType);
@@ -38,35 +31,41 @@ export const ItwCredentialCard = ({
   const statusTagProps = tagPropsByStatus[status];
 
   return (
-    <View style={isPreview && styles.previewContainer}>
-      <View style={styles.cardContainer}>
-        <View style={styles.card}>
-          <AnimatedImage
-            source={cardBackgroundSource}
-            style={styles.cardBackground}
-          />
-        </View>
-        <View style={styles.header}>
-          <HStack space={16}>
-            <Text
-              style={[
-                styles.label,
-                { color: theme.textColor, opacity: labelOpacity }
-              ]}
-            >
-              {getCredentialNameFromType(credentialType, "").toUpperCase()}
-            </Text>
-            {statusTagProps && <Tag {...statusTagProps} />}
-          </HStack>
-        </View>
-        <ItwDigitalVersionBadge
-          credentialType={credentialType}
-          isFaded={!isValid}
-        />
-        <View
-          style={[styles.border, { borderColor: borderColorByStatus[status] }]}
+    <View style={styles.cardContainer}>
+      <View style={styles.card}>
+        <AnimatedImage
+          source={cardBackgroundSource}
+          style={styles.cardBackground}
         />
       </View>
+      <View style={styles.header}>
+        <HStack space={16}>
+          <IOText
+            size={16}
+            lineHeight={20}
+            font="TitilliumSansPro"
+            weight="Semibold"
+            maxFontSizeMultiplier={1.25}
+            style={{
+              letterSpacing: 0.25,
+              color: theme.textColor,
+              opacity: labelOpacity,
+              flex: 1,
+              flexShrink: 1
+            }}
+          >
+            {getCredentialNameFromType(credentialType, "").toUpperCase()}
+          </IOText>
+          {statusTagProps && <Tag forceLightMode {...statusTagProps} />}
+        </HStack>
+      </View>
+      <ItwDigitalVersionBadge
+        credentialType={credentialType}
+        isFaded={!isValid}
+      />
+      <View
+        style={[styles.border, { borderColor: borderColorByStatus[status] }]}
+      />
     </View>
   );
 };
@@ -89,10 +88,6 @@ const credentialCardBackgrounds: {
 };
 
 const styles = StyleSheet.create({
-  previewContainer: {
-    aspectRatio: 9 / 2,
-    overflow: "hidden"
-  },
   cardContainer: {
     aspectRatio: 16 / 10,
     borderRadius: 8,
@@ -116,10 +111,6 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 2
   },
-  label: {
-    flex: 1,
-    ...makeFontStyleObject(16, "TitilliumSansPro", 20, "Semibold")
-  },
   header: {
     display: "flex",
     flexDirection: "row",

diff --git a/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx b/ts/features/itwallet/common/components/ItwDigitalVersionBadge.tsx
@@ -88,10 +88,11 @@ const styles = StyleSheet.create({
       }
     }),
     borderCurve: "continuous",
-    borderTopLeftRadius: IOBadgeRadius,
-    borderBottomLeftRadius: IOBadgeRadius,
+    borderRadius: IOBadgeRadius,
     paddingHorizontal: IOBadgeHSpacing,
-    paddingVertical: IOBadgeVSpacing
+    paddingVertical: IOBadgeVSpacing,
+    paddingEnd: IOBadgeHSpacing + 8,
+    marginEnd: -IOBadgeHSpacing
   },
   faded: {
     ...StyleSheet.absoluteFillObject,

diff --git a/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx b/ts/features/itwallet/common/components/ItwSkeumorphicCard/ClaimLabel.tsx
@@ -1,6 +1,9 @@
-import { IOFontWeight, IOText } from "@pagopa/io-app-design-system";
+import {
+  IOFontWeight,
+  makeFontStyleObject
+} from "@pagopa/io-app-design-system";
 import React from "react";
-import { TextStyle, useWindowDimensions } from "react-native";
+import { Text, TextStyle, useWindowDimensions } from "react-native";
 
 export type ClaimLabelProps = {
   fontSize?: number;
@@ -27,21 +30,27 @@ export const ClaimLabel: React.FunctionComponent<
   const fontScale = width / 360;
 
   return (
-    <IOText
+    <Text
       {...props}
       allowFontScaling={false}
-      weight={fontWeight}
-      font="TitilliumSansPro"
-      color="black"
       lineBreakMode="head"
       numberOfLines={1}
-      style={{ textTransform }}
-      size={fontSize * fontScale}
       // This text should not be read by the voiceover.
       // If you want to make it accessible use the parent components
       accessible={false}
+      style={{
+        ...makeFontStyleObject(
+          fontSize * fontScale,
+          "TitilliumSansPro",
+          undefined,
+          fontWeight,
+          undefined,
+          false
+        ),
+        textTransform
+      }}
     >
       {props.children}
-    </IOText>
+    </Text>
   );
 };