@pagopa/io-app-design-system 1.41.0 → 2.0.0-0

package/src/components/modules/ModuleIDP.tsx

@@ -1,20 +1,12 @@
 import * as React from "react";
+import { Image, ImageSourcePropType, Platform, StyleSheet } from "react-native";
 import {
-  Image,
-  ImageSourcePropType,
-  Platform,
-  StyleSheet,
-  Text
-} from "react-native";
-import {
-  IOColors,
   IOListItemLogoMargin,
-  IOVisualCostants,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOText } from "../typography";
 import {
   PressableModuleBase,
   PressableModuleBaseProps
@@ -28,19 +20,6 @@ interface ModuleIDP extends PressableModuleBaseProps {
 }
 
 const styles = StyleSheet.create({
-  idpName: {
-    fontSize: 12,
-    lineHeight: 16,
-    alignSelf: "center",
-    textTransform: "uppercase",
-    flexShrink: 1
-  },
-  idpNameFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  idpLegacyNameFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
-  },
   idpLogo: {
     marginStart: IOListItemLogoMargin,
     width: 120,
@@ -79,18 +58,22 @@ export const ModuleIDP = ({
       testID={testID}
       withLooseSpacing={withLooseSpacing}
     >
-      <Text
-        allowFontScaling={isExperimental}
-        maxFontSizeMultiplier={IOVisualCostants.maxFontSizeMultiplier}
-        style={[
-          styles.idpName,
-          { color: IOColors[theme["textBody-tertiary"]] },
-          isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
-        ]}
+      <IOText
+        font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+        weight={isExperimental ? "Regular" : "Semibold"}
+        size={12}
+        lineHeight={16}
+        color={theme["textBody-tertiary"]}
+        textStyle={{
+          alignSelf: "center",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          flexShrink: 1
+        }}
         accessibilityLabel={accessibilityLabel ?? name}
       >
         {name}
-      </Text>
+      </IOText>
       <Image
         accessibilityIgnoresInvertColors
         source={urlLogoIDP}

package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

@@ -82,33 +82,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           1
         </Text>
@@ -173,33 +161,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           2
         </Text>
@@ -264,33 +240,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           3
         </Text>
@@ -378,33 +342,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           4
         </Text>
@@ -469,33 +421,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           5
         </Text>
@@ -560,33 +500,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           6
         </Text>
@@ -674,33 +602,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           7
         </Text>
@@ -765,33 +681,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           8
         </Text>
@@ -856,33 +760,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           9
         </Text>
@@ -1111,33 +1003,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="white"
-          defaultColor="bluegreyDark"
-          defaultWeight="Semibold"
           dynamicTypeRamp="title2"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 22,
-              "lineHeight": 33,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              },
+              {},
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 22,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 33,
               },
             ]
           }
-          weight="Semibold"
         >
           0
         </Text>

package/src/components/otpInput/OTPInput.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Pressable, TextInput, View } from "react-native";
+import { AccessibilityInfo, NativeSyntheticEvent, Pressable, TextInput, TextInputKeyPressEventData, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { IOStyles } from "../../core/IOStyles";
 import { LabelSmall } from "../typography";
@@ -17,6 +17,7 @@ type Props = {
   onValidate?: (value: string) => boolean;
   errorMessage?: string;
   accessibilityLabel?: string;
+  deleteButtonAccessibilityLabel?: string;
   accessibilityHint?: string;
   inputAccessoryViewID?: string;
   autoFocus?: boolean;
@@ -48,7 +49,8 @@ export const OTPInput = React.forwardRef<View, Props>(
       secret = false,
       autocomplete = false,
       inputAccessoryViewID,
-      autoFocus = false
+      autoFocus = false,
+      deleteButtonAccessibilityLabel
     },
     ref
   ) => {
@@ -93,6 +95,19 @@ export const OTPInput = React.forwardRef<View, Props>(
       handleValidate(value);
     };
 
+    const handleKeyPress = ({ nativeEvent }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      switch (nativeEvent.key) {
+        case 'Backspace':
+          if (deleteButtonAccessibilityLabel && value.length > 0) {
+            AccessibilityInfo.announceForAccessibility(deleteButtonAccessibilityLabel);
+          }
+          break;
+        default:
+          AccessibilityInfo.announceForAccessibility(nativeEvent.key);
+          break;
+      }
+    };
+
     return (
       <Animated.View style={[{ flexGrow: 1 }, animatedStyle]}>
         <Pressable
@@ -110,6 +125,7 @@ export const OTPInput = React.forwardRef<View, Props>(
           <TextInput
             value={value}
             onChangeText={handleChange}
+            onKeyPress={handleKeyPress}
             style={{ position: "absolute", opacity: 0 }}
             maxLength={length}
             ref={inputRef}

package/src/components/pictograms/Pictogram.tsx

@@ -2,15 +2,10 @@ import React, { useMemo } from "react";
 import { ColorValue } from "react-native";
 import { IOColors, IOThemeDark, IOThemeLight, useIOTheme } from "../../core";
 
-import PictogramAbacus from "./svg/PictogramAbacus";
 import PictogramAccessDenied from "./svg/PictogramAccessDenied";
 import PictogramActivate from "./svg/PictogramActivate";
-import PictogramAirBaloon from "./svg/PictogramAirBaloon";
-import PictogramAirship from "./svg/PictogramAirship";
 import PictogramAttachment from "./svg/PictogramAttachment";
 import PictogramAttention from "./svg/PictogramAttention";
-import PictogramBaloons from "./svg/PictogramBaloons";
-import PictogramBeerMug from "./svg/PictogramBeerMug";
 import PictogramBiometric from "./svg/PictogramBiometric";
 import PictogramCameraDenied from "./svg/PictogramCameraDenied";
 import PictogramCameraRequest from "./svg/PictogramCameraRequest";
@@ -18,28 +13,18 @@ import PictogramCharity from "./svg/PictogramCharity";
 import PictogramCie from "./svg/PictogramCie";
 import PictogramCompleted from "./svg/PictogramCompleted";
 import PictogramComunicationProblem from "./svg/PictogramComunicationProblem";
-import PictogramEmailToValidate from "./svg/PictogramEmailToValidate";
-import PictogramEmailValidation from "./svg/PictogramEmailValidation";
 import PictogramEmpty from "./svg/PictogramEmpty";
 import PictogramEmptyArchive from "./svg/PictogramEmptyArchive";
-import PictogramError from "./svg/PictogramError";
 import PictogramFatalError from "./svg/PictogramFatalError";
 import PictogramFeature from "./svg/PictogramFeature";
 import PictogramFeedback from "./svg/PictogramFeedback";
-import PictogramFireworks from "./svg/PictogramFireworks";
-import PictogramHeart from "./svg/PictogramHeart";
 import PictogramHello from "./svg/PictogramHello";
 import PictogramHelp from "./svg/PictogramHelp";
-import PictogramHourglass from "./svg/PictogramHourglass";
 import PictogramITWallet from "./svg/PictogramITWallet";
 import PictogramIdentity from "./svg/PictogramIdentity";
 import PictogramIdentityAdd from "./svg/PictogramIdentityAdd";
 import PictogramIdentityCheck from "./svg/PictogramIdentityCheck";
 import PictogramIdentityRefresh from "./svg/PictogramIdentityRefresh";
-import PictogramInProgress from "./svg/PictogramInProgress";
-import PictogramInbox from "./svg/PictogramInbox";
-import PictogramMessages from "./svg/PictogramMessages";
-import PictogramNotAvailable from "./svg/PictogramNotAvailable";
 import PictogramNotification from "./svg/PictogramNotification";
 import PictogramObjClock from "./svg/PictogramObjClock";
 import PictogramObjFlyingMessage from "./svg/PictogramObjFlyingMessage";
@@ -50,25 +35,13 @@ import PictogramObjManual from "./svg/PictogramObjManual";
 import PictogramObjTrash from "./svg/PictogramObjTrash";
 import PictogramPasscode from "./svg/PictogramPasscode";
 import PictogramPayments from "./svg/PictogramPayments";
-import PictogramPiggyBank from "./svg/PictogramPiggyBank";
-import PictogramPin from "./svg/PictogramPin";
-import PictogramPlaces from "./svg/PictogramPlaces";
 import PictogramProcessing from "./svg/PictogramProcessing";
-import PictogramPuzzle from "./svg/PictogramPuzzle";
-import PictogramQuestion from "./svg/PictogramQuestion";
-import PictogramSearch from "./svg/PictogramSearch";
 import PictogramSecurity from "./svg/PictogramSecurity";
-import PictogramSms from "./svg/PictogramSms";
 import PictogramStopSecurity from "./svg/PictogramStopSecurity";
 import PictogramSuccess from "./svg/PictogramSuccess";
-import PictogramTeaBreak from "./svg/PictogramTeaBreak";
 import PictogramTime from "./svg/PictogramTime";
-import PictogramTimeout from "./svg/PictogramTimeout";
-import PictogramUmbrella from "./svg/PictogramUmbrella";
 import PictogramUmbrellaNew from "./svg/PictogramUmbrellaNew";
-import PictogramUnrecognized from "./svg/PictogramUnrecognized";
 import PictogramUpdateOS from "./svg/PictogramUpdateOS";
-import PictogramUploadFile from "./svg/PictogramUploadFile";
 import PictogramWorkInProgress from "./svg/PictogramWorkInProgress";
 /* Bleed Pictograms */
 import PictogramBleedAccessDenied from "./svg/PictogramBleedAccessDenied";
@@ -139,34 +112,7 @@ import { IOPictogramSizeScale, SVGPictogramProps } from "./types";
 
 export const IOPictograms = {
   // Start legacy pictograms //
-  messages: PictogramMessages,
-  airBaloon: PictogramAirBaloon,
-  abacus: PictogramAbacus,
-  emailValidation: PictogramEmailValidation,
-  emailToValidate: PictogramEmailToValidate,
-  inbox: PictogramInbox,
-  piggyBank: PictogramPiggyBank,
   processing: PictogramProcessing,
-  baloons: PictogramBaloons,
-  places: PictogramPlaces,
-  notAvailable: PictogramNotAvailable,
-  airship: PictogramAirship,
-  search: PictogramSearch,
-  unrecognized: PictogramUnrecognized,
-  error: PictogramError,
-  umbrella: PictogramUmbrella,
-  inProgress: PictogramInProgress,
-  fireworks: PictogramFireworks,
-  puzzle: PictogramPuzzle,
-  question: PictogramQuestion,
-  pin: PictogramPin,
-  timeout: PictogramTimeout,
-  uploadFile: PictogramUploadFile,
-  hourglass: PictogramHourglass,
-  teaBreak: PictogramTeaBreak,
-  beerMug: PictogramBeerMug,
-  sms: PictogramSms,
-  heart: PictogramHeart,
   completed: PictogramCompleted,
   // End legacy pictograms
   empty: PictogramEmpty,
@@ -453,67 +399,10 @@ export type IOPictogramsObject = keyof typeof IOPictogramsObject;
 
 /* Legacy pictograms */
 
-const {
-  messages,
-  airBaloon,
-  abacus,
-  emailValidation,
-  emailToValidate,
-  inbox,
-  piggyBank,
-  processing,
-  baloons,
-  places,
-  notAvailable,
-  airship,
-  search,
-  unrecognized,
-  error,
-  umbrella,
-  inProgress,
-  fireworks,
-  puzzle,
-  question,
-  pin,
-  timeout,
-  uploadFile,
-  hourglass,
-  teaBreak,
-  beerMug,
-  sms,
-  heart,
-  completed
-} = IOPictograms;
+const { processing, completed } = IOPictograms;
 
 export const IOPictogramsLegacy = {
-  messages,
-  airBaloon,
-  abacus,
-  emailValidation,
-  emailToValidate,
-  inbox,
-  piggyBank,
   processing,
-  baloons,
-  places,
-  notAvailable,
-  airship,
-  search,
-  unrecognized,
-  error,
-  umbrella,
-  inProgress,
-  fireworks,
-  puzzle,
-  question,
-  pin,
-  timeout,
-  uploadFile,
-  hourglass,
-  teaBreak,
-  beerMug,
-  sms,
-  heart,
   completed
 } as const;