@patternfly/react-core 4.222.3 → 4.222.4

package/src/demos/Wizard/WizardDemo.md

@@ -3,30 +3,9 @@ id: Wizard
 section: components
 ---
 
-import {
-Brand,
-Breadcrumb,
-BreadcrumbItem,
-Modal,
-ModalVariant,
-Nav,
-NavItem,
-NavList,
-Page,
-PageToggleButton,
-PageSection,
-PageSectionTypes,
-PageSectionVariants,
-PageSidebar,
-Progress,
-SkipToContent,
-Text,
-TextContent,
-Title,
-Wizard
-} from '@patternfly/react-core';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import DashboardWrapper from '../examples/DashboardWrapper';
 
 ## Demos
 
@@ -34,10 +13,36 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 ```js isFullscreen
 import React from 'react';
-import { Modal, ModalVariant, Wizard } from '@patternfly/react-core';
+import {
+  Card,
+  CardBody,
+  Gallery,
+  GalleryItem,
+  Nav,
+  NavItem,
+  NavList,
+  PageSection,
+  Wizard,
+  Modal,
+  ModalVariant
+} from '@patternfly/react-core';
+import DashboardWrapper from '../examples/DashboardWrapper';
 
 class BasicWizardDemo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItem: 0
+    };
+    this.onNavSelect = result => {
+      this.setState({
+        activeItem: result.itemId
+      });
+    };
+  }
   render() {
+    const { activeItem } = this.state;
+
     const steps = [
       { id: 0, name: 'Information', component: <p>Step 1 content</p> },
       {
@@ -62,25 +67,40 @@ class BasicWizardDemo extends React.Component {
     ];
     const title = 'Basic wizard';
     return (
-      <Modal
-        isOpen
-        variant={ModalVariant.large}
-        showClose={false}
-        hasNoBodyWrapper
-        aria-describedby="wiz-modal-demo-description"
-        aria-labelledby="wiz-modal-demo-title"
-      >
-        <Wizard
-          navAriaLabel={`${title} steps`}
-          mainAriaLabel={`${title} content`}
-          titleId="wiz-modal-demo-title"
-          descriptionId="wiz-modal-demo-description"
-          title="Simple wizard in modal"
-          description="Simple wizard description"
-          steps={steps}
-          height={400}
-        />
-      </Modal>
+      <React.Fragment>
+        <DashboardWrapper hasPageTemplateTitle>
+          <PageSection isWidthLimited>
+            <Gallery hasGutter>
+              {Array.apply(0, Array(10)).map((x, 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
+            navAriaLabel={`${title} steps`}
+            mainAriaLabel={`${title} content`}
+            titleId="wiz-modal-demo-title"
+            descriptionId="wiz-modal-demo-description"
+            title="Simple wizard in modal"
+            description="Simple wizard description"
+            steps={steps}
+            height={400}
+          />
+        </Modal>
+      </React.Fragment>
     );
   }
 }
@@ -91,31 +111,17 @@ class BasicWizardDemo extends React.Component {
 ```js isFullscreen
 import React from 'react';
 import {
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
   Nav,
   NavItem,
   NavList,
-  Page,
   PageSection,
   PageSectionTypes,
   PageSectionVariants,
-  PageSidebar,
-  Progress,
-  SkipToContent,
-  Text,
-  TextContent,
-  Title,
-  Wizard,
-  Masthead,
-  PageToggleButton,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand
+  Wizard
 } from '@patternfly/react-core';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import DashboardWrapper from '../examples/DashboardWrapper';
 
 class FullPageWizard extends React.Component {
   constructor(props) {
@@ -131,54 +137,6 @@ class FullPageWizard extends React.Component {
   }
   render() {
     const { activeItem } = this.state;
-    const PageNav = (
-      <Nav onSelect={this.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={imgBrand} alt="Patternfly logo" />
-          </MastheadBrand>
-        </MastheadMain>
-      </Masthead>
-    );
-    const Sidebar = <PageSidebar nav={PageNav} />;
-    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 steps = [
       { id: 0, name: 'Information', component: <p>Step 1 content</p> },
@@ -206,24 +164,11 @@ class FullPageWizard extends React.Component {
 
     return (
       <React.Fragment>
-        <Page
-          header={Header}
-          sidebar={Sidebar}
-          isManagedSidebar
-          skipToContent={PageSkipToContent}
-          breadcrumb={PageBreadcrumb}
-          mainContainerId={pageId}
-        >
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">A demo of a wizard in a page.</Text>
-            </TextContent>
-          </PageSection>
+        <DashboardWrapper hasPageTemplateTitle>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
             <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} />
           </PageSection>
-        </Page>
+        </DashboardWrapper>
       </React.Fragment>
     );
   }