fix(nav): Rename ContentHeader to PageHeader

Author: fhlavac

cypress/component/ContentHeader.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/PageHeader.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={<>

cypress/component/ServiceCard.cy.tsx

@@ -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/ContentHeader.md

@@ -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/ContentHeaderExample.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/ContentHeader/ContentHeaderIconExample.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' 
+  />
+);