feat(Hero): added component

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.19",
+    "@patternfly/patternfly": "6.5.0-prerelease.21",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

packages/react-core/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 */

packages/react-core/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 */

packages/react-core/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';

packages/react-core/src/components/Compass/CompassMainHeader.tsx

@@ -3,7 +3,7 @@ import { CompassPanel } from './CompassPanel';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
   /** Additional classes added to the main header */
   className?: string;
   /** Styled title. If title or toolbar is provided, the children will be ignored. */

packages/react-core/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 */

packages/react-core/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. */

packages/react-core/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();
 });

packages/react-core/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>
 `;

packages/react-core/src/components/Compass/examples/CompassDemo.tsx

@@ -7,6 +7,7 @@ import {
   CompassMainHeader,
   CompassPanel,
   CompassMessageBar,
+  Hero,
   Tabs,
   TabsComponent,
   Tab,
@@ -119,8 +120,8 @@ export const CompassBasic: React.FunctionComponent = () => {
   const sidebarStartContent = sidebarContent;
   const mainContent = (
     <>
-      <CompassHero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
-        <div>Hero</div>
+      <CompassHero>
+        <Hero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>Hero</Hero>
       </CompassHero>
       <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
       <CompassContent>