Create tests and stories for createflownav

stories/icons/Logo.stories.js

@@ -17,17 +17,10 @@ export default {
       control: { type: "select" },
       options: [
         "default",
-        "homeHeaderXsmall",
-        "homeHeaderSm",
-        "homeHeaderMd",
-        "homeHeaderLg",
-        "homeHeaderXl",
-        "header",
-        "headerMd",
-        "headerLg",
-        "headerXl",
         "footer",
-        "footerLg",
+        "createFlow",
+        "topNavFolderTop",
+        "topNavHeader",
       ],
       description: "The size variant of the logo",
     },
@@ -53,40 +46,19 @@ export const Sizes = {
   render: (args) => (
     <div className="space-y-6">
       <div>
-        <h3 className="text-white font-semibold mb-3">Default Sizes</h3>
+        <h3 className="text-white font-semibold mb-3">Standard Sizes</h3>
         <div className="space-x-4">
           <Logo {...args} size="default" />
-          <Logo {...args} size="header" />
           <Logo {...args} size="footer" />
         </div>
       </div>
 
       <div>
-        <h3 className="text-white font-semibold mb-3">Header Sizes</h3>
+        <h3 className="text-white font-semibold mb-3">Responsive Sizes</h3>
         <div className="space-x-4">
-          <Logo {...args} size="header" />
+          <Logo {...args} size="createFlow" />
-          <Logo {...args} size="headerMd" />
+          <Logo {...args} size="topNavFolderTop" />
-          <Logo {...args} size="headerLg" />
+          <Logo {...args} size="topNavHeader" />
-          <Logo {...args} size="headerXl" />
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Home Header Sizes</h3>
-        <div className="space-x-4">
-          <Logo {...args} size="homeHeaderXsmall" />
-          <Logo {...args} size="homeHeaderSm" />
-          <Logo {...args} size="homeHeaderMd" />
-          <Logo {...args} size="homeHeaderLg" />
-          <Logo {...args} size="homeHeaderXl" />
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">Footer Sizes</h3>
-        <div className="space-x-4">
-          <Logo {...args} size="footer" />
-          <Logo {...args} size="footerLg" />
         </div>
       </div>
     </div>
@@ -95,7 +67,7 @@ export const Sizes = {
     docs: {
       description: {
         story:
-          "Different size variants available for the logo component across different contexts.",
+          "Different size variants available for the logo component. Responsive sizes adapt to breakpoints.",
       },
     },
   },
@@ -110,37 +82,22 @@ export const IconOnly = {
     <div className="space-y-6">
       <div>
         <h3 className="text-white font-semibold mb-3">
-          Icon Only - Default Sizes
+          Icon Only - Standard Sizes
         </h3>
         <div className="space-x-4">
           <Logo {...args} size="default" />
-          <Logo {...args} size="header" />
           <Logo {...args} size="footer" />
         </div>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">
-          Icon Only - Header Sizes
+          Icon Only - Responsive Sizes
         </h3>
         <div className="space-x-4">
-          <Logo {...args} size="header" />
+          <Logo {...args} size="createFlow" />
-          <Logo {...args} size="headerMd" />
+          <Logo {...args} size="topNavFolderTop" />
-          <Logo {...args} size="headerLg" />
+          <Logo {...args} size="topNavHeader" />
-          <Logo {...args} size="headerXl" />
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-white font-semibold mb-3">
-          Icon Only - Home Header Sizes
-        </h3>
-        <div className="space-x-4">
-          <Logo {...args} size="homeHeaderXsmall" />
-          <Logo {...args} size="homeHeaderSm" />
-          <Logo {...args} size="homeHeaderMd" />
-          <Logo {...args} size="homeHeaderLg" />
-          <Logo {...args} size="homeHeaderXl" />
         </div>
       </div>
     </div>
@@ -155,34 +112,22 @@ export const IconOnly = {
   },
 };
 
-export const HomeHeaderContext = {
+export const TopNavContext = {
   args: {},
   render: () => (
     <div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8">
       <div className="max-w-4xl mx-auto">
         <h2 className="text-white font-semibold mb-6">
-          Home Header Context (White Text)
+          TopNav Context (Responsive)
         </h2>
         <div className="space-y-4">
           <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">XSmall:</span>
+            <span className="text-white text-sm w-32">FolderTop:</span>
-            <Logo size="homeHeaderXsmall" />
+            <Logo size="topNavFolderTop" showText={true} />
           </div>
           <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Small:</span>
+            <span className="text-white text-sm w-32">Header:</span>
-            <Logo size="homeHeaderSm" />
+            <Logo size="topNavHeader" showText={true} />
-          </div>
-          <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Medium:</span>
-            <Logo size="homeHeaderMd" />
-          </div>
-          <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Large:</span>
-            <Logo size="homeHeaderLg" />
-          </div>
-          <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">XLarge:</span>
-            <Logo size="homeHeaderXl" />
           </div>
         </div>
       </div>
@@ -192,36 +137,24 @@ export const HomeHeaderContext = {
     docs: {
       description: {
         story:
-          "Home header context showing white text variants. These are used on dark/transparent backgrounds.",
+          "TopNav context showing responsive logo sizes. Text hides on smallest breakpoint, shows on larger breakpoints.",
       },
     },
   },
 };
 
-export const HeaderContext = {
+export const CreateFlowContext = {
   args: {},
   render: () => (
-    <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
+    <div className="min-h-screen bg-black p-8">
       <div className="max-w-4xl mx-auto">
         <h2 className="text-white font-semibold mb-6">
-          Header Context (Dark Text)
+          Create Flow Context
         </h2>
         <div className="space-y-4">
           <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Default:</span>
+            <span className="text-white text-sm w-32">CreateFlow:</span>
-            <Logo size="header" />
+            <Logo size="createFlow" showText={true} />
-          </div>
-          <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Medium:</span>
-            <Logo size="headerMd" />
-          </div>
-          <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Large:</span>
-            <Logo size="headerLg" />
-          </div>
-          <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">XLarge:</span>
-            <Logo size="headerXl" />
           </div>
         </div>
       </div>
@@ -231,38 +164,7 @@ export const HeaderContext = {
     docs: {
       description: {
         story:
-          "Header context showing dark text variants. These are used on light backgrounds.",
+          "Create flow context showing responsive logo. Used in CreateFlowTopNav component.",
-      },
-    },
-  },
-};
-
-export const FooterContext = {
-  args: {},
-  render: () => (
-    <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
-      <div className="max-w-4xl mx-auto">
-        <h2 className="text-white font-semibold mb-6">
-          Footer Context (Larger Sizes)
-        </h2>
-        <div className="space-y-4">
-          <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Default:</span>
-            <Logo size="footer" />
-          </div>
-          <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Large:</span>
-            <Logo size="footerLg" />
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Footer context showing larger size variants for footer placement.",
       },
     },
   },

stories/utility/CreateFlowFooter.stories.js

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

stories/utility/CreateFlowTopNav.stories.js

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

tests/components/CreateFlowFooter.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import CreateFlowFooter from "../../app/components/utility/CreateFlowFooter";
+import Button from "../../app/components/buttons/Button";
+import {
+  componentTestSuite,
+  ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+
+type CreateFlowFooterProps = React.ComponentProps<typeof CreateFlowFooter>;
+
+const baseProps: CreateFlowFooterProps = {};
+
+const config: ComponentTestSuiteConfig<CreateFlowFooterProps> = {
+  component: CreateFlowFooter,
+  name: "CreateFlowFooter",
+  props: baseProps,
+  requiredProps: [],
+  optionalProps: {
+    secondButton: <Button>Next</Button>,
+    progressBar: true,
+    className: "test-class",
+  },
+  primaryRole: "contentinfo",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+};
+
+componentTestSuite<CreateFlowFooterProps>(config);
+
+describe("CreateFlowFooter (behavioral tests)", () => {
+  it("renders Back button", () => {
+    render(<CreateFlowFooter />);
+    const backButton = screen.getByRole("button", { name: "Back" });
+    expect(backButton).toBeInTheDocument();
+  });
+
+  it("renders progress bar when progressBar is true", () => {
+    render(<CreateFlowFooter progressBar={true} />);
+    const footer = screen.getByRole("contentinfo", { name: "Create Flow Footer" });
+    expect(footer).toBeInTheDocument();
+  });
+
+  it("does not render progress bar when progressBar is false", () => {
+    const { container } = render(<CreateFlowFooter progressBar={false} />);
+    const progressBar = container.querySelector('[role="progressbar"]');
+    expect(progressBar).not.toBeInTheDocument();
+  });
+
+  it("renders secondButton when provided", () => {
+    const secondButton = <Button>Next</Button>;
+    render(<CreateFlowFooter secondButton={secondButton} />);
+    const nextButton = screen.getByRole("button", { name: "Next" });
+    expect(nextButton).toBeInTheDocument();
+  });
+
+  it("does not render secondButton when not provided", () => {
+    render(<CreateFlowFooter />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]).toHaveTextContent("Back");
+  });
+});

tests/components/CreateFlowTopNav.test.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import CreateFlowTopNav from "../../app/components/utility/CreateFlowTopNav";
+import {
+  componentTestSuite,
+  ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+  }),
+}));
+
+type CreateFlowTopNavProps = React.ComponentProps<typeof CreateFlowTopNav>;
+
+const baseProps: CreateFlowTopNavProps = {};
+
+const config: ComponentTestSuiteConfig<CreateFlowTopNavProps> = {
+  component: CreateFlowTopNav,
+  name: "CreateFlowTopNav",
+  props: baseProps,
+  requiredProps: [],
+  optionalProps: {
+    hasShare: true,
+    hasExport: true,
+    hasEdit: true,
+    loggedIn: true,
+    onShare: vi.fn(),
+    onExport: vi.fn(),
+    onEdit: vi.fn(),
+    onExit: vi.fn(),
+    className: "test-class",
+  },
+  primaryRole: "banner",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: false,
+    disabledState: false,
+    errorState: false,
+  },
+};
+
+componentTestSuite<CreateFlowTopNavProps>(config);
+
+describe("CreateFlowTopNav (behavioral tests)", () => {
+  it("renders Exit button by default", () => {
+    render(<CreateFlowTopNav />);
+    const exitButton = screen.getByRole("button", { name: "Exit" });
+    expect(exitButton).toBeInTheDocument();
+  });
+
+  it("shows Save & Exit when loggedIn is true", () => {
+    render(<CreateFlowTopNav loggedIn={true} />);
+    const exitButton = screen.getByRole("button", { name: "Save & Exit" });
+    expect(exitButton).toBeInTheDocument();
+  });
+
+  it("shows Exit when loggedIn is false", () => {
+    render(<CreateFlowTopNav loggedIn={false} />);
+    const exitButton = screen.getByRole("button", { name: "Exit" });
+    expect(exitButton).toBeInTheDocument();
+  });
+
+  it("renders Share button when hasShare is true", () => {
+    render(<CreateFlowTopNav hasShare={true} />);
+    const shareButton = screen.getByRole("button", { name: "Share" });
+    expect(shareButton).toBeInTheDocument();
+  });
+
+  it("does not render Share button when hasShare is false", () => {
+    render(<CreateFlowTopNav hasShare={false} />);
+    expect(screen.queryByRole("button", { name: "Share" })).not.toBeInTheDocument();
+  });
+
+  it("renders Export button when hasExport is true", () => {
+    render(<CreateFlowTopNav hasExport={true} />);
+    const exportButton = screen.getByRole("button", { name: "Export" });
+    expect(exportButton).toBeInTheDocument();
+  });
+
+  it("renders Edit button when hasEdit is true", () => {
+    render(<CreateFlowTopNav hasEdit={true} />);
+    const editButton = screen.getByRole("button", { name: "Edit" });
+    expect(editButton).toBeInTheDocument();
+  });
+
+  it("calls onExit when Exit button is clicked", async () => {
+    const user = userEvent.setup();
+    const handleExit = vi.fn();
+    render(<CreateFlowTopNav onExit={handleExit} />);
+
+    const exitButton = screen.getByRole("button", { name: "Exit" });
+    await user.click(exitButton);
+
+    expect(handleExit).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onShare when Share button is clicked", async () => {
+    const user = userEvent.setup();
+    const handleShare = vi.fn();
+    render(<CreateFlowTopNav hasShare={true} onShare={handleShare} />);
+
+    const shareButton = screen.getByRole("button", { name: "Share" });
+    await user.click(shareButton);
+
+    expect(handleShare).toHaveBeenCalledTimes(1);
+  });
+});

tests/components/Logo.test.tsx

@@ -46,19 +46,26 @@ describe("Logo (behavioral tests)", () => {
   });
 
   it("hides text when showText is false", () => {
-    render(<Logo showText={false} />);
+    const { container } = render(<Logo showText={false} />);
-    expect(screen.queryByText("CommunityRule")).not.toBeInTheDocument();
+    const textElement = container.querySelector('.hidden');
+    expect(textElement).toBeInTheDocument();
     expect(screen.getByAltText("CommunityRule Logo Icon")).toBeInTheDocument();
   });
 
   it("renders with different size variants", () => {
-    const { rerender } = render(<Logo size="header" />);
+    const { rerender } = render(<Logo size="default" />);
     expect(screen.getByRole("link")).toBeInTheDocument();
 
     rerender(<Logo size="footer" />);
     expect(screen.getByRole("link")).toBeInTheDocument();
 
-    rerender(<Logo size="homeHeaderMd" />);
+    rerender(<Logo size="createFlow" />);
+    expect(screen.getByRole("link")).toBeInTheDocument();
+
+    rerender(<Logo size="topNavFolderTop" />);
+    expect(screen.getByRole("link")).toBeInTheDocument();
+
+    rerender(<Logo size="topNavHeader" />);
     expect(screen.getByRole("link")).toBeInTheDocument();
   });
 });