[LG-5567] Wizard Test harnesses

packages/wizard/src/Wizard/Wizard.tsx

@@ -9,6 +9,7 @@ import { Direction } from '@leafygreen-ui/descendants';
 import { useControlled } from '@leafygreen-ui/hooks';
 
 import { WizardSubComponentProperties } from '../constants';
+import { getLgIds } from '../utils/getLgIds';
 import { WizardProvider } from '../WizardContext/WizardContext';
 import { WizardFooter } from '../WizardFooter';
 import { WizardStep } from '../WizardStep';
@@ -21,8 +22,10 @@ export const Wizard = CompoundComponent(
     activeStep: activeStepProp,
     onStepChange,
     children,
+    'data-lgid': dataLgid,
     ...rest
   }: WizardProps) => {
+    const LGIDs = getLgIds(dataLgid);
     const stepChildren = findChildren(
       children,
       WizardSubComponentProperties.Step,
@@ -69,8 +72,17 @@ export const Wizard = CompoundComponent(
     const currentStep = stepChildren[activeStep] || null;
 
     return (
-      <WizardProvider activeStep={activeStep} updateStep={updateStep}>
-        <div className={wizardContainerStyles} {...rest}>
+      <WizardProvider
+        activeStep={activeStep}
+        updateStep={updateStep}
+        lgId={dataLgid}
+      >
+        <div
+          className={wizardContainerStyles}
+          data-lgid={LGIDs.root}
+          data-testid={LGIDs.root}
+          {...rest}
+        >
           <div className={stepContentStyles}>{currentStep}</div>
           {footerChild}
         </div>

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

@@ -1,9 +1,11 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 
+import { LgIdProps } from '@leafygreen-ui/lib';
+
 import { WizardFooter } from '../WizardFooter';
 import { WizardStep } from '../WizardStep';
 
-export interface WizardProps extends ComponentPropsWithRef<'div'> {
+export interface WizardProps extends LgIdProps, ComponentPropsWithRef<'div'> {
   /**
    * The current active step index (0-based). If provided, the component operates in controlled mode.
    */

packages/wizard/src/WizardContext/WizardContext.tsx

@@ -1,11 +1,13 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
 
 import { Direction } from '@leafygreen-ui/descendants';
+import { LgIdString } from '@leafygreen-ui/lib';
 
 export interface WizardContextData {
   isWizardContext: boolean;
   activeStep: number;
   updateStep: (direction: Direction) => void;
+  lgId?: LgIdString;
 }
 
 export const WizardContext = createContext<WizardContextData>({
@@ -18,13 +20,15 @@ export const WizardProvider = ({
   children,
   activeStep,
   updateStep,
+  lgId,
 }: PropsWithChildren<Omit<WizardContextData, 'isWizardContext'>>) => {
   return (
     <WizardContext.Provider
       value={{
         isWizardContext: true,
         activeStep,
         updateStep,
+        lgId,
       }}
     >
       {children}

packages/wizard/src/WizardFooter/WizardFooter.tsx

@@ -6,6 +6,7 @@ import { FormFooter } from '@leafygreen-ui/form-footer';
 import { consoleOnce } from '@leafygreen-ui/lib';
 
 import { WizardSubComponentProperties } from '../constants';
+import { getLgIds } from '../utils/getLgIds';
 import { useWizardContext } from '../WizardContext';
 
 import { WizardFooterProps } from './WizardFooter.types';
@@ -18,7 +19,9 @@ export const WizardFooter = CompoundSubComponent(
     className,
     ...rest
   }: WizardFooterProps) => {
-    const { isWizardContext, activeStep, updateStep } = useWizardContext();
+    const { isWizardContext, activeStep, updateStep, lgId } =
+      useWizardContext();
+    const LGIDs = getLgIds(lgId);
 
     const handleBackButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
       updateStep(Direction.Prev);
@@ -41,8 +44,10 @@ export const WizardFooter = CompoundSubComponent(
 
     return (
       <FormFooter
-        {...rest}
+        data-lgid={LGIDs.footer}
+        data-testid={LGIDs.footer}
         className={className}
+        {...rest}
         backButtonProps={
           activeStep > 0
             ? {

packages/wizard/src/WizardStep/WizardStep.tsx

@@ -6,6 +6,7 @@ import { consoleOnce } from '@leafygreen-ui/lib';
 import { Description, H3 } from '@leafygreen-ui/typography';
 
 import { WizardSubComponentProperties } from '../constants';
+import { getLgIds } from '../utils/getLgIds';
 import { useWizardContext } from '../WizardContext';
 
 import { TextNode } from './TextNode';
@@ -14,7 +15,8 @@ import { WizardStepProps } from './WizardStep.types';
 
 export const WizardStep = CompoundSubComponent(
   ({ title, description, children, className, ...rest }: WizardStepProps) => {
-    const { isWizardContext } = useWizardContext();
+    const { isWizardContext, lgId } = useWizardContext();
+    const LGIDs = getLgIds(lgId);
 
     if (!isWizardContext) {
       consoleOnce.error(
@@ -24,7 +26,12 @@ export const WizardStep = CompoundSubComponent(
     }
 
     return (
-      <div className={cx(stepStyles, className)} {...rest}>
+      <div
+        className={cx(stepStyles, className)}
+        data-lgid={LGIDs.step}
+        data-testid={LGIDs.step}
+        {...rest}
+      >
         <TextNode as={H3}>{title}</TextNode>
         {description && <TextNode as={Description}>{description}</TextNode>}
         <div>{children}</div>