jornada-ui 2.0.8 → 3.0.0

package/src/common/icons-svg/index.tsx

@@ -69,6 +69,8 @@ import { SvgIconPlusTrash } from "./trash";
 import { SvgIconDownload } from "./download";
 import { SvgIconBluetoothSlash } from "./bluetooth-slash";
 import { SvgIconCheckBox } from "./check-box";
+import { SvgIconVideo } from "./video";
+import { SvgIconChevronRight } from "./chevron-right";
 
 const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
   switch (icon) {
@@ -274,6 +276,19 @@ const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
 
     case "TRASH":
       return <SvgIconPlusTrash color={color} size={size} icon="TRASH" />;
+
+    case "VIDEO":
+      return <SvgIconVideo color={color ?? theme.colors.gray[700]} size={size ?? 24} icon="VIDEO" />;
+
+    case "CHEVRON_RIGHT":
+      return (
+        <SvgIconChevronRight
+          color={color ?? theme.colors.gray[700]}
+          size={size ?? 20}
+          icon="CHEVRON_RIGHT"
+        />
+      );
+
     default:
       return <SvgIconCameraPlus color={color} size={size} icon={"CAMERA_PLUS"} />;
   }

package/src/common/icons-svg/video/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+//typings
+import { type ISvgProps } from "../interface";
+
+const SvgIconVideo: React.FC<ISvgProps> = ({ size, color, ...res }) => (
+  <Svg
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+    {...res}
+  >
+    <Path
+      fill={color ?? "#837676"}
+      d="M4 5.25A1.75 1.75 0 0 0 2.25 7v10A1.75 1.75 0 0 0 4 18.75h12A1.75 1.75 0 0 0 17.75 17v-2.19l3.14 2.35A.75.75 0 0 0 22 16.56V7.44a.75.75 0 0 0-1.11-.66l-3.14 2.35V7A1.75 1.75 0 0 0 16 5.25zm12.25 11.5H4a.25.25 0 0 1-.25-.25V7a.25.25 0 0 1 .25-.25h12a.25.25 0 0 1 .25.25zm4.25-2.02-2.75-2.06v.66l2.75 2.06zm0-.72V8.79l-2.75 2.06v2.34zm-9.62-3.34a.75.75 0 0 0-1.13.65v3.96a.75.75 0 0 0 1.13.65l3.4-1.98a.75.75 0 0 0 0-1.3zm.37 3.31v-1.36l1.17.68z"
+    ></Path>
+  </Svg>
+);
+
+export { SvgIconVideo };

package/src/components/check-box/index.tsx

@@ -79,6 +79,7 @@ const CheckBox: React.FC<ICheckBoxProps> = ({
             size={text_size_label ?? 16}
             lineHeight={18}
             letterSpacing="regular"
+            marginLeft={4}
           />
         )}
       </Box>

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

@@ -72,16 +72,21 @@ const NotificationCard: React.FC<INotificationCardProps> = forwardRef<View, INot
             </Box>
 
             {/* Texto */}
-            <Typography
-              text={description}
-              numberOfLines={isWarning ? 2 : 4}
-              ellipsizeMode="tail"
-              size={theme.fontSizes.sm}
-              lineHeight={theme.lineHeight.md}
-              fontFamily={theme.fonts.inter_regular_400}
-              color={theme.colors.gray[700]}
-              marginBottom={theme.margins.xs}
-            />
+            {/* Texto */}
+            {typeof description === "string" ? (
+              <Typography
+                text={description}
+                numberOfLines={isWarning ? 2 : 4}
+                ellipsizeMode="tail"
+                size={theme.fontSizes.sm}
+                lineHeight={theme.lineHeight.md}
+                fontFamily={theme.fonts.inter_regular_400}
+                color={theme.colors.gray[700]}
+                marginBottom={theme.margins.xs}
+              />
+            ) : (
+              <Box marginStyle={{ marginBottom: theme.margins.xs }}>{description}</Box>
+            )}
 
             {/* Ação opcional */}
             {actionLabel && onPressAction && (

package/src/components/notification-card/interface.ts

@@ -2,10 +2,12 @@
  * IMPORTS
  */
 
+import type { ReactNode } from "react";
+
 interface INotificationCardProps {
   variant?: "read" | "unread";
   title: string;
-  description: string;
+  description: string | ReactNode;
   actionLabel?: string;
   onPress?: () => void;
   onPressAction?: () => void;

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

@@ -0,0 +1,190 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+// commons / icons
+import { Icons } from "../../common/icons-svg";
+
+// components
+import Box from "../box";
+import Typography from "../typography";
+
+// styles / theme
+import { theme } from "../../styles/theme/theme";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import type {
+  INotificationStep,
+  INotificationStepsCardProps,
+  NotificationStepType,
+} from "./interface";
+
+/**
+ * Mapeia o tipo da etapa para o ícone correspondente.
+ */
+const stepIconByType: Record<NotificationStepType, "VIDEO" | "FILES"> = {
+  video: "VIDEO",
+  pdf: "FILES",
+  text: "FILES",
+};
+
+/**
+ * Componente NotificationStepsCard
+ *
+ * Exibe uma notificação com múltiplas etapas/conteúdos (texto, pdf, vídeo),
+ * cada uma com ícone, título, subtítulo e um chevron de ação. Etapas podem
+ * ser bloqueadas (disabled) para forçar conclusão em ordem.
+ */
+const NotificationStepsCard: React.FC<INotificationStepsCardProps> = forwardRef<
+  View,
+  INotificationStepsCardProps
+>(({ title, description, steps, warningMessage, testID }, ref) => {
+  const borderColor = theme.colors.blue[525];
+
+  return (
+    <Box
+      ref={ref}
+      testID={testID ?? "notification-steps-card"}
+      flexStyle={{ flexDirection: "row" }}
+      borderStyled={{
+        borderWidth: 1,
+        borderColor: theme.colors.blue[525],
+        borderRadius: theme.borderWidths.thick_medium,
+      }}
+      marginStyle={{ marginBottom: 12 }}
+      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 }}>
+        {/* Título */}
+        <Typography
+          text={title}
+          fontFamily={theme.fonts.inter_bold}
+          fontWeight="700"
+          size={theme.fontSizes.md}
+          color={theme.colors.black[100]}
+          marginBottom={theme.margins["2xs"]}
+        />
+
+        {/* Descrição */}
+        {typeof description === "string" ? (
+          <Typography
+            text={description}
+            size={theme.fontSizes.sm}
+            lineHeight={theme.lineHeight.xl}
+            fontFamily={theme.fonts.inter_regular_400}
+            color={theme.colors.gray[700]}
+            marginBottom={theme.margins.md}
+          />
+        ) : (
+          <Box marginStyle={{ marginBottom: theme.margins.md }}>{description}</Box>
+        )}
+
+        {/* Etapas */}
+        {steps.map((step: INotificationStep, index: number) => {
+          const isDisabled = !!step.disabled;
+
+          const contentColor = isDisabled
+            ? theme.colors.gray[400]
+            : theme.colors.black[100];
+
+          const subtitleColor = isDisabled
+            ? theme.colors.gray[400]
+            : theme.colors.gray[700];
+
+          return (
+            <TouchableOpacity
+              key={`${step.title}-${index}`}
+              testID={`notification-step-${index}`}
+              onPress={step.onPress}
+              disabled={isDisabled}
+              activeOpacity={0.7}
+            >
+              <Box
+                flexStyle={{ flexDirection: "row", alignItems: "center" }}
+                borderStyled={{
+                  borderWidth: 1,
+                  borderColor: theme.colors.neutral[200],
+                  borderRadius: theme.borderWidths.thick_medium,
+                }}
+                paddingStyle={{ padding: theme.paddings.sm }}
+                marginStyle={{ marginBottom: theme.margins["1xs"] }}
+                backgroundColor={theme.colors.neutral[25]}
+                opacity={isDisabled ? 0.5 : 1}
+              >
+                {/* Ícone do tipo de conteúdo */}
+                <Icons icon={stepIconByType[step.type]} color={contentColor} size={22} />
+
+                {/* Título + subtítulo */}
+                <Box flexStyle={{ flex: 1 }} marginStyle={{ marginLeft: theme.margins.xs }}>
+                  <Typography
+                    text={step.title}
+                    fontFamily={theme.fonts.inter_semi_bold_600}
+                    fontWeight="600"
+                    size={theme.fontSizes.sm}
+                    color={contentColor}
+                  />
+                  {!!step.subtitle && (
+                    <Typography
+                      text={step.subtitle}
+                      size={theme.fontSizes.xs}
+                      fontFamily={theme.fonts.inter_regular_400}
+                      color={subtitleColor}
+                      marginTop={2}
+                    />
+                  )}
+                </Box>
+
+                {/* Chevron */}
+                <Icons icon="CHEVRON_RIGHT" color={subtitleColor} size={20} />
+              </Box>
+            </TouchableOpacity>
+          );
+        })}
+
+        {/* Aviso */}
+        {!!warningMessage && (
+          <Box
+            testID="notification-steps-warning"
+            borderStyled={{
+              borderWidth: 1,
+              borderColor: theme.colors.orange[150],
+              borderRadius: theme.borderWidths.thick,
+            }}
+            paddingStyle={{ padding: theme.paddings.sm }}
+            marginStyle={{ marginTop: theme.margins["1xs"] }}
+            backgroundColor={theme.colors.yellow[120]}
+          >
+            <Typography
+              text={warningMessage}
+              size={theme.fontSizes.sm}
+              lineHeight={theme.lineHeight.lg}
+              fontFamily={theme.fonts.inter_regular_400}
+              color={theme.colors.orange[150]}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+});
+
+NotificationStepsCard.displayName = "NotificationStepsCard";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(NotificationStepsCard);

package/src/components/notification-steps-card/interface.ts

@@ -0,0 +1,38 @@
+/**
+ * IMPORTS
+ */
+
+import type { ReactNode } from "react";
+
+/**
+ * Tipos de conteúdo suportados por uma etapa da notificação.
+ */
+type NotificationStepType = "pdf" | "video" | "text";
+
+/**
+ * Representa uma etapa/conteúdo dentro do NotificationStepsCard.
+ */
+interface INotificationStep {
+  type: NotificationStepType;
+  title: string;
+  subtitle?: string;
+  disabled?: boolean;
+  onPress?: () => void;
+}
+
+interface INotificationStepsCardProps {
+  title: string;
+  description: string | ReactNode;
+  steps: INotificationStep[];
+  warningMessage?: string;
+  testID?: string;
+}
+
+/**
+ * EXPORTS
+ */
+export {
+  type INotificationStep,
+  type INotificationStepsCardProps,
+  type NotificationStepType,
+};

package/src/index.tsx

@@ -49,6 +49,7 @@ export { default as ModalToConfirmations } from "./components/modals/modal-to-co
 export { default as ActivityTimeline } from "./components/activity-step";
 export { default as NotificationCard } from "./components/notification-card";
 export { default as NotificationDetailCard } from "./components/notification-details-card";
+export { default as NotificationStepsCard } from "./components/notification-steps-card";
 export { default as CheckBox } from "./components/check-box";
 
 // adicionar o storybook + teste

package/src/stories/notification-steps-card/notification-steps-card.stories.tsx

@@ -0,0 +1,144 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import NotificationStepsCard from "../../components/notification-steps-card";
+
+// typings
+import type { INotificationStepsCardProps } from "../../components/notification-steps-card/interface";
+
+/**
+ * META
+ */
+const meta: Meta<typeof NotificationStepsCard> = {
+  title: "Componente/NotificationStepsCard",
+  component: NotificationStepsCard as React.FC<INotificationStepsCardProps>,
+  args: {
+    title: "Campanha Zero Acidente",
+    description:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and",
+    steps: [
+      {
+        type: "pdf",
+        title: "1. Instrução de segurança",
+        subtitle: "PDF . toque para ler",
+      },
+      {
+        type: "video",
+        title: "2. Vídeo de treinamento",
+        subtitle: "Abre em tela cheia . 02:00",
+        disabled: true,
+      },
+      {
+        type: "pdf",
+        title: "3. Termo de responsabilidade",
+        subtitle: "PDF . toque para ler",
+        disabled: true,
+      },
+    ],
+    warningMessage:
+      "As etapas devem ser concluídas em ordem. O vídeo não pode ser pulado.",
+  },
+  argTypes: {
+    title: {
+      control: { type: "text" },
+      description: "Título da notificação.",
+    },
+    description: {
+      control: { type: "text" },
+      description: "Descrição da notificação.",
+    },
+    steps: {
+      control: { type: "object" },
+      description: "Lista de etapas/conteúdos (text, pdf, video).",
+    },
+    warningMessage: {
+      control: { type: "text" },
+      description: "Mensagem de aviso opcional exibida no rodapé.",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### NotificationStepsCard
+
+Componente de **notificação com múltiplas etapas** para exibir conteúdos sequenciais (texto, PDF, vídeo).
+
+- \`title\`: título da notificação
+- \`description\`: descrição (aceita \`string\` ou \`ReactNode\`)
+- \`steps\`: lista de etapas, cada uma com \`type\` (\`pdf\` | \`video\` | \`text\`), \`title\`, \`subtitle\`, \`disabled\` e \`onPress\`
+- \`warningMessage\`: mensagem de aviso opcional no rodapé
+
+> Etapas com \`disabled: true\` ficam em cinza e não disparam \`onPress\`. A ordem de conclusão é controlada por quem consome o componente.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationStepsCard>;
+
+/**
+ * STORIES
+ */
+export const NotificationStepsCardDefault: Story = {
+  name: "notification-steps-card-default",
+  args: {
+    title: "Campanha Zero Acidente",
+    description:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and",
+    steps: [
+      {
+        type: "pdf",
+        title: "1. Instrução de segurança",
+        subtitle: "PDF . toque para ler",
+      },
+      {
+        type: "video",
+        title: "2. Vídeo de treinamento",
+        subtitle: "Abre em tela cheia . 02:00",
+        disabled: true,
+      },
+      {
+        type: "pdf",
+        title: "3. Termo de responsabilidade",
+        subtitle: "PDF . toque para ler",
+        disabled: true,
+      },
+    ],
+    warningMessage:
+      "As etapas devem ser concluídas em ordem. O vídeo não pode ser pulado.",
+  },
+};
+
+export const NotificationStepsCardAllUnlocked: Story = {
+  name: "notification-steps-card-all-unlocked",
+  args: {
+    title: "Campanha Zero Acidente",
+    description:
+      "Todas as etapas liberadas para conclusão em qualquer ordem.",
+    steps: [
+      {
+        type: "pdf",
+        title: "1. Instrução de segurança",
+        subtitle: "PDF . toque para ler",
+      },
+      {
+        type: "video",
+        title: "2. Vídeo de treinamento",
+        subtitle: "Abre em tela cheia . 02:00",
+      },
+      {
+        type: "pdf",
+        title: "3. Termo de responsabilidade",
+        subtitle: "PDF . toque para ler",
+      },
+    ],
+  },
+};