Create tests and stories for createflownav

2026-02-07 23:35:22 -07:00
parent 37555b2725
commit 8d9b9d6ff3
6 changed files with 348 additions and 129 deletions
@@ -0,0 +1,56 @@
+import CreateFlowFooter from "../../app/components/utility/CreateFlowFooter";
+import Button from "../../app/components/buttons/Button";
+
+export default {
+  title: "Components/Utility/CreateFlowFooter",
+  component: CreateFlowFooter,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Footer component for the create rule flow with progress bar and buttons.",
+      },
+    },
+  },
+  argTypes: {
+    progressBar: {
+      control: "boolean",
+      description: "Whether to show the progress bar",
+    },
+    secondButton: {
+      control: false,
+      description: "The second button (typically Next) to display on the right side",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    progressBar: true,
+    secondButton: (
+      <Button buttonType="filled" palette="default" size="xsmall">
+        Next
+      </Button>
+    ),
+  },
+};
+
+export const WithoutProgressBar = {
+  args: {
+    progressBar: false,
+    secondButton: (
+      <Button buttonType="filled" palette="default" size="xsmall">
+        Next
+      </Button>
+    ),
+  },
+};
+
+export const WithoutSecondButton = {
+  args: {
+    progressBar: true,
+    secondButton: undefined,
+  },
+};
@@ -0,0 +1,65 @@
+import CreateFlowTopNav from "../../app/components/utility/CreateFlowTopNav";
+
+export default {
+  title: "Components/Utility/CreateFlowTopNav",
+  component: CreateFlowTopNav,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Top navigation bar for the create rule flow. Includes logo and action buttons (Share, Export, Edit, Exit/Save & Exit).",
+      },
+    },
+  },
+  argTypes: {
+    hasShare: {
+      control: "boolean",
+      description: "Whether to show the Share button",
+    },
+    hasExport: {
+      control: "boolean",
+      description: "Whether to show the Export button",
+    },
+    hasEdit: {
+      control: "boolean",
+      description: "Whether to show the Edit button",
+    },
+    loggedIn: {
+      control: "boolean",
+      description: "Whether the user is logged in (affects Exit button text)",
+    },
+    onShare: { action: "share clicked" },
+    onExport: { action: "export clicked" },
+    onEdit: { action: "edit clicked" },
+    onExit: { action: "exit clicked" },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    hasShare: false,
+    hasExport: false,
+    hasEdit: false,
+    loggedIn: false,
+  },
+};
+
+export const AllButtons = {
+  args: {
+    hasShare: true,
+    hasExport: true,
+    hasEdit: true,
+    loggedIn: false,
+  },
+};
+
+export const LoggedIn = {
+  args: {
+    hasShare: true,
+    hasExport: true,
+    hasEdit: true,
+    loggedIn: true,
+  },
+};