jornada-ui 0.4.18 → 0.4.20

package/src/components/modal-maintenance/index.tsx

@@ -19,6 +19,7 @@ import { theme } from "../../styles/theme/theme";
 import { getStatusColorHex } from "../../utils/get-status-color";
 
 const ModalMaintenance: React.FC<IModalMaintenanceProps> = ({
+  testID = "modal-maintenance",
   visible,
   onClose,
   dataRegistro,
@@ -27,7 +28,7 @@ const ModalMaintenance: React.FC<IModalMaintenanceProps> = ({
   imagemUrl,
 }) => {
   return (
-    <Modal animationType="fade" transparent visible={visible}>
+    <Modal testID={testID} animationType="fade" transparent visible={visible}>
       <View
         style={{
           flex: 1,

package/src/components/modal-maintenance/interface.d.ts

@@ -2,6 +2,7 @@
  * IMPORTS
  */
 interface IModalMaintenanceProps {
+  testID?: string;
   visible: boolean;
   onClose: () => void;
   dataRegistro: string;

package/src/components/modal-type-activities/index.tsx

@@ -29,13 +29,23 @@ const NUM_COLS = 3;
 const GUTTER = 8; // espaço horizontal entre botões
 const ROW_SPACE = 12; // espaço vertical entre linhas
 
-const ModalTest = forwardRef<any, IModalTypeActivities>(
+const ModalTypeActivities = forwardRef<any, IModalTypeActivities>(
   (
-    { visible, onClose, driverType, handleSelectActivity, activityType, isLoading, style },
+    {
+      testID = "modal-activity",
+      visible,
+      onClose,
+      driverType,
+      handleSelectActivity,
+      activityType,
+      isLoading,
+      style,
+    },
     ref
   ): React.ReactElement => {
     return (
       <Modal
+        testID={testID}
         ref={ref}
         animationType="fade"
         transparent={true}
@@ -69,6 +79,7 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
               }}
             >
               <Typography
+                testID={`${testID}-title`}
                 text="Atividades"
                 size={theme.fontSizes.md}
                 color={theme.colors.blue[500]}
@@ -76,7 +87,11 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
                 lineHeight={theme.fontSizes.xl}
               />
 
-              <TouchableOpacity activeOpacity={0.7} onPress={onClose} style={{}}>
+              <TouchableOpacity
+                testID={`${testID}-close-button`}
+                activeOpacity={0.7}
+                onPress={onClose}
+              >
                 <Icons icon="CLOSED" color={theme.colors.blue[500]} />
               </TouchableOpacity>
             </Box>
@@ -100,6 +115,7 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
 
                   return (
                     <TouchableOpacity
+                      testID={`${testID}-${index}`}
                       style={{
                         alignItems: "center",
                         justifyContent: "flex-start",
@@ -114,6 +130,7 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
                       {getIconByProperty(item.referencia as PropertyType)}
 
                       <Typography
+                        testID={`${testID}-description-${index}`}
                         text={item.descricao}
                         size={theme.fontSizes.xs}
                         color={theme.colors.blue[500]}
@@ -132,6 +149,7 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
             </Box>
 
             <Button
+              testID={`${testID}-cancel-button`}
               title={"CANCELAR ATIVIDADE"}
               width="100%"
               height={40}
@@ -165,9 +183,9 @@ const ModalTest = forwardRef<any, IModalTypeActivities>(
   }
 );
 
-ModalTest.displayName = "ModalTest";
+ModalTypeActivities.displayName = "ModalTypeActivities";
 
 /**
  * EXPORT
  */
-export default asBaseComponent(ModalTest);
+export default asBaseComponent(ModalTypeActivities);

package/src/components/modal-type-activities/interface.ts

@@ -14,6 +14,9 @@ interface IActivity {
 }
 
 interface IModalTypeActivities extends ModalProps, IGlobalCss {
+  /** propiedade para identificar o componente*/
+  testID?: string;
+
   /** função que fecha modal */
   onClose: () => void;
 

package/src/components/modals/modal-change-activitie-history/index.tsx

@@ -27,6 +27,7 @@ import { theme } from "../../../styles/theme/theme";
  * Componente Modal para alteração de atividade.
  */
 export const ModalChangeActivity: React.FC<IModalChangeActivityProps> = ({
+  testID = "modal-change-activity",
   visible,
   onClose,
   modalConfirm,
@@ -59,7 +60,7 @@ export const ModalChangeActivity: React.FC<IModalChangeActivityProps> = ({
   };
 
   return (
-    <Modal animationType="fade" transparent visible={visible}>
+    <Modal testID={testID} animationType="fade" transparent visible={visible}>
       <View
         style={{
           flex: 1,

package/src/components/modals/modal-change-activitie-history/interface.ts

@@ -3,6 +3,10 @@
  */
 
 interface IModalChangeActivityProps {
+  /**
+   * Identificador para components
+   */
+  testID?: string;
   visible: boolean;
   onClose: () => void;
   // eslint-disable-next-line no-unused-vars

package/src/components/notification-details-card/index.tsx

@@ -1,180 +1,180 @@
-/**
- * IMPORTS
- */
-import React, { forwardRef, useState } from "react";
-import { Modal, TouchableOpacity, Image, View } from "react-native";
-
-// commons / icons
-import { Icons } from "../../common/icons-svg";
-
-// components
-import Box from "../box";
-import Typography from "../typography";
-
-// typings
-import type { INotificationDetailCardProps } from "./interface";
-import { asBaseComponent } from "../../@types/as-base-component";
-
-// styles / theme
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente NotificationDetailCard
- */
-const NotificationDetailCard: React.FC<INotificationDetailCardProps> = forwardRef<
-  View,
-  INotificationDetailCardProps
->(({ title, description, fileUrl, fileType = "image", testID }, ref) => {
-  const [visible, setVisible] = useState(false);
-
-  function openFile() {
-    if (fileType === "image") {
-      setVisible(true);
-    } else if (fileUrl) {
-      import("react-native").then(({ Linking }) => {
-        Linking.openURL(fileUrl).catch((err) => console.warn("Erro ao abrir arquivo:", err));
-      });
-    }
-  }
-
-  const borderColor = theme.colors.blue[500];
-
-  return (
-    <Box
-      ref={ref}
-      testID={testID ?? "notification-detail-card"}
-      flexStyle={{ flexDirection: "row" }}
-      borderStyled={{
-        borderWidth: 1,
-        borderColor: theme.colors.neutral[200],
-        borderRadius: theme.borderWidths.thick_medium,
-      }}
-      marginStyle={{ marginBottom: 16 }}
-      backgroundColor={theme.colors.neutral[25]}
-    >
-      {/* borda fixa lateral esquerda */}
-      <Box
-        width={8}
-        backgroundColor={borderColor}
-        borderStyled={{
-          borderTopLeftRadius: theme.borderWidths.thick_medium,
-          borderBottomLeftRadius: theme.borderWidths.thick_medium,
-        }}
-      />
-
-      {/* Conteúdo do card */}
-      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.md }}>
-        {/* header */}
-        <Typography
-          text={title}
-          fontFamily={theme.fonts.inter_bold}
-          fontWeight="700"
-          size={theme.fontSizes.md}
-          color={theme.colors.black[100]}
-          marginBottom={8}
-        />
-
-        {/* texto */}
-        <Typography
-          text={description}
-          size={theme.fontSizes.sm}
-          lineHeight={theme.lineHeight.md}
-          color={theme.colors.gray[700]}
-          marginBottom={fileUrl ? 12 : 0}
-        />
-
-        {/* arquivo (se existir) */}
-        {fileUrl && (
-          <TouchableOpacity
-            testID="button"
-            onPress={openFile}
-            activeOpacity={0.8}
-            style={{
-              borderRadius: theme.borderWidths.thick_medium,
-              overflow: "hidden",
-              borderWidth: 1,
-              borderColor: theme.colors.gray[300],
-            }}
-          >
-            {fileType === "image" ? (
-              <Box
-                borderStyled={{
-                  borderWidth: 2,
-                  borderColor: theme.colors.blue[525],
-                  borderRadius: theme.borderWidths.thick_medium,
-                }}
-              >
-                <Image
-                  source={{ uri: fileUrl }}
-                  style={{
-                    width: "100%",
-                    height: 180,
-                    borderRadius: theme.borderWidths.thick_medium,
-                    borderWidth: 2,
-                    borderColor: theme.colors.blue[525],
-                  }}
-                  resizeMode="cover"
-                />
-              </Box>
-            ) : (
-              <Box
-                flexStyle={{
-                  flexDirection: "row",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-                paddingStyle={{ padding: theme.paddings.sm }}
-              >
-                <Typography
-                  text={`Abrir arquivo (${fileType.toUpperCase()})`}
-                  fontFamily={theme.fonts.inter_medium_500}
-                  color={theme.colors.blue[500]}
-                  size={theme.fontSizes.md}
-                />
-                <Icons icon="FILES" size={20} color={theme.colors.blue[500]} />
-              </Box>
-            )}
-          </TouchableOpacity>
-        )}
-      </Box>
-
-      {/* modal para zoom da imagem */}
-      {fileType === "image" && (
-        <Modal visible={visible} transparent animationType="fade">
-          <View
-            style={{
-              flex: 1,
-              backgroundColor: "rgba(0,0,0,0.9)",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <TouchableOpacity
-              onPress={() => setVisible(false)}
-              style={{ position: "absolute", top: 40, right: 20 }}
-            >
-              <Icons icon="CLOSED" size={28} color={theme.colors.neutral[25]} />
-            </TouchableOpacity>
-
-            <Image
-              source={{ uri: fileUrl }}
-              style={{
-                width: "90%",
-                height: "70%",
-                borderRadius: theme.borderWidths.thick_medium,
-              }}
-              resizeMode="contain"
-            />
-          </View>
-        </Modal>
-      )}
-    </Box>
-  );
-});
-
-NotificationDetailCard.displayName = "NotificationDetailCard";
-
-/**
- * EXPORTS
- */
-export default asBaseComponent(NotificationDetailCard);
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import { Modal, TouchableOpacity, Image, View } from "react-native";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// typings
+import type { INotificationDetailCardProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente NotificationDetailCard
+ */
+const NotificationDetailCard: React.FC<INotificationDetailCardProps> = forwardRef<
+  View,
+  INotificationDetailCardProps
+>(({ title, description, fileUrl, fileType = "image", testID }, ref) => {
+  const [visible, setVisible] = useState(false);
+
+  function openFile() {
+    if (fileType === "image") {
+      setVisible(true);
+    } else if (fileUrl) {
+      import("react-native").then(({ Linking }) => {
+        Linking.openURL(fileUrl).catch((err) => console.warn("Erro ao abrir arquivo:", err));
+      });
+    }
+  }
+
+  const borderColor = theme.colors.blue[500];
+
+  return (
+    <Box
+      ref={ref}
+      testID={testID ?? "notification-detail-card"}
+      flexStyle={{ flexDirection: "row" }}
+      borderStyled={{
+        borderWidth: 1,
+        borderColor: theme.colors.neutral[200],
+        borderRadius: theme.borderWidths.thick_medium,
+      }}
+      marginStyle={{ marginBottom: 16 }}
+      backgroundColor={theme.colors.neutral[25]}
+    >
+      {/* borda fixa lateral esquerda */}
+      <Box
+        width={8}
+        backgroundColor={borderColor}
+        borderStyled={{
+          borderTopLeftRadius: theme.borderWidths.thick_medium,
+          borderBottomLeftRadius: theme.borderWidths.thick_medium,
+        }}
+      />
+
+      {/* Conteúdo do card */}
+      <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings.md }}>
+        {/* header */}
+        <Typography
+          text={title}
+          fontFamily={theme.fonts.inter_bold}
+          fontWeight="700"
+          size={theme.fontSizes.md}
+          color={theme.colors.black[100]}
+          marginBottom={8}
+        />
+
+        {/* texto */}
+        <Typography
+          text={description}
+          size={theme.fontSizes.sm}
+          lineHeight={theme.lineHeight.md}
+          color={theme.colors.gray[700]}
+          marginBottom={fileUrl ? 12 : 0}
+        />
+
+        {/* arquivo (se existir) */}
+        {fileUrl && (
+          <TouchableOpacity
+            testID="button"
+            onPress={openFile}
+            activeOpacity={0.8}
+            style={{
+              borderRadius: theme.borderWidths.thick_medium,
+              overflow: "hidden",
+              borderWidth: 1,
+              borderColor: theme.colors.gray[300],
+            }}
+          >
+            {fileType === "image" ? (
+              <Box
+                borderStyled={{
+                  borderWidth: 2,
+                  borderColor: theme.colors.blue[525],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+              >
+                <Image
+                  source={{ uri: fileUrl }}
+                  style={{
+                    width: "100%",
+                    height: 180,
+                    borderRadius: theme.borderWidths.thick_medium,
+                    borderWidth: 2,
+                    borderColor: theme.colors.blue[525],
+                  }}
+                  resizeMode="cover"
+                />
+              </Box>
+            ) : (
+              <Box
+                flexStyle={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+                paddingStyle={{ padding: theme.paddings.sm }}
+              >
+                <Typography
+                  text={`Abrir arquivo (${fileType.toUpperCase()})`}
+                  fontFamily={theme.fonts.inter_medium_500}
+                  color={theme.colors.blue[500]}
+                  size={theme.fontSizes.md}
+                />
+                <Icons icon="FILES" size={20} color={theme.colors.blue[500]} />
+              </Box>
+            )}
+          </TouchableOpacity>
+        )}
+      </Box>
+
+      {/* modal para zoom da imagem */}
+      {fileType === "image" && (
+        <Modal visible={visible} transparent animationType="fade">
+          <View
+            style={{
+              flex: 1,
+              backgroundColor: "rgba(0,0,0,0.9)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <TouchableOpacity
+              onPress={() => setVisible(false)}
+              style={{ position: "absolute", top: 40, right: 20 }}
+            >
+              <Icons icon="CLOSED" size={28} color={theme.colors.neutral[25]} />
+            </TouchableOpacity>
+
+            <Image
+              source={{ uri: fileUrl }}
+              style={{
+                width: "90%",
+                height: "70%",
+                borderRadius: theme.borderWidths.thick_medium,
+              }}
+              resizeMode="contain"
+            />
+          </View>
+        </Modal>
+      )}
+    </Box>
+  );
+});
+
+NotificationDetailCard.displayName = "NotificationDetailCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(NotificationDetailCard);