Address feedback

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Author: rebeccaalpert

packages/react-core/src/components/Page/PageHeader.tsx

@@ -13,7 +13,7 @@ export interface PageHeaderProps extends React.HTMLProps<HTMLElement> {
 export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   className,
   children,
-  component = 'div',
+  component = 'header',
   ...props
 }: PageHeaderProps) => {
   const Component = component as any;

packages/react-core/src/components/Page/__tests__/PageHeader.test.tsx

@@ -9,17 +9,17 @@ test('Renders children', () => {
 
 test(`Renders with class ${styles.pageHeader} by default`, () => {
   render(<PageHeader>Header content</PageHeader>);
-  expect(screen.getByText('Header content')).toHaveClass(styles.pageHeader);
+  expect(screen.getByText('Header content')).toHaveClass(styles.pageHeader, { exact: true });
 });
 
 test('Renders as a div by default', () => {
   render(<PageHeader>Header content</PageHeader>);
-  expect(screen.getByText('Header content').tagName).toBe('DIV');
+  expect(screen.getByText('Header content').tagName).toBe('HEADER');
 });
 
 test('Renders as a custom component when component is passed', () => {
-  render(<PageHeader component="header">Header content</PageHeader>);
-  expect(screen.getByText('Header content').tagName).toBe('HEADER');
+  render(<PageHeader component="div">Header content</PageHeader>);
+  expect(screen.getByText('Header content').tagName).toBe('DIV');
 });
 
 test('Renders with custom classes when className is passed', () => {

packages/react-core/src/components/Page/examples/PageHeaderContent.tsx

@@ -1,51 +1,18 @@
-import {
-  Page,
-  PageHeader,
-  Masthead,
-  MastheadMain,
-  MastheadBrand,
-  MastheadLogo,
-  MastheadContent,
-  PageSection,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem
-} from '@patternfly/react-core';
+import { Page, PageHeader, PageSection } from '@patternfly/react-core';
 
 export const PageHeaderContent: React.FunctionComponent = () => {
-  const headerToolbar = (
-    <Toolbar id="page-header-content-toolbar">
-      <ToolbarContent>
-        <ToolbarItem>header-tools</ToolbarItem>
-      </ToolbarContent>
-    </Toolbar>
-  );
-
-  const pageHeader = (
-    <PageHeader>
-      <Masthead>
-        <MastheadMain>
-          <MastheadBrand>
-            <MastheadLogo href="https://patternfly.org" target="_blank">
-              Logo
-            </MastheadLogo>
-          </MastheadBrand>
-        </MastheadMain>
-        <MastheadContent>{headerToolbar}</MastheadContent>
-      </Masthead>
-    </PageHeader>
-  );
+  const pageHeader = <PageHeader>Page header</PageHeader>;
 
   return (
     <Page masthead={pageHeader}>
-      <PageSection aria-labelledby="section-1">
-        <h2 id="section-1">Page header example section 1</h2>
+      <PageSection aria-labelledby="header-example-section-1">
+        <h2 id="header-example-section-1">Page header example section 1</h2>
       </PageSection>
-      <PageSection variant="secondary" aria-labelledby="section-2">
-        <h2 id="section-2">Page header example section 2 with secondary variant styling</h2>
+      <PageSection variant="secondary" aria-labelledby="header-example-section-2">
+        <h2 id="header-example-section-2">Page header example section 2 with secondary variant styling</h2>
       </PageSection>
-      <PageSection aria-labelledby="section-3">
-        <h2 id="section-3">Page header example section 3</h2>
+      <PageSection aria-labelledby="header-example-section-3">
+        <h2 id="header-example-section-3">Page header example section 3</h2>
       </PageSection>
     </Page>
   );