Creates WizardStep and WizardFooter

Prompt:

The Footer and Step components have been scaffolded.

Create both components with the following spec:

Step:

A single Step in the multi-step flow. Must be rendered within a Wizard.
```ts
title: ReactNode;
description: ReactNode;
children: ReactNode;
```

Footer:
The footer element for the Wizard. A wrapper around LeafyGreen `FormFooter`, but allows us to optionally inject event handlers into the buttons.

```
backButtonProps: ButtonProps;
cancelButtonProps: ButtonProps;
primaryButtonProps: ButtonProps;
```

Author: TheSonOfThomp

packages/wizard/package.json

@@ -28,7 +28,9 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/button": "workspace:^",
     "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/form-footer": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@lg-tools/test-harnesses": "workspace:^"
   },

packages/wizard/src/Wizard/Wizard.tsx

@@ -1,5 +1,8 @@
 import React, { Children, cloneElement, isValidElement, useState } from 'react';
 
+import { WizardFooter } from '../WizardFooter';
+import { WizardStep } from '../WizardStep';
+
 import { stepContentStyles, wizardContainerStyles } from './Wizard.styles';
 import { WizardProps } from './Wizard.types';
 
@@ -74,3 +77,5 @@ export function Wizard({
 }
 
 Wizard.displayName = 'Wizard';
+Wizard.Step = WizardStep;
+Wizard.Footer = WizardFooter;

packages/wizard/src/Wizard/Wizard.types.ts

@@ -1,5 +1,8 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 
+import { WizardFooter } from '../WizardFooter';
+import { WizardStep } from '../WizardStep';
+
 export interface WizardProps extends ComponentPropsWithRef<'div'> {
   /**
    * The current active step index (0-based). If provided, the component operates in controlled mode.
@@ -16,3 +19,10 @@ export interface WizardProps extends ComponentPropsWithRef<'div'> {
    */
   children: ReactNode;
 }
+
+export interface WizardComponent {
+  (props: WizardProps): JSX.Element;
+  Step: typeof WizardStep;
+  Footer: typeof WizardFooter;
+  displayName: string;
+}

packages/wizard/src/Wizard/index.ts

@@ -1,2 +1,2 @@
 export { Wizard } from './Wizard';
-export { type WizardProps } from './Wizard.types';
+export { type WizardComponent, type WizardProps } from './Wizard.types';

packages/wizard/src/WizardFooter/WizardFooter.spec.tsx

@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { WizardFooter } from '.';
 
 describe('packages/wizard-footer', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});

packages/wizard/src/WizardFooter/WizardFooter.styles.ts

@@ -1,4 +1,3 @@
-
 import { css } from '@leafygreen-ui/emotion';
 
 export const baseStyles = css``;

packages/wizard/src/WizardFooter/WizardFooter.tsx

@@ -1,8 +1,70 @@
 import React from 'react';
+
+import FormFooter from '@leafygreen-ui/form-footer';
+
 import { WizardFooterProps } from './WizardFooter.types';
 
-export function WizardFooter({}: WizardFooterProps) {
-  return <div>your content here</div>;
+export function WizardFooter({
+  backButtonProps,
+  cancelButtonProps,
+  primaryButtonProps,
+  activeStep = 0,
+  totalSteps = 1,
+  onStepChange,
+  isControlled: _isControlled,
+}: WizardFooterProps) {
+  // Handle back button click
+  const handleBackClick = () => {
+    if (activeStep > 0) {
+      onStepChange?.(activeStep - 1);
+    }
+  };
+
+  // Handle primary button click (forward navigation)
+  const handlePrimaryClick = () => {
+    if (activeStep < totalSteps - 1) {
+      onStepChange?.(activeStep + 1);
+    }
+  };
+
+  // Merge navigation handlers with user-provided props
+  const mergedBackButtonProps = backButtonProps
+    ? {
+        ...backButtonProps,
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+          backButtonProps.onClick?.(event);
+          if (!event.defaultPrevented) {
+            handleBackClick();
+          }
+        },
+      }
+    : undefined;
+
+  const mergedPrimaryButtonProps = primaryButtonProps
+    ? {
+        ...primaryButtonProps,
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+          primaryButtonProps.onClick?.(event);
+          if (!event.defaultPrevented) {
+            handlePrimaryClick();
+          }
+        },
+      }
+    : undefined;
+
+  // Hide back button if we're on the first step
+  const finalBackButtonProps =
+    activeStep === 0 ? undefined : mergedBackButtonProps;
+
+  return (
+    <FormFooter
+      backButtonProps={finalBackButtonProps}
+      cancelButtonProps={cancelButtonProps}
+      primaryButtonProps={
+        mergedPrimaryButtonProps || { children: 'Next', variant: 'primary' }
+      }
+    />
+  );
 }
 
 WizardFooter.displayName = 'WizardFooter';

packages/wizard/src/WizardFooter/WizardFooter.types.ts

@@ -1 +1,28 @@
-export interface WizardFooterProps {}
+import { FormFooterProps } from '@leafygreen-ui/form-footer';
+
+export interface WizardFooterProps {
+  /**
+   * Props for the back button (left-most button)
+   */
+  backButtonProps?: FormFooterProps['backButtonProps'];
+
+  /**
+   * Props for the cancel button (center button)
+   */
+  cancelButtonProps?: FormFooterProps['cancelButtonProps'];
+
+  /**
+   * Props for the primary button (right-most button)
+   */
+  primaryButtonProps?: FormFooterProps['primaryButtonProps'];
+
+  // Internal props passed by the Wizard component
+  /** @internal */
+  activeStep?: number;
+  /** @internal */
+  totalSteps?: number;
+  /** @internal */
+  onStepChange?: (step: number) => void;
+  /** @internal */
+  isControlled?: boolean;
+}

packages/wizard/src/WizardFooter/index.ts

@@ -1,3 +1,2 @@
-
-export  { WizardFooter } from './WizardFooter';
+export { WizardFooter } from './WizardFooter';
 export { type WizardFooterProps } from './WizardFooter.types';

packages/wizard/src/WizardStep/WizardStep.spec.tsx

@@ -1,11 +1,8 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import { WizardStep } from '.';
 
 describe('packages/wizard-step', () => {
-  test('condition', () => {
-
-  })
-})
+  test('condition', () => {});
+});