@pagopa/io-app-design-system 5.0.0-2 → 5.0.0-3

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

@@ -93,7 +93,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -104,7 +103,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -174,7 +176,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -185,7 +186,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -255,7 +259,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -266,7 +269,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -352,7 +358,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -363,7 +368,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -433,7 +441,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -444,7 +451,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -514,7 +524,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -525,7 +534,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -611,7 +623,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -622,7 +633,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -692,7 +706,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -703,7 +716,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -773,7 +789,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -784,7 +799,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }
@@ -1011,7 +1029,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={true}
-            dynamicTypeRamp="title2"
             maxFontSizeMultiplier={1.5}
             style={
               [
@@ -1022,7 +1039,10 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
-                  "lineHeight": 33,
+                  "lineHeight": undefined,
+                },
+                {
+                  "textAlignVertical": "center",
                 },
               ]
             }

package/src/components/otpInput/OTPInput.tsx

@@ -149,6 +149,7 @@ export const OTPInput = React.forwardRef<View, Props>(
             inputAccessoryViewID={inputAccessoryViewID}
             accessible={true}
             autoFocus={autoFocus}
+            secureTextEntry={true}
           />
           {[...Array(length)].map((_, i) => (
             <BoxedInput

package/src/components/pictograms/Pictogram.tsx

@@ -12,7 +12,6 @@ import PictogramCameraDenied from "./svg/PictogramCameraDenied";
 import PictogramCameraRequest from "./svg/PictogramCameraRequest";
 import PictogramCharity from "./svg/PictogramCharity";
 import PictogramCie from "./svg/PictogramCie";
-import PictogramCompleted from "./svg/PictogramCompleted";
 import PictogramComunicationProblem from "./svg/PictogramComunicationProblem";
 import PictogramEmpty from "./svg/PictogramEmpty";
 import PictogramEmptyArchive from "./svg/PictogramEmptyArchive";
@@ -36,12 +35,11 @@ import PictogramObjManual from "./svg/PictogramObjManual";
 import PictogramObjTrash from "./svg/PictogramObjTrash";
 import PictogramPasscode from "./svg/PictogramPasscode";
 import PictogramPayments from "./svg/PictogramPayments";
-import PictogramProcessing from "./svg/PictogramProcessing";
 import PictogramSecurity from "./svg/PictogramSecurity";
 import PictogramStopSecurity from "./svg/PictogramStopSecurity";
 import PictogramSuccess from "./svg/PictogramSuccess";
 import PictogramTime from "./svg/PictogramTime";
-import PictogramUmbrellaNew from "./svg/PictogramUmbrellaNew";
+import PictogramUmbrella from "./svg/PictogramUmbrella";
 import PictogramUpdateOS from "./svg/PictogramUpdateOS";
 import PictogramWorkInProgress from "./svg/PictogramWorkInProgress";
 /* Bleed Pictograms */
@@ -117,17 +115,13 @@ import PictogramWalletDoc from "./svg/PictogramWalletDoc";
 import { SVGPictogramProps } from "./types";
 
 export const IOPictograms = {
-  // Start legacy pictograms //
-  processing: PictogramProcessing,
-  completed: PictogramCompleted,
-  // End legacy pictograms
   empty: PictogramEmpty,
   feature: PictogramFeature,
   charity: PictogramCharity,
   attention: PictogramAttention,
   message: PictogramMessage,
   emptyArchive: PictogramEmptyArchive,
-  umbrellaNew: PictogramUmbrellaNew,
+  umbrella: PictogramUmbrella,
   feedback: PictogramFeedback,
   idea: PictogramIdea,
   cameraRequest: PictogramCameraRequest,
@@ -197,7 +191,6 @@ export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180;
 
 type IOPictogramsProps = {
   name: IOPictograms;
-  color?: IOColors;
   /* Not too happy about the API choice,
   but at least we have the same <StatusBar …>
   component props. */
@@ -215,7 +208,6 @@ type PictogramPalette = {
 
 export const Pictogram = ({
   name,
-  color = "aqua",
   pictogramStyle = "default",
   size = 120,
   allowFontScaling = false,
@@ -256,7 +248,6 @@ export const Pictogram = ({
     <PictogramElement
       {...props}
       size={pictogramSize}
-      color={IOColors[color]}
       colorValues={colorValues}
     />
   );
@@ -365,7 +356,6 @@ export const IOPictogramsBleed: {
 
 export const PictogramBleed = ({
   name,
-  color = "aqua",
   size = 80,
   pictogramStyle = "default",
   allowFontScaling = false,
@@ -406,7 +396,6 @@ export const PictogramBleed = ({
     <PictogramElement
       {...props}
       size={pictogramSize}
-      color={IOColors[color]}
       colorValues={colorValues}
     />
   );
@@ -428,14 +417,3 @@ export const IOPictogramsObject = {
 } as const;
 
 export type IOPictogramsObject = keyof typeof IOPictogramsObject;
-
-/* Legacy pictograms */
-
-const { processing, completed } = IOPictograms;
-
-export const IOPictogramsLegacy = {
-  processing,
-  completed
-} as const;
-
-export type IOPictogramsLegacy = keyof typeof IOPictogramsLegacy;

package/src/components/pictograms/svg/{PictogramUmbrellaNew.tsx → PictogramUmbrella.tsx}

@@ -2,7 +2,7 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { SVGPictogramProps } from "../types";
 
-const PictogramUmbrellaNew = ({
+const PictogramUmbrella = ({
   size,
   colorValues,
   ...props
@@ -51,4 +51,4 @@ const PictogramUmbrellaNew = ({
   </Svg>
 );
 
-export default PictogramUmbrellaNew;
+export default PictogramUmbrella;

package/src/components/pictograms/types.ts

@@ -2,6 +2,5 @@ import { ColorValue } from "react-native";
 
 export type SVGPictogramProps = {
   size: number | "100%";
-  color: ColorValue;
   colorValues: Record<string, ColorValue>;
 };

package/src/components/searchInput/SearchInput.tsx

@@ -37,8 +37,12 @@ import {
   useIOTheme
 } from "../../core";
 import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
-import { ButtonLink } from "../buttons";
-import { IOIconSizeScale, Icon } from "../icons";
+import { Icon, IOIconSizeScale } from "../icons";
+import {
+  buttonTextFontSize,
+  buttonTextLineHeight,
+  IOText
+} from "../typography";
 
 /* Component visual attributes */
 const inputPaddingHorizontal: IOSpacingScale = 12;
@@ -287,7 +291,25 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           onLayout={getCancelButtonWidth}
           style={[styles.cancelButton, cancelButtonAnimatedStyle]}
         >
-          <ButtonLink label={cancelButtonLabel} onPress={cancel} />
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={cancelButtonLabel}
+            onPress={cancel}
+          >
+            <IOText
+              color={theme["interactiveElem-default"]}
+              font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
+              weight={"Semibold"}
+              size={buttonTextFontSize}
+              lineHeight={buttonTextLineHeight}
+              numberOfLines={1}
+              accessible={false}
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+            >
+              {cancelButtonLabel}
+            </IOText>
+          </Pressable>
         </Animated.View>
       </Animated.View>
     );

package/src/components/spacer/Spacer.tsx

@@ -18,7 +18,7 @@ const DEFAULT_SIZE: IOSpacer = 16;
 
 /* Debug Mode */
 const debugMode = false;
-const debugBg = hexToRgba(IOColors.red, 0.2);
+const debugBg = hexToRgba(IOColors["error-600"], 0.2);
 
 /**
 Native `Spacer` component

package/src/components/textInput/TextInputBase.tsx

@@ -1,5 +1,12 @@
 /* eslint-disable functional/immutable-data */
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import {
   ColorValue,
   LayoutChangeEvent,
@@ -46,7 +53,7 @@ type InputTextProps = WithTestID<{
   inputType?: InputType;
   status?: InputStatus;
   icon?: IOIcons;
-  rightElement?: React.ReactNode;
+  rightElement?: ReactNode;
   counterLimit?: number;
   bottomMessage?: string;
   bottomMessageColor?: IOColors;
@@ -67,12 +74,8 @@ const inputLabelScaleFactor: number = 0.75; /* 16pt becomes 12pt */
 const inputLabelFontSize: IOFontSize = 16;
 const inputDisabledOpacity: number = 0.5;
 const inputRightElementMargin: IOSpacingScale = 8;
-const iconColor: IOColors = "grey-300";
 const iconSize: IOIconSizeScale = 24;
 const iconMargin: IOSpacingScale = 8;
-const inputLabelColor: ColorValue = IOColors["grey-700"];
-const inputTextColor: ColorValue = IOColors.black;
-const inputDisabledTextColor: ColorValue = IOColors["grey-850"];
 
 const styles = StyleSheet.create({
   textInput: {
@@ -124,10 +127,15 @@ const HelperRow = ({
   value,
   counterLimit,
   bottomMessage,
-  bottomMessageColor = "grey-700"
+  bottomMessageColor
 }: InputTextHelperRow) => {
+  const theme = useIOTheme();
   const valueCount = useMemo(() => value.length, [value]);
 
+  const bottomMessageColorDefault: IOColors = theme["textBody-tertiary"];
+  const bottomMessageColorValue =
+    bottomMessageColor ?? bottomMessageColorDefault;
+
   const helperRowStyle: ViewStyle = useMemo(() => {
     if (counterLimit && bottomMessage) {
       return {
@@ -164,14 +172,14 @@ const HelperRow = ({
       }
     >
       {bottomMessage && (
-        <BodySmall weight="Regular" color={bottomMessageColor}>
+        <BodySmall weight="Regular" color={bottomMessageColorValue}>
           {bottomMessage}
         </BodySmall>
       )}
       {counterLimit && (
         <BodySmall
           weight="Regular"
-          color="grey-700"
+          color={bottomMessageColorValue}
         >{`${valueCount} / ${counterLimit}`}</BodySmall>
       )}
     </View>
@@ -201,18 +209,23 @@ export const TextInputBase = ({
 }: InputTextProps) => {
   const inputRef = useRef<TextInput>(null);
   const isSecretInput = useMemo(() => isPassword, [isPassword]);
-  const [inputStatus, setInputStatus] = React.useState<InputStatus>(
+  const [inputStatus, setInputStatus] = useState<InputStatus>(
     disabled ? "disabled" : "initial"
   );
   const focusedState = useSharedValue<number>(0);
 
+  const { newTypefaceEnabled } = useIONewTypeface();
   const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
 
   const theme = useIOTheme();
-  const { newTypefaceEnabled } = useIONewTypeface();
+  const iconColor: IOColors = theme["icon-decorative"];
+  const inputLabelColor: ColorValue = IOColors[theme["textInputLabel-default"]];
+  const inputTextColor: ColorValue = IOColors[theme["textInputValue-default"]];
+  const inputDisabledTextColor: ColorValue =
+    IOColors[theme["textInputValue-disabled"]];
 
   /* Get the label width to enable the correct translation */
-  const [labelWidth, setLabelWidth] = React.useState<number>(0);
+  const [labelWidth, setLabelWidth] = useState<number>(0);
 
   const getLabelWidth = ({ nativeEvent }: LayoutChangeEvent) => {
     setLabelWidth(nativeEvent.layout.width);
@@ -231,10 +244,10 @@ export const TextInputBase = ({
 
   const borderColorMap: Record<InputStatus, string> = useMemo(
     () => ({
-      initial: IOColors["grey-200"],
-      disabled: IOColors["grey-200"],
+      initial: IOColors[theme["textInputBorder-default"]],
+      disabled: IOColors[theme["textInputBorder-default"]],
       focused: IOColors[theme["interactiveElem-default"]],
-      error: IOColors["error-600"]
+      error: IOColors[theme.errorText]
     }),
     [theme]
   );

package/src/components/textInput/TextInputValidation.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useCallback, useMemo, useState } from "react";
 import { AccessibilityInfo, View } from "react-native";
 import Animated from "react-native-reanimated";
+import { useIOTheme } from "../../core";
 import { IOColors } from "../../core/IOColors";
 import {
   enterTransitionInputIcon,
@@ -18,8 +19,8 @@ type TextInputValidationProps = Omit<
   "rightElement" | "status" | "bottomMessageColor" | "isPassword"
 > & {
   /**
-   * This function can return either a `boolean` or a `ValidationWithOptions` object. 
-   * If a `boolean` is returned and the field is not valid, the value of the errorMessage prop will be displayed/announced. 
+   * This function can return either a `boolean` or a `ValidationWithOptions` object.
+   * If a `boolean` is returned and the field is not valid, the value of the errorMessage prop will be displayed/announced.
    * If a `ValidationWithOptions` object is returned and the field is not valid, the value displayed/announced will be the one contained within this object.
    */
   onValidate: (value: string) => boolean | ValidationWithOptions;
@@ -29,8 +30,14 @@ type TextInputValidationProps = Omit<
   errorMessage: string;
 };
 
-function isValidationWithOptions(validation: boolean | ValidationWithOptions): validation is ValidationWithOptions {
-  return typeof validation === 'object' && 'isValid' in validation && 'errorMessage' in validation;
+function isValidationWithOptions(
+  validation: boolean | ValidationWithOptions
+): validation is ValidationWithOptions {
+  return (
+    typeof validation === "object" &&
+    "isValid" in validation &&
+    "errorMessage" in validation
+  );
 }
 
 const feedbackIconSize: IOIconSizeScale = 24;
@@ -44,6 +51,7 @@ export const TextInputValidation = ({
   onFocus,
   ...props
 }: TextInputValidationProps) => {
+  const theme = useIOTheme();
   const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
   const [errMessage, setErrMessage] = useState(errorMessage);
 
@@ -78,13 +86,13 @@ export const TextInputValidation = ({
   }, [onFocus]);
 
   const labelError = useMemo(
-    () => (isValid === false && errMessage ? errMessage : bottomMessage),
+    () => (!isValid && errMessage ? errMessage : bottomMessage),
     [isValid, errMessage, bottomMessage]
   );
 
   const labelErrorColor: IOColors | undefined = useMemo(
-    () => (isValid === false && errMessage ? "error-600" : undefined),
-    [isValid, errMessage]
+    () => (!isValid && errMessage ? theme.errorText : undefined),
+    [isValid, errMessage, theme.errorText]
   );
 
   const feedbackIconAttrMap: Record<
@@ -94,14 +102,14 @@ export const TextInputValidation = ({
     () => ({
       valid: {
         name: "success",
-        color: "green"
+        color: theme.successIcon
       },
       notValid: {
         name: "errorFilled",
-        color: "error-600"
+        color: theme.errorIcon
       }
     }),
-    []
+    [theme]
   );
 
   const feedbackIcon = useMemo(() => {

package/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap

@@ -80,7 +80,7 @@ exports[`Test Typography Components BodySmall Snapshot 2`] = `
     [
       {},
       {
-        "color": "#0073E6",
+        "color": "#0B3EE3",
         "fontFamily": "Titillio",
         "fontSize": 14,
         "fontStyle": "normal",
@@ -103,7 +103,7 @@ exports[`Test Typography Components BodySmall Snapshot 3`] = `
     [
       {},
       {
-        "color": "#475A6D",
+        "color": "#555C70",
         "fontFamily": "Titillio",
         "fontSize": 14,
         "fontStyle": "normal",
@@ -126,7 +126,7 @@ exports[`Test Typography Components BodySmall Snapshot 4`] = `
     [
       {},
       {
-        "color": "#C02927",
+        "color": "#D13333",
         "fontFamily": "Titillio",
         "fontSize": 14,
         "fontStyle": "normal",
@@ -286,7 +286,7 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
     [
       {},
       {
-        "color": "#CCD4DC",
+        "color": "#D2D6E3",
         "fontFamily": "Titillio",
         "fontSize": 22,
         "fontStyle": "normal",
@@ -401,7 +401,7 @@ exports[`Test Typography Components H4 Snapshot 2`] = `
     [
       {},
       {
-        "color": "#0073E6",
+        "color": "#0B3EE3",
         "fontFamily": "Titillio",
         "fontSize": 20,
         "fontStyle": "normal",
@@ -476,7 +476,7 @@ exports[`Test Typography Components H5 Snapshot 2`] = `
         "textTransform": "uppercase",
       },
       {
-        "color": "#475A6D",
+        "color": "#555C70",
         "fontFamily": "Titillio",
         "fontSize": 14,
         "fontStyle": "normal",
@@ -502,7 +502,7 @@ exports[`Test Typography Components H5 Snapshot 3`] = `
         "textTransform": "uppercase",
       },
       {
-        "color": "#0073E6",
+        "color": "#0B3EE3",
         "fontFamily": "Titillio",
         "fontSize": 14,
         "fontStyle": "normal",