Component cleanup

2026-04-29 07:20:16 -06:00
parent 252848eba9
commit e6127f1a3f
267 changed files with 2087 additions and 2196 deletions
@@ -0,0 +1,35 @@
+"use client";
+
+import { memo } from "react";
+import { CreateFlowFooterView } from "./CreateFlowFooter.view";
+import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
+
+/**
+ * Figma: "Utility / CreateFlowFooter". Sticky footer for the
+ * create flow with a back action, optional secondary button, and progress bar.
+ */
+const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
+  ({
+    secondButton,
+    progressBar = true,
+    proportionBarProgress,
+    proportionBarVariant,
+    onBackClick,
+    className = "",
+  }) => {
+    return (
+      <CreateFlowFooterView
+        secondButton={secondButton}
+        progressBar={progressBar}
+        proportionBarProgress={proportionBarProgress}
+        proportionBarVariant={proportionBarVariant}
+        onBackClick={onBackClick}
+        className={className}
+      />
+    );
+  },
+);
+
+CreateFlowFooterContainer.displayName = "CreateFlowFooter";
+
+export default CreateFlowFooterContainer;
@@ -0,0 +1,39 @@
+import type {
+  ProportionBarState,
+  ProportionBarVariant,
+} from "../../progress/ProportionBar/ProportionBar.types";
+
+/**
+ * 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;
+  /**
+   * `ProportionBar` state when the bar is shown (driven by create-flow step).
+   * @default "1-0"
+   */
+  proportionBarProgress?: ProportionBarState;
+  /**
+   * `ProportionBar` layout variant (Figma create-flow footer uses `segmented`).
+   * @default "default"
+   */
+  proportionBarVariant?: ProportionBarVariant;
+  /**
+   * Callback function for Back button click
+   */
+  onBackClick?: () => void;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
@@ -0,0 +1,49 @@
+import ProportionBar from "../../progress/ProportionBar";
+import Button from "../../buttons/Button";
+import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
+
+export function CreateFlowFooterView({
+  secondButton,
+  progressBar = true,
+  proportionBarProgress = "1-0",
+  proportionBarVariant: proportionBarVariantProp,
+  onBackClick,
+  className = "",
+}: CreateFlowFooterProps) {
+  const proportionBarVariant = proportionBarVariantProp ?? "default";
+  return (
+    <footer
+      className={`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={proportionBarProgress}
+            variant={proportionBarVariant}
+          />
+        </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)]"
+          onClick={onBackClick}
+          disabled={!onBackClick}
+        >
+          Back
+        </Button>
+
+        {/* Second Button - Right */}
+        {secondButton && <div className="flex-shrink-0">{secondButton}</div>}
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,2 @@
+export { default } from "./CreateFlowFooter.container";
+export type { CreateFlowFooterProps } from "./CreateFlowFooter.types";