From bd77d7516293a867aa33113afc9d0d18ff279f6f Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Mon, 1 Jul 2024 15:08:27 -0400
Subject: [PATCH] fix(Wizard): add className and spread props when possible

---
 .../src/components/Wizard/WizardBody.tsx      | 11 +++-
 .../src/components/Wizard/WizardFooter.tsx    | 20 ++++---
 .../src/components/Wizard/WizardHeader.tsx    | 10 +++-
 .../src/components/Wizard/WizardNav.tsx       | 13 +++--
 .../src/components/Wizard/WizardNavItem.tsx   | 14 ++++-
 .../Wizard/__tests__/WizardBody.test.tsx      | 33 ++++++++---
 .../Wizard/__tests__/WizardFooter.test.tsx    |  9 +++
 .../Wizard/__tests__/WizardHeader.test.tsx    | 51 +++++++++++++++++
 .../Wizard/__tests__/WizardNav.test.tsx       | 46 ++++++++++++++++
 .../Wizard/__tests__/WizardNavItem.test.tsx   | 55 +++++++++++++++++++
 10 files changed, 234 insertions(+), 28 deletions(-)
 create mode 100644 packages/react-core/src/components/Wizard/__tests__/WizardHeader.test.tsx
 create mode 100644 packages/react-core/src/components/Wizard/__tests__/WizardNav.test.tsx
 create mode 100644 packages/react-core/src/components/Wizard/__tests__/WizardNavItem.test.tsx

diff --git a/packages/react-core/src/components/Wizard/WizardBody.tsx b/packages/react-core/src/components/Wizard/WizardBody.tsx
index 56688070a7c..b0c3e9153ad 100644
--- a/packages/react-core/src/components/Wizard/WizardBody.tsx
+++ b/packages/react-core/src/components/Wizard/WizardBody.tsx
@@ -10,9 +10,11 @@ import { getResizeObserver } from '../../helpers/resizeObserver';
  * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
  */
 
-export interface WizardBodyProps {
+export interface WizardBodyProps extends React.HTMLProps<HTMLElement> {
   /** Anything that can be rendered in the Wizard body */
   children: React.ReactNode;
+  /** Additional classes spread to the wizard body */
+  className?: string;
   /** Flag to remove the default body padding */
   hasNoPadding?: boolean;
   /** Adds an accessible name to the wrapper element when the content overflows and renders
@@ -29,10 +31,12 @@ export interface WizardBodyProps {
 
 export const WizardBody = ({
   children,
+  className,
   hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  component = 'div'
+  component = 'div',
+  ...props
 }: WizardBodyProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
@@ -74,7 +78,8 @@ export const WizardBody = ({
       {...(shouldFocusContent && { tabIndex: -1 })}
       {...(component === 'div' && hasScrollbar && { role: 'region' })}
       {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
-      className={css(styles.wizardMain)}
+      className={css(styles.wizardMain, className)}
+      {...props}
     >
       <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
     </WrapperComponent>
diff --git a/packages/react-core/src/components/Wizard/WizardFooter.tsx b/packages/react-core/src/components/Wizard/WizardFooter.tsx
index bd4596dc477..05ce38d53fb 100644
--- a/packages/react-core/src/components/Wizard/WizardFooter.tsx
+++ b/packages/react-core/src/components/Wizard/WizardFooter.tsx
@@ -5,12 +5,11 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../Button';
 import { isCustomWizardFooter, WizardFooterButtonProps, WizardStepType } from './types';
-
 /**
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
  */
 
-export interface WizardFooterProps {
+export interface WizardFooterProps extends React.HTMLProps<HTMLElement> {
   /** The active step */
   activeStep: WizardStepType;
   /** Next button callback */
@@ -39,18 +38,23 @@ export interface WizardFooterProps {
   backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
   /** Additional props for the Cancel button. */
   cancelButtonProps?: WizardFooterButtonProps;
+  /** Additional classes spread to the wizard footer */
+  className?: string;
 }
 
 /**
  * Applies default wizard footer styling any number of child elements.
  */
 
-interface WizardFooterWrapperProps {
+interface WizardFooterWrapperProps extends React.HTMLProps<HTMLElement> {
   children: React.ReactNode;
+  className?: string;
 }
 
-export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
-  <footer className={css(styles.wizardFooter)}>{children}</footer>
+export const WizardFooterWrapper = ({ children, className, ...props }: WizardFooterWrapperProps) => (
+  <footer className={css(styles.wizardFooter, className)} {...props}>
+    {children}
+  </footer>
 );
 
 export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
@@ -71,9 +75,11 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel',
   nextButtonProps,
   backButtonProps,
-  cancelButtonProps
+  cancelButtonProps,
+  className,
+  ...props
 }: Omit<WizardFooterProps, 'activeStep'>) => (
-  <WizardFooterWrapper>
+  <WizardFooterWrapper className={className} {...props}>
     {!isBackHidden && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
         {backButtonText}
diff --git a/packages/react-core/src/components/Wizard/WizardHeader.tsx b/packages/react-core/src/components/Wizard/WizardHeader.tsx
index 33c6851f0b5..5aaa37e4175 100644
--- a/packages/react-core/src/components/Wizard/WizardHeader.tsx
+++ b/packages/react-core/src/components/Wizard/WizardHeader.tsx
@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export interface WizardHeaderProps {
+export interface WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function called when the X (Close) button is clicked */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Title of the wizard */
@@ -21,6 +21,8 @@ export interface WizardHeaderProps {
   titleId?: string;
   /** id for the description */
   descriptionId?: string;
+  /** Additional classes spread to the wizard header */
+  className?: string;
 }
 
 export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
@@ -31,9 +33,11 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'div',
-  descriptionId
+  descriptionId,
+  className,
+  ...props
 }: WizardHeaderProps) => (
-  <div className={css(styles.wizardHeader)}>
+  <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
         <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
diff --git a/packages/react-core/src/components/Wizard/WizardNav.tsx b/packages/react-core/src/components/Wizard/WizardNav.tsx
index 4a72fe2e880..e22b0aaeda9 100644
--- a/packages/react-core/src/components/Wizard/WizardNav.tsx
+++ b/packages/react-core/src/components/Wizard/WizardNav.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 
-export interface WizardNavProps {
+export interface WizardNavProps extends Omit<React.HTMLProps<HTMLOListElement>, 'type' | 'ref'> {
   /** children should be WizardNavItem components */
   children?: any;
   /** Aria-label applied to the navigation element */
@@ -13,6 +13,8 @@ export interface WizardNavProps {
   isExpanded?: boolean;
   /** True to return the inner list without the wrapping navigation element */
   isInnerList?: boolean;
+  /** Additional classes spread to the wizard nav */
+  className?: string;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
@@ -20,11 +22,13 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isExpanded = false,
-  isInnerList = false
+  isInnerList = false,
+  className,
+  ...props
 }: WizardNavProps) => {
   if (isInnerList) {
     return (
-      <ol className={css(styles.wizardNavList)} role="list">
+      <ol className={css(styles.wizardNavList, className)} role="list" {...props}>
         {children}
       </ol>
     );
@@ -32,9 +36,10 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 
   return (
     <nav
-      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded, className)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      {...props}
     >
       <ol className={css(styles.wizardNavList)} role="list">
         {children}
diff --git a/packages/react-core/src/components/Wizard/WizardNavItem.tsx b/packages/react-core/src/components/Wizard/WizardNavItem.tsx
index 483191d2531..f77d3fa75cf 100644
--- a/packages/react-core/src/components/Wizard/WizardNavItem.tsx
+++ b/packages/react-core/src/components/Wizard/WizardNavItem.tsx
@@ -10,7 +10,11 @@ import { WizardNavItemStatus } from './types';
 import globalSpacerSm from '@patternfly/react-tokens/dist/esm/global_spacer_sm';
 import globalDangerColor100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
 
-export interface WizardNavItemProps extends OUIAProps {
+export interface WizardNavItemProps
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
+    OUIAProps {
+  /** Additional classes spread to the wizard nav item */
+  className?: string;
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -55,7 +59,9 @@ export const WizardNavItem = ({
   status = 'default',
   target,
   ouiaId,
-  ouiaSafe = true
+  ouiaSafe = true,
+  className,
+  ...props
 }: WizardNavItemProps) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
@@ -74,8 +80,10 @@ export const WizardNavItem = ({
       className={css(
         styles.wizardNavItem,
         isExpandable && styles.modifiers.expandable,
-        isExpandable && isExpanded && styles.modifiers.expanded
+        isExpandable && isExpanded && styles.modifiers.expanded,
+        className
       )}
+      {...props}
     >
       <NavItemComponent
         {...(NavItemComponent === 'a'
diff --git a/packages/react-core/src/components/Wizard/__tests__/WizardBody.test.tsx b/packages/react-core/src/components/Wizard/__tests__/WizardBody.test.tsx
index aa56f954c43..8f8fdf0acee 100644
--- a/packages/react-core/src/components/Wizard/__tests__/WizardBody.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/WizardBody.test.tsx
@@ -3,11 +3,20 @@ import { render, screen } from '@testing-library/react';
 import { WizardBody } from '../WizardBody';
 
 test('renders children without additional props', () => {
-  const { container } = render(<WizardBody>content</WizardBody>);
+  render(<WizardBody data-testid="test-id">content</WizardBody>);
 
-  expect(container).toHaveTextContent('content');
-  expect(container).not.toHaveAttribute('aria-label');
-  expect(container).not.toHaveAttribute('aria-labelledby');
+  expect(screen.getByTestId('test-id')).toHaveTextContent('content');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-label');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardBody className="custom-class" data-testid="test-id">
+      Test
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
 });
 
 test('has no padding className when hasNoPadding is not specified', () => {
@@ -21,11 +30,19 @@ test('has padding className when hasNoPadding is specified', () => {
 });
 
 test('wrapper element is of type div when component is not specified', () => {
-  const { container } = render(<WizardBody aria-label="Wizard body">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('DIV');
+  render(
+    <WizardBody data-testid="test-id" aria-label="Wizard body">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('DIV');
 });
 
 test('renders with custom component', () => {
-  const { container } = render(<WizardBody component="main">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('MAIN');
+  render(
+    <WizardBody component="main" data-testid="test-id">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('MAIN');
 });
diff --git a/packages/react-core/src/components/Wizard/__tests__/WizardFooter.test.tsx b/packages/react-core/src/components/Wizard/__tests__/WizardFooter.test.tsx
index 6b923e4d1e7..fe72b340ada 100644
--- a/packages/react-core/src/components/Wizard/__tests__/WizardFooter.test.tsx
+++ b/packages/react-core/src/components/Wizard/__tests__/WizardFooter.test.tsx
@@ -20,6 +20,15 @@ test('has button names of "Next", "Back", and "Cancel" by default', () => {
   expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
 });
 
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardFooter {...defaultProps} className="custom-class" data-testid="test-id">
+      Test
+    </WizardFooter>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
 test('calls onNext when the next button is clicked', async () => {
   const onNext = jest.fn();
   const user = userEvent.setup();
diff --git a/packages/react-core/src/components/Wizard/__tests__/WizardHeader.test.tsx b/packages/react-core/src/components/Wizard/__tests__/WizardHeader.test.tsx
new file mode 100644
index 00000000000..e52866c7dff
--- /dev/null
+++ b/packages/react-core/src/components/Wizard/__tests__/WizardHeader.test.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardHeader } from '../WizardHeader';
+import userEvent from '@testing-library/user-event';
+
+// close button related tests
+test(`Renders close button by default`, () => {
+  render(<WizardHeader data-testid="header-component" />);
+  expect(screen.getByRole('button')).toBeInTheDocument();
+});
+
+test(`Close button is hidden when isCloseHidden is passed`, () => {
+  render(<WizardHeader isCloseHidden />);
+  expect(screen.queryByRole('button')).toBeNull();
+});
+
+test(`Close button renders passed aria label`, () => {
+  render(<WizardHeader closeButtonAriaLabel="test aria label" />);
+  expect(screen.getByRole('button', { name: 'test aria label' })).toBeInTheDocument();
+});
+
+test(`Callback function fires when onClose passed`, async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+  render(<WizardHeader onClose={onClose} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClose).toHaveBeenCalled();
+});
+
+// description related tests
+test(`Renders a description when passed description`, () => {
+  render(<WizardHeader description="test description" />);
+  expect(screen.getByText('test description')).toBeVisible();
+});
+
+test(`Renders the id passed via descriptionId`, () => {
+  render(<WizardHeader description="test description" descriptionId="test-id" />);
+  expect(screen.queryByText('test description')).toHaveAttribute('id', 'test-id');
+});
+
+// other prop tests
+test(`Renders title when prop is passed`, () => {
+  render(<WizardHeader title="Test" />);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<WizardHeader className="custom-class" data-testid="header-component" />);
+  expect(screen.getByTestId('header-component')).toHaveClass('custom-class');
+});
diff --git a/packages/react-core/src/components/Wizard/__tests__/WizardNav.test.tsx b/packages/react-core/src/components/Wizard/__tests__/WizardNav.test.tsx
new file mode 100644
index 00000000000..47fad694f81
--- /dev/null
+++ b/packages/react-core/src/components/Wizard/__tests__/WizardNav.test.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardNav } from '../WizardNav';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardNav className="custom-class" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
+test(`Renders with accessible aria-label when passed`, () => {
+  render(
+    <WizardNav aria-label="test aria label" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAccessibleName('test aria label');
+});
+
+test(`Renders with accessible aria-labelledby when passed`, () => {
+  render(
+    <WizardNav aria-labelledby="test-labelledby" data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with expanded styles when prop passed`, () => {
+  render(
+    <WizardNav isExpanded data-testid="test-id">
+      Test
+    </WizardNav>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders with expanded styles when prop passed`, () => {
+  render(<WizardNav isInnerList>Test</WizardNav>);
+  expect(screen.getByRole('list')).toBeInTheDocument();
+});
diff --git a/packages/react-core/src/components/Wizard/__tests__/WizardNavItem.test.tsx b/packages/react-core/src/components/Wizard/__tests__/WizardNavItem.test.tsx
new file mode 100644
index 00000000000..411476ab372
--- /dev/null
+++ b/packages/react-core/src/components/Wizard/__tests__/WizardNavItem.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { WizardNavItem } from '../WizardNavItem';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import userEvent from '@testing-library/user-event';
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<WizardNavItem className="custom-class" />);
+  expect(screen.getByRole('listitem')).toHaveClass('custom-class');
+});
+
+test(`Renders content passed to content prop`, () => {
+  render(<WizardNavItem content="test content" />);
+  expect(screen.getByText('test content')).toBeVisible();
+});
+
+test(`Renders ${styles.modifiers.disabled} class when isDisabled is true`, () => {
+  render(<WizardNavItem isDisabled />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.disabled);
+});
+
+test(`Renders ${styles.modifiers.current} class when isCurrent is true`, () => {
+  render(<WizardNavItem isCurrent />);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.current);
+});
+
+test(`Callback function fires when onClick passed`, async () => {
+  const onClick = jest.fn();
+  const user = userEvent.setup();
+  render(<WizardNavItem onClick={onClick} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClick).toHaveBeenCalled();
+});
+
+test(`Renders a link element with an href when the props are passed`, () => {
+  render(<WizardNavItem component="a" href="test-href" />);
+  expect(screen.getByRole('link')).toHaveAttribute('href', 'test-href');
+});
+
+test(`Renders a link element with a target when the props are passed`, () => {
+  render(<WizardNavItem component="a" href="test-href" target="test-target" />);
+  expect(screen.getByRole('link')).toHaveAttribute('target', 'test-target');
+});
+
+test(`Renders an expandable li when isExapandable is passed`, () => {
+  render(<WizardNavItem isExpandable />);
+  expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+  expect(screen.getByRole('listitem')).toHaveClass(styles.modifiers.expandable);
+});
+
+test(`Renders id to nav item button when passed`, () => {
+  render(<WizardNavItem id="test-id" />);
+  expect(screen.getByRole('button')).toHaveAttribute('id', 'test-id');
+});