@patternfly/react-core 6.5.0-prerelease.11 → 6.5.0-prerelease.13

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.10","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.12","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.10","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.12","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.10","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.12","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.11",
+  "version": "6.5.0-prerelease.13",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.4",
-    "@patternfly/react-styles": "^6.5.0-prerelease.4",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.4",
+    "@patternfly/react-icons": "^6.5.0-prerelease.6",
+    "@patternfly/react-styles": "^6.5.0-prerelease.6",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.6",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.19",
+    "@patternfly/patternfly": "6.5.0-prerelease.27",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "7d5d45ce7ff4f022dcce69b3f96d38d283d13242"
+  "gitHead": "eed37ddb3b4437aceb531bed2616130e6ebcc70b"
 }

package/src/components/Compass/CompassContent.tsx

@@ -2,7 +2,7 @@ import { Drawer, DrawerContent, DrawerProps } from '../Drawer';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content of the main compass area. Typically one or more CompassPanel components. */
   children: React.ReactNode;
   /** Additional classes added to the CompassContent */

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 */

package/src/components/Compass/CompassHero.tsx

@@ -1,87 +1,18 @@
 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>
-  );
-};
+export const CompassHero: React.FunctionComponent<CompassHeroProps> = ({ className, children, ...props }) => (
+  <div className={css(`${styles.compass}__hero`, className)} {...props}>
+    {children}
+  </div>
+);
 
 CompassHero.displayName = 'CompassHero';

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
 }) => {
   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
+}) => (
+  <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
+}) => (
+  <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
+}) => (
+  <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 */

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. */

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();
 });

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

@@ -74,9 +74,52 @@ test('Renders children when neither title nor toolbar are provided', () => {
   expect(screen.getByText('Custom children content')).toBeVisible();
 });
 
+test('Renders CompassPanel when title is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" title="Title text" />);
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass(styles.compassPanel);
+});
+
+test('Renders CompassPanel when toolbar is passed', () => {
+  render(<CompassMainHeader data-testid="test-id" toolbar="Toolbar text" />);
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass(styles.compassPanel);
+});
+
+test('Does not render CompassPanel when children are passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id">
+      <div>Children content</div>
+    </CompassMainHeader>
+  );
+
+  const content = screen.getByTestId('test-id').firstChild;
+  expect(content).not.toHaveClass(styles.compassPanel);
+});
+
+test('Passes props to CompassPanel when title and compassPanelProps is passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} title="Title text" />
+  );
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass('panel-class');
+});
+
+test('Passes props to CompassPanel when toolbar and compassPanelProps is passed', () => {
+  render(
+    <CompassMainHeader data-testid="test-id" compassPanelProps={{ className: 'panel-class' }} toolbar="Toolbar text" />
+  );
+
+  const panel = screen.getByTestId('test-id').firstChild;
+  expect(panel).toHaveClass('panel-class');
+});
+
 test('Renders with additional props spread to the component', () => {
-  render(<CompassMainHeader aria-label="Test label">Test</CompassMainHeader>);
-  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+  render(<CompassMainHeader id="custom-id">Test</CompassMainHeader>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
 });
 
 test('Matches the snapshot with both title and toolbar', () => {

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

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderContent } from '../CompassMainHeaderContent';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderContent>Custom content</CompassMainHeaderContent>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-content class`, () => {
+  render(<CompassMainHeaderContent>Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-content`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderContent className="custom-class">Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderContent id="custom-id">Test</CompassMainHeaderContent>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderContent>Content</CompassMainHeaderContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderTitle } from '../CompassMainHeaderTitle';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderTitle>Custom content</CompassMainHeaderTitle>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-title class`, () => {
+  render(<CompassMainHeaderTitle>Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-title`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderTitle className="custom-class">Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderTitle id="custom-id">Test</CompassMainHeaderTitle>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderTitle>Content</CompassMainHeaderTitle>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { CompassMainHeaderToolbar } from '../CompassMainHeaderToolbar';
+import styles from '@patternfly/react-styles/css/components/Compass/compass';
+
+test('Renders with children', () => {
+  render(<CompassMainHeaderToolbar>Custom content</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Custom content')).toBeVisible();
+});
+
+test(`Renders with default ${styles.compass}__main-header-toolbar class`, () => {
+  render(<CompassMainHeaderToolbar>Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveClass(`${styles.compass}__main-header-toolbar`);
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<CompassMainHeaderToolbar className="custom-class">Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders with additional props spread to the component', () => {
+  render(<CompassMainHeaderToolbar id="custom-id">Test</CompassMainHeaderToolbar>);
+  expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CompassMainHeaderToolbar>Content</CompassMainHeaderToolbar>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -3,16 +3,9 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-compass__panel pf-v6-c-compass__hero"
-    style="--pf-v6-c-compass__hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-compass__hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-compass__hero--gradient--stop-1--light: #ff0000; --pf-v6-c-compass__hero--gradient--stop-2--light: #00ff00; --pf-v6-c-compass__hero--gradient--stop-3--light: #0000ff; --pf-v6-c-compass__hero--gradient--stop-1--dark: #000000; --pf-v6-c-compass__hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-compass__hero--gradient--stop-3--dark: #808080;"
+    class="pf-v6-c-compass__hero"
   >
-    <div
-      class="pf-v6-c-compass__hero-body"
-    >
-      <div>
-        Hero content
-      </div>
-    </div>
+    Hero content
   </div>
 </DocumentFragment>
 `;

package/src/components/Compass/__tests__/__snapshots__/CompassMainHeader.test.tsx.snap

@@ -9,17 +9,17 @@ exports[`Matches the snapshot with both title and toolbar 1`] = `
       class="pf-v6-c-compass__panel"
     >
       <div
-        class="pf-v6-l-flex pf-m-align-items-center"
+        class="pf-v6-c-compass__main-header-content"
       >
         <div
-          class="pf-m-grow"
+          class="pf-v6-c-compass__main-header-title"
         >
           <div>
             Title
           </div>
         </div>
         <div
-          class=""
+          class="pf-v6-c-compass__main-header-toolbar"
         >
           <div>
             Toolbar