fix(nav): Rename ContentHeader to PageHeader

cypress/component/PageHeader.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader';
+
+describe('PageHeader', () => {
+  it('should render PageHeader title and subtitle', () => {
+    cy.mount(<PageHeader title='My title' subtitle='This is a subtitle for your page header' />);
+    cy.get('title').should('exist')
+    cy.get('[data-ouia-component-id="PageHeader-title"]').should('have.text', 'My title')
+    cy.get('[data-ouia-component-id="PageHeader-subtitle"]').should('have.text', 'This is a subtitle for your page header')
+  })
+});

cypress/component/ServiceCard.cy.tsx

@@ -9,7 +9,7 @@ describe('ServiceCard', () => {
         title='Example'
         subtitle='A basic example'
         description='This is a basic ServiceCard Example'
-        icon={<img src="/" alt="content-header-icon" />}
+        icon={<img src="/" alt="page-header-icon" />}
         helperText='Here is helper text'
         ouiaId='Example'
       />)
@@ -21,7 +21,7 @@ describe('ServiceCard', () => {
         title='Example'
         subtitle='A basic example'
         description='This is a basic ServiceCard Example'
-        icon={<img src="/" alt="content-header-icon" />}
+        icon={<img src="/" alt="page-header-icon" />}
         helperText='Here is helper text'
         ouiaId='Example'
         footer={<>

packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md

@@ -0,0 +1,56 @@
+---
+section: Component groups
+subsection: Content containers
+id: Page header
+source: react
+propComponents: ['PageHeader']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md
+---
+
+import PageHeader from "@patternfly/react-component-groups/dist/dynamic/PageHeader"
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'
+
+The **page header** component displays a page header section with a title, subtitle and other optional content.
+
+## Examples
+
+### Basic page header
+
+In order to display a basic page header, pass the `title` and `subtitle`.
+
+```js file="./PageHeaderExample.tsx"
+
+```
+
+### Page header with breadcrumbs
+
+You can display breadcrumbs above the title using the `breadcrumbs` property.
+
+```js file="./PageHeaderBreadcrumbExample.tsx"
+
+```
+
+### Page header with icon
+
+Use the `icon` property to display your custom page icon separated with a [divider](/components/divider).
+
+```js file="./PageHeaderIconExample.tsx"
+
+```
+
+### Page header with label and link
+
+To add specific element captions for user clarity and convenience, you can use the `label` property together with [label](/components/label) or your custom component. The `linkProps` can be used to define a link displayed under the subtitle.
+
+```js file="./PageHeaderLabelLinkExample.tsx"
+
+```
+
+### Page header with actions menu
+
+In case you want to display actions in your header, you can use the `actionsMenu` property.
+
+```js file="./PageHeaderActionsExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderActionsExample.tsx → packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderActionsExample.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader';
+import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader';
 import { ActionList, ActionListItem, Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import { EllipsisVIcon } from '@patternfly/react-icons';
 
@@ -29,9 +29,9 @@ export const ActionsExample: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <ContentHeader
+      <PageHeader
         title='My Title'
-        subtitle='This is a subtitle for your content header' 
+        subtitle='This is a subtitle for your page header' 
         actionMenu={
           <ActionList>
             <ActionListItem>

packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderBreadCrumbExample.tsx → packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderBreadcrumbExample.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader';
+import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader';
 import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 
-export const BreadCrumbExample: React.FunctionComponent = () => (
-  <ContentHeader 
+export const BreadcrumbExample: React.FunctionComponent = () => (
+  <PageHeader 
     breadcrumbs={ 
       <Breadcrumb>
         <BreadcrumbItem
@@ -29,6 +29,6 @@ export const BreadCrumbExample: React.FunctionComponent = () => (
       </Breadcrumb>
     }
     title='My Title'
-    subtitle='This is a subtitle for your content header' 
+    subtitle='This is a subtitle for your page header' 
   />
 );

packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderExample.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <PageHeader 
+    title='My Title'
+    subtitle='This is a subtitle for your page header' 
+  />
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderIconExample.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader';
+import pageHeaderIcon from '../../assets/icons/page-header-icon.svg';
+
+
+export const IconExample: React.FunctionComponent = () => (
+  <PageHeader 
+    title='My Title'
+    subtitle='This is a subtitle for your page header' 
+    icon={<img src={pageHeaderIcon} alt="page-header-icon" />}
+  />
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/ContentHeader/ContentHeaderLabelLinkExample.tsx → packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeaderLabelLinkExample.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader';
+import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader';
 import { Label } from '@patternfly/react-core';
 
 export const BasicExample: React.FunctionComponent = () => (
-  <ContentHeader 
+  <PageHeader 
     title='My Title'
-    subtitle='This is a subtitle for your content header'
+    subtitle='This is a subtitle for your page header'
     label={<Label className="pf-v5-u-align-content-center">Org. Administrator</Label>}
     linkProps={{
       label: 'Go to this link',

packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCard.md

@@ -9,7 +9,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
 
 import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard";
 import { EllipsisVIcon } from '@patternfly/react-icons';
-import contentHeaderIcon from '../../assets/icons/content-header-icon.svg'
+import pageHeaderIcon from '../../assets/icons/page-header-icon.svg'
 
 The **service card** component displays a card representing a service with an icon, title, description, and an optional customized footer
 

packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardExample.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard";
-import contentHeaderIcon from '../../assets/icons/content-header-icon.svg';
+import pageHeaderIcon from '../../assets/icons/page-header-icon.svg';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 
 export const BasicExample: React.FunctionComponent = () => (
   <ServiceCard
     title='PatternFly'
     subtitle='Component groups'
     description='This is a sample service description'
-    icon={<img src={contentHeaderIcon} alt="content-header-icon" />}
+    icon={<img src={pageHeaderIcon} alt="page-header-icon" />}
     helperText='Here is helper text'
     footer={<>
       <Button

packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardGalleryExample.tsx

@@ -3,7 +3,7 @@ import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/Service
 import { Gallery } from '@patternfly/react-core/dist/dynamic/layouts/Gallery';
 import { GalleryItem } from '@patternfly/react-core/dist/dynamic/layouts/Gallery';
 import { Button, ButtonVariant } from '@patternfly/react-core';
-import contentHeaderIcon from '../../assets/icons/content-header-icon.svg';
+import pageHeaderIcon from '../../assets/icons/page-header-icon.svg';
 
 export const ServiceCardGalleryExample: React.FunctionComponent = () => (
   <Gallery hasGutter minWidths={{ default: '330px' }}>
@@ -13,7 +13,7 @@ export const ServiceCardGalleryExample: React.FunctionComponent = () => (
         title='Example1'
         subtitle='A basic example'
         description='This is a basic ServiceCard example'
-        icon={<img src={contentHeaderIcon} alt="content-header-icon" />}
+        icon={<img src={pageHeaderIcon} alt="page-header-icon" />}
         helperText='Example helper text'
       />
     </GalleryItem>
@@ -23,7 +23,7 @@ export const ServiceCardGalleryExample: React.FunctionComponent = () => (
         title='Example2'
         subtitle='A second example'
         description='This is another basic ServiceCard example'
-        icon={<img src={contentHeaderIcon} alt="content-header-icon" />}
+        icon={<img src={pageHeaderIcon} alt="page-header-icon" />}
         helperText='Example helper text'
         footer={<>
           <Button

packages/module/patternfly-docs/content/extensions/component-groups/examples/ServiceCard/ServiceCardStackedExample.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ServiceCard from "@patternfly/react-component-groups/dist/dynamic/ServiceCard";
-import contentHeaderIcon from '../../assets/icons/content-header-icon.svg';
+import pageHeaderIcon from '../../assets/icons/page-header-icon.svg';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 
 
@@ -10,7 +10,7 @@ export const BasicExample: React.FunctionComponent = () => (
     title='Example'
     subtitle='A basic example'
     description='This is a basic ServiceCard Example'
-    icon={<img src={contentHeaderIcon} alt="content-header-icon" />}
+    icon={<img src={pageHeaderIcon} alt="page-header-icon" />}
     helperText='Here is helper text'
     footer={<>
       <Button

packages/module/src/PageHeader/PageHeader.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import PageHeader from './PageHeader';
+
+describe('PageHeader component', () => {
+  test('should render', () => {
+    expect(render(<PageHeader title='My title' subtitle='This is a subtitle for your page header' />)).toMatchSnapshot();
+  });
+});