jornada-ui 0.4.19 → 0.4.21

package/src/components/toast-message/interface.ts

@@ -1,17 +1,18 @@
-/**
- * IMPORTS
- */
-type ToastMessageCustoProps = {
-  text1?: string;
-  text2?: string;
-  options: "error" | "alert" | "success";
-};
-
-type BorderCustomToashProps = {
-  options: "error" | "alert" | "success";
-};
-
-/**
- * EXPORTS
- */
-export type { ToastMessageCustoProps, BorderCustomToashProps };
+/**
+ * IMPORTS
+ */
+type ToastMessageCustoProps = {
+  text1?: string;
+  text2?: string;
+  testID?: string;
+  options: "error" | "alert" | "success";
+};
+
+type BorderCustomToashProps = {
+  options: "error" | "alert" | "success";
+};
+
+/**
+ * EXPORTS
+ */
+export type { ToastMessageCustoProps, BorderCustomToashProps };

package/src/components/toggle-fuel/index.tsx

@@ -49,6 +49,7 @@ const ToggleFuel = forwardRef<any, ToggleFuelProps>(
 
     return (
       <View
+        testID={`${testIDPrefix}-view`}
         ref={ref}
         style={[styles.container]}
         accessibilityRole="tablist"

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

@@ -79,6 +79,7 @@ const TripDetailsCard: React.FC<ITripDetailsCard> = ({
 
       <Box flexStyle={{ flex: 1 }} paddingStyle={{ padding: theme.paddings["2xs"] }}>
         <TouchableOpacity
+          disabled
           onPress={toggleExpand}
           activeOpacity={0.9}
           accessibilityRole="button"

package/src/components/typography/index.tsx

@@ -15,6 +15,7 @@ import type { ITextInterface } from "./interface";
 const Typography = forwardRef<any, ITextInterface>((props, ref): React.ReactElement => {
   // desestruturando as propiedades do componente
   const {
+    testID = "typography",
     text = "Hello Dev",
     color = "#1E1E1E",
     size = 23,
@@ -60,6 +61,7 @@ const Typography = forwardRef<any, ITextInterface>((props, ref): React.ReactElem
 
   return (
     <Text
+      testID={testID}
       ref={ref}
       numberOfLines={numberOfLines}
       ellipsizeMode={ellipsizeMode}

package/src/components/typography/interface.d.ts

@@ -1,102 +1,104 @@
-/**
- * IMPORTS
- */
-import { type TextProps as RNTextProps } from "react-native";
-
-import { theme } from "../../styles/theme/theme";
-
-type ITextInterface = RNTextProps & {
-  /**
-   * Propiedade texto que serar renderizado pro usuário final
-   */
-  text: string;
-
-  /**
-   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
-   */
-  color?: string;
-
-  /**
-   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
-   */
-  size?: number;
-
-  align?: "center" | "left" | "right";
-  lineHeight?: number;
-  letterSpacing?: keyof typeof theme.letterSpacing;
-
-  /**
-   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
-   */
-  textDecoration?: "line-through" | "underline" | "none";
-
-  /**
-   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
-   */
-  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
-
-  // fontFamily?: keyof typeof theme.fonts;
-  fontFamily?: string;
-
-  /**
-   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
-   */
-  margin?: number;
-
-  /**
-   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
-   */
-  marginLeft?: number;
-
-  /**
-   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
-   */
-  marginRight?: number;
-
-  /**
-   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
-   */
-  marginTop?: number;
-
-  /**
-   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
-   */
-  marginBottom?: number;
-
-  /**
-   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
-   */
-  padding?: number;
-
-  /**
-   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
-   */
-  paddingLeft?: number;
-
-  /**
-   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
-   */
-  paddingRight?: number;
-
-  /**
-   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
-   */
-  paddingTop?: number;
-
-  /**
-   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
-   */
-  paddingBottom?: number;
-
-  /**
-   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
-   *
-   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
-   */
-  numberOfLines?: number;
-  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
-};
-/**
- * EXPORTS
- */
-export { ITextInterface };
+/**
+ * IMPORTS
+ */
+import { type TextProps as RNTextProps } from "react-native";
+
+import { theme } from "../../styles/theme/theme";
+
+type ITextInterface = RNTextProps & {
+  /**
+   * Propiedade texto que serar renderizado pro usuário final
+   */
+  text: string;
+
+  testID?: string;
+
+  /**
+   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
+   */
+  color?: string;
+
+  /**
+   * Propiedade size define o tamanho e a orientação da caixa que é usada para representar uma página. Na maioria das vezes, esse tamanho corresponde ao tamanho alvo da página impressa, se aplicável.
+   */
+  size?: number;
+
+  align?: "center" | "left" | "right";
+  lineHeight?: number;
+  letterSpacing?: keyof typeof theme.letterSpacing;
+
+  /**
+   * A propriedade text-decoration do CSS é usada para definir a formatação de underline, overline, line-through ou blink. As decorações underline e overline são posicionadas abaixo e acima do texto (respectivamente), e line-through cortando-o.
+   */
+  textDecoration?: "line-through" | "underline" | "none";
+
+  /**
+   * A propriedade CSS font-weight define o peso (ou negrito) da fonte. Os pesos disponíveis dependem da família de fontes definida atualmente.
+   */
+  fontWeight?: "100" | "300" | "400" | "500" | "600" | "700";
+
+  // fontFamily?: keyof typeof theme.fonts;
+  fontFamily?: string;
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  margin?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado esquerdo de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-left
+   */
+  marginLeft?: number;
+
+  /**
+   * A propriedade CSS define a área de margem no lado direito de um elemento. Um valor positivo o coloca mais distante de seus vizinhos, enquanto um valor negativo o coloca mais próximo.margin-right
+   */
+  marginRight?: number;
+
+  /**
+   * A propriedade CSS margin-top de um elemento indica o espaço acima do elemento. Valores negativos são aceitos.
+   */
+  marginTop?: number;
+
+  /**
+   * A propriedade CSS margin-bottom define a margin area na parte inferior de um elemento. Um valor positivo coloca o valor mais longe de outros elementos vizinhos, enquanto um valor negativo, aproxima.
+   */
+  marginBottom?: number;
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  padding?: number;
+
+  /**
+   * A propriedade CSS padding-left é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. padding area é o espaço entre o conteúdo do elemento e a borda. Um valor negativo não é permitido.
+   */
+  paddingLeft?: number;
+
+  /**
+   * A propriedade CSS define a largura da área de preenchimento à direita de um elemento.padding-right
+   */
+  paddingRight?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte superior de um elemento.padding-top
+   */
+  paddingTop?: number;
+
+  /**
+   * A propriedade CSS define a altura da área de preenchimento na parte inferior de um elemento.padding-bottom
+   */
+  paddingBottom?: number;
+
+  /**
+   * Define o número máximo de linhas que o texto pode ocupar. Se o texto for maior que esse limite, ele será truncado.  numberOfLines
+   *
+   * Define onde a elipse (...) será adicionada quando o texto for cortado devido ao numberOfLines.
+   */
+  numberOfLines?: number;
+  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+};
+/**
+ * EXPORTS
+ */
+export { ITextInterface };

package/src/components/user-journey-work-card/index.tsx

@@ -22,6 +22,7 @@ import { theme } from "../../styles/theme/theme";
 const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
   (props, ref): React.ReactElement => {
     const {
+      testID = "user-journey-work-card",
       name = "Expresso F.",
       workDate = "25/01/2025",
       initialTime = "00:40",
@@ -35,6 +36,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
     } = props;
     return (
       <Box
+        testID={testID}
         ref={ref}
         width={width}
         paddingStyle={{ padding: theme.paddings.md }}
@@ -57,6 +59,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
         >
           <TouchableOpacity onPress={handleNavigation}>
             <Image
+              testID={`${testID}-avatar`}
               style={{
                 width: 50,
                 height: 50,
@@ -72,6 +75,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
             <Box flexStyle={{ flexDirection: "row" }}>
               <Box>
                 <Typography
+                  testID={`${testID}-nome-label`}
                   text={`Motorista(a): `}
                   size={theme.fontSizes.xs}
                   color={theme.colors.black[100]}
@@ -82,6 +86,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
               </Box>
               <Box>
                 <Typography
+                  testID={`${testID}-nome-value`}
                   text={`${name}`}
                   size={theme.fontSizes.xs}
                   color={theme.colors.gray[800]}
@@ -96,6 +101,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
               <Icons icon={"CALENDAR"} size={22} />
 
               <Typography
+                testID={`${testID}-work-date-label`}
                 text={"Jornada Trabalho: "}
                 fontFamily={theme.fonts.inter_bold_700}
                 size={theme.fontSizes.xs}
@@ -104,6 +110,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
                 lineHeight={theme.lineHeight["2xl"]}
               />
               <Typography
+                testID={`${testID}-work-date-value`}
                 text={workDate}
                 size={theme.fontSizes.xs}
                 fontFamily={theme.fonts.inter_regular_400}
@@ -127,7 +134,11 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
             </Box>
           </Box>
 
-          <TouchableOpacity activeOpacity={0.7} onPress={handleNavigationNotification}>
+          <TouchableOpacity
+            testID={`${testID}-notification`}
+            activeOpacity={0.7}
+            onPress={handleNavigationNotification}
+          >
             {counterBadge > 0 && (
               <Box
                 backgroundColor={theme.colors.red[500]}
@@ -141,6 +152,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
                 ]}
               >
                 <Typography
+                  testID={`${testID}-notification-text`}
                   text={`${counterBadge}`}
                   align={"center"}
                   size={theme.fontSizes["2xs"]}
@@ -151,7 +163,12 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
                 />
               </Box>
             )}
-            <Icons icon={"BELL"} size={28} style={{ position: "relative" }} />
+            <Icons
+              testID={`${testID}-notification-icon`}
+              icon={"BELL"}
+              size={28}
+              style={{ position: "relative" }}
+            />
           </TouchableOpacity>
         </Box>
 
@@ -169,6 +186,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
           >
             <Box marginStyle={{ marginRight: theme.margins.sm }}>
               <Typography
+                testID={`${testID}-initial-time-value`}
                 text={`${initialTime}`}
                 size={theme.fontSizes.md}
                 align="center"
@@ -177,6 +195,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
               />
 
               <Typography
+                testID={`${testID}-initial-time-label`}
                 text={"INÍCIO"}
                 size={theme.fontSizes["2xs"]}
                 align="center"
@@ -189,6 +208,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
 
             <Box>
               <Typography
+                testID={`${testID}-duration-value`}
                 text={`${duration}`}
                 size={theme.fontSizes.md}
                 align="center"
@@ -197,6 +217,7 @@ const UserJourneyWorkCard = forwardRef<any, IUserJourneyWorkCard>(
               />
 
               <Typography
+                testID={`${testID}-duration-label`}
                 text={"DURAÇÃO"}
                 size={theme.fontSizes["2xs"]}
                 align="center"

package/src/components/user-profile/index.tsx

@@ -35,8 +35,8 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
   } = props;
   return (
     <Box
-      ref={ref}
       testID={testID}
+      ref={ref}
       width={width ?? "100%"}
       height={height ?? 260}
       backgroundColor={backgroundColor ?? theme.colors.blue[100]}
@@ -92,6 +92,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
           }}
         >
           <Typography
+            testID={`${testID}-nome-label`}
             text={"Olá, "}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.md}
@@ -101,6 +102,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
           />
 
           <Typography
+            testID={`${testID}-nome`}
             text={nome}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.sm}
@@ -120,6 +122,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
           }}
         >
           <Typography
+            testID={`${testID}-cpf-label`}
             text={"CPF: "}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.md}
@@ -129,6 +132,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
           />
 
           <Typography
+            testID={`${testID}-cpf`}
             text={cpf}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.sm}
@@ -137,6 +141,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
             letterSpacing={"regular"}
           />
         </Box>
+
         <Box
           width={"100%"}
           height={30}
@@ -148,6 +153,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
           }}
         >
           <Typography
+            testID={`${testID}-bluetooth-label`}
             text={"CONECTADO: "}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.xs}
@@ -157,6 +163,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
           />
 
           <Typography
+            testID={`${testID}-bluetooth`}
             text={bluetoothIsConnected ? placa_cavalo : ""}
             color={theme.colors.green[400]}
             size={theme.fontSizes.xs}
@@ -188,6 +195,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
           }}
         >
           <Typography
+            testID={`${testID}-version-label`}
             text={"Versão: "}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.xs}
@@ -197,6 +205,7 @@ const UserProfile = forwardRef<any, IUserProfile>((props, ref): React.ReactEleme
           />
 
           <Typography
+            testID={`${testID}-version`}
             text={app_version}
             color={color?.colorText ?? theme.colors.neutral[25]}
             size={theme.fontSizes.xs}

package/src/components/weekly-hours-balance/index.tsx

@@ -20,7 +20,7 @@ import { asBaseComponent } from "../../@types/as-base-component";
 
 const WeeklyHoursBalance = forwardRef<any, IWeeklyHoursBalance>(
   (props, ref): React.ReactElement => {
-    const { backgroundColor, valor } = props;
+    const { testID, backgroundColor, valor } = props;
 
     const [mostrarValor, setMostrarValor] = useState(true);
 
@@ -30,6 +30,7 @@ const WeeklyHoursBalance = forwardRef<any, IWeeklyHoursBalance>(
 
     return (
       <Box
+        testID={testID}
         ref={ref}
         width={"100%"}
         backgroundColor={theme.colors.neutral[25]}