Updated to bake-in HeroBody in main Hero component

Author: thatblindgeye

packages/react-core/src/components/Hero/Hero.tsx

@@ -8,6 +8,8 @@ import heroGradientStop3Light from '@patternfly/react-tokens/dist/esm/c_hero_gra
 import heroGradientStop1Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_1_dark';
 import heroGradientStop2Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_2_dark';
 import heroGradientStop3Dark from '@patternfly/react-tokens/dist/esm/c_hero_gradient_stop_3_dark';
+import heroBodyWidth from '@patternfly/react-tokens/dist/esm/c_hero__body_Width';
+import heroBodyMaxWidth from '@patternfly/react-tokens/dist/esm/c_hero__body_MaxWidth';
 
 /** The main Hero component that allows adjusting of its background images and gradients in different color modes (such as light and dark). */
 
@@ -34,6 +36,10 @@ export interface HeroProps extends Omit<React.HTMLProps<HTMLDivElement>, 'conten
   };
   /** Flag indicating whether glass styles are removed from the hero when a glass theme is applied. */
   hasNoGlass?: boolean;
+  /** Modifies the width of the hero body. */
+  bodyWidth?: string;
+  /** Modifies the max-width of the hero body. */
+  bodyMaxWidth?: string;
 }
 
 export const Hero: React.FunctionComponent<HeroProps> = ({
@@ -44,42 +50,51 @@ export const Hero: React.FunctionComponent<HeroProps> = ({
   gradientLight,
   gradientDark,
   hasNoGlass = false,
+  bodyWidth,
+  bodyMaxWidth,
   ...props
 }) => {
-  const backgroundImageStyles: { [key: string]: string } = {};
+  const customStyles: { [key: string]: string } = {};
   if (backgroundSrcLight) {
-    backgroundImageStyles[heroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
+    customStyles[heroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;
   }
   if (backgroundSrcDark) {
-    backgroundImageStyles[heroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
+    customStyles[heroBackgroundImageDark.name] = `url(${backgroundSrcDark})`;
   }
 
   if (gradientLight?.stop1) {
-    backgroundImageStyles[heroGradientStop1Light.name] = gradientLight.stop1;
+    customStyles[heroGradientStop1Light.name] = gradientLight.stop1;
   }
   if (gradientLight?.stop2) {
-    backgroundImageStyles[heroGradientStop2Light.name] = gradientLight.stop2;
+    customStyles[heroGradientStop2Light.name] = gradientLight.stop2;
   }
   if (gradientLight?.stop3) {
-    backgroundImageStyles[heroGradientStop3Light.name] = gradientLight.stop3;
+    customStyles[heroGradientStop3Light.name] = gradientLight.stop3;
   }
   if (gradientDark?.stop1) {
-    backgroundImageStyles[heroGradientStop1Dark.name] = gradientDark.stop1;
+    customStyles[heroGradientStop1Dark.name] = gradientDark.stop1;
   }
   if (gradientDark?.stop2) {
-    backgroundImageStyles[heroGradientStop2Dark.name] = gradientDark.stop2;
+    customStyles[heroGradientStop2Dark.name] = gradientDark.stop2;
   }
   if (gradientDark?.stop3) {
-    backgroundImageStyles[heroGradientStop3Dark.name] = gradientDark.stop3;
+    customStyles[heroGradientStop3Dark.name] = gradientDark.stop3;
+  }
+
+  if (bodyWidth) {
+    customStyles[heroBodyWidth.name] = bodyWidth;
+  }
+  if (bodyMaxWidth) {
+    customStyles[heroBodyMaxWidth.name] = bodyMaxWidth;
   }
 
   return (
     <div
       className={css(styles.hero, hasNoGlass && styles.modifiers.noGlass, className)}
-      style={{ ...props.style, ...backgroundImageStyles }}
+      style={{ ...props.style, ...customStyles }}
       {...props}
     >
-      {children}
+      <div className={css(styles.heroBody)}>{children}</div>
     </div>
   );
 };

packages/react-core/src/components/Hero/HeroBody.tsx

@@ -16,32 +16,42 @@ test('Renders with children', () => {
   expect(screen.getByText('Test content')).toBeVisible();
 });
 
-test(`Renders with ${styles.hero} class by defaulty`, () => {
+test(`Renders with ${styles.hero} class on wrapper by defaulty`, () => {
   render(<Hero>Test</Hero>);
 
-  expect(screen.getByText('Test')).toHaveClass(`${styles.hero}`, { exact: true });
+  expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true });
 });
 
-test('Renders with custom class name when className prop is provided', () => {
+test('Renders with custom class name on wrapper when className prop is provided', () => {
   render(<Hero className="custom-class">Test</Hero>);
-  expect(screen.getByText('Test')).toHaveClass('custom-class');
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
 });
 
-test('Renders with additional props spread to the component', () => {
+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')).toHaveAttribute('id', 'custom-id');
+  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')).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${backgroundSrc})`);
+  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')).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${backgroundSrc})`);
+  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', () => {
@@ -52,7 +62,7 @@ test('Renders with both light and dark background image styles when both are pro
       Test
     </Hero>
   );
-  const heroElement = screen.getByText('Test');
+  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})`);
 });
@@ -64,7 +74,7 @@ test('Renders with light gradient styles when gradientLight is provided', () =>
     stop3: '#0000ff'
   };
   render(<Hero gradientLight={gradient}>Test</Hero>);
-  const heroElement = screen.getByText('Test');
+  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}`);
@@ -77,7 +87,7 @@ test('Renders with dark gradient styles when gradientDark is provided', () => {
     stop3: '#0000ff'
   };
   render(<Hero gradientDark={gradient}>Test</Hero>);
-  const heroElement = screen.getByText('Test');
+  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}`);
@@ -99,7 +109,7 @@ test('Renders with both light and dark gradient styles when both are provided',
       Test
     </Hero>
   );
-  const heroElement = screen.getByText('Test');
+  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}`);
 });
@@ -120,13 +130,29 @@ test('Renders with both background images and gradient styles when both are prov
       Test
     </Hero>
   );
-  const heroElement = screen.getByText('Test');
+  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>);
 

packages/react-core/src/components/Hero/__tests__/Hero.test.tsx

@@ -6,7 +6,11 @@ exports[`Matches the snapshot with backgroundSrc and gradient props 1`] = `
     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;"
   >
-    Hero content
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -16,7 +20,11 @@ exports[`Matches the snapshot without backgroundSrc and gradient props 1`] = `
   <div
     class="pf-v6-c-hero"
   >
-    Hero content
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
   </div>
 </DocumentFragment>
 `;

packages/react-core/src/components/Hero/__tests__/HeroBody.test.tsx

@@ -3,16 +3,16 @@ id: Hero
 section: components
 cssPrefix: pf-v6-c-hero
 beta: true
-propComponents: ['Hero', 'HeroBody']
+propComponents: ['Hero']
 ---
 
 ## Examples
 
 ### Basic
 
-To ensure readability and prevent text from overlapping with the background image, use the `<HeroBody>` component. The `<HeroBody>` is optional and can be omitted if there's no background image or if you'd like finer control over text placement.
+The `bodyWidth` and `bodyMaxWidth` properties can be used for finer control over the placement of text content within the `<Hero>`, such as if you omit a background image. Be mindful of adjusting these properties when a background image is still present, as you may need to ensure the contrast of text is sufficient should it overlap the image.
 
-When using `gradientLight` or `gradientDark`, regardless of the presence of a `<HeroBody>`, check the color contrast to ensure proper accessibility.
+When using `gradientLight` or `gradientDark`, check the color contrast to ensure proper accessibility.
 
 ```ts file="HeroBasic.tsx"
 

packages/react-core/src/components/Hero/__tests__/__snapshots__/Hero.test.tsx.snap

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

packages/react-core/src/components/Hero/__tests__/__snapshots__/HeroBody.test.tsx.snap

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