@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

package/src/components/Card/examples/CardDeprecatedSelectableA11yHighlight.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Card, CardTitle, CardBody } from '@patternfly/react-core';
-
-export const CardLegacySelectableA11yHighlight: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string>('');
-
-  const onKeyDown = (event: React.KeyboardEvent) => {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-    if ([' ', 'Enter'].includes(event.key)) {
-      event.preventDefault();
-      const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-      setSelected(newSelected);
-    }
-  };
-
-  const onClick = (event: React.MouseEvent) => {
-    const newSelected = event.currentTarget.id === selected ? '' : event.currentTarget.id;
-    setSelected(newSelected);
-  };
-
-  const onChange = (_event: React.FormEvent<HTMLInputElement>, labelledById: string) => {
-    const newSelected = labelledById === selected ? '' : labelledById;
-    setSelected(newSelected);
-  };
-
-  return (
-    <React.Fragment>
-      <Card
-        id="a11y-selectable-first-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        hasSelectableInput
-        onSelectableInputChange={onChange}
-        isSelectableRaised
-        isSelected={selected === 'a11y-selectable-first-card'}
-      >
-        <CardTitle>Selectable card with proper accessibility considerations</CardTitle>
-        <CardBody>
-          When using a screen reader a checkbox will become navigable that indicates this card is selectable and
-          communicate if it is currently selected.
-        </CardBody>
-      </Card>
-      <br />
-      <Card
-        id="a11y-selectable-second-card"
-        onKeyDown={onKeyDown}
-        onClick={onClick}
-        isSelectableRaised
-        isSelected={selected === 'a11y-selectable-second-card'}
-      >
-        <CardTitle>Selectable card without proper accessibility considerations</CardTitle>
-        <CardBody>
-          When using a screen reader there are no indications that this card is selectable or if it is currently
-          selected.
-        </CardBody>
-      </Card>
-    </React.Fragment>
-  );
-};

package/src/components/EmptyState/examples/EmptyStateCustomIconColor.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon } from '@patternfly/react-core';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-/* eslint-disable camelcase */
-import global_success_color_100 from '@patternfly/react-tokens/dist/esm/global_success_color_100';
-
-export const EmptyStateCustomIconColor: React.FunctionComponent = () => (
-  <EmptyState>
-    <EmptyStateHeader
-      titleText="Custom icon color"
-      headingLevel="h4"
-      icon={<EmptyStateIcon icon={CheckIcon} color={global_success_color_100.var} />}
-    />
-    <EmptyStateBody>
-      This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to
-      use but flexible enough to meet a variety of needs.
-    </EmptyStateBody>
-  </EmptyState>
-);

package/src/components/HelperText/examples/HelperTextDynamic.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-export const HelperTextDynamic: React.FunctionComponent = () => (
-  <React.Fragment>
-    <HelperText>
-      <HelperTextItem isDynamic>This is default helper text</HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="indeterminate">
-        This is indeterminate helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="warning">
-        This is warning helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="success">
-        This is success helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="error">
-        This is error helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="error" icon={<TimesIcon />}>
-        This is error helper text with a custom icon
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem isDynamic variant="error" hasIcon={false}>
-        This is error helper text with no icon
-      </HelperTextItem>
-    </HelperText>
-  </React.Fragment>
-);

package/src/components/HelperText/examples/HelperTextDynamicList.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-export const HelperTextDynamicList: React.FunctionComponent = () => (
-  <HelperText component="ul">
-    <HelperTextItem isDynamic variant="success" component="li">
-      Must be at least 14 characters
-    </HelperTextItem>
-    <HelperTextItem isDynamic variant="error" component="li">
-      Cannot contain any variation of the word "redhat"
-    </HelperTextItem>
-    <HelperTextItem isDynamic variant="success" component="li">
-      Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
-    </HelperTextItem>
-  </HelperText>
-);

package/src/components/HelperText/examples/HelperTextMultipleStatic.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-export const HelperTextMultipleStatic: React.FunctionComponent = () => (
-  <HelperText>
-    <HelperTextItem>This is default helper text</HelperTextItem>
-    <HelperTextItem>This is another default helper text in the same block</HelperTextItem>
-    <HelperTextItem>And this is more default text in the same block</HelperTextItem>
-  </HelperText>
-);

package/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-export const HelperTextStaticWithDefaultIcon: React.FunctionComponent = () => (
-  <React.Fragment>
-    <HelperText>
-      <HelperTextItem hasIcon>This is default helper text</HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem variant="indeterminate" hasIcon>
-        This is indeterminate helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem variant="warning" hasIcon>
-        This is warning helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem variant="success" hasIcon>
-        This is success helper text
-      </HelperTextItem>
-    </HelperText>
-    <HelperText>
-      <HelperTextItem variant="error" hasIcon>
-        This is error helper text
-      </HelperTextItem>
-    </HelperText>
-  </React.Fragment>
-);

package/src/components/Nav/examples/NavLegacyTertiary.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Nav, NavItem, NavList } from '@patternfly/react-core';
-
-export const NavLegacyTertiary: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-
-  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
-    setActiveItem(result.itemId as number);
-  };
-
-  return (
-    <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary local">
-      <NavList>
-        {Array.from({ length: 10 }).map(function (_value, index) {
-          const num = index + 1;
-          return (
-            <NavItem
-              preventDefault
-              key={num}
-              itemId={num}
-              isActive={activeItem === num}
-              id={`legacy-tertiary-${num}`}
-              to={`#legacy-tertiary-${num}`}
-            >
-              Tertiary nav item {num}
-            </NavItem>
-          );
-        })}
-      </NavList>
-    </Nav>
-  );
-};

package/src/components/NotificationBadge/examples/notificationBadge.css

@@ -1,4 +0,0 @@
-#ws-react-c-notification-badge-basic,
-#ws-react-c-notification-badge-with-count {
-  background-color: var(--pf-v5-global--BackgroundColor--dark-100);
-}

package/src/components/Page/examples/PageTertiaryNav.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import {
-  Page,
-  Masthead,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  PageSection,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem
-} from '@patternfly/react-core';
-
-export const PageTertiaryNav: React.FunctionComponent = () => {
-  const headerToolbar = (
-    <Toolbar id="tertiary-toolbar">
-      <ToolbarContent>
-        <ToolbarItem>header-tools</ToolbarItem>
-      </ToolbarContent>
-    </Toolbar>
-  );
-
-  const header = (
-    <Masthead display={{ default: 'stack' }} inset={{ default: 'insetXs' }}>
-      <MastheadMain>
-        <MastheadBrand href="https://patternfly.org" target="_blank">
-          Logo
-        </MastheadBrand>
-      </MastheadMain>
-      <MastheadContent>{headerToolbar}</MastheadContent>
-    </Masthead>
-  );
-
-  return (
-    <Page header={header} tertiaryNav="Navigation">
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
-    </Page>
-  );
-};

package/src/components/Page/examples/page.css

@@ -1,3 +0,0 @@
-.pf-v5-c-page__sidebar-body {
-  color: var(--pf-v5-global--Color--light-100);
-}

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.test.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolbarItem should map width breakpoints 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-toolbar__item"
-    style="--pf-v5-c-toolbar__item--Width: 100px; --pf-v5-c-toolbar__item--Width-on-sm: 80px; --pf-v5-c-toolbar__item--Width-on-md: 150px; --pf-v5-c-toolbar__item--Width-on-lg: 200px; --pf-v5-c-toolbar__item--Width-on-xl: 250px; --pf-v5-c-toolbar__item--Width-on-2xl: 300px;"
-  >
-    Test
-  </div>
-</DocumentFragment>
-`;

package/src/components/Toolbar/examples/ToolbarWidths.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
-import { Button } from '@patternfly/react-core';
-
-export const ToolbarWidths: React.FunctionComponent = () => {
-  const widths = {
-    default: '100px',
-    sm: '80px',
-    md: '150px',
-    lg: '200px',
-    xl: '250px',
-    '2xl': '300px'
-  };
-
-  const items = (
-    <React.Fragment>
-      <ToolbarItem widths={widths}>
-        <Button variant="secondary" style={{ width: '100%' }}>
-          Action
-        </Button>
-      </ToolbarItem>
-    </React.Fragment>
-  );
-
-  return (
-    <Toolbar id="toolbar-widths">
-      <ToolbarContent>{items}</ToolbarContent>
-    </Toolbar>
-  );
-};

package/src/demos/examples/Nav/deprecated/NavLight.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardBody,
-  Gallery,
-  GalleryItem,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent,
-  TextContent,
-  Text
-} from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-export const NavLight: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-
-  const onNavSelect = (
-    _event: React.FormEvent<HTMLInputElement>,
-    selectedItem: {
-      groupId: number | string;
-      itemId: number | string;
-      to: string;
-    }
-  ) => setActiveItem(selectedItem.itemId);
-
-  const PageNav = (
-    <Nav onSelect={onNavSelect} aria-label="Nav" theme="light">
-      <NavList>
-        {/* Preventing default click behavior on each NavItem for demo purposes only */}
-        <NavItem preventDefault itemId={0} isActive={activeItem === 0} to="#">
-          System Panel
-        </NavItem>
-        <NavItem preventDefault itemId={1} isActive={activeItem === 1} to="#">
-          Policy
-        </NavItem>
-        <NavItem preventDefault itemId={2} isActive={activeItem === 2} to="#">
-          Authentication
-        </NavItem>
-        <NavItem preventDefault itemId={3} isActive={activeItem === 3} to="#">
-          Network Services
-        </NavItem>
-        <NavItem preventDefault itemId={4} isActive={activeItem === 4} to="#">
-          Server
-        </NavItem>
-      </NavList>
-    </Nav>
-  );
-
-  const Sidebar = (
-    <PageSidebar theme="light">
-      <PageSidebarBody>{PageNav}</PageSidebarBody>
-    </PageSidebar>
-  );
-  const pageId = 'main-content-page-layout-simple-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
-
-  return (
-    <React.Fragment>
-      <Page
-        header={<DashboardHeader />}
-        sidebar={Sidebar}
-        isManagedSidebar
-        skipToContent={PageSkipToContent}
-        mainContainerId={pageId}
-      >
-        <PageSection>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of its relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <PageSection>
-          <Gallery hasGutter>
-            {Array.from({ length: 10 }).map((_value, index) => (
-              <GalleryItem key={index}>
-                <Card>
-                  <CardBody>This is a card</CardBody>
-                </Card>
-              </GalleryItem>
-            ))}
-          </Gallery>
-        </PageSection>
-      </Page>
-    </React.Fragment>
-  );
-};

package/src/demos/examples/Nav/deprecated/NavTertiary.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  CardBody,
-  Gallery,
-  GalleryItem,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  SkipToContent,
-  TextContent,
-  Text
-} from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-export const NavTertiary: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-
-  const onNavSelect = (
-    _event: React.FormEvent<HTMLInputElement>,
-    selectedItem: {
-      groupId: number | string;
-      itemId: number | string;
-      to: string;
-    }
-  ) => setActiveItem(selectedItem.itemId);
-
-  const PageNav = (
-    <Nav variant="tertiary" onSelect={onNavSelect} aria-label="Nav">
-      <NavList>
-        {/* Preventing default click behavior on each NavItem for demo purposes only */}
-        <NavItem preventDefault itemId={0} isActive={activeItem === 0} to="#">
-          System Panel
-        </NavItem>
-        <NavItem preventDefault itemId={1} isActive={activeItem === 1} to="#">
-          Policy
-        </NavItem>
-        <NavItem preventDefault itemId={2} isActive={activeItem === 2} to="#">
-          Authentication
-        </NavItem>
-        <NavItem preventDefault itemId={3} isActive={activeItem === 3} to="#">
-          Network Services
-        </NavItem>
-        <NavItem preventDefault itemId={4} isActive={activeItem === 4} to="#">
-          Server
-        </NavItem>
-      </NavList>
-    </Nav>
-  );
-
-  const pageId = 'main-content-page-layout-tertiary-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-
-  return (
-    <React.Fragment>
-      <Page
-        header={<DashboardHeader />}
-        breadcrumb={DashboardBreadcrumb}
-        tertiaryNav={PageNav}
-        isManagedSidebar
-        isTertiaryNavWidthLimited
-        skipToContent={PageSkipToContent}
-        mainContainerId={pageId}
-      >
-        <PageSection>
-          <TextContent>
-            <Text component="h1">Main title</Text>
-            <Text component="p">
-              Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-              of its relative line height of 1.5.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <PageSection>
-          <Gallery hasGutter>
-            {Array.from({ length: 10 }).map((_value, index) => (
-              <GalleryItem key={index}>
-                <Card>
-                  <CardBody>This is a card</CardBody>
-                </Card>
-              </GalleryItem>
-            ))}
-          </Gallery>
-        </PageSection>
-      </Page>
-    </React.Fragment>
-  );
-};