@patternfly/react-core 5.0.0-alpha.53 → 5.0.0-alpha.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.53",
+  "version": "5.0.0-alpha.54",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "c4f0e8983765fbf06c61c96ff4ed29731087355f"
+  "gitHead": "1032b93276f93eb89b6e02893a14223e2fdfe25d"
 }

package/src/components/Nav/examples/Nav.md

@@ -37,11 +37,6 @@ The following example shows two navigation groups, each with a `title` prop pass
 ```ts file="./NavMixed.tsx"
 ```
 
-### Horizontal (only in PageHeader)
-
-```ts file="./NavHorizontalPageHeader.tsx"
-```
-
 ### Horizontal subnav
 
 ```ts file="./NavHorizontalSubNav.tsx"

package/src/components/Page/Page.tsx

@@ -19,7 +19,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the page layout */
   className?: string;
-  /** Header component (e.g. <PageHeader />) */
+  /** Header component (e.g. <Masthead />) */
   header?: React.ReactNode;
   /** Sidebar component for a side nav (e.g. <PageSidebar />) */
   sidebar?: React.ReactNode;
@@ -41,7 +41,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   mainTabIndex?: number | null;
   /**
    * If true, manages the sidebar open/close state and there is no need to pass the isNavOpen boolean into
-   * the sidebar component or add a callback onNavToggle function into the PageHeader component
+   * the sidebar component or add a callback onNavToggle function into the Masthead component
    */
   isManagedSidebar?: boolean;
   /** Flag indicating if tertiary nav width should be limited */

package/src/components/Page/__tests__/Page.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { Page } from '../Page';
-import { PageHeader } from '../PageHeader';
+import { PageHeader } from '../../../deprecated/components/PageHeader';
 import { PageSidebar } from '../PageSidebar';
 import { PageSection } from '../PageSection';
 import { Breadcrumb, BreadcrumbItem } from '../../Breadcrumb';

package/src/components/Page/examples/Page.md

@@ -5,20 +5,20 @@ cssPrefix: pf-c-page
 propComponents:
   [
     'Page',
-    'PageHeader',
-    'PageHeaderTools',
-    'PageHeaderToolsGroup',
-    'PageHeaderToolsItem',
     'PageSidebar',
     'PageSection',
     'PageGroup',
     'PageBreadcrumb',
     'PageNavigation',
-    'PageToggleButton',
+    'PageToggleButton'
   ]
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import {
+  PageHeader,
+  PageHeaderTools
+} from '@patternfly/react-core/deprecated';
 import './page.css';
 
 ## Examples
@@ -41,13 +41,6 @@ The `isNavOpen` property helps facilitate the opening and closing of the sidebar
 ```ts file="./PageVerticalNav.tsx"
 ```
 
-### Legacy page header
-
-This example shows the legacy implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
-
-```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
-```
-
 ### Horizontal navigation
 
 To add horizontal navigation to the top of a `<Page>`, add the navigation inside of a `<ToolbarItem>` in the `<Toolbar>` that is passed to the `<MastheadContent>` of the `<Masthead>`.
@@ -66,7 +59,7 @@ Tertiary navigation allows you to add an additional navigation menu alongside ve
 
 ### Uncontrolled navigation
 
-When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageHeader>`.
+When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageToggleButton>`.
 
 ```ts file="./PageUncontrolledNav.tsx"
 ```

package/src/components/Page/index.ts

@@ -1,12 +1,8 @@
 export * from './Page';
 export * from './PageBreadcrumb';
 export * from './PageGroup';
-export * from './PageHeader';
 export * from './PageSidebar';
 export * from './PageSection';
-export * from './PageHeaderTools';
-export * from './PageHeaderToolsGroup';
-export * from './PageHeaderToolsItem';
 export * from './PageNavigation';
 export * from './PageToggleButton';
 export * from './PageContext';

package/src/demos/Nav.md

@@ -2,14 +2,18 @@
 id: Navigation
 section: components
 ---
-
 import {
-Dropdown as DropdownDeprecated,
-DropdownGroup as DropdownGroupDeprecated,
-DropdownToggle,
-DropdownItem as DropdownItemDeprecated,
-KebabToggle
+  Dropdown as DropdownDeprecated,
+  DropdownGroup as DropdownGroupDeprecated,
+  DropdownToggle,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle,
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem
 } from '@patternfly/react-core/deprecated';
+
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -372,17 +376,18 @@ import {
   NavItem,
   NavList,
   Page,
-  PageHeader,
   PageSection,
   PageSectionVariants,
   SkipToContent,
   TextContent,
-  Text,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
+  Text
 } from '@patternfly/react-core';
+
 import {
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsGroup,
+  PageHeaderToolsItem,
   Dropdown as DropdownDeprecated,
   DropdownGroup as DropdownGroupDeprecated,
   DropdownToggle,
@@ -730,23 +735,23 @@ import {
   NavItem,
   NavList,
   Page,
-  PageHeader,
   PageSection,
   PageSectionVariants,
   PageSectionTypes,
   SkipToContent,
   TextContent,
-  Text,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
+  Text
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
   DropdownGroup as DropdownGroupDeprecated,
   DropdownToggle,
   DropdownItem as DropdownItemDeprecated,
-  KebabToggle
+  KebabToggle,
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsItem,
+  PageHeaderToolsGroup
 } from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -1196,23 +1201,23 @@ import {
   NavItem,
   NavList,
   Page,
-  PageHeader,
   PageSection,
   PageSectionVariants,
   PageSidebar,
   SkipToContent,
   TextContent,
-  Text,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
+  Text
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
   DropdownGroup as DropdownGroupDeprecated,
   DropdownToggle,
   DropdownItem as DropdownItemDeprecated,
-  KebabToggle
+  KebabToggle,
+  PageHeader,
+  PageHeaderTools,
+  PageHeaderToolsItem,
+  PageHeaderToolsGroup
 } from '@patternfly/react-core/deprecated';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -1433,8 +1438,6 @@ import {
   Nav,
   NavList,
   NavItem,
-  PageHeader,
-  PageHeaderTools,
   PageSidebar,
   PageSection,
   PageSectionVariants,
@@ -1443,6 +1446,10 @@ import {
   MenuList,
   MenuItem
 } from '@patternfly/react-core';
+import {
+  PageHeader,
+  PageHeaderTools,
+}from '@patternfly/react-core';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 
 class VerticalPage extends React.Component {
@@ -1452,7 +1459,7 @@ class VerticalPage extends React.Component {
       isNavOpen: true,
       activeItem: 0
     };
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (e, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1493,17 +1500,17 @@ class VerticalPage extends React.Component {
     const { activeItem } = this.state;
 
     const Sidebar = (
-      <PageSidebar
+      <PageSidebar style={{"overflow": "visible"}}
         nav={
           <Nav onSelect={this.onNavSelect}>
             <NavList>
-              <NavItem id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
+              <NavItem preventDefault id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
                 System Panel
               </NavItem>
-              <NavItem flyout={curFlyout} id="flyout-link2" to="#flyout-link2" itemId={1} isActive={activeItem === 1}>
+              <NavItem preventDefault flyout={curFlyout} id="flyout-link2" itemId={1} isActive={activeItem === 1}>
                 Settings
               </NavItem>
-              <NavItem id="flyout-link3" to="#flyout-link3" itemId={2} isActive={activeItem === 2}>
+              <NavItem preventDefault id="flyout-link3" to="#flyout-link3" itemId={2} isActive={activeItem === 2}>
                 Authentication
               </NavItem>
             </NavList>

package/src/demos/Page.md

@@ -43,14 +43,6 @@ This demonstrates a variety of navigation patterns in the context of a full page
 
 ```
 
-### Sticky section group (using PageHeader)
-
-This demo is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
-
-```ts file='./examples/Page/PageStickySectionGroupUsingPageHeader.tsx' isFullscreen
-
-```
-
 ### Sticky section breadcrumb (with breakpoints)
 
 ```ts file='./examples/Page/PageStickySectionBreadcrumb.tsx' isFullscreen

package/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx

@@ -1,267 +0,0 @@
-import React from 'react';
-import {
-  Avatar,
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  ButtonVariant,
-  Card,
-  CardBody,
-  Divider,
-  Gallery,
-  GalleryItem,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem,
-  PageSection,
-  PageSectionVariants,
-  PageSidebar,
-  SkipToContent,
-  Text,
-  TextContent
-} from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownGroup as DropdownGroupDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownToggle,
-  KebabToggle
-} from '@patternfly/react-core/deprecated';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-
-interface NavOnSelectProps {
-  groupId: number | string;
-  itemId: number | string;
-  to: string;
-  event: React.FormEvent<HTMLInputElement>;
-}
-
-export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
-
-  const onNavSelect = (selectedItem: NavOnSelectProps) => {
-    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
-  };
-
-  const onDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsDropdownOpen(isOpen);
-  };
-
-  const onDropdownSelect = () => {
-    setIsDropdownOpen(!isDropdownOpen);
-  };
-
-  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsKebabDropdownOpen(isOpen);
-  };
-
-  const onKebabDropdownSelect = () => {
-    setIsKebabDropdownOpen(!isKebabDropdownOpen);
-  };
-
-  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
-    setIsFullKebabDropdownOpen(isOpen);
-  };
-
-  const onFullKebabDropdownSelect = () => {
-    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
-  };
-
-  const dashboardBreadcrumb = (
-    <Breadcrumb>
-      <BreadcrumbItem>Section home</BreadcrumbItem>
-      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-      <BreadcrumbItem to="#" isActive>
-        Section landing
-      </BreadcrumbItem>
-    </Breadcrumb>
-  );
-
-  const kebabDropdownItems = [
-    <DropdownItemDeprecated key="settings">
-      <CogIcon /> Settings
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="help">
-      <HelpIcon /> Help
-    </DropdownItemDeprecated>
-  ];
-
-  const fullKebabDropdownItems = [
-    <DropdownGroupDeprecated key="group 2">
-      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 user" component="button">
-        User management
-      </DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-    </DropdownGroupDeprecated>,
-    <Divider key="divider" />,
-    <DropdownItemDeprecated key="settings">
-      <CogIcon /> Settings
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="help">
-      <HelpIcon /> Help
-    </DropdownItemDeprecated>
-  ];
-
-  const userDropdownItems = [
-    <DropdownGroupDeprecated key="group 2">
-      <DropdownItemDeprecated key="group 2 profile">My profile</DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 user" component="button">
-        User management
-      </DropdownItemDeprecated>
-      <DropdownItemDeprecated key="group 2 logout">Logout</DropdownItemDeprecated>
-    </DropdownGroupDeprecated>
-  ];
-
-  const pageNav = (
-    <Nav onSelect={onNavSelect}>
-      <NavList>
-        <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
-          System panel
-        </NavItem>
-        <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
-          Policy
-        </NavItem>
-        <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
-          Authentication
-        </NavItem>
-        <NavItem itemId={3} isActive={activeItem === 3} to="#network">
-          Network services
-        </NavItem>
-        <NavItem itemId={4} isActive={activeItem === 4} to="#server">
-          Server
-        </NavItem>
-      </NavList>
-    </Nav>
-  );
-
-  const sidebar = <PageSidebar nav={pageNav} />;
-
-  const mainContainerId = 'main-content';
-
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
-
-  const headerTools = (
-    <PageHeaderTools>
-      <PageHeaderToolsGroup>
-        <PageHeaderToolsItem>
-          <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
-        </PageHeaderToolsItem>
-        <PageHeaderToolsGroup visibility={{ default: 'hidden', lg: 'visible' }}>
-          <PageHeaderToolsItem>
-            <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <PageHeaderToolsItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
-          <DropdownDeprecated
-            isPlain
-            position="right"
-            onSelect={onKebabDropdownSelect}
-            toggle={<KebabToggle onToggle={onKebabDropdownToggle} />}
-            isOpen={isKebabDropdownOpen}
-            dropdownItems={kebabDropdownItems}
-          />
-        </PageHeaderToolsItem>
-        <PageHeaderToolsItem visibility={{ md: 'hidden' }}>
-          <DropdownDeprecated
-            isPlain
-            position="right"
-            onSelect={onFullKebabDropdownSelect}
-            toggle={<KebabToggle onToggle={onFullKebabDropdownToggle} />}
-            isOpen={isFullKebabDropdownOpen}
-            dropdownItems={fullKebabDropdownItems}
-          />
-        </PageHeaderToolsItem>
-      </PageHeaderToolsGroup>
-      <PageHeaderToolsItem
-        visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-      >
-        <Avatar src={imgAvatar} alt="Avatar" />
-      </PageHeaderToolsItem>
-      <PageHeaderToolsItem
-        visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-      >
-        <DropdownDeprecated
-          isPlain
-          position="right"
-          onSelect={onDropdownSelect}
-          isOpen={isDropdownOpen}
-          toggle={<DropdownToggle onToggle={onDropdownToggle}>Ned Username</DropdownToggle>}
-          dropdownItems={userDropdownItems}
-        />
-      </PageHeaderToolsItem>
-    </PageHeaderTools>
-  );
-
-  const pageHeader = (
-    <PageHeader
-      logo={
-        <Brand
-          widths={{ default: '180px', md: '180px', '2xl': '220px' }}
-          src="/assets/images/logo__pf--reverse--base.png"
-          alt="Fallback patternFly default logo"
-        >
-          <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
-          <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
-        </Brand>
-      }
-      headerTools={headerTools}
-      showNavToggle
-    />
-  );
-
-  return (
-    <Page
-      header={pageHeader}
-      sidebar={sidebar}
-      isManagedSidebar
-      skipToContent={pageSkipToContent}
-      breadcrumb={dashboardBreadcrumb}
-      mainContainerId={mainContainerId}
-      isBreadcrumbWidthLimited
-      isBreadcrumbGrouped
-      additionalGroupedContent={
-        <PageSection variant={PageSectionVariants.light} isWidthLimited>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">This is a full page demo.</Text>
-          </TextContent>
-        </PageSection>
-      }
-      groupProps={{
-        stickyOnBreakpoint: {
-          default: 'top'
-        }
-      }}
-    >
-      <PageSection>
-        <Gallery hasGutter>
-          {Array.apply(0, Array(50)).map((x, i) => (
-            <GalleryItem key={i}>
-              <Card>
-                <CardBody>This is a card</CardBody>
-              </Card>
-            </GalleryItem>
-          ))}
-        </Gallery>
-      </PageSection>
-    </Page>
-  );
-};

package/src/{components/Page → deprecated/components/PageHeader}/PageHeader.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import { Button, ButtonVariant } from '../../components/Button';
-import { PageContextConsumer, PageContextProps } from './PageContext';
+import { Button, ButtonVariant } from '../../../components/Button';
+import { PageContextConsumer, PageContextProps } from '../../../components/Page/PageContext';
 
 export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the page header */

package/src/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsGroup.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
-import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from './PageContext';
+import { formatBreakpointMods } from '../../../helpers/util';
+import { PageContext } from '../../../components/Page/PageContext';
 
 export interface PageHeaderToolsGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in the page header tools group */

package/src/{components/Page → deprecated/components/PageHeader}/PageHeaderToolsItem.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
-import { formatBreakpointMods } from '../../helpers/util';
-import { PageContext } from './PageContext';
+import { formatBreakpointMods } from '../../../helpers/util';
+import { PageContext } from '../../../components/Page/PageContext';
 
 export interface PageHeaderToolsItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered in page header tools item. */

package/src/deprecated/components/PageHeader/examples/PageHeader.md

@@ -0,0 +1,15 @@
+---
+id: Page
+section: components
+cssPrefix: pf-c-page
+propComponents: ['PageHeader','PageHeaderTools','PageHeaderToolsGroup','PageHeaderToolsItem']
+---
+
+## Page header examples
+
+### Vertical navigation
+
+This example shows the deprecated implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
+
+```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
+```

package/src/{components/Page → deprecated/components/PageHeader}/examples/PageVerticalNavUsingPageHeaderComponent.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import {
   Page,
-  PageHeader,
-  PageHeaderTools,
   PageSidebar,
   PageSection,
   PageSectionVariants
 } from '@patternfly/react-core';
+import {
+  PageHeader,
+  PageHeaderTools
+} from '@patternfly/react-core/deprecated';
 
 export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent = () => {
   const [isNavOpen, setIsNavOpen] = React.useState(true);

package/src/deprecated/components/PageHeader/index.ts

@@ -0,0 +1,4 @@
+export * from './PageHeader';
+export * from './PageHeaderTools';
+export * from './PageHeaderToolsGroup';
+export * from './PageHeaderToolsItem';

package/src/{components/Page/__tests__ → deprecated/components/PageHeader/tests}/PageHeader.test.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import { PageHeader } from '../PageHeader';
 
-jest.mock('../Page');
-
 test('Check page vertical layout example against snapshot', () => {
   const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
   const { asFragment } = render(Header);

package/src/{components/Page/__tests__/Generated → deprecated/components/PageHeader/tests}/PageHeaderTools.test.tsx

@@ -3,11 +3,11 @@
  */
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { PageHeaderTools } from '../../PageHeaderTools';
+import { PageHeaderTools } from '../PageHeaderTools';
 // any missing imports can usually be resolved by adding them here
 import {} from '../..';
 
 it('PageHeaderTools should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<PageHeaderTools children={<div>ReactNode</div>} className={'string'} />);
+  const { asFragment } = render(<PageHeaderTools className={'string'}><div>ReactNode</div></PageHeaderTools>);
   expect(asFragment()).toMatchSnapshot();
 });