spread rest

Author: TheSonOfThomp

packages/wizard/src/Wizard/Wizard.spec.tsx

@@ -39,12 +39,11 @@ describe('packages/wizard', () => {
     });
 
     test('does not render any other elements', () => {
-      const { container, getByText, getByTestId, getByRole, queryByTestId } =
-        render(
-          <Wizard>
-            <div data-testid="invalid-element-1">This should not render</div>
-          </Wizard>,
-        );
+      const { queryByTestId } = render(
+        <Wizard>
+          <div data-testid="invalid-element-1">This should not render</div>
+        </Wizard>,
+      );
 
       // Non-wizard elements should not be rendered
       expect(queryByTestId('invalid-element-1')).not.toBeInTheDocument();

packages/wizard/src/Wizard/Wizard.tsx

@@ -16,6 +16,7 @@ export function Wizard({
   activeStep: activeStepProp,
   onStepChange,
   children,
+  ...rest
 }: WizardProps) {
   // Controlled/Uncontrolled activeStep value
   const {
@@ -57,7 +58,7 @@ export function Wizard({
         updateStep,
       }}
     >
-      <div className={wizardContainerStyles}>
+      <div className={wizardContainerStyles} {...rest}>
         <div className={stepContentStyles}>{currentStep}</div>
         {footerChild}
       </div>

packages/wizard/src/WizardFooter/WizardFooter.tsx

@@ -12,6 +12,7 @@ export const WizardFooter = ({
   backButtonProps,
   cancelButtonProps,
   primaryButtonProps,
+  ...rest
 }: WizardFooterProps) => {
   const { activeStep, updateStep } = useWizardContext();
 
@@ -27,6 +28,7 @@ export const WizardFooter = ({
 
   return (
     <FormFooter
+      {...rest}
       backButtonProps={
         activeStep > 0
           ? {

packages/wizard/src/WizardStep/WizardStep.types.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 
-export interface WizardStepProps {
+export interface WizardStepProps
+  extends Omit<React.ComponentProps<'div'>, 'title'> {
   /**
    * The title of the step
    */