jornada-ui 2.0.9 → 3.0.0

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",
+      },
+    ],
+  },
+};