@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/src/components/Hero/__tests__/Hero.test.tsx

@@ -0,0 +1,175 @@
+import { render, screen } from '@testing-library/react';
+import { Hero } from '../Hero';
+import styles from '@patternfly/react-styles/css/components/Hero/hero';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-hero">
+      <Hero />
+    </div>
+  );
+  expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<Hero>Test content</Hero>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test(`Renders with ${styles.hero} class on wrapper by defaulty`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true });
+});
+
+test('Renders with custom class name on wrapper when className prop is provided', () => {
+  render(<Hero className="custom-class">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test(`Renders with class ${styles.heroBody} on content element`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test')).toHaveClass(`${styles.heroBody}`, { exact: true });
+});
+
+test('Renders with additional props spread to the wrapper component', () => {
+  render(<Hero id="custom-id">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveAttribute('id', 'custom-id');
+});
+
+test('Renders with light background image style when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<Hero backgroundSrcLight={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--light: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with dark background image style when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<Hero backgroundSrcDark={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--dark: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with both light and dark background image styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(
+    <Hero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with light gradient styles when gradientLight is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientLight={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--light: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-3--light: ${gradient.stop3}`);
+});
+
+test('Renders with dark gradient styles when gradientDark is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientDark={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--dark: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-3--dark: ${gradient.stop3}`);
+});
+
+test('Renders with both light and dark gradient styles when both are provided', () => {
+  const lightGradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  const darkGradient = {
+    stop1: '#000000',
+    stop2: '#ffffff',
+    stop3: '#808080'
+  };
+  render(
+    <Hero gradientLight={lightGradient} gradientDark={darkGradient}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with both background images and gradient styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  const lightGradient = { stop1: '#ff0000' };
+  const darkGradient = { stop1: '#000000' };
+
+  render(
+    <Hero
+      backgroundSrcLight={lightSrc}
+      backgroundSrcDark={darkSrc}
+      gradientLight={lightGradient}
+      gradientDark={darkGradient}
+    >
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with inline width style when bodyWidth is passed', () => {
+  const bodyWidth = '100px';
+
+  render(<Hero bodyWidth={bodyWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--Width: ${bodyWidth}`);
+});
+
+test('Renders with inline max-width style when bodyMaxWidth is passed', () => {
+  const bodyMaxWidth = '100px';
+
+  render(<Hero bodyMaxWidth={bodyMaxWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--MaxWidth: ${bodyMaxWidth}`);
+});
+
+test('Matches the snapshot without backgroundSrc and gradient props', () => {
+  const { asFragment } = render(<Hero>Hero content</Hero>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with backgroundSrc and gradient props', () => {
+  const { asFragment } = render(
+    <Hero
+      backgroundSrcLight="light.jpg"
+      backgroundSrcDark="dark.jpg"
+      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
+      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
+    >
+      Hero content
+    </Hero>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Hero/__tests__/__snapshots__/Hero.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+    style="--pf-v6-c-hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-hero--gradient--stop-1--light: #ff0000; --pf-v6-c-hero--gradient--stop-2--light: #00ff00; --pf-v6-c-hero--gradient--stop-3--light: #0000ff; --pf-v6-c-hero--gradient--stop-1--dark: #000000; --pf-v6-c-hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-hero--gradient--stop-3--dark: #808080;"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot without backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hero/examples/Hero.md

@@ -0,0 +1,19 @@
+---
+id: Hero
+section: components
+cssPrefix: pf-v6-c-hero
+beta: true
+propComponents: ['Hero']
+---
+
+## Examples
+
+### Basic
+
+If you need finer control over the placement of text content within the `<Hero>`, such as when you omit a background image, adjust the `bodyWidth` and `bodyMaxWidth` properties. Be mindful of using these properties when a background image is still present and ensure there is sufficient contrast between text and any part of the image that it overlaps.
+
+When using `gradientLight` or `gradientDark` to apply gradient backgrounds, check the color contrast to ensure proper accessibility.
+
+```ts file="HeroBasic.tsx"
+
+```

package/src/components/Hero/examples/HeroBasic.tsx

@@ -0,0 +1,3 @@
+import { Hero } from '@patternfly/react-core';
+
+export const HeroBasic: React.FunctionComponent = () => <Hero>Basic hero content</Hero>;

package/src/components/Hero/index.ts

@@ -0,0 +1 @@
+export * from './Hero';

package/src/components/Label/Label.tsx

@@ -338,7 +338,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     );
   }
 
-  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
+  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
   return (
     <LabelComponent

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -69,7 +69,7 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -175,7 +175,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -219,7 +219,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -336,7 +336,7 @@ exports[`LoginForm should render Login form 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           
@@ -380,7 +380,7 @@ exports[`LoginForm should render Login form 1`] = `
             aria-hidden="true"
             class="pf-v6-c-form__label-required"
           >
-             *
+             *
           </span>
         </label>
           

package/src/components/Masthead/Masthead.tsx

@@ -27,6 +27,8 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
     xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
     '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
   };
+  /** @beta Indicates the variant of the masthead */
+  variant?: 'default' | 'docked';
 }
 
 export const Masthead: React.FunctionComponent<MastheadProps> = ({
@@ -36,6 +38,7 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
     md: 'inline'
   },
   inset,
+  variant = 'default',
   ...props
 }: MastheadProps) => {
   const { width, getBreakpoint } = useContext(PageContext);
@@ -43,6 +46,7 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
     <header
       className={css(
         styles.masthead,
+        variant === 'docked' && styles.modifiers.docked,
         formatBreakpointMods(display, styles, 'display-', getBreakpoint(width)),
         formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
         className

package/src/components/Masthead/__tests__/Masthead.test.tsx

@@ -1,5 +1,6 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Masthead, MastheadMain, MastheadLogo, MastheadContent, MastheadBrand, MastheadToggle } from '../index';
+import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 describe('Masthead', () => {
   test('verify basic', () => {
@@ -71,6 +72,29 @@ describe('Masthead', () => {
       expect(asFragment()).toMatchSnapshot();
     });
   });
+
+  test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
+    render(
+      <Masthead variant="docked" data-testid="masthead">
+        test
+      </Masthead>
+    );
+    expect(screen.getByTestId('masthead')).toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Does not render with ${styles.modifiers.docked} class when variant is default`, () => {
+    render(
+      <Masthead variant="default" data-testid="masthead">
+        test
+      </Masthead>
+    );
+    expect(screen.getByTestId('masthead')).not.toHaveClass(styles.modifiers.docked);
+  });
+
+  test(`Does not render with ${styles.modifiers.docked} class when variant is not passed`, () => {
+    render(<Masthead data-testid="masthead">test</Masthead>);
+    expect(screen.getByTestId('masthead')).not.toHaveClass(styles.modifiers.docked);
+  });
 });
 
 describe('MastheadLogo', () => {

package/src/components/Nav/Nav.tsx

@@ -35,8 +35,8 @@ export interface NavProps
   ) => void;
   /** Accessible label for the nav when there are multiple navs on the page */
   'aria-label'?: string;
-  /** For horizontal navs */
-  variant?: 'default' | 'horizontal' | 'horizontal-subnav';
+  /** The nav variant to use. Docked is in beta. */
+  variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -154,6 +154,7 @@ class Nav extends Component<
           className={css(
             styles.nav,
             isHorizontal && styles.modifiers.horizontal,
+            variant === 'docked' && styles.modifiers.docked,
             variant === 'horizontal-subnav' && styles.modifiers.subnav,
             this.state.isScrollable && styles.modifiers.scrollable,
             className

package/src/components/Nav/NavItem.tsx

@@ -1,4 +1,14 @@
-import { cloneElement, Fragment, isValidElement, useContext, useEffect, useRef, useState } from 'react';
+import {
+  cloneElement,
+  Fragment,
+  isValidElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  MutableRefObject
+} from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import dividerStyles from '@patternfly/react-styles/css/components/Divider/divider';
@@ -42,9 +52,13 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** React ref for the anchor element within the nav item. */
+  anchorRef?: React.Ref<HTMLAnchorElement>;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLLIElement>;
 }
 
-export const NavItem: React.FunctionComponent<NavItemProps> = ({
+const NavItemBase: React.FunctionComponent<NavItemProps> = ({
   children,
   styleChildren = true,
   className,
@@ -61,13 +75,16 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ouiaSafe,
   zIndex = 9999,
   icon,
+  innerRef,
+  anchorRef,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = useContext(NavContext);
   const { isSidebarOpen } = useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = useState(null);
   const [isHovered, setIsHovered] = useState(false);
-  const ref = useRef<HTMLLIElement>(undefined);
+  const _ref = useRef<HTMLLIElement>(undefined);
+  const ref = (innerRef as MutableRefObject<HTMLLIElement>) || _ref;
   const flyoutVisible = ref === flyoutRef;
   const popperRef = useRef<HTMLDivElement>(undefined);
   const hasFlyout = flyout !== undefined;
@@ -180,6 +197,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     const preventLinkDefault = preventDefault || !to;
     return (
       <Component
+        ref={anchorRef}
         href={to}
         onClick={(e: any) => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick)}
         className={css(
@@ -208,6 +226,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         className: css(styles.navLink, isActive && styles.modifiers.current, child.props && child.props.className)
       }),
       tabIndex: child.props.tabIndex || tabIndex,
+      ref: anchorRef,
       children: hasFlyout ? (
         <Fragment>
           {child.props.children}
@@ -267,4 +286,9 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
   return navItem;
 };
+
+export const NavItem = forwardRef<HTMLLIElement, NavItemProps>((props, ref) => (
+  <NavItemBase {...props} innerRef={ref} />
+));
+
 NavItem.displayName = 'NavItem';

package/src/components/Nav/__tests__/Nav.test.tsx

@@ -259,4 +259,19 @@ describe('Nav', () => {
     );
     expect(screen.getAllByText('this is an icon')[0].parentElement).toHaveClass(styles.navLinkIcon);
   });
+
+  test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
+    renderNav(
+      <Nav variant="docked" data-testid="docked-nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('docked-nav')).toHaveClass(styles.modifiers.docked);
+  });
 });

package/src/components/Page/Page.tsx

@@ -20,6 +20,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
+  /** @beta Indicates the layout variant */
+  variant?: 'default' | 'docked';
   /** Masthead component (e.g. <Masthead />) */
   masthead?: React.ReactNode;
   /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
@@ -229,6 +231,7 @@ class Page extends Component<PageProps, PageState> {
       isBreadcrumbWidthLimited,
       className,
       children,
+      variant,
       masthead,
       sidebar,
       notificationDrawer,
@@ -336,6 +339,7 @@ class Page extends Component<PageProps, PageState> {
           {...rest}
           className={css(
             styles.page,
+            variant === 'docked' && styles.modifiers.dock,
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
@@ -344,7 +348,7 @@ class Page extends Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {masthead}
+          {variant === 'docked' ? <div className={css(styles.pageDock)}>{masthead}</div> : masthead}
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>

package/src/components/Page/__tests__/Page.test.tsx

@@ -389,4 +389,21 @@ describe('Page', () => {
 
     expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
   });
+
+  test(`Renders with ${styles.modifiers.dock} class when variant is docked`, () => {
+    render(<Page {...props} variant="docked" data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.dock);
+  });
+
+  test(`Does not render with ${styles.modifiers.dock} class when variant is default`, () => {
+    render(<Page {...props} variant="default" data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+  });
+
+  test(`Does not render with ${styles.modifiers.dock} class when variant is not passed`, () => {
+    render(<Page data-testid="page"></Page>);
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
+  });
 });

package/src/components/Tabs/Tabs.tsx

@@ -206,7 +206,6 @@ class Tabs extends Component<TabsProps, TabsState> {
     backScrollAriaLabel: 'Scroll back',
     rightScrollAriaLabel: 'Scroll right',
     forwardScrollAriaLabel: 'Scroll forward',
-    component: TabsComponent.div,
     mountOnEnter: false,
     unmountOnExit: false,
     ouiaSafe: true,
@@ -529,7 +528,8 @@ class Tabs extends Component<TabsProps, TabsState> {
     const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);
 
     const uniqueId = id || getUniqueId();
-    const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
+    const defaultComponent = isNav && !component ? 'nav' : 'div';
+    const Component: any = component !== undefined ? component : defaultComponent;
     const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;

package/src/components/Tabs/__tests__/Tabs.test.tsx

@@ -166,6 +166,66 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when unc
   expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
 });
 
+test(`Renders with class ${styles.modifiers.nav} when isNav is true`, () => {
+  render(
+    <Tabs isNav role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.nav);
+});
+
+test(`Renders with div wrapper by default`, () => {
+  render(
+    <Tabs>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when component="nav"`, () => {
+  render(
+    <Tabs component="nav">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Renders with nav wrapper when isNav is true`, () => {
+  render(
+    <Tabs isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+test(`Overrides isNav nav wrapper when component="div" is passed`, () => {
+  render(
+    <Tabs component="div" isNav>
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">