feat: change StepDivider color to green when previous step is completed (#26394)

ref DEVEX-482

site/src/pages/TemplateBuilder/SelectionSummary.tsx

@@ -1,8 +1,13 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
+import { createContext, type PropsWithChildren, useContext } from "react";
 import { Button } from "#/components/Button/Button";
 import { cn } from "#/utils/cn";
 
+type Variant = "complete" | "current" | "upcoming" | null | undefined;
+
+const VariantContext = createContext<Variant>(null);
+
 type SelectedTemplate = {
 	name: string;
 	iconUrl?: string;
@@ -36,28 +41,28 @@ export const SelectionSummary: React.FC<SelectionSummaryProps> = ({
 		<div>
 			<h2 className="font-semibold">Selection</h2>
 			<div>
-				<StepIndicator step={1} variant={variant(1)}>
-					Base Template
-				</StepIndicator>
-				{selectedTemplate ? (
-					<BaseTemplateSelection template={selectedTemplate} />
-				) : (
-					<StepDivider />
-				)}
-				<StepIndicator step={2} variant={variant(2)}>
-					Modules
-				</StepIndicator>
-				{selectedModules ? (
-					<ModuleSelection
-						modules={selectedModules}
-						onDeselectModule={onDeselectModule}
-					/>
-				) : (
-					<StepDivider />
-				)}
-				<StepIndicator step={3} variant={variant(3)}>
-					Customizations
-				</StepIndicator>
+				<VariantContext.Provider value={variant(1)}>
+					<StepIndicator step={1}>Base Template</StepIndicator>
+					{selectedTemplate ? (
+						<BaseTemplateSelection template={selectedTemplate} />
+					) : (
+						<StepDivider />
+					)}
+				</VariantContext.Provider>
+				<VariantContext.Provider value={variant(2)}>
+					<StepIndicator step={2}>Modules</StepIndicator>
+					{selectedModules ? (
+						<ModuleSelection
+							modules={selectedModules}
+							onDeselectModule={onDeselectModule}
+						/>
+					) : (
+						<StepDivider />
+					)}
+				</VariantContext.Provider>
+				<VariantContext.Provider value={variant(3)}>
+					<StepIndicator step={3}>Customizations</StepIndicator>
+				</VariantContext.Provider>
 			</div>
 		</div>
 	);
@@ -68,8 +73,8 @@ const stepCircleVariants = cva(
 	{
 		variants: {
 			variant: {
-				complete: "border-border-success",
-				current: "border-content-primary",
+				complete: "border-border-success bg-surface-green",
+				current: "border-border-success",
 				upcoming: "border-border text-content-secondary",
 			},
 		},
@@ -86,16 +91,13 @@ const stepLabelVariants = cva("font-normal mr-2", {
 	},
 });
 
-type StepIndicatorProps = VariantProps<typeof stepCircleVariants> & {
+type StepIndicatorProps = PropsWithChildren<{
 	step: number;
-	children: React.ReactNode;
-};
+}>;
+
+const StepIndicator: React.FC<StepIndicatorProps> = ({ step, children }) => {
+	const variant = useContext(VariantContext);
 
-const StepIndicator: React.FC<StepIndicatorProps> = ({
-	step,
-	variant,
-	children,
-}) => {
 	return (
 		<div className="flex items-center gap-2">
 			<div className={stepCircleVariants({ variant })}>{step}</div>
@@ -104,14 +106,30 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({
 	);
 };
 
-const StepDivider: React.FC<{
-	children?: React.ReactNode;
+const stepDividerVariants = cva(
+	"border-0 border-l border-solid mx-4 -translate-x-px",
+	{
+		variants: {
+			variant: {
+				complete: "border-border-success",
+				current: "border-border",
+				upcoming: "border-border",
+			},
+		},
+	},
+);
+
+type StepDividerProps = PropsWithChildren<{
 	className?: string;
-}> = ({ children, className }) => {
+}>;
+
+const StepDivider: React.FC<StepDividerProps> = ({ className, children }) => {
+	const variant = useContext(VariantContext);
+
 	return (
 		<div
 			className={cn(
-				"border-0 border-l border-border border-solid mx-4 -translate-x-px",
+				stepDividerVariants({ variant }),
 				children ? "px-3 py-2" : "h-4",
 				className,
 			)}