adds LGIDs

Author: TheSonOfThomp

packages/wizard/src/Wizard/Wizard.tsx

@@ -7,14 +7,21 @@ import {
 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';
 
 import { WizardProps } from './Wizard.types';
 
 export const Wizard = CompoundComponent(
-  ({ activeStep: activeStepProp, onStepChange, children }: WizardProps) => {
+  ({
+    activeStep: activeStepProp,
+    onStepChange,
+    children,
+    'data-lgid': dataLgId,
+  }: WizardProps) => {
+    const lgIds = getLgIds(dataLgId);
     const stepChildren = findChildren(
       children,
       WizardSubComponentProperties.Step,
@@ -48,7 +55,11 @@ export const Wizard = CompoundComponent(
     );
 
     return (
-      <WizardProvider activeStep={activeStep} updateStep={updateStep}>
+      <WizardProvider
+        activeStep={activeStep}
+        updateStep={updateStep}
+        lgIds={lgIds}
+      >
         {stepChildren.map((child, i) => (i === activeStep ? child : null))}
       </WizardProvider>
     );

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

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 
-export interface WizardProps {
+import { LgIdProps } from '@leafygreen-ui/lib';
+
+export interface WizardProps extends LgIdProps {
   /**
    * The current active step index (0-based).
    * If provided, the component operates in controlled mode, and any interaction will not update internal state.

packages/wizard/src/WizardContext/WizardContext.tsx

@@ -1,5 +1,8 @@
 import React, { createContext, PropsWithChildren, useContext } from 'react';
 
+import { getLgIds } from '../utils/getLgIds';
+import { GetLgIdsReturnType } from '../utils/getLgIds';
+
 export interface WizardContextData {
   isWizardContext: boolean;
   activeStep: number;
@@ -11,12 +14,14 @@ export interface WizardContextData {
    * @returns
    */
   updateStep: (step: number) => void;
+  lgIds: GetLgIdsReturnType;
 }
 
 export const WizardContext = createContext<WizardContextData>({
   isWizardContext: false,
   activeStep: 0,
   updateStep: () => {},
+  lgIds: getLgIds('lg-wizard'),
 });
 
 interface WizardProviderProps
@@ -26,13 +31,15 @@ export const WizardProvider = ({
   children,
   activeStep,
   updateStep,
+  lgIds = getLgIds('lg-wizard'),
 }: WizardProviderProps) => {
   return (
     <WizardContext.Provider
       value={{
         isWizardContext: true,
         activeStep,
         updateStep,
+        lgIds,
       }}
     >
       {children}

packages/wizard/src/WizardFooter/WizardFooter.tsx

@@ -18,7 +18,8 @@ export const WizardFooter = CompoundSubComponent(
     className,
     ...rest
   }: WizardFooterProps) => {
-    const { isWizardContext, activeStep, updateStep } = useWizardContext();
+    const { isWizardContext, activeStep, updateStep, lgIds } =
+      useWizardContext();
     const { isAcknowledged, requiresAcknowledgement } = useWizardStepContext();
     const isPrimaryButtonDisabled =
       (requiresAcknowledgement && !isAcknowledged) ||
@@ -48,6 +49,7 @@ export const WizardFooter = CompoundSubComponent(
       <FormFooter
         {...rest}
         className={className}
+        data-lgid={lgIds.footer}
         backButtonProps={
           activeStep > 0
             ? {

packages/wizard/src/WizardStep/WizardStep.tsx

@@ -17,7 +17,7 @@ import { WizardStepProvider } from './WizardStepContext';
 export const WizardStep = CompoundSubComponent(
   ({ children, requiresAcknowledgement = false }: WizardStepProps) => {
     const stepId = useIdAllocator({ prefix: 'wizard-step' });
-    const { isWizardContext } = useWizardContext();
+    const { isWizardContext, lgIds } = useWizardContext();
 
     if (!isWizardContext) {
       consoleOnce.error(
@@ -36,13 +36,15 @@ export const WizardStep = CompoundSubComponent(
     ]);
 
     return (
-      <WizardStepProvider
-        stepId={stepId}
-        requiresAcknowledgement={requiresAcknowledgement}
-      >
-        {restChildren}
-        {footerChild}
-      </WizardStepProvider>
+      <div data-lgid={lgIds.step}>
+        <WizardStepProvider
+          stepId={stepId}
+          requiresAcknowledgement={requiresAcknowledgement}
+        >
+          {restChildren}
+          {footerChild}
+        </WizardStepProvider>
+      </div>
     );
   },
   {

packages/wizard/src/utils/getLgIds.ts

@@ -4,7 +4,11 @@ export const DEFAULT_LGID_ROOT = 'lg-wizard';
 
 export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
   const ids = {
-    root,
+    step: `${root}-step`,
+    footer: `${root}-footer`,
+    footerPrimaryButton: `${root}-footer-primary_button`,
+    footerBackButton: `${root}-footer-back_button`,
+    footerCancelButton: `${root}-footer-cancel_button`,
   } as const;
   return ids;
 };