@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.41

package/src/components/Compass/CompassHeader.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassHeaderProps {
+export interface CompassHeaderProps {
   /** Content of the logo area */
   logo?: React.ReactNode;
   /** Content of the navigation area */
@@ -10,7 +10,11 @@ interface CompassHeaderProps {
   profile?: React.ReactNode;
 }
 
-export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({ logo, nav, profile }) => (
+export const CompassHeader: React.FunctionComponent<CompassHeaderProps> = ({
+  logo,
+  nav,
+  profile
+}: CompassHeaderProps) => (
   <>
     <div className={css(`${styles.compass}__logo`)}>{logo}</div>
     <div className={css(styles.compassNav)}>{nav}</div>

package/src/components/Compass/CompassHero.tsx

@@ -1,87 +1,22 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-import compassHeroBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_light';
-import compassHeroBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass__hero_BackgroundImage_dark';
-import compassHeroGradientStop1Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_light';
-import compassHeroGradientStop2Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_light';
-import compassHeroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_light';
-import compassHeroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_1_dark';
-import compassHeroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_2_dark';
-import compassHeroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_compass__hero_gradient_stop_3_dark';
-
-interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
+/** A wrapper component to pass a PatternFly Hero component into. */
+export interface CompassHeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
   /** Content of the hero */
   children?: React.ReactNode;
   /** Additional classes added to the hero */
   className?: string;
-  /** Light theme background image path of the hero */
-  backgroundSrcLight?: string;
-  /** Dark theme background image path of the hero */
-  backgroundSrcDark?: string;
-  /** Light theme gradient of the hero */
-  gradientLight?: {
-    stop1?: string;
-    stop2?: string;
-    stop3?: string;
-  };
-  /** Dark theme gradient of the hero */
-  gradientDark?: {
-    stop1?: string;
-    stop2?: string;
-    stop3?: string;
-  };
 }
 
 export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({
   className,
   children,
-  backgroundSrcLight,
-  backgroundSrcDark,
-  gradientLight,
-  gradientDark,
   ...props
-}) => {
-  const backgroundImageStyles: { [key: string]: string } = {};
-  if (backgroundSrcLight) {
-    backgroundImageStyles[compassHeroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
-  }
-  if (backgroundSrcDark) {
-    backgroundImageStyles[compassHeroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
-  }
-
-  if (gradientLight) {
-    if (gradientLight.stop1) {
-      backgroundImageStyles[compassHeroGradientStop1Light.name] = gradientLight.stop1;
-    }
-    if (gradientLight.stop2) {
-      backgroundImageStyles[compassHeroGradientStop2Light.name] = gradientLight.stop2;
-    }
-    if (gradientLight.stop3) {
-      backgroundImageStyles[compassHeroGradientStop3Light.name] = gradientLight.stop3;
-    }
-  }
-  if (gradientDark) {
-    if (gradientDark.stop1) {
-      backgroundImageStyles[compassHeroGradientStop1Dark.name] = gradientDark.stop1;
-    }
-    if (gradientDark.stop2) {
-      backgroundImageStyles[compassHeroGradientStop2Dark.name] = gradientDark.stop2;
-    }
-    if (gradientDark.stop3) {
-      backgroundImageStyles[compassHeroGradientStop3Dark.name] = gradientDark.stop3;
-    }
-  }
-
-  return (
-    <div
-      className={css(styles.compassPanel, styles.compassHero, className)}
-      style={{ ...props.style, ...backgroundImageStyles }}
-      {...props}
-    >
-      <div className={css(styles.compassHeroBody)}>{children}</div>
-    </div>
-  );
-};
+}: CompassHeroProps) => (
+  <div className={css(`${styles.compass}__hero`, className)} {...props}>
+    {children}
+  </div>
+);
 
 CompassHero.displayName = 'CompassHero';

package/src/components/Compass/CompassMainFooter.tsx

@@ -0,0 +1,24 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+interface CompassMainFooterProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Additional classes added to the main footer */
+  className?: string;
+  /** Main footer content */
+  children?: React.ReactNode;
+  /** Indicates if the main footer is expanded */
+  isExpanded?: boolean;
+}
+
+export const CompassMainFooter: React.FunctionComponent<CompassMainFooterProps> = ({
+  className,
+  children,
+  isExpanded = true,
+  ...props
+}) => (
+  <div className={css(styles.compassMainFooter, isExpanded && 'pf-m-expanded', className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainFooter.displayName = 'CompassMainFooter';

package/src/components/Compass/CompassMainHeader.tsx

@@ -1,17 +1,27 @@
-import { Flex, FlexItem } from '../../layouts/Flex';
-import { CompassPanel } from './CompassPanel';
+import { CompassPanel, CompassPanelProps } from './CompassPanel';
+import { CompassMainHeaderContent } from './CompassMainHeaderContent';
+import { CompassMainHeaderTitle } from './CompassMainHeaderTitle';
+import { CompassMainHeaderToolbar } from './CompassMainHeaderToolbar';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+/** The wrapper component for header content in the main Compass area. When building out a custom implementation,
+ * you should ensure any content within the main header is rendered inside a Compass panel and main header content wrappers.
+ */
+
+export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
+  children?: React.ReactNode;
   /** Additional classes added to the main header */
   className?: string;
   /** Styled title. If title or toolbar is provided, the children will be ignored. */
   title?: React.ReactNode;
   /** Styled toolbar. If title or toolbar is provided, the children will be ignored. */
   toolbar?: React.ReactNode;
-  /** Custom main header content. To opt into a default styling, use the title and toolbar props instead. */
-  children?: React.ReactNode;
+  /** Additional props passed to the Compass panel that wraps the main header content when using the title or toolbar props. When using the
+   * children prop, you should pass your own Compass panel.
+   */
+  compassPanelProps?: Omit<CompassPanelProps, 'children'>;
 }
 
 export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps> = ({
@@ -19,15 +29,16 @@ export const CompassMainHeader: React.FunctionComponent<CompassMainHeaderProps>
   title,
   toolbar,
   children,
+  compassPanelProps,
   ...props
-}) => {
+}: CompassMainHeaderProps) => {
   const _content =
     title !== undefined || toolbar !== undefined ? (
-      <CompassPanel>
-        <Flex alignItems={{ default: 'alignItemsCenter' }}>
-          <FlexItem grow={{ default: 'grow' }}>{title}</FlexItem>
-          {toolbar && <FlexItem>{toolbar}</FlexItem>}
-        </Flex>
+      <CompassPanel {...compassPanelProps}>
+        <CompassMainHeaderContent>
+          {title && <CompassMainHeaderTitle>{title}</CompassMainHeaderTitle>}
+          {toolbar && <CompassMainHeaderToolbar>{toolbar}</CompassMainHeaderToolbar>}
+        </CompassMainHeaderContent>
       </CompassPanel>
     ) : (
       children

package/src/components/Compass/CompassMainHeaderContent.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component to be passed as custom content for the Compass main header. This should also be wrapped
+ * in a Compass panel component.
+ */
+
+export interface CompassMainHeaderContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header content. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header content. */
+  className?: string;
+}
+
+export const CompassMainHeaderContent: React.FunctionComponent<CompassMainHeaderContentProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderContentProps) => (
+  <div className={css(styles.compassMainHeaderContent, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderContent.displayName = 'CompassMainHeaderContent';

package/src/components/Compass/CompassMainHeaderTitle.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component for custom title content to be passed into a Compass main header. This should also be wrapped
+ * by a Compass main header content component.
+ */
+
+export interface CompassMainHeaderTitleProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header title. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header title. */
+  className?: string;
+}
+
+export const CompassMainHeaderTitle: React.FunctionComponent<CompassMainHeaderTitleProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderTitleProps) => (
+  <div className={css(`${styles.compass}__main-header-title`, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderTitle.displayName = 'CompassMainHeaderTitle';

package/src/components/Compass/CompassMainHeaderToolbar.tsx

@@ -0,0 +1,25 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+/** A wrapper component for custom toolbar content to be passed into a Compass main header. This should also be wrapped
+ * by a Compass main header content component.
+ */
+
+export interface CompassMainHeaderToolbarProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the main header toolbar. */
+  children: React.ReactNode;
+  /** Additional classes added to the main header toolbar. */
+  className?: string;
+}
+
+export const CompassMainHeaderToolbar: React.FunctionComponent<CompassMainHeaderToolbarProps> = ({
+  children,
+  className,
+  ...props
+}: CompassMainHeaderToolbarProps) => (
+  <div className={css(`${styles.compass}__main-header-toolbar`, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassMainHeaderToolbar.displayName = 'CompassMainHeaderToolbar';

package/src/components/Compass/CompassMessageBar.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassMessageBarProps extends React.HTMLProps<HTMLDivElement> {
+export interface CompassMessageBarProps extends React.HTMLProps<HTMLDivElement> {
   /** Content of the message bar. Typically a @patternfly/chatbot MessageBar component. */
   children?: React.ReactNode;
   /** Additional classes added to the message bar */
@@ -12,7 +12,7 @@ export const CompassMessageBar: React.FunctionComponent<CompassMessageBarProps>
   children,
   className,
   ...props
-}) => (
+}: CompassMessageBarProps) => (
   <div className={css(styles.compassMessageBar, className)} {...props}>
     {children}
   </div>

package/src/components/Compass/CompassNavContent.tsx

@@ -0,0 +1,20 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+export interface CompassNavContentProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the nav content wrapper. */
+  children: React.ReactNode;
+  /** Additional classes added to the nav content. */
+  className?: string;
+}
+
+export const CompassNavContent: React.FunctionComponent<CompassNavContentProps> = ({
+  children,
+  className,
+  ...props
+}: CompassNavContentProps) => (
+  <div className={css(styles.compassNavContent, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassNavContent.displayName = 'CompassNavContent';

package/src/components/Compass/CompassNavHome.tsx

@@ -0,0 +1,77 @@
+import { useRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const CompassHomeIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    className="pf-v6-svg"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M8.33268 13.334H11.666"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export interface CompassNavHomeProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to display in the tooltip. Defaults to "Home". */
+  tooltipContent?: React.ReactNode;
+  /** Click handler for the home button. */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Additional classes added to the nav home wrapper. */
+  className?: string;
+  /** Accessible label for the nav home. */
+  'aria-label'?: string;
+}
+
+export const CompassNavHome: React.FunctionComponent<CompassNavHomeProps> = ({
+  'aria-label': ariaLabel = 'Home',
+  tooltipContent = 'Home',
+  className,
+  onClick,
+  ...props
+}: CompassNavHomeProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className={css(styles.compassNav + '-home', className)} {...props}>
+      <Tooltip content={tooltipContent} position="left" aria="none" aria-live="off" triggerRef={buttonRef}>
+        <Button
+          isCircle
+          variant="plain"
+          icon={<CompassHomeIcon />}
+          aria-label={ariaLabel}
+          onClick={onClick}
+          ref={buttonRef}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+CompassNavHome.displayName = 'CompassNavHome';

package/src/components/Compass/CompassNavMain.tsx

@@ -0,0 +1,21 @@
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+
+export interface CompassNavMainProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content of the nav main section (typically tabs). */
+  children: React.ReactNode;
+  /** Additional classes added to the nav main section. */
+  className?: string;
+}
+
+export const CompassNavMain: React.FunctionComponent<CompassNavMainProps> = ({
+  children,
+  className,
+  ...props
+}: CompassNavMainProps) => (
+  <div className={css(styles.compassNavMain, className)} {...props}>
+    {children}
+  </div>
+);
+
+CompassNavMain.displayName = 'CompassNavMain';

package/src/components/Compass/CompassNavSearch.tsx

@@ -0,0 +1,70 @@
+import { useRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+
+const CompassSearchIcon = () => (
+  <svg
+    width="1em"
+    height="1em"
+    className="pf-v6-svg"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M14.166 14.166L17.4993 17.4993"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export interface CompassNavSearchProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to display in the tooltip. Defaults to "Search". */
+  tooltipContent?: React.ReactNode;
+  /** Click handler for the search button. */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Additional classes added to the nav search wrapper. */
+  className?: string;
+  /** Accessible label for the nav search. */
+  'aria-label'?: string;
+}
+
+export const CompassNavSearch: React.FunctionComponent<CompassNavSearchProps> = ({
+  'aria-label': ariaLabel = 'Search',
+  tooltipContent = 'Search',
+  className,
+  onClick,
+  ...props
+}: CompassNavSearchProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div className={css(styles.compassNav + '-search', className)} {...props}>
+      <Tooltip content={tooltipContent} aria="none" aria-live="off" triggerRef={buttonRef}>
+        <Button
+          isCircle
+          variant="plain"
+          icon={<CompassSearchIcon />}
+          aria-label={ariaLabel}
+          onClick={onClick}
+          ref={buttonRef}
+        />
+      </Tooltip>
+    </div>
+  );
+};
+
+CompassNavSearch.displayName = 'CompassNavSearch';

package/src/components/Compass/CompassPanel.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
+export interface CompassPanelProps extends React.HTMLProps<HTMLDivElement> {
   /** Content of the panel. */
   children: React.ReactNode;
   /** Additional classes added to the panel. */
@@ -30,7 +30,7 @@ export const CompassPanel: React.FunctionComponent<CompassPanelProps> = ({
   isFullHeight,
   isScrollable,
   ...props
-}) => (
+}: CompassPanelProps) => (
   <div
     className={css(
       styles.compassPanel,

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

@@ -170,3 +170,13 @@ test('Matches the snapshot with drawer', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test(`Renders with ${styles.modifiers.dock} class when dock is passed`, () => {
+  render(<Compass dock={<div>Dock content</div>} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass(styles.modifiers.dock);
+});
+
+test(`Does not render with ${styles.modifiers.dock} class when dock is not passed`, () => {
+  render(<Compass data-testid="compass" />);
+  expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.dock);
+});

package/src/components/Compass/__tests__/CompassHero.test.tsx

@@ -16,135 +16,23 @@ test('Renders with children', () => {
   expect(screen.getByText('Test content')).toBeVisible();
 });
 
-test('Renders with custom class name when className prop is provided', () => {
-  render(<CompassHero className="custom-class">Test</CompassHero>);
-  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
-});
-
-test(`Renders with default ${styles.compassPanel} and ${styles.compassHero} classes on the hero and ${styles.compassHeroBody} class on the hero body`, () => {
+test(`Renders with ${styles.compass}__hero class by defaulty`, () => {
   render(<CompassHero>Test</CompassHero>);
-  const heroBodyElement = screen.getByText('Test');
-  expect(heroBodyElement).toHaveClass(styles.compassHeroBody);
-
-  const heroElement = heroBodyElement.parentElement;
-  expect(heroElement).toHaveClass(styles.compassPanel);
-  expect(heroElement).toHaveClass(styles.compassHero);
-});
-
-test('Renders with light background image style when backgroundSrcLight is provided', () => {
-  const backgroundSrc = 'light-bg.jpg';
-  render(<CompassHero backgroundSrcLight={backgroundSrc}>Test</CompassHero>);
-  expect(screen.getByText('Test').parentElement).toHaveStyle(
-    `--pf-v6-c-compass__hero--BackgroundImage--light: url(${backgroundSrc})`
-  );
-});
-
-test('Renders with dark background image style when backgroundSrcDark is provided', () => {
-  const backgroundSrc = 'dark-bg.jpg';
-  render(<CompassHero backgroundSrcDark={backgroundSrc}>Test</CompassHero>);
-  expect(screen.getByText('Test').parentElement).toHaveStyle(
-    `--pf-v6-c-compass__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(
-    <CompassHero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
-      Test
-    </CompassHero>
-  );
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
-});
-
-test('Renders with light gradient styles when gradientLight is provided', () => {
-  const gradient = {
-    stop1: '#ff0000',
-    stop2: '#00ff00',
-    stop3: '#0000ff'
-  };
-  render(<CompassHero gradientLight={gradient}>Test</CompassHero>);
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${gradient.stop1}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--light: ${gradient.stop2}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__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(<CompassHero gradientDark={gradient}>Test</CompassHero>);
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${gradient.stop1}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-2--dark: ${gradient.stop2}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__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(
-    <CompassHero gradientLight={lightGradient} gradientDark={darkGradient}>
-      Test
-    </CompassHero>
-  );
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__hero`, { exact: true });
 });
 
-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(
-    <CompassHero
-      backgroundSrcLight={lightSrc}
-      backgroundSrcDark={darkSrc}
-      gradientLight={lightGradient}
-      gradientDark={darkGradient}
-    >
-      Test
-    </CompassHero>
-  );
-  const heroElement = screen.getByText('Test').parentElement;
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--light: url(${lightSrc})`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--BackgroundImage--dark: url(${darkSrc})`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--light: ${lightGradient.stop1}`);
-  expect(heroElement).toHaveStyle(`--pf-v6-c-compass__hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassHero className="custom-class">Test</CompassHero>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
 test('Renders with additional props spread to the component', () => {
   render(<CompassHero aria-label="Test label">Test</CompassHero>);
-  expect(screen.getByText('Test').parentElement).toHaveAccessibleName('Test label');
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
 });
 
 test('Matches the snapshot', () => {
-  const { asFragment } = render(
-    <CompassHero
-      backgroundSrcLight="light.jpg"
-      backgroundSrcDark="dark.jpg"
-      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
-      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
-    >
-      <div>Hero content</div>
-    </CompassHero>
-  );
+  const { asFragment } = render(<CompassHero>Hero content</CompassHero>);
   expect(asFragment()).toMatchSnapshot();
 });