@patternfly/react-core 6.0.0-alpha.57 → 6.0.0-alpha.58

package/src/deprecated/components/PageHeader/PageHeaderTools.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Page/page';
-import { css } from '@patternfly/react-styles';
-
-export interface PageHeaderToolsProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered in page header tools */
-  children: React.ReactNode;
-  /** Additional classes added to the page header tools. */
-  className?: string;
-}
-
-export const PageHeaderTools: React.FunctionComponent<PageHeaderToolsProps> = ({
-  children,
-  className,
-  ...props
-}: PageHeaderToolsProps) => (
-  <div className={css(styles.pageHeaderTools, className)} {...props}>
-    {children}
-  </div>
-);
-PageHeaderTools.displayName = 'PageHeaderTools';

package/src/deprecated/components/PageHeader/PageHeaderToolsGroup.tsx

@@ -1,43 +0,0 @@
-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 '../../../components/Page/PageContext';
-
-export interface PageHeaderToolsGroupProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered in the page header tools group */
-  children: React.ReactNode;
-  /** Additional classes added to the page header tools group. */
-  className?: string;
-  /** Visibility at various breakpoints. */
-  visibility?: {
-    default?: 'hidden' | 'visible';
-    sm?: 'hidden' | 'visible';
-    md?: 'hidden' | 'visible';
-    lg?: 'hidden' | 'visible';
-    xl?: 'hidden' | 'visible';
-    '2xl'?: 'hidden' | 'visible';
-  };
-}
-
-export const PageHeaderToolsGroup: React.FunctionComponent<PageHeaderToolsGroupProps> = ({
-  children,
-  className,
-  visibility,
-  ...props
-}: PageHeaderToolsGroupProps) => {
-  const { width, getBreakpoint } = React.useContext(PageContext);
-  return (
-    <div
-      className={css(
-        styles.pageHeaderToolsGroup,
-        formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-PageHeaderToolsGroup.displayName = 'PageHeaderToolsGroup';

package/src/deprecated/components/PageHeader/PageHeaderToolsItem.tsx

@@ -1,47 +0,0 @@
-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 '../../../components/Page/PageContext';
-
-export interface PageHeaderToolsItemProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered in page header tools item. */
-  children: React.ReactNode;
-  /** Additional classes added to the page header tools item. */
-  className?: string;
-  /** HTML id of the PageHeaderToolsItem */
-  id?: string;
-  /** Visibility at various breakpoints. */
-  visibility?: {
-    default?: 'hidden' | 'visible';
-    sm?: 'hidden' | 'visible';
-    md?: 'hidden' | 'visible';
-    lg?: 'hidden' | 'visible';
-    xl?: 'hidden' | 'visible';
-    '2xl'?: 'hidden' | 'visible';
-  };
-}
-
-export const PageHeaderToolsItem: React.FunctionComponent<PageHeaderToolsItemProps> = ({
-  children,
-  id,
-  className,
-  visibility,
-  ...props
-}: PageHeaderToolsItemProps) => {
-  const { width, getBreakpoint } = React.useContext(PageContext);
-  return (
-    <div
-      className={css(
-        styles.pageHeaderToolsItem,
-        formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-        className
-      )}
-      id={id}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-PageHeaderToolsItem.displayName = 'PageHeaderToolsItem';

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

@@ -1,19 +0,0 @@
----
-id: Page
-section: components
-cssPrefix: pf-v5-c-page
-propComponents: ['PageHeader', 'PageHeaderTools', 'PageHeaderToolsGroup', 'PageHeaderToolsItem']
-deprecated: true
----
-
-import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';
-
-## 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/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Page, PageSidebar, PageSidebarBody, PageSection } from '@patternfly/react-core';
-import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';
-
-export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
-
-  const onNavToggle = (_event: React.MouseEvent) => {
-    setIsNavOpen(!isNavOpen);
-  };
-
-  const logoProps = {
-    href: 'https://patternfly.org',
-    target: '_blank'
-  };
-
-  const header = (
-    <PageHeaderDeprecated
-      logo="Logo"
-      logoProps={logoProps}
-      headerTools={<PageHeaderTools>header-tools</PageHeaderTools>}
-      showNavToggle
-      isNavOpen={isNavOpen}
-      onNavToggle={onNavToggle}
-      navToggleId="vertical-pageheader-toggle"
-    />
-  );
-
-  const sidebar = (
-    <PageSidebar isSidebarOpen={isNavOpen} id="vertical-pageheader-sidebar">
-      <PageSidebarBody>Navigation</PageSidebarBody>
-    </PageSidebar>
-  );
-
-  return (
-    <Page header={header} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
-    </Page>
-  );
-};

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

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

package/src/deprecated/components/PageHeader/tests/PageHeader.test.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { PageHeader } from '../PageHeader';
-
-test('Check page vertical layout example against snapshot', () => {
-  const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
-  const { asFragment } = render(Header);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Test that passed logoComponent overrides default', () => {
-  const Header = (
-    <PageHeader logo="Logo" logoComponent="div" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />
-  );
-  const { asFragment } = render(Header);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Test that logoComponent with href is an anchor', () => {
-  const Header = (
-    <PageHeader
-      logo="Logo"
-      logoProps={{ href: '#' }}
-      headerTools="PageHeaderTools | Avatar"
-      onNavToggle={() => undefined}
-    />
-  );
-  const { asFragment } = render(Header);
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/deprecated/components/PageHeader/tests/PageHeaderTools.test.tsx

@@ -1,17 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-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 className={'string'}>
-      <div>ReactNode</div>
-    </PageHeaderTools>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/deprecated/components/PageHeader/tests/PageHeaderToolsGroup.test.tsx

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

package/src/deprecated/components/PageHeader/tests/PageHeaderToolsItem.test.tsx

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

package/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeader.test.tsx.snap

@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Check page vertical layout example against snapshot 1`] = `
-<DocumentFragment>
-  <header
-    class="pf-v6-c-page__header"
-  >
-    <div
-      class="pf-v6-c-page__header-brand"
-    >
-      <span
-        class="pf-v6-c-page__header-brand-link"
-      >
-        Logo
-      </span>
-    </div>
-    PageHeaderTools | Avatar
-  </header>
-</DocumentFragment>
-`;
-
-exports[`Test that logoComponent with href is an anchor 1`] = `
-<DocumentFragment>
-  <header
-    class="pf-v6-c-page__header"
-  >
-    <div
-      class="pf-v6-c-page__header-brand"
-    >
-      <a
-        class="pf-v6-c-page__header-brand-link"
-        href="#"
-      >
-        Logo
-      </a>
-    </div>
-    PageHeaderTools | Avatar
-  </header>
-</DocumentFragment>
-`;
-
-exports[`Test that passed logoComponent overrides default 1`] = `
-<DocumentFragment>
-  <header
-    class="pf-v6-c-page__header"
-  >
-    <div
-      class="pf-v6-c-page__header-brand"
-    >
-      <div
-        class="pf-v6-c-page__header-brand-link"
-      >
-        Logo
-      </div>
-    </div>
-    PageHeaderTools | Avatar
-  </header>
-</DocumentFragment>
-`;

package/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeaderTools.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageHeaderTools should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-page__header-tools string"
-  >
-    <div>
-      ReactNode
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeaderToolsGroup.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageHeaderToolsGroup should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-page__header-tools-group string"
-  >
-    <div>
-      ReactNode
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeaderToolsItem.test.tsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageHeaderToolsItem should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-page__header-tools-item string"
-  >
-    children=
-    <div>
-      ReactNode
-    </div>
-  </div>
-</DocumentFragment>
-`;