npm - @pagopa/io-app-design-system - Versions diffs - 1.7.0 → 1.8.0 - Mend

@pagopa/io-app-design-system 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (549) hide show

package/src/components/listitems/ListItemNavAlert.tsx CHANGED Viewed

@@ -1,5 +1,11 @@
 import React, { useCallback } from "react";
-import { GestureResponderEvent, Pressable, View } from "react-native";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -17,11 +23,13 @@ import {
   IOSpringValues,
   IOStyles,
   hexToRgba,
+  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
+import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { Body, H6, LabelSmall } from "../typography";
 export type ListItemNavAlert = WithTestID<{
   value: string;
@@ -32,6 +40,15 @@ export type ListItemNavAlert = WithTestID<{
   accessibilityLabel: string;
 }>;
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyStyles = StyleSheet.create({
+  textValue: {
+    fontSize: 18,
+    lineHeight: 24,
+    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
+  }
+});
 export const ListItemNavAlert = ({
   value,
   description,
@@ -41,9 +58,38 @@ export const ListItemNavAlert = ({
   testID
 }: ListItemNavAlert) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyNavAlertText = (
+    <>
+      <Text style={[legacyStyles.textValue, { color: IOColors.bluegreyDark }]}>
+        {value}
+      </Text>
+      {description && (
+        <Body weight="SemiBold" color={theme.errorText}>
+          {description}
+        </Body>
+      )}
+    </>
+  );
+  const navAlertText = (
+    <>
+      <H6 color={theme["textBody-default"]}>{value}</H6>
+      {description && (
+        <LabelSmall weight="SemiBold" color={theme.errorText}>
+          {description}
+        </LabelSmall>
+      )}
+    </>
+  );
+  const navAlertTextComponent = isExperimental ? navAlertText : legacyNavAlertText;
+  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
   const mapBackgroundStates: Record<string, string> = {
     default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
     pressed: IOColors[theme["listItem-pressed"]]
@@ -117,17 +163,12 @@ export const ListItemNavAlert = ({
             </View>
           )}
           <View style={IOStyles.flex}>
-            <H6 color={theme["textBody-default"]}>{value}</H6>
-            {description && (
-              <LabelSmall weight="SemiBold" color={theme.errorText}>
-                {description}
-              </LabelSmall>
-            )}
+          {navAlertTextComponent}
           </View>
           <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
             <Icon
               name="chevronRightListItem"
-              color={theme["interactiveElem-default"]}
+              color={iconColor}
               size={IOListItemVisualParams.chevronSize}
             />
           </View>

package/src/components/listitems/ListItemSwitch.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ import {
 } from "../../core";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall, Link } from "../typography";
+import { H6, LabelSmall, LabelLink } from "../typography";
 import { NativeSwitch } from "../switch/NativeSwitch";
 type Props = {
@@ -19,7 +19,7 @@ type Props = {
   action?: SwitchAction;
 };
-type SwitchAction = {
+export type SwitchAction = {
   label: string;
   onPress: (event: GestureResponderEvent) => void;
 };
@@ -91,9 +91,9 @@ export const ListItemSwitch = React.memo(
             {action && (
               <>
                 <VSpacer size={IOSelectionListItemVisualParams.actionMargin} />
-                <Link fontSize="small" onPress={action.onPress}>
+                <LabelLink fontSize="small" onPress={action.onPress}>
                   {action.label}
-                </Link>
+                </LabelLink>
               </>
             )}
           </View>

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap CHANGED Viewed

@@ -78,14 +78,14 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
           style={
             [
               {
-                "fontFamily": "Readex Pro",
-                "fontSize": 16,
+                "fontFamily": "Titillium Web",
+                "fontSize": 18,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 20,
+                "fontWeight": "600",
+                "lineHeight": 24,
               },
               {
-                "color": "#0B3EE3",
+                "color": "#0073E6",
               },
             ]
           }
@@ -159,17 +159,21 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
   >
     <Text
       style={
-        {
-          "alignSelf": "center",
-          "color": "#555C70",
-          "flexShrink": 1,
-          "fontFamily": "Readex Pro",
-          "fontSize": 12,
-          "fontStyle": "normal",
-          "fontWeight": "400",
-          "lineHeight": 16,
-          "textTransform": "uppercase",
-        }
+        [
+          {
+            "alignSelf": "center",
+            "color": "#555C70",
+            "flexShrink": 1,
+            "fontSize": 12,
+            "lineHeight": 16,
+            "textTransform": "uppercase",
+          },
+          {
+            "fontFamily": "Titillium Web",
+            "fontStyle": "normal",
+            "fontWeight": "600",
+          },
+        ]
       }
     />
     <Image
@@ -220,22 +224,24 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       }
     >
       <Text
-        color="grey-700"
-        defaultColor="blue"
-        defaultWeight="Bold"
+        color="bluegrey"
+        defaultColor="bluegrey"
+        defaultWeight="Regular"
         font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 14,
+            "fontSize": 16,
+            "lineHeight": 24,
           }
         }
         style={
           [
             {
-              "fontSize": 14,
+              "fontSize": 16,
+              "lineHeight": 24,
             },
             {
-              "color": "#555C70",
+              "color": "#475A6D",
               "fontFamily": "Titillium Web",
               "fontStyle": "normal",
               "fontWeight": "400",
@@ -247,32 +253,21 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
         label
       </Text>
       <Text
-        color="black"
-        defaultColor="black"
-        defaultWeight="Regular"
-        font="ReadexPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-            "lineHeight": 20,
-          }
-        }
         numberOfLines={2}
         style={
           [
             {
-              "fontSize": 16,
-              "lineHeight": 20,
+              "fontFamily": "Titillium Web",
+              "fontSize": 18,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": 24,
             },
             {
-              "color": "#0E0F13",
-              "fontFamily": "Readex Pro",
-              "fontStyle": "normal",
-              "fontWeight": "400",
+              "color": "#17324D",
             },
           ]
         }
-        weight="Regular"
       >
         testValue
       </Text>
@@ -355,22 +350,24 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         }
       >
         <Text
-          color="grey-700"
-          defaultColor="blue"
-          defaultWeight="Bold"
+          color="bluegrey"
+          defaultColor="bluegrey"
+          defaultWeight="Regular"
           font="TitilliumWeb"
           fontStyle={
             {
-              "fontSize": 14,
+              "fontSize": 16,
+              "lineHeight": 24,
             }
           }
           style={
             [
               {
-                "fontSize": 14,
+                "fontSize": 16,
+                "lineHeight": 24,
               },
               {
-                "color": "#555C70",
+                "color": "#475A6D",
                 "fontFamily": "Titillium Web",
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -381,33 +378,29 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         >
           label
         </Text>
-        <Text
-          color="blueIO-500"
-          defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
-          fontStyle={
+        <View
+          style={
             {
-              "fontSize": 16,
-              "lineHeight": 20,
+              "height": 4,
             }
           }
+        />
+        <Text
           numberOfLines={2}
           style={
             [
               {
-                "fontSize": 16,
-                "lineHeight": 20,
+                "fontFamily": "Titillium Web",
+                "fontSize": 18,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "lineHeight": 24,
               },
               {
-                "color": "#0B3EE3",
-                "fontFamily": "Readex Pro",
-                "fontStyle": "normal",
-                "fontWeight": "400",
+                "color": "#0073E6",
               },
             ]
           }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -426,7 +419,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
+          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -440,7 +433,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0B3EE3",
+                "color": "#0073E6",
               },
               {
                 "flex": 0,
@@ -449,7 +442,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor={4278219750}
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -553,31 +546,16 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
         }
       >
         <Text
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
-          fontStyle={
+          style={
             {
-              "fontSize": 16,
-              "lineHeight": 20,
+              "color": "#17324D",
+              "fontFamily": "Titillium Web",
+              "fontSize": 18,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": 24,
             }
           }
-          style={
-            [
-              {
-                "fontSize": 16,
-                "lineHeight": 20,
-              },
-              {
-                "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
-                "fontStyle": "normal",
-                "fontWeight": "400",
-              },
-            ]
-          }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -596,7 +574,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
+          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -610,7 +588,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0B3EE3",
+                "color": "#0073E6",
               },
               {
                 "flex": 0,
@@ -619,7 +597,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor={4278219750}
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -785,31 +763,20 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         }
       >
         <Text
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 20,
-            }
-          }
           style={
             [
               {
-                "fontSize": 16,
-                "lineHeight": 20,
+                "fontFamily": "Titillium Web",
+                "fontSize": 18,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "lineHeight": 24,
               },
               {
-                "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
-                "fontStyle": "normal",
-                "fontWeight": "400",
+                "color": "#17324D",
               },
             ]
           }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -828,7 +795,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
+          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -842,7 +809,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0B3EE3",
+                "color": "#0073E6",
               },
               {
                 "flex": 0,
@@ -851,7 +818,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor={4278219750}
           vbHeight={24}
           vbWidth={24}
           width={24}

package/src/components/listitems/__test__/listitem.test.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import ListItemInfoCopy from "../ListItemInfoCopy";
 import ListItemNav from "../ListItemNav";
 import ListItemNavAlert from "../ListItemNavAlert";
 import ListItemAction from "../ListItemAction";
-import ListItemIDP from "../ListItemIDP";
+import ListItemIDP from "../../modules/ModuleIDP";
 import { ListItemTransaction } from "../ListItemTransaction";
 import { PressableListItemBase } from "../PressableListItemsBase";

package/src/components/listitems/index.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 export * from "./ListItemAction";
-export * from "./ListItemIDP";
+export * from "../modules/ModuleIDP";
 export * from "./ListItemInfo";
 export * from "./ListItemInfoCopy";
 export * from "./ListItemNav";

package/src/components/{listitems/ListItemIDP.tsx → modules/ModuleIDP.tsx} RENAMED Viewed

@@ -19,19 +19,20 @@ import Animated, {
 } from "react-native-reanimated";
 import {
   IOColors,
-  IOListItemIDPHSpacing,
-  IOListItemIDPRadius,
-  IOListItemIDPSavedVSpacing,
-  IOListItemIDPVSpacing,
+  IOModuleIDPHSpacing,
+  IOModuleIDPRadius,
+  IOModuleIDPSavedVSpacing,
+  IOModuleIDPVSpacing,
   IOListItemLogoMargin,
   IOScaleValues,
-  IOSpringValues
+  IOSpringValues,
+  useIOExperimentalDesign
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-type ListItemIDP = WithTestID<{
+type ModuleIDP = WithTestID<{
   name: string;
   localLogo: ImageSourcePropType;
   logo: ImageSourcePropType;
@@ -44,13 +45,13 @@ const styles = StyleSheet.create({
   button: {
     borderWidth: 1,
     borderColor: IOColors["grey-100"],
-    borderRadius: IOListItemIDPRadius,
+    borderRadius: IOModuleIDPRadius,
     backgroundColor: IOColors.white,
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: IOListItemIDPVSpacing,
-    paddingHorizontal: IOListItemIDPHSpacing
+    paddingVertical: IOModuleIDPVSpacing,
+    paddingHorizontal: IOModuleIDPHSpacing
   },
   idpName: {
     color: IOColors["grey-700"],
@@ -58,9 +59,14 @@ const styles = StyleSheet.create({
     lineHeight: 16,
     alignSelf: "center",
     textTransform: "uppercase",
-    flexShrink: 1,
+    flexShrink: 1
+  },
+  idpNameFont: {
     ...makeFontStyleObject("Regular", false, "ReadexPro")
   },
+  idpLegacyNameFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
+  },
   idpLogo: {
     marginStart: IOListItemLogoMargin,
     width: 120,
@@ -75,16 +81,16 @@ const styles = StyleSheet.create({
 const androidIdpLogoForcedRefreshed = () =>
   Platform.OS === "android" ? `?ts=${toAndroidCacheTimestamp()}` : "";
-export const ListItemIDP = ({
+export const ModuleIDP = ({
   name,
   localLogo,
   logo,
   saved,
   onPress,
   testID
-}: ListItemIDP) => {
+}: ModuleIDP) => {
   const isPressed = useSharedValue(0);
+  const { isExperimental } = useIOExperimentalDesign();
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
@@ -135,15 +141,22 @@ export const ListItemIDP = ({
       <Animated.View
         style={[
           styles.button,
-          saved && { paddingVertical: IOListItemIDPSavedVSpacing },
+          saved && { paddingVertical: IOModuleIDPSavedVSpacing },
           animatedStyle
         ]}
       >
-        <Text style={styles.idpName}>{name}</Text>
+        <Text
+          style={[
+            styles.idpName,
+            isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
+          ]}
+        >
+          {name}
+        </Text>
         <Image source={urlLogoIDP} style={styles.idpLogo} />
       </Animated.View>
     </Pressable>
   );
 };
-export default ListItemIDP;
+export default ModuleIDP;

package/src/components/modules/index.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./ModuleIDP";

package/src/components/pictograms/Pictogram.tsx CHANGED Viewed

@@ -50,16 +50,22 @@ import PictogramIdentity from "./svg/PictogramIdentity";
 import PictogramAccessDenied from "./svg/PictogramAccessDenied";
 import PictogramTime from "./svg/PictogramTime";
 import PictogramStopSecurity from "./svg/PictogramStopSecurity";
+import PictogramSecurity from "./svg/PictogramSecurity";
 import PictogramPasscode from "./svg/PictogramPasscode";
 import PictogramIdentityCheck from "./svg/PictogramIdentityCheck";
 import PictogramTrash from "./svg/PictogramTrash";
 import PictogramCharity from "./svg/PictogramCharity";
 import PictogramEmpty from "./svg/PictogramEmpty";
+import PictogramCie from "./svg/PictogramCie";
+import PictogramFeature from "./svg/PictogramFeature";
 /* Bleed Pictograms */
 import PictogramBleedCharity from "./svg/PictogramBleedCharity";
 import PictogramBleedHelp from "./svg/PictogramBleedHelp";
 import PictogramBleedITWallet from "./svg/PictogramBleedITWallet";
 import PictogramBleedFeedback from "./svg/PictogramBleedFeedback";
+import PictogramBleedSecurity from "./svg/PictogramBleedSecurity";
+import PictogramBleedFeature from "./svg/PictogramBleedFeature";
+import PictogramBleedCie from "./svg/PictogramBleedCie";
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -98,6 +104,7 @@ export const IOPictograms = {
   manual: PictogramManual,
   trash: PictogramTrash,
   empty: PictogramEmpty,
+  feature: PictogramFeature,
   charity: PictogramCharity,
   attention: PictogramAttention,
   emptyArchive: PictogramEmptyArchive,
@@ -115,6 +122,8 @@ export const IOPictograms = {
   identityCheck: PictogramIdentityCheck,
   accessDenied: PictogramAccessDenied,
   stopSecurity: PictogramStopSecurity,
+  security: PictogramSecurity,
+  cie: PictogramCie,
   time: PictogramTime,
   passcode: PictogramPasscode
 };
@@ -152,7 +161,7 @@ export const Pictogram = ({
 */
 export type IOPictogramsBleed = Extract<
-  "charity" | "help" | "feedback" | "itWallet",
+  "charity" | "help" | "feedback" | "itWallet" | "security" | "feature" | "cie",
   IOPictograms
 >;
@@ -162,7 +171,10 @@ export const IOPictogramsBleed: {
   charity: PictogramBleedCharity,
   help: PictogramBleedHelp,
   feedback: PictogramBleedFeedback,
-  itWallet: PictogramBleedITWallet
+  itWallet: PictogramBleedITWallet,
+  security: PictogramBleedSecurity,
+  feature: PictogramBleedFeature,
+  cie: PictogramBleedCie
 };
 export const PictogramBleed = ({