@pagopa/io-app-design-system 4.4.8 → 4.5.1

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

@@ -2800,7 +2800,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                   "width": 24,
                 },
                 {
-                  "borderColor": "#475A6D",
+                  "borderColor": "#555C70",
                 },
               ]
             }
@@ -3085,7 +3085,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
                   "width": 24,
                 },
                 {
-                  "borderColor": "#475A6D",
+                  "borderColor": "#555C70",
                 },
               ]
             }

package/src/components/modules/PressableModuleBase.tsx

@@ -1,14 +1,15 @@
 import * as React from "react";
-import { PropsWithChildren } from "react";
-import { Pressable } from "react-native";
+import { PropsWithChildren, useCallback } from "react";
+import { GestureResponderEvent, Pressable } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, { useReducedMotion } from "react-native-reanimated";
-import { useScaleAnimation } from "../../hooks";
 import {
   IOColors,
   IOModuleIDPSavedVSpacing,
   IOModuleStyles,
   useIOTheme
 } from "../../core";
+import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 
 export type PressableModuleBaseProps = WithTestID<
@@ -39,9 +40,19 @@ export const PressableModuleBase = ({
   If we remove it, they they won't be able to understand
   if there's an ongoing interaction. */
 
+  const handleOnPress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (onPress) {
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      }
+    },
+    [onPress]
+  );
+
   return (
     <Pressable
-      onPress={onPress}
+      onPress={handleOnPress}
       testID={testID}
       accessible={true}
       onPressIn={onPressIn}

package/src/components/numberpad/NumberButton.tsx

@@ -56,7 +56,7 @@ const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
   light: {
     background: IOColors["grey-100"],
     pressed: IOColors["grey-200"],
-    foreground: "blue"
+    foreground: "blue-500"
   },
   dark: {
     background: hexToRgba(IOColors.black, 0.1),

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,7 +35,6 @@ 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";
@@ -117,10 +115,6 @@ 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,
@@ -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/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/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/stepper/Stepper.tsx

@@ -21,7 +21,7 @@ const colorMap: Record<string, IOColors> = {
 };
 
 const legacyColorMap: Record<string, IOColors> = {
-  active: "blue"
+  active: "blue-500"
 };
 
 export const Stepper = ({ steps, currentStep }: StepperProps) => {

package/src/components/switch/NativeSwitch.tsx

@@ -18,7 +18,7 @@ type OwnProps = Pick<
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const bgLegacyTrackColorAndroid =
-  Platform.OS === "android" ? IOColors["grey-300"] : IOColors.greyUltraLight;
+  Platform.OS === "android" ? IOColors["grey-300"] : IOColors["grey-50"];
 
 export const NativeSwitch = ({
   onValueChange,
@@ -34,7 +34,7 @@ export const NativeSwitch = ({
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   const legacyTrackColor = {
     false: bgLegacyTrackColorAndroid,
-    true: IOColors.blue
+    true: IOColors["blue-500"]
   };
 
   const trackColorComponent = isExperimental ? trackColor : legacyTrackColor;

package/src/components/tabs/TabItem.tsx

@@ -100,17 +100,17 @@ const mapLegacyColorStates: Record<
   light: {
     border: {
       default: IOColors["grey-300"],
-      selected: IOColors.blue,
+      selected: IOColors["blue-500"],
       disabled: hexToRgba(IOColors.white)
     },
     background: {
       default: IOColors.white,
-      selected: hexToRgba(IOColors.blue, 0.1),
+      selected: hexToRgba(IOColors["blue-500"], 0.1),
       pressed: IOColors.white
     },
     foreground: {
       default: "black",
-      selected: "blue",
+      selected: "blue-500",
       disabled: "grey-700"
     }
   },

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: {
@@ -126,11 +129,9 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   textInputLabel: {
-    color: inputLabelColor,
     ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular")
   },
   textInputLabelLegacyFont: {
-    color: inputLabelColor,
     ...makeFontStyleObject(
       inputLabelFontSize,
       "TitilliumSansPro",
@@ -149,10 +150,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 {
@@ -189,14 +195,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>
@@ -226,7 +232,7 @@ 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);
@@ -234,9 +240,14 @@ export const TextInputBase = ({
   const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
 
   const theme = useIOTheme();
+  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);
@@ -255,10 +266,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]
   );
@@ -467,6 +478,7 @@ export const TextInputBase = ({
               isExperimental
                 ? styles.textInputLabel
                 : styles.textInputLabelLegacyFont,
+              { color: inputLabelColor },
               animatedLabelStyle
             ]}
           >

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

@@ -103,7 +103,7 @@ exports[`Test Typography Components BodySmall Snapshot 3`] = `
     [
       {},
       {
-        "color": "#475A6D",
+        "color": "#555C70",
         "fontFamily": "Titillium Sans Pro",
         "fontSize": 14,
         "fontStyle": "normal",
@@ -126,7 +126,7 @@ exports[`Test Typography Components BodySmall Snapshot 4`] = `
     [
       {},
       {
-        "color": "#C02927",
+        "color": "#D13333",
         "fontFamily": "Titillium Sans Pro",
         "fontSize": 14,
         "fontStyle": "normal",
@@ -286,7 +286,7 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
     [
       {},
       {
-        "color": "#CCD4DC",
+        "color": "#D2D6E3",
         "fontFamily": "Titillium Sans Pro",
         "fontSize": 22,
         "fontStyle": "normal",
@@ -476,7 +476,7 @@ exports[`Test Typography Components H5 Snapshot 2`] = `
         "textTransform": "uppercase",
       },
       {
-        "color": "#475A6D",
+        "color": "#555C70",
         "fontFamily": "Titillium Sans Pro",
         "fontSize": 14,
         "fontStyle": "normal",

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

@@ -30,10 +30,10 @@ describe("Test Typography Components", () => {
     // SemiBold weight, default weight
     const h3Default = TestRenderer.create(<H3>Text</H3>).toJSON();
     expect(h3Default).toMatchSnapshot();
-    const h3bluegreyLight = TestRenderer.create(
-      <H3 color={"bluegreyLight"}>Text</H3>
+    const h3grey200 = TestRenderer.create(
+      <H3 color={"grey-200"}>Text</H3>
     ).toJSON();
-    expect(h3bluegreyLight).toMatchSnapshot();
+    expect(h3grey200).toMatchSnapshot();
     const h3white = TestRenderer.create(<H3 color={"white"}>Text</H3>).toJSON();
     expect(h3white).toMatchSnapshot();
     const h3whiteBold = TestRenderer.create(
@@ -49,7 +49,9 @@ describe("Test Typography Components", () => {
     // Bold weight, default weight
     const h4Default = TestRenderer.create(<H4>Text</H4>).toJSON();
     expect(h4Default).toMatchSnapshot();
-    const h4Dblue = TestRenderer.create(<H4 color={"blue"}>Text</H4>).toJSON();
+    const h4Dblue = TestRenderer.create(
+      <H4 color={"blue-500"}>Text</H4>
+    ).toJSON();
     expect(h4Dblue).toMatchSnapshot();
     const h4white = TestRenderer.create(<H4 color={"white"}>Text</H4>).toJSON();
     expect(h4white).toMatchSnapshot();
@@ -59,11 +61,11 @@ describe("Test Typography Components", () => {
     const h5Default = TestRenderer.create(<H5>Text</H5>).toJSON();
     expect(h5Default).toMatchSnapshot();
     const h5Defaultbluegrey = TestRenderer.create(
-      <H5 color={"bluegrey"}>Text</H5>
+      <H5 color={"grey-700"}>Text</H5>
     ).toJSON();
     expect(h5Defaultbluegrey).toMatchSnapshot();
     const h5Defaultblue = TestRenderer.create(
-      <H5 color={"blue"}>Text</H5>
+      <H5 color={"blue-500"}>Text</H5>
     ).toJSON();
     expect(h5Defaultblue).toMatchSnapshot();
     const h5Defaultwhite = TestRenderer.create(
@@ -93,9 +95,9 @@ describe("Test Typography Components", () => {
     type BodyColors = React.ComponentProps<typeof BodySmall>["color"];
 
     const allowedColors: ReadonlyArray<BodyColors> = [
-      "blue",
-      "bluegrey",
-      "red",
+      "blue-500",
+      "grey-700",
+      "error-600",
       "white"
     ];
 
@@ -126,26 +128,26 @@ describe("Test Typography common", () => {
   it("Test calculateWeightColor behaviour", () => {
     const noValues = calculateWeightColor<IOFontWeight, IOColors>(
       "Bold",
-      "red"
+      "error-600"
     );
-    expect(noValues.color).toBe("red");
+    expect(noValues.color).toBe("error-600");
     expect(noValues.weight).toBe("Bold");
 
     const weightProvided = calculateWeightColor<IOFontWeight, IOColors>(
       "Bold",
-      "red",
+      "error-600",
       "Regular"
     );
-    expect(weightProvided.color).toBe("red");
+    expect(weightProvided.color).toBe("error-600");
     expect(weightProvided.weight).toBe("Regular");
 
     const allValuesProvided = calculateWeightColor<IOFontWeight, IOColors>(
       "Bold",
-      "red",
+      "error-600",
       "Regular",
-      "bluegrey"
+      "grey-700"
     );
-    expect(allValuesProvided.color).toBe("bluegrey");
+    expect(allValuesProvided.color).toBe("grey-700");
     expect(allValuesProvided.weight).toBe("Regular");
   });
 });