@patternfly/react-core 5.2.0-prerelease.9 → 6.0.0-alpha.2

package/src/demos/examples/Nav/NavWithSubnav.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionTypes,
+  PageSidebar,
+  PageSidebarBody,
+  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 NavWithSubnav: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState<string | number>(0);
+  const [activeSubNavItem, setActiveSubNavItem] = React.useState<string | number>(7);
+
+  const onNavSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    selectedItem: {
+      groupId: number | string;
+      itemId: number | string;
+      to: string;
+    }
+  ) => setActiveItem(selectedItem.itemId);
+
+  const onSubNavSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    selectedItem: {
+      groupId: number | string;
+      itemId: number | string;
+      to: string;
+    }
+  ) => setActiveSubNavItem(selectedItem.itemId);
+
+  const PageNav = (
+    <Nav 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 Sidebar = (
+    <PageSidebar>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+  const pageId = 'main-content-page-layout-default-nav';
+  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const SubNav = (
+    <Nav onSelect={onSubNavSelect} aria-label="Subnav" variant="horizontal-subnav">
+      <NavList>
+        <NavItem preventDefault itemId={7} isActive={activeSubNavItem === 7} to="#">
+          Horizontal subnav item 1
+        </NavItem>
+        <NavItem preventDefault itemId={8} isActive={activeSubNavItem === 8} to="#">
+          Horizontal subnav item 2
+        </NavItem>
+        <NavItem preventDefault itemId={9} isActive={activeSubNavItem === 9} to="#">
+          Horizontal subnav item 3
+        </NavItem>
+        <NavItem preventDefault itemId={10} isActive={activeSubNavItem === 10} to="#">
+          Horizontal subnav item 4
+        </NavItem>
+        <NavItem preventDefault itemId={11} isActive={activeSubNavItem === 11} to="#">
+          Horizontal subnav item 5
+        </NavItem>
+        <NavItem preventDefault itemId={12} isActive={activeSubNavItem === 12} to="#">
+          Horizontal subnav item 6
+        </NavItem>
+        <NavItem preventDefault itemId={13} isActive={activeSubNavItem === 13} to="#">
+          Horizontal subnav item 7
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  return (
+    <React.Fragment>
+      <Page
+        header={<DashboardHeader />}
+        sidebar={Sidebar}
+        isManagedSidebar
+        skipToContent={PageSkipToContent}
+        mainContainerId={pageId}
+      >
+        <PageSection type={PageSectionTypes.subNav} isWidthLimited>
+          {SubNav}
+        </PageSection>
+        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
+          {DashboardBreadcrumb}
+        </PageSection>
+        <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 it’s relative line height of 1.5.
+            </Text>
+          </TextContent>
+        </PageSection>
+        <PageSection>
+          <Gallery hasGutter>
+            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+              <GalleryItem key={index}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </Page>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,95 @@
+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 }, (_value: any, index: React.Key) => (
+              <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

@@ -0,0 +1,91 @@
+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 }, (_value: any, index: React.Key) => (
+              <GalleryItem key={index}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </Page>
+    </React.Fragment>
+  );
+};

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

@@ -27,7 +27,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -270,7 +269,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
         }
       }}
     >
-      <PageSection variant={PageSectionVariants.light} isWidthLimited>
+      <PageSection isWidthLimited>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">This is a full page demo.</Text>

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

@@ -27,7 +27,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -266,7 +265,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       isBreadcrumbWidthLimited
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection variant={PageSectionVariants.light} isWidthLimited>
+        <PageSection isWidthLimited>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">This is a full page demo.</Text>

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

@@ -29,7 +29,6 @@ import {
   PageBreadcrumb,
   PageGroup,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -266,7 +265,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection variant={PageSectionVariants.light} isWidthLimited>
+        <PageSection isWidthLimited>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">This is a full page demo.</Text>

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -27,7 +27,6 @@ import {
   InputGroup,
   InputGroupItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   Stack,
   StackItem,
@@ -421,7 +420,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -27,7 +27,6 @@ import {
   InputGroup,
   InputGroupItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   Stack,
   StackItem,
@@ -421,7 +420,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">
@@ -431,7 +430,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
         </TextContent>
       </PageSection>
       <Divider component="div" />
-      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded}>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -27,7 +27,6 @@ import {
   InputGroup,
   InputGroupItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   Stack,
   StackItem,
@@ -421,7 +420,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">
@@ -431,7 +430,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
         </TextContent>
       </PageSection>
       <Divider component="div" />
-      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded} isInline>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -8,7 +8,6 @@ import {
   Card,
   CardBody,
   CardTitle,
-  PageSectionVariants,
   Modal,
   ModalVariant,
   Tab,
@@ -82,7 +81,7 @@ export const ModalTabs: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Projects</Text>
             <Text component="p">Click any project card to view Tabs within Modals.</Text>

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -127,7 +127,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited variant="light">
+      <PageSection type="tabs" isWidthLimited>
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -140,7 +140,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
           <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant="light">
+      <PageSection isWidthLimited>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>What's new panel</TabContentBody>
         </TabContent>

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -24,7 +24,6 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   ProgressSize,
   Tabs,
@@ -391,12 +390,12 @@ export const TablesAndTabs = () => {
   return (
     <DashboardWrapper>
       <React.Fragment>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <Title headingLevel="h1" size="2xl">
             Nodes
           </Title>
         </PageSection>
-        <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <PageSection padding={{ default: 'noPadding' }}>
           {toolbar}
           <Divider />
           {tabContent}

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -8,7 +8,6 @@ import {
   SelectList,
   SelectOption,
   PageSection,
-  PageSectionVariants,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -483,7 +482,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
 
   return (
     <DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={onPageResize}>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <Toolbar id="log-viewer-toolbar" inset={{ default: 'insetNone' }}>
           <ToolbarContent>{items}</ToolbarContent>
         </Toolbar>

package/src/demos/examples/Wizard/InModal.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  PageSection,
+  Modal,
+  ModalVariant,
+  Wizard,
+  WizardHeader,
+  WizardStep
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const WizardInModalDemo: React.FunctionComponent = () => (
+  <>
+    <DashboardWrapper hasPageTemplateTitle>
+      <PageSection isWidthLimited>
+        <Gallery hasGutter>
+          {Array.from({ length: 10 }).map((_, i) => (
+            <GalleryItem key={i}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </DashboardWrapper>
+    <Modal
+      isOpen
+      variant={ModalVariant.large}
+      showClose={false}
+      hasNoBodyWrapper
+      aria-describedby="wiz-modal-demo-description"
+      aria-labelledby="wiz-modal-demo-title"
+    >
+      <Wizard
+        header={
+          <WizardHeader
+            title="Wizard in modal"
+            titleId="wiz-modal-demo-title"
+            description="Simple wizard description"
+            descriptionId="wiz-modal-demo-description"
+            closeButtonAriaLabel="Close wizard"
+          />
+        }
+        height={400}
+      >
+        <WizardStep name="Information" id="wizard-step-1">
+          <p>Step 1 content</p>
+        </WizardStep>
+        <WizardStep
+          name="Configuration"
+          id="wizard-step-2"
+          steps={[
+            <WizardStep name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+              <p>Configuration substep A</p>
+            </WizardStep>,
+            <WizardStep name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+              <p>Configuration substep B</p>
+            </WizardStep>
+          ]}
+        />
+        <WizardStep name="Additional" id="wizard-step-3">
+          <p>Step 3 content</p>
+        </WizardStep>
+        <WizardStep name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          <p>Review step content</p>
+        </WizardStep>
+      </Wizard>
+    </Modal>
+  </>
+);