From 343b96a9bbd8de29517b211e25398f332c853b0d Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 7 Feb 2026 21:13:46 -0700
Subject: [PATCH 1/4] Create rule flow core infrastructure and routing

---
 .../navigation/ConditionalFooter.tsx          | 32 ++++++++++
 .../navigation/ConditionalNavigation.tsx      | 24 +++++++
 .../navigation/TopNav/TopNav.container.tsx    |  1 +
 app/create/[step]/page.tsx                    | 54 ++++++++++++++++
 app/create/context/CreateFlowContext.tsx      | 64 +++++++++++++++++++
 app/create/layout.tsx                         | 24 +++++++
 app/create/types.ts                           | 62 ++++++++++++++++++
 app/layout.tsx                                | 16 ++---
 8 files changed, 265 insertions(+), 12 deletions(-)
 create mode 100644 app/components/navigation/ConditionalFooter.tsx
 create mode 100644 app/components/navigation/ConditionalNavigation.tsx
 create mode 100644 app/create/[step]/page.tsx
 create mode 100644 app/create/context/CreateFlowContext.tsx
 create mode 100644 app/create/layout.tsx
 create mode 100644 app/create/types.ts

diff --git a/app/components/navigation/ConditionalFooter.tsx b/app/components/navigation/ConditionalFooter.tsx
new file mode 100644
index 0000000..48461d5
--- /dev/null
+++ b/app/components/navigation/ConditionalFooter.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { memo } from "react";
+import { usePathname } from "next/navigation";
+import dynamic from "next/dynamic";
+
+// Code split Footer - below the fold, can be lazy loaded
+const Footer = dynamic(() => import("./Footer"), {
+  loading: () => (
+    <footer className="bg-[var(--color-surface-default-primary)] w-full min-h-[200px]" />
+  ),
+  ssr: true, // Keep SSR for SEO
+});
+
+/**
+ * Conditionally renders Footer based on pathname.
+ * Hides footer for /create/* routes (full-screen create flow).
+ */
+const ConditionalFooter = memo(() => {
+  const pathname = usePathname();
+  const isCreateFlow = pathname?.startsWith("/create");
+
+  if (isCreateFlow) {
+    return null;
+  }
+
+  return <Footer />;
+});
+
+ConditionalFooter.displayName = "ConditionalFooter";
+
+export default ConditionalFooter;
diff --git a/app/components/navigation/ConditionalNavigation.tsx b/app/components/navigation/ConditionalNavigation.tsx
new file mode 100644
index 0000000..7222a60
--- /dev/null
+++ b/app/components/navigation/ConditionalNavigation.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { memo } from "react";
+import { usePathname } from "next/navigation";
+import TopNavWithPathname from "./TopNav/TopNavWithPathname";
+
+/**
+ * Conditionally renders TopNav based on pathname.
+ * Hides navigation for /create/* routes (full-screen create flow).
+ */
+const ConditionalNavigation = memo(() => {
+  const pathname = usePathname();
+  const isCreateFlow = pathname?.startsWith("/create");
+
+  if (isCreateFlow) {
+    return null;
+  }
+
+  return <TopNavWithPathname />;
+});
+
+ConditionalNavigation.displayName = "ConditionalNavigation";
+
+export default ConditionalNavigation;
diff --git a/app/components/navigation/TopNav/TopNav.container.tsx b/app/components/navigation/TopNav/TopNav.container.tsx
index c6a0506..c6e9731 100644
--- a/app/components/navigation/TopNav/TopNav.container.tsx
+++ b/app/components/navigation/TopNav/TopNav.container.tsx
@@ -205,6 +205,7 @@ const TopNavContainer = memo<TopNavProps>(
           size={buttonSize}
           buttonType={buttonType}
           palette={palette}
+          href="/create/informational"
           ariaLabel={t("ariaLabels.createNewRule")}
         >
           {renderAvatarGroup(containerSize, avatarSize)}
diff --git a/app/create/[step]/page.tsx b/app/create/[step]/page.tsx
new file mode 100644
index 0000000..22b4786
--- /dev/null
+++ b/app/create/[step]/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { use } from "react";
+import type { CreateFlowStep } from "../types";
+
+interface PageProps {
+  params: Promise<{ step: string }>;
+}
+
+/**
+ * Valid step IDs for the create rule flow
+ */
+const VALID_STEPS: CreateFlowStep[] = [
+  "informational",
+  "text",
+  "select",
+  "upload",
+  "review",
+  "compact-cards",
+  "expanded-cards",
+  "right-rail",
+  "final-review",
+  "completed",
+];
+
+/**
+ * Dynamic route handler for create flow steps
+ * 
+ * Handles all flow steps via dynamic routing: /create/[step]
+ * Validates step exists and renders appropriate template (placeholder for now)
+ */
+export default function CreateFlowStepPage({ params }: PageProps) {
+  const { step } = use(params);
+
+  // Validate step exists
+  if (!VALID_STEPS.includes(step as CreateFlowStep)) {
+    notFound();
+  }
+
+  // Placeholder content - templates will be implemented in CR-51-55
+  return (
+    <div className="flex-1 flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-white text-2xl font-bold mb-4">
+          Create Flow Step: {step}
+        </h1>
+        <p className="text-gray-400">
+          Template implementation coming in CR-51 through CR-55
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/create/context/CreateFlowContext.tsx b/app/create/context/CreateFlowContext.tsx
new file mode 100644
index 0000000..3c98858
--- /dev/null
+++ b/app/create/context/CreateFlowContext.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { createContext, useContext, useState, type ReactNode } from "react";
+import type {
+  CreateFlowState,
+  CreateFlowContextValue,
+  CreateFlowStep,
+} from "../types";
+
+const CreateFlowContext = createContext<CreateFlowContextValue | null>(null);
+
+interface CreateFlowProviderProps {
+  children: ReactNode;
+  initialStep?: CreateFlowStep | null;
+}
+
+/**
+ * Provider component for Create Flow state management
+ * 
+ * This is a basic implementation that will be expanded in CR-56
+ * with full navigation logic, state persistence, and validation.
+ */
+export function CreateFlowProvider({
+  children,
+  initialStep = null,
+}: CreateFlowProviderProps) {
+  const [state, setState] = useState<CreateFlowState>({});
+  const [currentStep] = useState<CreateFlowStep | null>(
+    initialStep,
+  );
+
+  const updateState = (updates: Partial<CreateFlowState>) => {
+    setState((prevState) => ({
+      ...prevState,
+      ...updates,
+    }));
+  };
+
+  const contextValue: CreateFlowContextValue = {
+    state,
+    currentStep,
+    updateState,
+  };
+
+  return (
+    <CreateFlowContext.Provider value={contextValue}>
+      {children}
+    </CreateFlowContext.Provider>
+  );
+}
+
+/**
+ * Hook to access Create Flow context
+ * 
+ * @throws Error if used outside CreateFlowProvider
+ * @returns CreateFlowContextValue
+ */
+export function useCreateFlow(): CreateFlowContextValue {
+  const context = useContext(CreateFlowContext);
+  if (!context) {
+    throw new Error("useCreateFlow must be used within CreateFlowProvider");
+  }
+  return context;
+}
diff --git a/app/create/layout.tsx b/app/create/layout.tsx
new file mode 100644
index 0000000..0ac1448
--- /dev/null
+++ b/app/create/layout.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { CreateFlowProvider } from "./context/CreateFlowContext";
+
+/**
+ * Layout for the Create Rule Flow
+ * 
+ * Provides a full-screen layout without the root layout's TopNav/Footer.
+ * This layout wraps all create flow pages and provides the CreateFlowContext.
+ */
+export default function CreateFlowLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <CreateFlowProvider>
+      <div className="min-h-screen bg-black flex flex-col">
+        {children}
+      </div>
+    </CreateFlowProvider>
+  );
+}
diff --git a/app/create/types.ts b/app/create/types.ts
new file mode 100644
index 0000000..3f1e705
--- /dev/null
+++ b/app/create/types.ts
@@ -0,0 +1,62 @@
+/**
+ * Type definitions for the Create Rule Flow
+ *
+ * These types define the structure for the full-screen create rule flow,
+ * including step types, state management, and context interfaces.
+ */
+
+/**
+ * Valid step IDs for the create rule flow
+ */
+export type CreateFlowStep =
+  | "informational"
+  | "text"
+  | "select"
+  | "upload"
+  | "review"
+  | "compact-cards"
+  | "expanded-cards"
+  | "right-rail"
+  | "final-review"
+  | "completed";
+
+/**
+ * Flow state interface for storing user inputs across all steps
+ * Will be expanded in CR-56 with specific field definitions
+ */
+export interface CreateFlowState {
+  // Placeholder structure - will be expanded in CR-56
+  [key: string]: unknown;
+}
+
+/**
+ * Context value interface for CreateFlowContext
+ * Provides state management and navigation capabilities
+ */
+export interface CreateFlowContextValue {
+  state: CreateFlowState;
+  currentStep: CreateFlowStep | null;
+  updateState: (updates: Partial<CreateFlowState>) => void;
+  // Navigation handlers will be added in CR-56
+}
+
+/**
+ * Base props interface for page templates
+ * Will be expanded in template implementation tickets (CR-51-55)
+ */
+export interface PageTemplateProps {
+  // Base props for all page templates
+  // Will be expanded in template tickets
+}
+
+/**
+ * Navigation handlers interface
+ * Will be implemented in CR-56
+ */
+export interface NavigationHandlers {
+  goToNextStep: () => void;
+  goToPreviousStep: () => void;
+  goToStep: (step: CreateFlowStep) => void;
+  canGoNext: () => boolean;
+  canGoBack: () => boolean;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index c7d531c..40a5ff9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,19 +1,11 @@
 import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
-import dynamic from "next/dynamic";
 import { MessagesProvider } from "./contexts/MessagesContext";
 import messages from "../messages/en/index";
 import "./globals.css";
-import TopNavWithPathname from "./components/navigation/TopNav/TopNavWithPathname";
-
-// Code split Footer - below the fold, can be lazy loaded
-const Footer = dynamic(() => import("./components/navigation/Footer"), {
-  loading: () => (
-    <footer className="bg-[var(--color-surface-default-primary)] w-full min-h-[200px]" />
-  ),
-  ssr: true, // Keep SSR for SEO
-});
+import ConditionalNavigation from "./components/navigation/ConditionalNavigation";
+import ConditionalFooter from "./components/navigation/ConditionalFooter";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -107,9 +99,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       >
         <MessagesProvider messages={messages}>
           <div className="min-h-screen flex flex-col">
-            <TopNavWithPathname />
+            <ConditionalNavigation />
             <main className="flex-1">{children}</main>
-            <Footer />
+            <ConditionalFooter />
           </div>
         </MessagesProvider>
       </body>
-- 
2.43.0


From e6c1002dbb970f100302acf4d04b149d93475b37 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 7 Feb 2026 22:42:30 -0700
Subject: [PATCH 2/4] Implement create flow topnav and footer

---
 app/components/icons/Logo.tsx                 |  16 ++-
 .../CreateFlowFooter.container.tsx            |  21 ++++
 .../CreateFlowFooter.types.ts                 |  20 ++++
 .../CreateFlowFooter.view.tsx                 |  42 ++++++++
 .../utility/CreateFlowFooter/index.tsx        |   2 +
 .../CreateFlowTopNav.container.tsx            |  49 +++++++++
 .../CreateFlowTopNav.types.ts                 |  49 +++++++++
 .../CreateFlowTopNav.view.tsx                 | 101 ++++++++++++++++++
 .../utility/CreateFlowTopNav/index.tsx        |   2 +
 app/create/layout.tsx                         |  21 +++-
 10 files changed, 319 insertions(+), 4 deletions(-)
 create mode 100644 app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
 create mode 100644 app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts
 create mode 100644 app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
 create mode 100644 app/components/utility/CreateFlowFooter/index.tsx
 create mode 100644 app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
 create mode 100644 app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts
 create mode 100644 app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
 create mode 100644 app/components/utility/CreateFlowTopNav/index.tsx

diff --git a/app/components/icons/Logo.tsx b/app/components/icons/Logo.tsx
index dde8433..1f4219f 100644
--- a/app/components/icons/Logo.tsx
+++ b/app/components/icons/Logo.tsx
@@ -15,7 +15,8 @@ interface LogoProps {
     | "headerLg"
     | "headerXl"
     | "footer"
-    | "footerLg";
+    | "footerLg"
+    | "createFlow";
   showText?: boolean;
 }
 
@@ -114,6 +115,13 @@ const Logo = memo<LogoProps>(({ size = "default", showText = true }) => {
       lineHeight: "leading-[calc(27.05px*2.05)]",
       iconSize: "w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]",
     },
+    createFlow: {
+      containerHeight: "h-[30px] md:h-[41px]",
+      gap: "gap-[6px] md:gap-[8.28px]",
+      textSize: "text-[16.48px] md:text-[21.97px]",
+      lineHeight: "leading-[20.28px] md:leading-[27.05px]",
+      iconSize: "w-[20.28px] h-[20.28px] md:w-[27.05px] md:h-[27.05px]",
+    },
   };
 
   const config =
@@ -137,8 +145,10 @@ const Logo = memo<LogoProps>(({ size = "default", showText = true }) => {
                       ? sizes.headerXl
                       : size === "footer"
                         ? sizes.footer
-                        : size === "footerLg"
-                          ? sizes.footerLg
+                      : size === "footerLg"
+                        ? sizes.footerLg
+                        : size === "createFlow"
+                          ? sizes.createFlow
                           : sizes.default;
 
   return (
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx b/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
new file mode 100644
index 0000000..1212196
--- /dev/null
+++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { memo } from "react";
+import { CreateFlowFooterView } from "./CreateFlowFooter.view";
+import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
+
+const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
+  ({ secondButton, progressBar = true, className = "" }) => {
+    return (
+      <CreateFlowFooterView
+        secondButton={secondButton}
+        progressBar={progressBar}
+        className={className}
+      />
+    );
+  },
+);
+
+CreateFlowFooterContainer.displayName = "CreateFlowFooter";
+
+export default CreateFlowFooterContainer;
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts b/app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts
new file mode 100644
index 0000000..4bf5d0d
--- /dev/null
+++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts
@@ -0,0 +1,20 @@
+/**
+ * Type definitions for CreateFlowFooter component
+ *
+ * Footer component for the create rule flow with progress bar and buttons.
+ */
+export interface CreateFlowFooterProps {
+  /**
+   * The second button (typically "Next" button) to display on the right side
+   */
+  secondButton?: React.ReactNode;
+  /**
+   * Whether to show the progress bar
+   * @default true
+   */
+  progressBar?: boolean;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx b/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
new file mode 100644
index 0000000..4b9feef
--- /dev/null
+++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
@@ -0,0 +1,42 @@
+import ProportionBar from "../../progress/ProportionBar";
+import Button from "../../buttons/Button";
+import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
+
+export function CreateFlowFooterView({
+  secondButton,
+  progressBar = true,
+  className = "",
+}: CreateFlowFooterProps) {
+  return (
+    <footer
+      className={`sticky bottom-0 z-50 bg-black w-full ${className}`}
+      role="contentinfo"
+      aria-label="Create Flow Footer"
+    >
+      {/* Progress Bar - Top */}
+      {progressBar && (
+        <div className="px-[var(--spacing-measures-spacing-500,20px)] md:px-[var(--spacing-measures-spacing-1200,48px)] pt-[var(--spacing-measures-spacing-300,12px)]">
+          <ProportionBar progress="1-0" />
+        </div>
+      )}
+
+      {/* Buttons Container */}
+      <div className="flex items-center justify-between mx-auto max-w-[639px] md:max-w-[1920px] px-[var(--spacing-measures-spacing-500,20px)] md:px-[var(--spacing-measures-spacing-1200,48px)] py-[var(--spacing-measures-spacing-300,12px)] gap-[var(--spacing-measures-spacing-300,12px)]">
+        {/* Back Button - Left */}
+        <Button
+          buttonType="ghost"
+          palette="default"
+          size="xsmall"
+          className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
+        >
+          Back
+        </Button>
+
+        {/* Second Button - Right */}
+        {secondButton && (
+          <div className="flex-shrink-0">{secondButton}</div>
+        )}
+      </div>
+    </footer>
+  );
+}
diff --git a/app/components/utility/CreateFlowFooter/index.tsx b/app/components/utility/CreateFlowFooter/index.tsx
new file mode 100644
index 0000000..303a118
--- /dev/null
+++ b/app/components/utility/CreateFlowFooter/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./CreateFlowFooter.container";
+export type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
new file mode 100644
index 0000000..56de7eb
--- /dev/null
+++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { memo } from "react";
+import { useRouter } from "next/navigation";
+import { CreateFlowTopNavView } from "./CreateFlowTopNav.view";
+import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
+
+const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
+  ({
+    hasShare = false,
+    hasExport = false,
+    hasEdit = false,
+    loggedIn = false,
+    onShare,
+    onExport,
+    onEdit,
+    onExit,
+    className = "",
+  }) => {
+    const router = useRouter();
+
+    const handleExit = () => {
+      if (onExit) {
+        onExit();
+      } else {
+        // Default behavior: navigate to home
+        router.push("/");
+      }
+    };
+
+    return (
+      <CreateFlowTopNavView
+        hasShare={hasShare}
+        hasExport={hasExport}
+        hasEdit={hasEdit}
+        loggedIn={loggedIn}
+        onShare={onShare}
+        onExport={onExport}
+        onEdit={onEdit}
+        onExit={handleExit}
+        className={className}
+      />
+    );
+  },
+);
+
+CreateFlowTopNavContainer.displayName = "CreateFlowTopNav";
+
+export default CreateFlowTopNavContainer;
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts
new file mode 100644
index 0000000..0559ad5
--- /dev/null
+++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts
@@ -0,0 +1,49 @@
+/**
+ * Type definitions for CreateFlowTopNav component
+ * 
+ * Top navigation bar for the create rule flow.
+ * Includes logo and action buttons (Share, Export, Edit, Exit).
+ */
+
+export interface CreateFlowTopNavProps {
+  /**
+   * Whether to show the Share button
+   * @default false
+   */
+  hasShare?: boolean;
+  /**
+   * Whether to show the Export button
+   * @default false
+   */
+  hasExport?: boolean;
+  /**
+   * Whether to show the Edit button
+   * @default false
+   */
+  hasEdit?: boolean;
+  /**
+   * Whether the user is logged in
+   * @default false
+   */
+  loggedIn?: boolean;
+  /**
+   * Callback when Share button is clicked
+   */
+  onShare?: () => void;
+  /**
+   * Callback when Export button is clicked
+   */
+  onExport?: () => void;
+  /**
+   * Callback when Edit button is clicked
+   */
+  onEdit?: () => void;
+  /**
+   * Callback when Exit/Save & Exit button is clicked
+   */
+  onExit?: () => void;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
new file mode 100644
index 0000000..d132207
--- /dev/null
+++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx
@@ -0,0 +1,101 @@
+import Logo from "../../icons/Logo";
+import Button from "../../buttons/Button";
+import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
+
+export function CreateFlowTopNavView({
+  hasShare = false,
+  hasExport = false,
+  hasEdit = false,
+  loggedIn = false,
+  onShare,
+  onExport,
+  onEdit,
+  onExit,
+  className = "",
+}: CreateFlowTopNavProps) {
+  const exitButtonText = loggedIn ? "Save & Exit" : "Exit";
+
+  return (
+    <header
+      className={`bg-black w-full border-b border-[var(--color-border-default-tertiary)] ${className}`}
+      role="banner"
+      aria-label="Create Rule Flow Navigation"
+    >
+      <nav
+        className="flex items-center justify-between mx-auto max-w-[639px] md:max-w-[1920px] px-[var(--spacing-measures-spacing-500,20px)] md:px-[48px] py-[var(--spacing-measures-spacing-300,12px)] md:py-[var(--spacing-measures-spacing-016,16px)]"
+        role="navigation"
+        aria-label="Create Flow Navigation"
+      >
+        {/* Logo - Left */}
+        <Logo size="createFlow" showText={true} />
+
+        {/* Button Group - Right */}
+        <div className="flex items-center gap-[var(--spacing-scale-012,12px)]">
+          {hasShare && (
+            <Button
+              buttonType="outline"
+              palette="default"
+              size="xsmall"
+              onClick={onShare}
+              ariaLabel="Share"
+              className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
+            >
+              Share
+            </Button>
+          )}
+
+          {hasExport && (
+            <Button
+              buttonType="outline"
+              palette="default"
+              size="xsmall"
+              onClick={onExport}
+              ariaLabel="Export"
+              className="justify-center gap-[var(--spacing-scale-002,2px)] !pl-[var(--spacing-scale-012,12px)] !pr-[var(--spacing-scale-006,6px)] md:!pr-[var(--spacing-scale-006,6px)] !text-[10px] md:!text-[12px] !leading-[12px] md:!leading-[14px] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
+            >
+              <span>Export</span>
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="shrink-0 md:w-[14px] md:h-[14px]"
+                aria-hidden="true"
+              >
+                <path d="M19 9l-7 7-7-7" />
+              </svg>
+            </Button>
+          )}
+
+          {hasEdit && (
+            <Button
+              buttonType="outline"
+              palette="default"
+              size="xsmall"
+              onClick={onEdit}
+              ariaLabel="Edit"
+              className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
+            >
+              Edit
+            </Button>
+          )}
+
+          <Button
+            buttonType="outline"
+            palette="default"
+            size="xsmall"
+            onClick={onExit}
+            ariaLabel={exitButtonText}
+            className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
+          >
+            {exitButtonText}
+          </Button>
+        </div>
+      </nav>
+    </header>
+  );
+}
diff --git a/app/components/utility/CreateFlowTopNav/index.tsx b/app/components/utility/CreateFlowTopNav/index.tsx
new file mode 100644
index 0000000..e771fb2
--- /dev/null
+++ b/app/components/utility/CreateFlowTopNav/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./CreateFlowTopNav.container";
+export type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
diff --git a/app/create/layout.tsx b/app/create/layout.tsx
index 0ac1448..59a433c 100644
--- a/app/create/layout.tsx
+++ b/app/create/layout.tsx
@@ -2,12 +2,16 @@
 
 import type { ReactNode } from "react";
 import { CreateFlowProvider } from "./context/CreateFlowContext";
+import CreateFlowTopNav from "../components/utility/CreateFlowTopNav";
+import CreateFlowFooter from "../components/utility/CreateFlowFooter";
+import Button from "../components/buttons/Button";
 
 /**
  * Layout for the Create Rule Flow
  * 
  * Provides a full-screen layout without the root layout's TopNav/Footer.
  * This layout wraps all create flow pages and provides the CreateFlowContext.
+ * Includes the create flow-specific TopNav and Footer components.
  */
 export default function CreateFlowLayout({
   children,
@@ -17,7 +21,22 @@ export default function CreateFlowLayout({
   return (
     <CreateFlowProvider>
       <div className="min-h-screen bg-black flex flex-col">
-        {children}
+        <CreateFlowTopNav />
+        <main className="flex-1 overflow-auto">
+          {children}
+        </main>
+        <CreateFlowFooter
+          secondButton={
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="xsmall"
+              className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
+            >
+              Next
+            </Button>
+          }
+        />
       </div>
     </CreateFlowProvider>
   );
-- 
2.43.0


From 37555b2725ebabeeb33b5444426e98be9410a95a Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 7 Feb 2026 22:51:27 -0700
Subject: [PATCH 3/4] Clean up logo component

---
 app/components/icons/Logo.tsx                 | 183 +++++-------------
 app/components/navigation/Footer.tsx          |  12 +-
 .../navigation/TopNav/TopNav.container.tsx    |  72 +------
 .../navigation/TopNav/TopNav.types.ts         |  34 +---
 .../navigation/TopNav/TopNav.view.tsx         |  25 +--
 5 files changed, 56 insertions(+), 270 deletions(-)

diff --git a/app/components/icons/Logo.tsx b/app/components/icons/Logo.tsx
index 1f4219f..e932010 100644
--- a/app/components/icons/Logo.tsx
+++ b/app/components/icons/Logo.tsx
@@ -5,18 +5,10 @@ import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 interface LogoProps {
   size?:
     | "default"
-    | "homeHeaderXsmall"
-    | "homeHeaderSm"
-    | "homeHeaderMd"
-    | "homeHeaderLg"
-    | "homeHeaderXl"
-    | "header"
-    | "headerMd"
-    | "headerLg"
-    | "headerXl"
     | "footer"
-    | "footerLg"
-    | "createFlow";
+    | "createFlow"
+    | "topNavFolderTop"
+    | "topNavHeader";
   showText?: boolean;
 }
 
@@ -38,82 +30,12 @@ const Logo = memo<LogoProps>(({ size = "default", showText = true }) => {
       lineHeight: "leading-[27.05px]",
       iconSize: "w-[27.05px] h-[27.05px]",
     },
-    homeHeaderXsmall: {
-      containerHeight: "h-[14.11px]",
-      gap: "gap-[4.21px]",
-      textSize: "text-[11.57px]",
-      lineHeight: "leading-[14.24px]",
-      iconSize: "w-[14.11px] h-[14.11px]",
-    },
-    homeHeaderSm: {
-      containerHeight: "h-[21.06px]",
-      gap: "gap-[3.19px]",
-      textSize: "text-[11.69px]",
-      lineHeight: "leading-[14.39px]",
-      iconSize: "w-[14.39px] h-[14.39px]",
-    },
-    homeHeaderMd: {
-      containerHeight: "h-[32.24px]",
-      gap: "gap-[4.89px]",
-      textSize: "text-[17.89px]",
-      lineHeight: "leading-[22.02px]",
-      iconSize: "w-[22.02px] h-[22.02px]",
-    },
-    homeHeaderLg: {
-      containerHeight: "h-[28px]",
-      gap: "gap-[6.55px]",
-      textSize: "text-[21.97px]",
-      lineHeight: "leading-[27.05px]",
-      iconSize: "w-[27.05px] h-[27.05px]",
-    },
-    homeHeaderXl: {
-      containerHeight: "h-[36px]",
-      gap: "gap-[8.64px]",
-      textSize: "text-[29.01px]",
-      lineHeight: "leading-[35.7px]",
-      iconSize: "w-[35.7px] h-[35.7px]",
-    },
-    header: {
-      containerHeight: "h-[20.85px]",
-      gap: "gap-[4.21px]",
-      textSize: "text-[11.57px]",
-      lineHeight: "leading-[14.24px]",
-      iconSize: "w-[14.24px] h-[14.24px]",
-    },
-    headerMd: {
-      containerHeight: "h-[17.91px]",
-      gap: "gap-[6.51px]",
-      textSize: "text-[17.89px]",
-      lineHeight: "leading-[22.02px]",
-      iconSize: "w-[22.02px] h-[22.02px]",
-    },
-    headerLg: {
-      containerHeight: "h-[28px]",
-      gap: "gap-[6.55px]",
-      textSize: "text-[21.97px]",
-      lineHeight: "leading-[27.05px]",
-      iconSize: "w-[27.05px] h-[27.05px]",
-    },
-    headerXl: {
-      containerHeight: "h-[34px]",
-      gap: "gap-[8.19px]",
-      textSize: "text-[27.47px]",
-      lineHeight: "leading-[33.81px]",
-      iconSize: "w-[33.81px] h-[33.81px]",
-    },
     footer: {
-      containerHeight: "h-[calc(40px*1.37)]",
-      gap: "gap-[calc(8px*1.37)]",
-      textSize: "text-[calc(21.97px*1.37)]",
-      lineHeight: "leading-[calc(27.05px*1.37)]",
-      iconSize: "w-[calc(27.05px*1.37)] h-[calc(27.05px*1.37)]",
-    },
-    footerLg: {
-      containerHeight: "h-[calc(40px*2.05)]",
-      gap: "gap-[calc(8px*2.05)]",
-      textSize: "text-[calc(21.97px*2.05)]",
-      lineHeight: "leading-[calc(27.05px*2.05)]",
-      iconSize: "w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]",
+      containerHeight: "h-[41px] sm:h-[calc(40px*1.37)] lg:h-[calc(40px*2.05)]",
+      gap: "gap-[8.28px] sm:gap-[calc(8px*1.37)] lg:gap-[calc(8px*2.05)]",
+      textSize: "text-[21.97px] sm:text-[calc(21.97px*1.37)] lg:text-[calc(21.97px*2.05)]",
+      lineHeight: "leading-[27.05px] sm:leading-[calc(27.05px*1.37)] lg:leading-[calc(27.05px*2.05)]",
+      iconSize: "w-[27.05px] h-[27.05px] sm:w-[calc(27.05px*1.37)] sm:h-[calc(27.05px*1.37)] lg:w-[calc(27.05px*2.05)] lg:h-[calc(27.05px*2.05)]",
     },
     createFlow: {
       containerHeight: "h-[30px] md:h-[41px]",
@@ -122,34 +44,23 @@ const Logo = memo<LogoProps>(({ size = "default", showText = true }) => {
       lineHeight: "leading-[20.28px] md:leading-[27.05px]",
       iconSize: "w-[20.28px] h-[20.28px] md:w-[27.05px] md:h-[27.05px]",
     },
+    topNavFolderTop: {
+      containerHeight: "h-[14.11px] sm:h-[21.06px] md:h-[32.24px] lg:h-[28px] xl:h-[36px]",
+      gap: "gap-0 sm:gap-[3.19px] md:gap-[4.89px] lg:gap-[6.55px] xl:gap-[8.64px]",
+      textSize: "text-[11.57px] sm:text-[11.69px] md:text-[17.89px] lg:text-[21.97px] xl:text-[29.01px]",
+      lineHeight: "leading-[14.24px] sm:leading-[14.39px] md:leading-[22.02px] lg:leading-[27.05px] xl:leading-[35.7px]",
+      iconSize: "w-[14.11px] h-[14.11px] sm:w-[14.39px] sm:h-[14.39px] md:w-[22.02px] md:h-[22.02px] lg:w-[27.05px] lg:h-[27.05px] xl:w-[35.7px] xl:h-[35.7px]",
+    },
+    topNavHeader: {
+      containerHeight: "h-[20.85px] sm:h-[20.85px] md:h-[17.91px] lg:h-[28px] xl:h-[34px]",
+      gap: "gap-0 sm:gap-[4.21px] md:gap-[6.51px] lg:gap-[6.55px] xl:gap-[8.19px]",
+      textSize: "text-[11.57px] sm:text-[11.57px] md:text-[17.89px] lg:text-[21.97px] xl:text-[27.47px]",
+      lineHeight: "leading-[14.24px] sm:leading-[14.24px] md:leading-[22.02px] lg:leading-[27.05px] xl:leading-[33.81px]",
+      iconSize: "w-[14.24px] h-[14.24px] sm:w-[14.24px] sm:h-[14.24px] md:w-[22.02px] md:h-[22.02px] lg:w-[27.05px] lg:h-[27.05px] xl:w-[33.81px] xl:h-[33.81px]",
+    },
   };
 
-  const config =
-    size === "homeHeaderXsmall"
-      ? sizes.homeHeaderXsmall
-      : size === "homeHeaderSm"
-        ? sizes.homeHeaderSm
-        : size === "homeHeaderMd"
-          ? sizes.homeHeaderMd
-          : size === "homeHeaderLg"
-            ? sizes.homeHeaderLg
-            : size === "homeHeaderXl"
-              ? sizes.homeHeaderXl
-              : size === "header"
-                ? sizes.header
-                : size === "headerMd"
-                  ? sizes.headerMd
-                  : size === "headerLg"
-                    ? sizes.headerLg
-                    : size === "headerXl"
-                      ? sizes.headerXl
-                      : size === "footer"
-                        ? sizes.footer
-                      : size === "footerLg"
-                        ? sizes.footerLg
-                        : size === "createFlow"
-                          ? sizes.createFlow
-                          : sizes.default;
+  const config = sizes[size || "default"] || sizes.default;
 
   return (
     <Link href="/" className="block" aria-label="CommunityRule Logo">
@@ -158,25 +69,27 @@ const Logo = memo<LogoProps>(({ size = "default", showText = true }) => {
           showText ? config.gap : ""
         } transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`}
       >
-        {/* Logo Text - only show if showText is true */}
-        {showText && (
-          <div
-            className={`font-bricolage-grotesque ${
-              size === "homeHeaderXsmall" ||
-              size === "homeHeaderSm" ||
-              size === "homeHeaderMd" ||
-              size === "homeHeaderLg" ||
-              size === "homeHeaderXl"
-                ? "text-[var(--color-content-inverse-primary)]"
-                : "text-[var(--color-content-default-primary)]"
-            } ${config.textSize} ${
-              config.lineHeight
-            } font-normal tracking-[0px] transition-colors duration-200`}
-            aria-label="CommunityRule"
-          >
-            CommunityRule
-          </div>
-        )}
+        {/* Logo Text - responsive visibility for topNav sizes */}
+        <div
+          className={`font-bricolage-grotesque ${
+            size === "topNavFolderTop"
+              ? "text-[var(--color-content-inverse-primary)]"
+              : "text-[var(--color-content-default-primary)]"
+          } ${config.textSize} ${
+            config.lineHeight
+          } font-normal tracking-[0px] transition-colors duration-200 ${
+            size === "topNavFolderTop" || size === "topNavHeader"
+              ? showText
+                ? "hidden sm:block"
+                : "hidden"
+              : showText
+                ? ""
+                : "hidden"
+          }`}
+          aria-label="CommunityRule"
+        >
+          CommunityRule
+        </div>
 
         {/* Vector Icon */}
         {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -188,13 +101,7 @@ const Logo = memo<LogoProps>(({ size = "default", showText = true }) => {
           className={`flex-shrink-0 ${
             config.iconSize
           } transition-all duration-200 ${
-            size === "homeHeaderXsmall" ||
-            size === "homeHeaderSm" ||
-            size === "homeHeaderMd" ||
-            size === "homeHeaderLg" ||
-            size === "homeHeaderXl"
-              ? "filter brightness-0"
-              : ""
+            size === "topNavFolderTop" ? "filter brightness-0" : ""
           }`}
           aria-hidden="true"
         />
diff --git a/app/components/navigation/Footer.tsx b/app/components/navigation/Footer.tsx
index 79ae7b9..fd7eb24 100644
--- a/app/components/navigation/Footer.tsx
+++ b/app/components/navigation/Footer.tsx
@@ -39,16 +39,8 @@ const Footer = memo(() => {
           lg:py-[var(--spacing-measures-spacing-096,96px)]
           lg:gap-[var(--spacing-measures-spacing-060,60px)]"
         >
-          {/* Logo*/}
-          <div className="block sm:hidden">
-            <Logo />
-          </div>
-          <div className="hidden sm:block lg:hidden">
-            <Logo size="footer" />
-          </div>
-          <div className="hidden lg:block">
-            <Logo size="footerLg" />
-          </div>
+          {/* Logo */}
+          <Logo size="footer" />
 
           {/* Content section */}
           <div className="flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0">
diff --git a/app/components/navigation/TopNav/TopNav.container.tsx b/app/components/navigation/TopNav/TopNav.container.tsx
index c6e9731..1036fe3 100644
--- a/app/components/navigation/TopNav/TopNav.container.tsx
+++ b/app/components/navigation/TopNav/TopNav.container.tsx
@@ -42,54 +42,8 @@ const TopNavContainer = memo<TopNavProps>(
       },
     };
 
-    // Logo configuration based on folderTop prop
-    const logoConfig = folderTop
-      ? [
-          {
-            breakpoint: "block sm:hidden",
-            size: "homeHeaderXsmall" as const,
-            showText: false,
-          },
-          {
-            breakpoint: "hidden sm:block md:hidden",
-            size: "homeHeaderSm" as const,
-            showText: true,
-          },
-          {
-            breakpoint: "hidden md:block lg:hidden",
-            size: "homeHeaderMd" as const,
-            showText: true,
-          },
-          {
-            breakpoint: "hidden lg:block xl:hidden",
-            size: "homeHeaderLg" as const,
-            showText: true,
-          },
-          {
-            breakpoint: "hidden xl:block",
-            size: "homeHeaderXl" as const,
-            showText: true,
-          },
-        ]
-      : [
-          { breakpoint: "block sm:hidden", size: "header" as const, showText: false },
-          {
-            breakpoint: "hidden sm:block md:hidden",
-            size: "header" as const,
-            showText: true,
-          },
-          {
-            breakpoint: "hidden md:block lg:hidden",
-            size: "headerMd" as const,
-            showText: true,
-          },
-          {
-            breakpoint: "hidden lg:block xl:hidden",
-            size: "headerLg" as const,
-            showText: true,
-          },
-          { breakpoint: "hidden xl:block", size: "headerXl" as const, showText: true },
-        ];
+    // Logo size based on folderTop prop
+    const logoSize = folderTop ? "topNavFolderTop" : "topNavHeader";
 
     // Navigation items with translations
     const navigationItems = [
@@ -214,25 +168,6 @@ const TopNavContainer = memo<TopNavProps>(
       );
     };
 
-    const renderLogo = (
-      size:
-        | "default"
-        | "homeHeaderXsmall"
-        | "homeHeaderSm"
-        | "homeHeaderMd"
-        | "homeHeaderLg"
-        | "homeHeaderXl"
-        | "header"
-        | "headerMd"
-        | "headerLg"
-        | "headerXl"
-        | "footer"
-        | "footerLg",
-      showText: boolean,
-    ) => {
-      return <Logo size={size} showText={showText} />;
-    };
-
     return (
       <TopNavView
         folderTop={folderTop}
@@ -240,11 +175,10 @@ const TopNavContainer = memo<TopNavProps>(
         profile={profile}
         logIn={logIn}
         schemaData={schemaData}
-        logoConfig={logoConfig}
+        logoSize={logoSize}
         renderNavigationItems={renderNavigationItems}
         renderLoginButton={renderLoginButton}
         renderCreateRuleButton={renderCreateRuleButton}
-        renderLogo={renderLogo}
       />
     );
   },
diff --git a/app/components/navigation/TopNav/TopNav.types.ts b/app/components/navigation/TopNav/TopNav.types.ts
index 1acdb32..e786e20 100644
--- a/app/components/navigation/TopNav/TopNav.types.ts
+++ b/app/components/navigation/TopNav/TopNav.types.ts
@@ -38,23 +38,7 @@ export interface TopNavViewProps {
       "query-input": string;
     };
   };
-  logoConfig: Array<{
-    breakpoint: string;
-    size:
-      | "default"
-      | "homeHeaderXsmall"
-      | "homeHeaderSm"
-      | "homeHeaderMd"
-      | "homeHeaderLg"
-      | "homeHeaderXl"
-      | "header"
-      | "headerMd"
-      | "headerLg"
-      | "headerXl"
-      | "footer"
-      | "footerLg";
-    showText: boolean;
-  }>;
+  logoSize: "topNavFolderTop" | "topNavHeader";
   renderNavigationItems: (_size: NavSize) => React.ReactNode;
   renderLoginButton: (_size: NavSize) => React.ReactNode;
   renderCreateRuleButton: (
@@ -62,20 +46,4 @@ export interface TopNavViewProps {
     _containerSize: "small" | "medium" | "large" | "xlarge",
     _avatarSize: "small" | "medium" | "large" | "xlarge",
   ) => React.ReactNode;
-  renderLogo: (
-    _size:
-      | "default"
-      | "homeHeaderXsmall"
-      | "homeHeaderSm"
-      | "homeHeaderMd"
-      | "homeHeaderLg"
-      | "homeHeaderXl"
-      | "header"
-      | "headerMd"
-      | "headerLg"
-      | "headerXl"
-      | "footer"
-      | "footerLg",
-    _showText: boolean,
-  ) => React.ReactNode;
 }
diff --git a/app/components/navigation/TopNav/TopNav.view.tsx b/app/components/navigation/TopNav/TopNav.view.tsx
index 67a53f7..2c39212 100644
--- a/app/components/navigation/TopNav/TopNav.view.tsx
+++ b/app/components/navigation/TopNav/TopNav.view.tsx
@@ -7,17 +7,18 @@ import { getAssetPath } from "../../../../lib/assetUtils";
 import MenuBar from "../MenuBar";
 import type { TopNavViewProps } from "./TopNav.types";
 
+import Logo from "../../icons/Logo";
+
 function TopNavView({
   folderTop,
   loggedIn: _loggedIn,
   profile: _profile,
   logIn,
   schemaData,
-  logoConfig,
+  logoSize,
   renderNavigationItems,
   renderLoginButton,
   renderCreateRuleButton,
-  renderLogo,
 }: TopNavViewProps) {
   const t = useTranslation(folderTop ? "homeHeader" : "header");
 
@@ -43,13 +44,7 @@ function TopNavView({
             {/* Header Tab - Yellow tab container with decorative Union images */}
             <div className="HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-inverse-brand-primary)] rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] sm:rounded-t-[var(--radius-measures-radius-xlarge)] md:rounded-t-[var(--radius-measures-radius-xlarge)] lg:rounded-t-[var(--radius-measures-radius-xlarge)] xl:rounded-t-[var(--radius-measures-radius-xlarge)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-048)] h-[var(--spacing-scale-040)] sm:pl-[var(--spacing-scale-012)] sm:h-[52px] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:h-[52px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:h-[64px] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] flex-1 min-w-0 min-w-[197px] sm:min-w-0 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)] flex items-center self-end">
               {/* Logo - Consistent left positioning within HeaderTab */}
-              <div>
-                {logoConfig.map((config, index) => (
-                  <div key={index} className={config.breakpoint}>
-                    {renderLogo(config.size, config.showText)}
-                  </div>
-                ))}
-              </div>
+              <Logo size={logoSize} showText={true} />
 
               {/* XSmall menu bar - positioned next to logo */}
               <div className="block sm:hidden -me-[2px]">
@@ -163,17 +158,7 @@ function TopNavView({
           aria-label={t("ariaLabels.mainNavigation")}
         >
           {/* Logo - Consistent left positioning across all breakpoints */}
-          <div className="flex items-center">
-            {logoConfig.map((config, index) => (
-              <div
-                key={index}
-                className={config.breakpoint}
-                data-testid="logo-wrapper"
-              >
-                {renderLogo(config.size, config.showText)}
-              </div>
-            ))}
-          </div>
+          <Logo size={logoSize} showText={true} />
 
           {/* Navigation Links - Consistent center positioning */}
           <div className="flex items-center flex-1 justify-end sm:flex-none sm:justify-center">
-- 
2.43.0


From 8d9b9d6ff31e6482431e65b85cd4ab3f39ae90af Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 7 Feb 2026 23:35:22 -0700
Subject: [PATCH 4/4] Create tests and stories for createflownav

---
 stories/icons/Logo.stories.js               | 152 ++++----------------
 stories/utility/CreateFlowFooter.stories.js |  56 ++++++++
 stories/utility/CreateFlowTopNav.stories.js |  65 +++++++++
 tests/components/CreateFlowFooter.test.tsx  |  70 +++++++++
 tests/components/CreateFlowTopNav.test.tsx  | 119 +++++++++++++++
 tests/components/Logo.test.tsx              |  15 +-
 6 files changed, 348 insertions(+), 129 deletions(-)
 create mode 100644 stories/utility/CreateFlowFooter.stories.js
 create mode 100644 stories/utility/CreateFlowTopNav.stories.js
 create mode 100644 tests/components/CreateFlowFooter.test.tsx
 create mode 100644 tests/components/CreateFlowTopNav.test.tsx

diff --git a/stories/icons/Logo.stories.js b/stories/icons/Logo.stories.js
index 91762f6..e3c86cc 100644
--- a/stories/icons/Logo.stories.js
+++ b/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="headerMd" />
-          <Logo {...args} size="headerLg" />
-          <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" />
+          <Logo {...args} size="createFlow" />
+          <Logo {...args} size="topNavFolderTop" />
+          <Logo {...args} size="topNavHeader" />
         </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="headerMd" />
-          <Logo {...args} size="headerLg" />
-          <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" />
+          <Logo {...args} size="createFlow" />
+          <Logo {...args} size="topNavFolderTop" />
+          <Logo {...args} size="topNavHeader" />
         </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>
-            <Logo size="homeHeaderXsmall" />
+            <span className="text-white text-sm w-32">FolderTop:</span>
+            <Logo size="topNavFolderTop" showText={true} />
           </div>
           <div className="flex items-center space-x-4">
-            <span className="text-white text-sm w-24">Small:</span>
-            <Logo size="homeHeaderSm" />
-          </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" />
+            <span className="text-white text-sm w-32">Header:</span>
+            <Logo size="topNavHeader" showText={true} />
           </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>
-            <Logo size="header" />
-          </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" />
+            <span className="text-white text-sm w-32">CreateFlow:</span>
+            <Logo size="createFlow" showText={true} />
           </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.",
-      },
-    },
-  },
-};
-
-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.",
+          "Create flow context showing responsive logo. Used in CreateFlowTopNav component.",
       },
     },
   },
diff --git a/stories/utility/CreateFlowFooter.stories.js b/stories/utility/CreateFlowFooter.stories.js
new file mode 100644
index 0000000..4943f23
--- /dev/null
+++ b/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,
+  },
+};
diff --git a/stories/utility/CreateFlowTopNav.stories.js b/stories/utility/CreateFlowTopNav.stories.js
new file mode 100644
index 0000000..918876d
--- /dev/null
+++ b/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,
+  },
+};
diff --git a/tests/components/CreateFlowFooter.test.tsx b/tests/components/CreateFlowFooter.test.tsx
new file mode 100644
index 0000000..971c0c8
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/tests/components/CreateFlowTopNav.test.tsx b/tests/components/CreateFlowTopNav.test.tsx
new file mode 100644
index 0000000..6cd3b2e
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/tests/components/Logo.test.tsx b/tests/components/Logo.test.tsx
index 5ade664..ef846d0 100644
--- a/tests/components/Logo.test.tsx
+++ b/tests/components/Logo.test.tsx
@@ -46,19 +46,26 @@ describe("Logo (behavioral tests)", () => {
   });
 
   it("hides text when showText is false", () => {
-    render(<Logo showText={false} />);
-    expect(screen.queryByText("CommunityRule")).not.toBeInTheDocument();
+    const { container } = render(<Logo showText={false} />);
+    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();
   });
 });
-- 
2.43.0