@pagopa/io-app-design-system 1.17.1 → 1.18.0

package/src/components/layout/__test__/ForceScrollDownView.test.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable functional/immutable-data */
+import { fireEvent, render } from "@testing-library/react-native";
+import React from "react";
+import { Text } from "react-native";
+import { ForceScrollDownView } from "../ForceScrollDownView";
+
+const tContent = "Some content";
+
+describe("ForceScrollDownView", () => {
+  jest.useFakeTimers();
+
+  it("should match snapshot", () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const component = render(
+      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it("renders the content correctly", () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const { getByText } = render(
+      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+    );
+
+    expect(getByText(tContent)).toBeDefined();
+  });
+
+  it("displays the scroll down button when necessary", async () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const tScreenHeight = 1000;
+
+    const { getByTestId, queryByTestId } = render(
+      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+    );
+
+    const scrollView = getByTestId("ScrollView");
+
+    // Update scroll view height
+    fireEvent(scrollView, "layout", {
+      nativeEvent: {
+        layout: {
+          height: tScreenHeight
+        }
+      }
+    });
+
+    // Update scroll view content height
+    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight - 500);
+
+    // Button should not be visible because content does not need scrolling
+    const buttonBefore = queryByTestId("ScrollDownButton");
+    expect(buttonBefore).toBeNull();
+
+    // Increase content height to force button to be shown
+    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight + 500);
+
+    jest.advanceTimersByTime(500);
+
+    // Button should be visible now beacuse content needs scrolling
+    const buttonAfter = queryByTestId("ScrollDownButton");
+    expect(buttonAfter).not.toBeNull();
+  });
+
+  it("scrolls to the bottom when the button is pressed", () => {
+    const tChildren = <Text>{tContent}</Text>;
+
+    const tScreenHeight = 1000;
+
+    const { getByTestId, queryByTestId } = render(
+      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+    );
+
+    const scrollView = getByTestId("ScrollView");
+
+    // Update scroll view height
+    fireEvent(scrollView, "layout", {
+      nativeEvent: {
+        layout: {
+          height: tScreenHeight
+        }
+      }
+    });
+
+    // Update scroll view content height
+    fireEvent(scrollView, "contentSizeChange", null, tScreenHeight + 500);
+
+    // Button should be visible
+    const buttonBefore = getByTestId("ScrollDownButton");
+    expect(buttonBefore).not.toBeNull();
+
+    // Fire button press event
+    fireEvent.press(buttonBefore);
+
+    // Wait for the scroll animation
+    jest.advanceTimersByTime(500);
+
+    // Button should not be visible after scrolling
+    const buttonAfter = queryByTestId("ScrollDownButton");
+    expect(buttonAfter).toBeNull();
+  });
+});

package/src/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ForceScrollDownView should match snapshot 1`] = `
+<RCTScrollView
+  onContentSizeChange={[Function]}
+  onLayout={[Function]}
+  onScroll={[Function]}
+  scrollEnabled={true}
+  scrollEventThrottle={400}
+  scrollIndicatorInsets={
+    {
+      "right": 1,
+    }
+  }
+  testID="ScrollView"
+>
+  <View>
+    <Text>
+      Some content
+    </Text>
+  </View>
+</RCTScrollView>
+`;

package/src/components/layout/index.tsx

@@ -3,5 +3,6 @@ export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
 export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
+export * from "./ForceScrollDownView";
 export * from "./FooterWithButtons";
 export * from "./BlockButtons";

package/src/components/listitems/ListItemTransaction.tsx

@@ -65,6 +65,11 @@ export type ListItemTransaction = WithTestID<
     paymentLogoIcon?: ListItemTransactionLogo;
     subtitle: string;
     title: string;
+    /**
+     * The maximum number of lines to display for the title.
+     * @default 2
+     */
+    numberOfLines?: number;
     accessible?: boolean;
   } & (
       | {
@@ -117,6 +122,7 @@ export const ListItemTransaction = ({
   transactionAmount,
   badgeText,
   transactionStatus = "success",
+  numberOfLines = 2,
   accessible
 }: ListItemTransaction) => {
   const { isExperimental } = useIOExperimentalDesign();
@@ -144,6 +150,7 @@ export const ListItemTransaction = ({
             <H6
               accessibilityLabel={getAccessibleAmountText(transactionAmount)}
               color={hasChevronRight ? interactiveColor : "black"}
+              numberOfLines={numberOfLines}
             >
               {transactionAmount || ""}
             </H6>
@@ -153,6 +160,7 @@ export const ListItemTransaction = ({
             <H6
               accessibilityLabel={getAccessibleAmountText(transactionAmount)}
               color={hasChevronRight ? interactiveColor : "success-700"}
+              numberOfLines={numberOfLines}
             >
               {transactionAmount || ""}
             </H6>
@@ -181,7 +189,10 @@ export const ListItemTransaction = ({
           </View>
         )}
         <View style={IOStyles.flex}>
-          <LabelSmallAlt numberOfLines={2} color={theme["textBody-default"]}>
+          <LabelSmallAlt
+            numberOfLines={numberOfLines}
+            color={theme["textBody-default"]}
+          >
             {title}
           </LabelSmallAlt>
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>

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,