@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.2

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>
+  </>
+);

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Flex,
+  Modal,
+  ModalVariant,
+  Wizard,
+  WizardHeader,
+  WizardStep,
+  DrawerColorVariant
+} from '@patternfly/react-core';
+
+export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+
+  const onExpand = () => {
+    if (drawerRef.current) {
+      drawerRef.current.focus();
+    }
+  };
+
+  const onOpenClick = () => {
+    setIsDrawerExpanded(true);
+  };
+
+  const onCloseClick = () => {
+    setIsDrawerExpanded(false);
+  };
+
+  const createStepContentWithDrawer = (stepName: string) => (
+    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
+      <DrawerContent
+        panelContent={
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+            <DrawerHead>
+              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+                Drawer content: {stepName}
+              </span>
+              <DrawerActions>
+                <DrawerCloseButton onClick={onCloseClick} />
+              </DrawerActions>
+            </DrawerHead>
+          </DrawerPanelContent>
+        }
+      >
+        <Flex
+          className="pf-v5-c-wizard__main-body"
+          direction={{ default: 'column' }}
+          spaceItems={{ default: 'spaceItemsLg' }}
+          height="100%"
+        >
+          {!isDrawerExpanded && (
+            <Button isInline variant="link" onClick={onOpenClick}>
+              Open drawer
+            </Button>
+          )}
+          <div>{stepName} content</div>
+        </Flex>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  return (
+    <Modal
+      isOpen
+      variant={ModalVariant.large}
+      showClose={false}
+      hasNoBodyWrapper
+      aria-describedby="wiz-modal-demo-description"
+      aria-labelledby="wiz-modal-demo-title"
+    >
+      <Wizard
+        header={
+          <WizardHeader
+            closeButtonAriaLabel="Close wizard"
+            title="Wizard in modal with drawer"
+            titleId="wiz-modal-demo-title"
+            description="Simple wizard description"
+            descriptionId="wiz-modal-demo-description"
+          />
+        }
+        height={400}
+      >
+        <WizardStep body={null} name="Information" id="wizard-step-1">
+          {createStepContentWithDrawer('Information step')}
+        </WizardStep>
+        <WizardStep
+          name="Configuration"
+          id="wizard-step-2"
+          steps={[
+            <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+              {createStepContentWithDrawer('Configuration substep A')}
+            </WizardStep>,
+            <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+              {createStepContentWithDrawer('Configuration substep B')}
+            </WizardStep>
+          ]}
+        />
+        <WizardStep body={null} name="Additional" id="wizard-step-3">
+          {createStepContentWithDrawer('Additional step')}
+        </WizardStep>
+        <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          {createStepContentWithDrawer('Review step')}
+        </WizardStep>
+      </Wizard>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import {
+  Button,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerHead,
+  Flex,
+  Modal,
+  ModalVariant,
+  Text,
+  TextContent,
+  TextVariants,
+  Wizard,
+  WizardHeader,
+  WizardStep,
+  DrawerColorVariant
+} from '@patternfly/react-core';
+
+export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLSpanElement | null>(null);
+
+  const onExpand = () => {
+    if (drawerRef.current) {
+      drawerRef.current.focus();
+    }
+  };
+
+  const onOpenClick = () => {
+    setIsDrawerExpanded(true);
+  };
+
+  const onCloseClick = () => {
+    setIsDrawerExpanded(false);
+  };
+
+  const createStepContentWithDrawer = (stepName: string) => (
+    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
+      <DrawerContent
+        panelContent={
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+            <DrawerHead>
+              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+                Drawer content: {stepName}
+              </span>
+              <DrawerActions>
+                <DrawerCloseButton onClick={onCloseClick} />
+              </DrawerActions>
+            </DrawerHead>
+          </DrawerPanelContent>
+        }
+      >
+        <Flex
+          className="pf-v5-c-wizard__main-body"
+          direction={{ default: 'column' }}
+          spaceItems={{ default: 'spaceItemsLg' }}
+          height="100%"
+        >
+          <TextContent>
+            <Text component={TextVariants.h1}>{stepName} content</Text>
+            <p>
+              Wizard description goes here. If you need more assistance,{' '}
+              <Button isInline variant="link" onClick={onOpenClick}>
+                see more information
+              </Button>{' '}
+              in the side drawer.{' '}
+            </p>
+          </TextContent>
+        </Flex>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  return (
+    <Modal
+      isOpen
+      variant={ModalVariant.large}
+      showClose={false}
+      hasNoBodyWrapper
+      aria-describedby="wiz-modal-demo-description"
+      aria-labelledby="wiz-modal-demo-title"
+    >
+      <Wizard
+        header={
+          <WizardHeader
+            closeButtonAriaLabel="Close wizard"
+            title="Wizard in modal with drawer and info step"
+            titleId="wiz-modal-demo-title"
+            description="Simple wizard description"
+            descriptionId="wiz-modal-demo-description"
+          />
+        }
+        height={400}
+      >
+        <WizardStep body={null} name="Information" id="wizard-step-1">
+          {createStepContentWithDrawer('Information step')}
+        </WizardStep>
+        <WizardStep
+          name="Configuration"
+          id="wizard-step-2"
+          steps={[
+            <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+              {createStepContentWithDrawer('Configuration substep A')}
+            </WizardStep>,
+            <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+              {createStepContentWithDrawer('Configuration substep B')}
+            </WizardStep>
+          ]}
+        />
+        <WizardStep body={null} name="Additional" id="wizard-step-3">
+          {createStepContentWithDrawer('Additional step')}
+        </WizardStep>
+        <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+          {createStepContentWithDrawer('Review step')}
+        </WizardStep>
+      </Wizard>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { PageSection, PageSectionTypes, Wizard, WizardStep } from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const WizardFullPage: React.FunctionComponent = () => (
+  <React.Fragment>
+    <DashboardWrapper hasPageTemplateTitle>
+      <PageSection type={PageSectionTypes.wizard}>
+        <Wizard>
+          <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>
+      </PageSection>
+    </DashboardWrapper>
+  </React.Fragment>
+);

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

@@ -0,0 +1,195 @@
+import React from 'react';
+import {
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerHead,
+  Flex,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionTypes,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  Text,
+  TextContent,
+  Masthead,
+  PageToggleButton,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  Wizard,
+  WizardStep,
+  DrawerColorVariant
+} from '@patternfly/react-core';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
+
+  const onExpand = () => {
+    if (drawerRef.current) {
+      drawerRef.current.focus();
+    }
+  };
+
+  const onOpenClick = () => {
+    setIsDrawerExpanded(true);
+  };
+
+  const onCloseClick = () => {
+    setIsDrawerExpanded(false);
+  };
+
+  const onNavSelect = (_event: React.FormEvent<HTMLElement>, result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavItem itemId={0} isActive={activeItem === 0}>
+          System Panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1}>
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2}>
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3}>
+          Network Services
+        </NavItem>
+        <NavItem itemId={4} isActive={activeItem === 4}>
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const Header = (
+    <Masthead id="basic">
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+    </Masthead>
+  );
+
+  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 PageBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem>Section home</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#" isActive>
+        Section landing
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+
+  const createStepContentWithDrawer = (stepName: string) => (
+    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
+      <DrawerContent
+        panelContent={
+          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+            <DrawerHead>
+              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+                Drawer content: {stepName}
+              </span>
+              <DrawerActions>
+                <DrawerCloseButton onClick={onCloseClick} />
+              </DrawerActions>
+            </DrawerHead>
+          </DrawerPanelContent>
+        }
+      >
+        <Flex
+          className="pf-v5-c-wizard__main-body"
+          direction={{ default: 'column' }}
+          spaceItems={{ default: 'spaceItemsLg' }}
+          height="100%"
+        >
+          {!isDrawerExpanded && (
+            <Button isInline variant="link" onClick={onOpenClick}>
+              Open drawer
+            </Button>
+          )}
+          <div>{stepName} content</div>
+        </Flex>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  return (
+    <React.Fragment>
+      <Page
+        header={Header}
+        sidebar={Sidebar}
+        isManagedSidebar
+        skipToContent={PageSkipToContent}
+        breadcrumb={PageBreadcrumb}
+        mainContainerId={pageId}
+      >
+        <PageSection>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">A demo of a wizard in a page.</Text>
+          </TextContent>
+        </PageSection>
+        <PageSection type={PageSectionTypes.wizard}>
+          <Wizard>
+            <WizardStep body={null} name="Information" id="wizard-step-1">
+              {createStepContentWithDrawer('Information step')}
+            </WizardStep>
+            <WizardStep
+              name="Configuration"
+              id="wizard-step-2"
+              steps={[
+                <WizardStep body={null} name="Substep A" id="wizard-step-2a" key="wizard-step-2a">
+                  {createStepContentWithDrawer('Configuration substep A')}
+                </WizardStep>,
+                <WizardStep body={null} name="Substep B" id="wizard-step-2b" key="wizard-step-2b">
+                  {createStepContentWithDrawer('Configuration substep B')}
+                </WizardStep>
+              ]}
+            />
+            <WizardStep body={null} name="Additional" id="wizard-step-3">
+              {createStepContentWithDrawer('Additional step')}
+            </WizardStep>
+            <WizardStep body={null} name="Review" id="wizard-step-4" footer={{ nextButtonText: 'Finish' }}>
+              {createStepContentWithDrawer('Review step')}
+            </WizardStep>
+          </Wizard>
+        </PageSection>
+      </Page>
+    </React.Fragment>
+  );
+};