@pagopa/io-app-design-system 1.17.2 → 1.19.0

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

@@ -1,15 +1,16 @@
 import React from "react";
 import { Alert } from "react-native";
 import * as TestRenderer from "react-test-renderer";
+import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
+import ListItemIDP from "../../modules/ModuleIDP";
+import ListItemAction from "../ListItemAction";
 import ListItemInfo from "../ListItemInfo";
 import ListItemInfoCopy from "../ListItemInfoCopy";
 import ListItemNav from "../ListItemNav";
 import ListItemNavAlert from "../ListItemNavAlert";
-import ListItemAction from "../ListItemAction";
-import ListItemIDP from "../../modules/ModuleIDP";
+import { ListItemRadioWithAmount } from "../ListItemRadioWithAmount";
 import { ListItemTransaction } from "../ListItemTransaction";
 import { PressableListItemBase } from "../PressableListItemsBase";
-import { ListItemRadioWithAmount } from "../ListItemRadioWithAmount";
 
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
@@ -114,3 +115,103 @@ describe("Test List Item Components", () => {
     expect(notSuggested).toMatchSnapshot();
   });
 });
+
+describe("Test List Item Components - Experimental Enabled ", () => {
+  it("ListItemInfo Snapshot", () => {
+    const listItemInfo = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemInfo
+        label={"label"}
+        value={"testValue"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemInfo>
+    ).toJSON();
+    expect(listItemInfo).toMatchSnapshot();
+  });
+  it("ListItemInfoCopy Snapshot", () => {
+    const listItemInfoCopy = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemInfoCopy
+        label={"label"}
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemInfoCopy>
+    ).toJSON();
+    expect(listItemInfoCopy).toMatchSnapshot();
+  });
+  it("ListItemNav Snapshot", () => {
+    const listItemNav = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemNav
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemNav>
+    ).toJSON();
+    expect(listItemNav).toMatchSnapshot();
+  });
+  it("ListItemNavAlert Snapshot", () => {
+    const listItemNavAlert = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemNavAlert
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemNavAlert>
+    ).toJSON();
+    expect(listItemNavAlert).toMatchSnapshot();
+  });
+  it("ListItemAction Snapshot", () => {
+    const listItemAction = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemAction
+        label={"label"}
+        variant={"primary"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemAction>
+    ).toJSON();
+    expect(listItemAction).toMatchSnapshot();
+  });
+  it("ListItemIDP Snapshot", () => {
+    const listItemIDP = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemIDP></ListItemIDP>
+    ).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+  it("ListItemTransaction Snapshot", () => {
+    const listItemIDP = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemTransaction
+        title="TITLE"
+        subtitle="subtitle"
+        transactionStatus="success"
+        transactionAmount="€ 1.000,00"
+        isLoading={true}
+        onPress={onButtonPress}
+      />
+    ).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+  it("PressableListItemsBase Snapshot", () => {
+    const listItemIDP = TestRendererWithExperimentalEnabledContextProvider(
+      <PressableListItemBase></PressableListItemBase>
+    ).toJSON();
+    expect(listItemIDP).toMatchSnapshot();
+  });
+  it("ListItemRadioWithAmount Snapshot", () => {
+    const suggested = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemRadioWithAmount
+        formattedAmountString="€ 1.000,00"
+        label="label"
+        suggestReason="suggestReason"
+        isSuggested={true}
+        selected={true}
+      />
+    ).toJSON();
+    const notSuggested = TestRendererWithExperimentalEnabledContextProvider(
+      <ListItemRadioWithAmount
+        formattedAmountString="€ 1.000,00"
+        label="label"
+        isSuggested={false}
+      />
+    ).toJSON();
+    expect(suggested).toMatchSnapshot();
+    expect(notSuggested).toMatchSnapshot();
+  });
+});

package/src/components/otpInput/BoxedInput.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { IOColors } from "../../core";
+import { BaseTypography, H6 } from "../typography";
+
+type Props = {
+  status: "default" | "focus" | "error";
+  secret?: boolean;
+  value?: string;
+};
+
+const styles = StyleSheet.create({
+  baseBox: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 35,
+    height: 60,
+    borderRadius: 8
+  },
+  defaultBox: {
+    borderWidth: 1,
+    borderColor: IOColors["grey-200"]
+  },
+  focusedBox: {
+    borderWidth: 2,
+    borderColor: IOColors["blueIO-500"]
+  },
+  errorBox: {
+    borderWidth: 1,
+    borderColor: IOColors["error-850"],
+    backgroundColor: IOColors["error-100"]
+  }
+});
+
+// FIXME Replace this component with H3 once the legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const SecretValue = () => (
+  <BaseTypography
+    font="DMMono"
+    weight="SemiBold"
+    color="bluegreyDark"
+    fontStyle={{ fontSize: 22, lineHeight: 33 }}
+    accessible={false}
+  >
+    {"•"}
+  </BaseTypography>
+);
+
+export const BoxedInput = ({ status, value, secret }: Props) => {
+  const derivedStyle = useMemo(() => {
+    switch (status) {
+      case "error":
+        return styles.errorBox;
+      case "focus":
+        return styles.focusedBox;
+      case "default":
+      default:
+        return styles.defaultBox;
+    }
+  }, [status]);
+  return (
+    <View style={[styles.baseBox, derivedStyle]} accessible={false}>
+      {value &&
+        (secret ? <SecretValue /> : <H6 accessible={false}>{value}</H6>)}
+    </View>
+  );
+};

package/src/components/otpInput/OTPInput.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { Pressable, TextInput } from "react-native";
+import Animated from "react-native-reanimated";
+import { IOStyles } from "../../core/IOStyles";
+import { LabelSmall } from "../typography";
+import { triggerHaptic } from "../../functions";
+import { VSpacer } from "../spacer";
+import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
+import { BoxedInput } from "./BoxedInput";
+
+type Props = {
+  value: string;
+  onValueChange: (value: string) => void;
+  length: number;
+  secret?: boolean;
+  autocomplete?: boolean;
+  onValidate?: (value: string) => boolean;
+  errorMessage?: string;
+};
+
+/**
+ * `OTPInput` is a component that allows the user to enter a one-time password.
+ * It has an hidden `TextInput` that is used to handle the keyboard and the focus.
+ * The input handles the autocompletion of the OTP code.
+ * @param value - The value of the OTP code
+ * @param onValueChange - The function to call when the value changes
+ * @param length - The length of the OTP code
+ * @param secret - If the OTP code should be hidden
+ * @param autocomplete - If the OTP code should be autocompleted
+ * @param onValidate - The function to call when the OTP code is validated
+ * @param errorMessage - The error message to display
+ * @returns
+ */
+export const OTPInput = ({
+  value,
+  onValueChange,
+  length,
+  onValidate,
+  errorMessage = "",
+  secret = false,
+  autocomplete = false
+}: Props) => {
+  const [hasFocus, setHasFocus] = React.useState(false);
+  const [hasError, setHasError] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState(value);
+
+  const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
+
+  const inputRef = React.createRef<TextInput>();
+  const timerRef = React.useRef<NodeJS.Timeout>();
+
+  const handleValidate = (val: string) => {
+    if (!onValidate || val.length < length) {
+      return;
+    }
+    const isValid = onValidate(val);
+    if (!isValid) {
+      setHasError(true);
+      triggerHaptic("notificationError");
+      // eslint-disable-next-line functional/immutable-data
+      translate.value = shakeAnimation();
+
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      // eslint-disable-next-line functional/immutable-data
+      timerRef.current = setTimeout(() => {
+        setHasError(false);
+        setInputValue("");
+        onValueChange("");
+      }, 500);
+    }
+  };
+
+  React.useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  const handleChange = (value: string) => {
+    if (value.length > length) {
+      return;
+    }
+    setInputValue(value);
+    onValueChange(value);
+    handleValidate(value);
+  };
+
+  return (
+    <Animated.View style={[{ flexGrow: 1 }, animatedStyle]}>
+      <Pressable
+        onPress={() => {
+          inputRef.current?.focus();
+          setHasFocus(true);
+        }}
+        style={[IOStyles.row, { justifyContent: "space-around" }]}
+        accessible={true}
+        accessibilityLabel="OTP Input"
+        accessibilityValue={{ text: inputValue }}
+      >
+        <TextInput
+          value={inputValue}
+          onChangeText={handleChange}
+          style={{ position: "absolute", opacity: 0 }}
+          maxLength={length}
+          ref={inputRef}
+          onBlur={() => setHasFocus(false)}
+          keyboardType="numeric"
+          inputMode="numeric"
+          returnKeyType="done"
+          textContentType="oneTimeCode"
+          autoComplete={autocomplete ? "sms-otp" : undefined}
+          accessible={true}
+        />
+        {[...Array(length)].map((_, i) => (
+          <BoxedInput
+            key={i}
+            status={
+              hasError
+                ? "error"
+                : hasFocus && inputValue.length === i
+                ? "focus"
+                : "default"
+            }
+            secret={secret}
+            value={inputValue[i]}
+          />
+        ))}
+      </Pressable>
+      <VSpacer size={4} />
+      {hasError && errorMessage && (
+        <LabelSmall color="error-850" style={{ textAlign: "center" }}>
+          {errorMessage}
+        </LabelSmall>
+      )}
+    </Animated.View>
+  );
+};

package/src/components/otpInput/index.tsx

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

package/src/components/pictograms/Pictogram.tsx

@@ -7,27 +7,50 @@ import {
   useIOTheme
 } from "../../core/IOColors";
 
-import PictogramMessages from "./svg/PictogramMessages";
 import PictogramAbacus from "./svg/PictogramAbacus";
+import PictogramAccessDenied from "./svg/PictogramAccessDenied";
 import PictogramAirBaloon from "./svg/PictogramAirBaloon";
 import PictogramAirship from "./svg/PictogramAirship";
 import PictogramAttention from "./svg/PictogramAttention";
 import PictogramBaloons from "./svg/PictogramBaloons";
 import PictogramBeerMug from "./svg/PictogramBeerMug";
-import PictogramCameraRequest from "./svg/PictogramCameraRequest";
 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 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";
+import PictogramObjFollowMessage from "./svg/PictogramObjFollowMessage";
+import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
+import PictogramObjKey from "./svg/PictogramObjKey";
+import PictogramObjManual from "./svg/PictogramObjManual";
+import PictogramObjTrash from "./svg/PictogramObjTrash";
+import PictogramPasscode from "./svg/PictogramPasscode";
 import PictogramPiggyBank from "./svg/PictogramPiggyBank";
 import PictogramPin from "./svg/PictogramPin";
 import PictogramPlaces from "./svg/PictogramPlaces";
@@ -35,99 +58,79 @@ 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 PictogramUploadFile from "./svg/PictogramUploadFile";
-import PictogramSuccess from "./svg/PictogramSuccess";
-import PictogramHelp from "./svg/PictogramHelp";
-import PictogramITWallet from "./svg/PictogramITWallet";
-import PictogramFatalError from "./svg/PictogramFatalError";
 import PictogramUpdateOS from "./svg/PictogramUpdateOS";
-import PictogramIdentityAdd from "./svg/PictogramIdentityAdd";
-import PictogramIdentityRefresh from "./svg/PictogramIdentityRefresh";
-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 PictogramCharity from "./svg/PictogramCharity";
-import PictogramEmpty from "./svg/PictogramEmpty";
-import PictogramCie from "./svg/PictogramCie";
-import PictogramFeature from "./svg/PictogramFeature";
-import PictogramNotification from "./svg/PictogramNotification";
-import PictogramObjClock from "./svg/PictogramObjClock";
-import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
-import PictogramObjManual from "./svg/PictogramObjManual";
-import PictogramObjTrash from "./svg/PictogramObjTrash";
-import PictogramObjKey from "./svg/PictogramObjKey";
-import PictogramObjFlyingMessage from "./svg/PictogramObjFlyingMessage";
-import PictogramObjFollowMessage from "./svg/PictogramObjFollowMessage";
+import PictogramUploadFile from "./svg/PictogramUploadFile";
 /* Bleed Pictograms */
+import PictogramActivate from "./svg/PictogramActivate";
+import PictogramAttachment from "./svg/PictogramAttachment";
+import PictogramBiometric from "./svg/PictogramBiometric";
+import PictogramBleedAccessDenied from "./svg/PictogramBleedAccessDenied";
+import PictogramBleedAttention from "./svg/PictogramBleedAttention";
+import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
+import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
+import PictogramBleedCardAdd from "./svg/PictogramBleedCardAdd";
+import PictogramBleedCardFavourite from "./svg/PictogramBleedCardFavourite";
+import PictogramBleedCardIssue from "./svg/PictogramBleedCardIssue";
+import PictogramBleedCardQuestion from "./svg/PictogramBleedCardQuestion";
 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";
-import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
-import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
-import PictogramBleedNotification from "./svg/PictogramBleedNotification";
-import PictogramStar from "./svg/PictogramStar";
-import PictogramBleedStar from "./svg/PictogramBleedStar";
+import PictogramBleedDoc from "./svg/PictogramBleedDoc";
 import PictogramBleedEmpty from "./svg/PictogramBleedEmpty";
-import PictogramBleedAttention from "./svg/PictogramBleedAttention";
-import PictogramBleedSuccess from "./svg/PictogramBleedSuccess";
+import PictogramBleedEnded from "./svg/PictogramBleedEnded";
 import PictogramBleedFatalError from "./svg/PictogramBleedFatalError";
+import PictogramBleedFeature from "./svg/PictogramBleedFeature";
+import PictogramBleedFeedback from "./svg/PictogramBleedFeedback";
+import PictogramBleedHelp from "./svg/PictogramBleedHelp";
+import PictogramBleedITWallet from "./svg/PictogramBleedITWallet";
+import PictogramBleedIdea from "./svg/PictogramBleedIdea";
 import PictogramBleedIdentity from "./svg/PictogramBleedIdentity";
 import PictogramBleedIdentityAdd from "./svg/PictogramBleedIdentityAdd";
 import PictogramBleedIdentityCheck from "./svg/PictogramBleedIdentityCheck";
 import PictogramBleedIdentityRefresh from "./svg/PictogramBleedIdentityRefresh";
-import PictogramBleedAccessDenied from "./svg/PictogramBleedAccessDenied";
+import PictogramBleedLostConnection from "./svg/PictogramBleedLostConnection";
+import PictogramBleedMessage from "./svg/PictogramBleedMessage";
+import PictogramBleedNotification from "./svg/PictogramBleedNotification";
+import PictogramBleedPasscode from "./svg/PictogramBleedPasscode";
+import PictogramBleedPending from "./svg/PictogramBleedPending";
+import PictogramBleedQrCode from "./svg/PictogramBleedQrCode";
+import PictogramBleedSearch from "./svg/PictogramBleedSearch";
+import PictogramBleedSecurity from "./svg/PictogramBleedSecurity";
+import PictogramBleedStar from "./svg/PictogramBleedStar";
 import PictogramBleedStopSecurity from "./svg/PictogramBleedStopSecurity";
+import PictogramBleedSuccess from "./svg/PictogramBleedSuccess";
 import PictogramBleedTime from "./svg/PictogramBleedTime";
-import PictogramBleedPasscode from "./svg/PictogramBleedPasscode";
-import PictogramTiming from "./svg/PictogramTiming";
 import PictogramBleedTiming from "./svg/PictogramBleedTiming";
+import PictogramCardAdd from "./svg/PictogramCardAdd";
+import PictogramCardFavourite from "./svg/PictogramCardFavourite";
 import PictogramCardIssue from "./svg/PictogramCardIssue";
 import PictogramCardQuestion from "./svg/PictogramCardQuestion";
-import PictogramCardFavourite from "./svg/PictogramCardFavourite";
-import PictogramCardAdd from "./svg/PictogramCardAdd";
-import PictogramBleedCardAdd from "./svg/PictogramBleedCardAdd";
-import PictogramBleedCardFavourite from "./svg/PictogramBleedCardFavourite";
-import PictogramBleedCardQuestion from "./svg/PictogramBleedCardQuestion";
-import PictogramBleedCardIssue from "./svg/PictogramBleedCardIssue";
-import PictogramSearchLens from "./svg/PictogramSearchLens";
-import PictogramBleedSearch from "./svg/PictogramBleedSearch";
-import PictogramBleedDoc from "./svg/PictogramBleedDoc";
 import PictogramDoc from "./svg/PictogramDoc";
-import PictogramPending from "./svg/PictogramPending";
-import PictogramBleedPending from "./svg/PictogramBleedPending";
-import PictogramMessage from "./svg/PictogramMessage";
-import PictogramBleedMessage from "./svg/PictogramBleedMessage";
+import PictogramEmailDotCheck from "./svg/PictogramEmailDotCheck";
+import PictogramEmailDotNotif from "./svg/PictogramEmailDotNotif";
+import PictogramEnded from "./svg/PictogramEnded";
+import PictogramEventClose from "./svg/PictogramEventClose";
 import PictogramIdea from "./svg/PictogramIdea";
-import PictogramBleedIdea from "./svg/PictogramBleedIdea";
+import PictogramLostConnection from "./svg/PictogramLostConnection";
+import PictogramMessage from "./svg/PictogramMessage";
 import PictogramMoneyCheck from "./svg/PictogramMoneyCheck";
-import PictogramReactivate from "./svg/PictogramReactivate";
-import PictogramActivate from "./svg/PictogramActivate";
 import PictogramNFCScanAndroid from "./svg/PictogramNFCScanAndroid";
 import PictogramNFCScaniOS from "./svg/PictogramNFCScaniOS";
-import PictogramAttachment from "./svg/PictogramAttachment";
-import PictogramLostConnection from "./svg/PictogramLostConnection";
+import PictogramPending from "./svg/PictogramPending";
 import PictogramQrCode from "./svg/PictogramQrCode";
-import PictogramBleedQrCode from "./svg/PictogramBleedQrCode";
-import PictogramEmailDotNotif from "./svg/PictogramEmailDotNotif";
-import PictogramEmailDotCheck from "./svg/PictogramEmailDotCheck";
-import PictogramBiometric from "./svg/PictogramBiometric";
-import PictogramBleedLostConnection from "./svg/PictogramBleedLostConnection";
-import PictogramEnded from "./svg/PictogramEnded";
-import PictogramBleedEnded from "./svg/PictogramBleedEnded";
+import PictogramReactivate from "./svg/PictogramReactivate";
+import PictogramSearchLens from "./svg/PictogramSearchLens";
+import PictogramStar from "./svg/PictogramStar";
+import PictogramTiming from "./svg/PictogramTiming";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -209,6 +212,9 @@ export const IOPictograms = {
   emailDotNotif: PictogramEmailDotNotif,
   emailDotCheck: PictogramEmailDotCheck,
   biometric: PictogramBiometric,
+  eventClose: PictogramEventClose,
+  hello: PictogramHello,
+  comunicationProblem: PictogramComunicationProblem,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,

package/src/components/pictograms/svg/PictogramComunicationProblem.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramComunicationProblem = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M176.99 121.75L176.44 117.27L172.07 117.8L172.99 125.34C174.47 123.79 175.91 122.58 176.99 121.76V121.75Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M153.72 158.8C156.62 163.52 159.63 168.41 167.72 175.69L170.67 172.42C163.05 165.56 160.34 161.16 157.48 156.49C154.97 152.4 152.37 148.17 146.55 142.18C145.54 143.23 144.52 144.28 143.48 145.34C148.89 150.93 151.35 154.93 153.73 158.79L153.72 158.8Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M165.879 101.9L166.019 102.14C167.969 98 173.489 94.2 183.549 90.03C186.189 88.94 188.649 88.57 190.909 88.89C196.019 80.64 198.889 74.82 198.889 74.82C213.739 60.08 208.539 43.32 208.539 43.32C206.109 33.27 192.999 27.7 192.999 27.7C192.999 27.7 171.449 17.65 160.269 46.27C149.089 74.89 162.799 75.98 162.799 75.98C166.359 76.73 164.539 81.24 164.539 81.24C163.839 83.52 161.099 87.8 157.469 92.83C157.889 93.03 158.309 93.23 158.739 93.46C162.129 95.31 164.299 99.11 165.889 101.89L165.879 101.9ZM179.839 70.8C188.489 66.69 193.829 60.97 195.689 53.79C197.069 48.5 195.959 44.42 195.949 44.38C195.729 43.58 196.189 42.75 196.989 42.53C197.779 42.31 198.609 42.77 198.839 43.57C198.889 43.76 203.889 62.7 181.129 73.51C180.919 73.61 180.699 73.66 180.489 73.66C179.929 73.66 179.389 73.34 179.129 72.8C178.769 72.05 179.089 71.16 179.839 70.8Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M144.03 150.22C149.69 146.71 154.89 142.51 159.54 137.75C165.1 132.05 168.75 128.41 168.75 128.41C172.19 125.17 180.35 114.8 183.39 111.28C181.82 111 169.71 113.28 168.75 112.52C168.28 113.52 167.54 114.53 166.39 115.53C164.25 117.39 162.18 117.91 160.14 117.55C160.47 118.49 160.68 119.43 160.76 120.35C160.96 122.68 160.25 124.79 158.72 126.47C157.26 128.08 155.31 128.92 153.13 128.89C151.8 128.88 150.42 128.54 149.05 128C150.43 130.19 151.16 132.19 150.83 134.27C150.49 136.46 149.07 138.33 146.35 140.14C145.47 140.73 144.5 140.99 143.47 140.99C137.53 140.99 129.77 132.36 127.17 129.26C123.19 132.46 121.03 133.68 119.85 131.54C117.6 127.48 111.06 126.94 111.06 126.94C100.27 125.39 94.6701 128.35 94.6701 128.35C89.3501 130.58 85.8601 132.93 82.6301 135.63C68.8701 147.15 73.1101 169.7 90.3001 174.86C90.3901 174.89 90.4601 174.91 90.5001 174.93C114.21 181.33 122.2 163.11 122.2 163.11C122.2 163.11 134.34 156.19 144.01 150.2L144.03 150.22ZM119.25 145.43C119.05 146.16 114.13 163.36 89.7601 165.5C89.7201 165.5 89.6701 165.5 89.6301 165.5C88.8601 165.5 88.2101 164.91 88.1401 164.13C88.0701 163.3 88.6801 162.58 89.5001 162.51C111.81 160.55 116.31 144.8 116.36 144.64C116.58 143.84 117.4 143.37 118.2 143.58C119 143.8 119.47 144.62 119.26 145.42L119.25 145.43Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M180.481 73.65C180.701 73.65 180.911 73.6 181.121 73.5C203.881 62.69 198.881 43.75 198.831 43.56C198.611 42.76 197.771 42.29 196.981 42.52C196.181 42.74 195.721 43.57 195.941 44.37C195.951 44.41 197.061 48.49 195.681 53.78C193.821 60.96 188.481 66.68 179.831 70.79C179.081 71.15 178.761 72.04 179.121 72.79C179.381 73.33 179.911 73.65 180.481 73.65Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M118.19 143.59C117.39 143.38 116.57 143.85 116.35 144.65C116.31 144.81 111.8 160.56 89.4901 162.52C88.6601 162.59 88.0501 163.32 88.1301 164.14C88.2001 164.92 88.8501 165.51 89.6201 165.51C89.6601 165.51 89.7101 165.51 89.7501 165.51C114.13 163.37 119.04 146.17 119.24 145.44C119.46 144.64 118.98 143.82 118.18 143.6L118.19 143.59Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M183.36 111.91C188.25 109.56 192.3 106.32 192.47 106.18L189.71 102.75C187.18 104.78 181.02 108.91 176.18 109.79C175 111.26 173.77 112.72 172.52 114.18C175.11 114.64 178.61 114.19 183.36 111.91Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M193.051 119.07C193.491 117.62 194.771 116.17 196.121 114.63C199.231 111.1 203.481 106.26 200.371 97.56C200.151 96.84 198.481 91.97 193.951 89.79C192.991 89.33 191.971 89.04 190.911 88.89C190.051 90.28 189.121 91.75 188.131 93.26C189.581 93.05 190.881 93.21 192.021 93.74C195.021 95.17 196.161 98.83 196.171 98.86C196.181 98.9 196.201 98.95 196.211 98.99C198.471 105.28 195.851 108.26 192.811 111.71C191.211 113.53 189.551 115.42 188.841 117.78C186.101 126.82 191.931 143.53 206.121 154.76L208.851 151.31C195.571 140.8 191.081 125.57 193.051 119.06V119.07Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M183.55 90.03C173.49 94.2 167.97 97.99 166.02 102.14L166.22 102.49C166.38 102.77 166.61 103.1 166.86 103.45C168.06 105.17 170.53 108.72 168.75 112.52C169.71 113.28 170.94 113.9 172.51 114.19C173.77 112.73 174.99 111.27 176.17 109.8C173.98 110.2 172.06 109.93 170.87 108.49C169.43 106.74 169.51 105.55 169.69 104.81C170.48 101.65 175.7 98.05 185.22 94.11C186.24 93.69 187.21 93.41 188.12 93.28C189.11 91.76 190.04 90.3 190.9 88.91C188.64 88.59 186.18 88.96 183.54 90.05L183.55 90.03Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M179.92 122.35L181.1 124.21L179.92 122.35Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M178.73 120.5C178.61 120.57 177.95 121.01 176.98 121.75L177.36 124.88L172.99 125.41V125.34C169.43 129.05 165.69 134.66 166.5 141.37L170.87 140.84C169.76 131.61 180.95 124.31 181.09 124.21L179.91 122.35L178.73 120.49V120.5Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M177.37 124.87L176.99 121.74C175.92 122.57 174.47 123.78 172.99 125.32V125.39L177.37 124.86V124.87Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M130.411 126.33C130.231 126.09 130.051 125.86 129.891 125.64C129.691 125.35 129.551 125.05 129.491 124.72C129.351 124 129.471 122.02 130.731 120.49C131.871 119.11 133.721 118.37 136.221 118.29C136.391 118.54 136.561 118.77 136.741 119.01C137.671 117.91 138.661 116.72 139.711 115.45C139.531 115.25 139.351 115.06 139.191 114.87C139.111 114.78 139.031 114.7 138.941 114.63C139.161 112.24 140.221 107.45 145.211 106.13C145.621 106.5 146.011 106.86 146.401 107.23C147.331 106.07 148.271 104.89 149.201 103.7C148.651 103.23 148.211 102.87 147.961 102.67C148.011 100.57 148.551 97.27 150.251 96.19C151.421 95.45 153.151 95.8 154.781 96.45C155.711 95.21 156.601 94 157.451 92.82C153.601 91.01 150.381 90.88 147.891 92.47C144.451 94.66 143.711 99.33 143.591 102C137.221 103.92 134.991 109.76 134.571 114C130.771 114.48 128.571 116.2 127.341 117.68C124.981 120.54 124.871 123.97 125.171 125.54C125.351 126.48 125.731 127.36 126.291 128.16C126.311 128.19 126.631 128.6 127.181 129.26C128.261 128.39 129.361 127.4 130.401 126.32L130.411 126.33Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M143.489 141C144.519 141 145.489 140.74 146.369 140.15C149.089 138.33 150.509 136.46 150.849 134.28C151.169 132.19 150.439 130.2 149.069 128.01C150.439 128.55 151.819 128.88 153.149 128.9C155.339 128.93 157.279 128.09 158.739 126.48C160.269 124.8 160.969 122.69 160.779 120.36C160.699 119.43 160.479 118.49 160.159 117.56C162.199 117.91 164.269 117.4 166.409 115.54C167.559 114.54 168.299 113.53 168.769 112.53C168.279 112.14 167.859 111.73 167.499 111.29C165.499 108.86 164.809 106.32 165.449 103.74C165.579 103.2 165.779 102.67 166.029 102.15L165.889 101.91C164.309 99.13 162.139 95.33 158.739 93.48C158.309 93.24 157.889 93.04 157.469 92.85C156.619 94.02 155.729 95.24 154.799 96.48C155.439 96.74 156.069 97.04 156.639 97.35C158.939 98.6 160.749 101.78 162.069 104.1L162.409 104.7C162.649 105.12 162.949 105.54 163.259 105.99C165.209 108.78 165.829 110.22 163.509 112.23C161.269 114.18 159.369 113.35 154.539 108.88C152.549 106.66 150.539 104.85 149.219 103.72C148.289 104.9 147.349 106.08 146.419 107.25C147.419 108.18 148.399 109.11 149.329 110.01C149.999 110.66 150.669 111.3 151.329 111.92C153.879 114.76 156.159 118.05 156.389 120.75C156.479 121.87 156.199 122.76 155.479 123.54C154.849 124.23 154.199 124.54 153.189 124.52C149.299 124.48 143.099 119.17 139.719 115.46C138.669 116.73 137.679 117.92 136.749 119.02C138.449 121.4 140.079 123.46 141.549 125.3C144.469 128.96 146.769 131.86 146.499 133.62C146.369 134.48 145.499 135.46 143.919 136.51C142.019 137.78 134.019 131.02 130.419 126.34C129.369 127.42 128.279 128.41 127.199 129.28C129.789 132.38 137.559 141.01 143.499 141.01L143.489 141Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M167.49 111.28C167.85 111.71 168.27 112.13 168.76 112.52C170.53 108.72 168.07 105.17 166.87 103.45C166.62 103.09 166.39 102.77 166.23 102.49L166.03 102.14C165.78 102.67 165.58 103.2 165.45 103.73C164.81 106.31 165.5 108.85 167.5 111.28H167.49Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M63.0998 184.68C62.8498 184.68 62.5998 184.62 62.3598 184.48L45.3598 174.84C44.6398 174.43 44.3898 173.52 44.7898 172.8C45.1998 172.08 46.1198 171.83 46.8298 172.23L63.8298 181.87C64.5498 182.28 64.7998 183.19 64.3998 183.91C64.1198 184.4 63.6198 184.67 63.0898 184.67L63.0998 184.68Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M48.4204 215.54C47.9904 215.54 47.5704 215.36 47.2704 215C46.7404 214.37 46.8204 213.42 47.4504 212.89L67.0704 196.41C67.7004 195.88 68.6504 195.96 69.1804 196.59C69.7104 197.22 69.6304 198.17 69.0004 198.7L49.3804 215.18C49.1004 215.42 48.7604 215.53 48.4204 215.53V215.54Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M32.5001 192.78C31.6801 192.78 31.0201 192.13 31.0001 191.31C30.9901 190.48 31.6401 189.8 32.4701 189.78L61.7601 189.26H61.7901C62.6101 189.26 63.2701 189.91 63.2901 190.73C63.3001 191.56 62.6501 192.24 61.8201 192.26L32.5301 192.78H32.5001Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M71.5586 192.67V192.71C71.5586 192.71 71.5786 192.71 71.5886 192.71L71.5586 192.67Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M90.7491 172.96C90.5991 173.41 86.9991 183.57 73.2091 185.5L75.5691 186.76L71.2891 188.87V188.91H77.3291L71.8891 190.72L74.8791 191.46L74.3491 192.4C92.4691 189.81 97.2091 175.74 97.4091 175.11L90.7491 172.95V172.96Z"
+      fill={colorValues.main}
+    />
+  </Svg>
+);
+
+export default PictogramComunicationProblem;