@breakaway/react-core
Version:
This library provides a set of common React components for use with the PatternFly reference implementation.
1,208 lines (1,133 loc) • 34.1 kB
Markdown
---
id: Wizard
section: components
---
import imgBrand from './imgBrand.svg';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
## Demos
### In modal
```js isFullscreen
import React from 'react';
import {
Card,
CardBody,
Gallery,
GalleryItem,
Nav,
NavItem,
NavList,
PageSection,
Wizard,
Modal,
ModalVariant
} from '@patternfly/react-core';
import DashboardWrapper from '@patternfly/react-core/src/demos/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> },
{
id: 1,
name: 'Configuration',
steps: [
{
id: 2,
name: 'Substep A',
component: <p>Configuration substep A</p>
},
{
id: 3,
name: 'Substep B',
component: <p>Configuration substep B</p>
}
],
component: <p>Step 2 content</p>
},
{ id: 4, name: 'Additional', component: <p>Step 3 content</p> },
{ id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
];
const title = 'Basic wizard';
return (
<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>
);
}
}
```
### In modal, with drawer
```js isFullscreen
import React from 'react';
import {
Button,
DrawerActions,
DrawerCloseButton,
DrawerPanelContent,
DrawerHead,
Modal,
ModalVariant,
Wizard
} from '@patternfly/react-core';
class WizardModalWithDrawerDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
isDrawerExpanded: false
};
this.drawerRef = React.createRef();
this.onExpand = () => {
this.drawerRef.current && this.drawerRef.current.focus();
};
this.onOpenClick = () => {
this.setState({
isDrawerExpanded: true
});
};
this.onCloseClick = () => {
this.setState({
isDrawerExpanded: false
});
};
}
render() {
const { isDrawerExpanded } = this.state;
const informationPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Information panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const configSubstepAPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Configuration substep A content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const configSubstepBPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Configuration substep B content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const additionalPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Additional panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const reviewPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Review panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const drawerToggleButton = (
<Button className="pf-u-float-right pf-u-ml-md" isInline variant="link" onClick={this.onOpenClick}>
Open drawer
</Button>
);
const steps = [
{
id: 0,
name: 'Information',
component: <p>Step 1 content</p>,
drawerPanelContent: informationPanelContent,
drawerToggleButton: drawerToggleButton
},
{
id: 1,
name: 'Configuration',
steps: [
{
id: 2,
name: 'Substep A',
component: <p>Configuration substep A</p>,
drawerPanelContent: configSubstepAPanelContent,
drawerToggleButton: drawerToggleButton
},
{
id: 3,
name: 'Substep B',
component: <p>Configuration substep B</p>,
drawerPanelContent: configSubstepBPanelContent,
drawerToggleButton: drawerToggleButton
}
]
},
{
id: 4,
name: 'Additional',
component: <p>Step 3 content</p>,
drawerPanelContent: additionalPanelContent,
drawerToggleButton: drawerToggleButton
},
{
id: 5,
name: 'Review',
component: <p>Review step content</p>,
drawerPanelContent: reviewPanelContent,
drawerToggleButton: drawerToggleButton,
nextButtonText: 'Finish'
}
];
const title = 'Wizard modal with Drawer';
const panelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
drawer-panel
</span>
</DrawerHead>
</DrawerPanelContent>
);
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`}
hasDrawer
isDrawerExpanded={isDrawerExpanded}
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>
);
}
}
```
### In modal, with drawer and informational step
```js isFullscreen
import React from 'react';
import {
Button,
DrawerActions,
DrawerCloseButton,
DrawerPanelContent,
DrawerHead,
Modal,
ModalVariant,
Text,
TextContent,
Wizard
} from '@patternfly/react-core';
class WizardModalWithDrawerDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
isDrawerExpanded: false
};
this.drawerRef = React.createRef();
this.onExpand = () => {
this.drawerRef.current && this.drawerRef.current.focus();
};
this.onOpenClick = () => {
this.setState({
isDrawerExpanded: true
});
};
this.onCloseClick = () => {
this.setState({
isDrawerExpanded: false
});
};
}
render() {
const { isDrawerExpanded } = this.state;
const informationPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Information panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const configSubstepAPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Configuration substep A content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const configSubstepBPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Configuration substep B content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const additionalPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Additional panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const reviewPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Review panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const drawerToggleButton = (
<Button className="pf-u-float-right pf-u-ml-md" isInline variant="link" onClick={this.onOpenClick}>
Open drawer
</Button>
);
const steps = [
{
id: 0,
name: 'Information',
component: (
<TextContent>
<Text component={TextVariants.h1}>Information step content</Text>
<p>
Wizard description goes here. If you need more assistance,{' '}
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>{' '}
in the side drawer.{' '}
</p>
</TextContent>
),
drawerPanelContent: informationPanelContent
},
{
id: 1,
name: 'Configuration',
steps: [
{
id: 2,
name: 'Substep A',
component: (
<TextContent>
<Text component={TextVariants.h1}>Configuration substep A content</Text>
<p>
Wizard description goes here. If you need more assistance,
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>
in the side drawer.
</p>
</TextContent>
),
drawerPanelContent: configSubstepAPanelContent
},
{
id: 3,
name: 'Substep B',
component: (
<TextContent>
<Text component={TextVariants.h1}>Configuration substep B content</Text>
<p>
Wizard description goes here. If you need more assistance,
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>
in the side drawer.
</p>
</TextContent>
),
drawerPanelContent: configSubstepBPanelContent
}
]
},
{
id: 4,
name: 'Additional',
component: (
<TextContent>
<Text component={TextVariants.h1}>Additional step content</Text>
<p>
Wizard description goes here. If you need more assistance,
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>
in the side drawer.
</p>
</TextContent>
),
drawerPanelContent: additionalPanelContent
},
{
id: 5,
name: 'Review',
component: (
<TextContent>
<Text component={TextVariants.h1}>Review step content</Text>
<p>
Wizard description goes here. If you need more assistance,
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>
in the side drawer.
</p>
</TextContent>
),
nextButtonText: 'Finish',
drawerPanelContent: reviewPanelContent
}
];
const title = 'Wizard modal with Drawer';
const panelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
drawer-panel
</span>
</DrawerHead>
</DrawerPanelContent>
);
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`}
hasDrawer
isDrawerExpanded={isDrawerExpanded}
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>
);
}
}
```
### In page
```js isFullscreen
import React from 'react';
import {
Nav,
NavItem,
NavList,
PageSection,
PageSectionTypes,
PageSectionVariants,
Wizard
} from '@patternfly/react-core';
import imgBrand from './imgBrand.svg';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
class FullPageWizard 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> },
{
id: 1,
name: 'Configuration',
steps: [
{
id: 2,
name: 'Substep A',
component: <p>Configuration substep A</p>
},
{
id: 3,
name: 'Substep B',
component: <p>Configuration substep B</p>
}
],
component: <p>Step 2 content</p>
},
{ id: 4, name: 'Additional', component: <p>Step 3 content</p> },
{ id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
];
const title = 'Basic wizard';
return (
<React.Fragment>
<DashboardWrapper hasPageTemplateTitle>
<PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
<Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} />
</PageSection>
</DashboardWrapper>
</React.Fragment>
);
}
}
```
### In page, with drawer
```js isFullscreen
import React from 'react';
import {
Brand,
Breadcrumb,
BreadcrumbItem,
Button,
DrawerActions,
DrawerCloseButton,
DrawerHead,
DrawerPanelContent,
Nav,
NavItem,
NavList,
Page,
PageSection,
PageSectionTypes,
PageSectionVariants,
PageSidebar,
Progress,
SkipToContent,
Text,
TextContent,
Title,
Wizard,
Masthead,
PageToggleButton,
MastheadToggle,
MastheadMain,
MastheadBrand
} from '@patternfly/react-core';
import imgBrand from './imgBrand.svg';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
class FullPageWizard extends React.Component {
constructor(props) {
super(props);
this.state = {
isDrawerExpanded: false,
activeItem: 0
};
this.drawerRef = React.createRef();
this.onExpand = () => {
this.drawerRef.current && this.drawerRef.current.focus();
};
this.onOpenClick = () => {
this.setState({
isDrawerExpanded: true
});
};
this.onCloseClick = () => {
this.setState({
isDrawerExpanded: false
});
};
this.onNavSelect = result => {
this.setState({
activeItem: result.itemId
});
};
}
render() {
const { activeItem, isDrawerExpanded } = 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 informationPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Information panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const configSubstepAPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Configuration substep A content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const configSubstepBPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Configuration substep B content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const additionalPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Additional panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const reviewPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Review panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const drawerToggleButton = (
<Button className="pf-u-float-right pf-u-ml-md" isInline variant="link" onClick={this.onOpenClick}>
Open drawer
</Button>
);
const steps = [
{
id: 0,
name: 'Information',
component: <p>Step 1 content</p>,
drawerPanelContent: informationPanelContent,
drawerToggleButton: drawerToggleButton
},
{
id: 1,
name: 'Configuration',
steps: [
{
id: 2,
name: 'Substep A',
component: <p>Configuration substep A</p>,
drawerPanelContent: configSubstepAPanelContent,
drawerToggleButton: drawerToggleButton
},
{
id: 3,
name: 'Substep B',
component: <p>Configuration substep B</p>,
drawerPanelContent: configSubstepBPanelContent,
drawerToggleButton: drawerToggleButton
}
]
},
{
id: 4,
name: 'Additional',
component: <p>Step 3 content</p>,
drawerPanelContent: additionalPanelContent,
drawerToggleButton: drawerToggleButton
},
{
id: 5,
name: 'Review',
component: <p>Review step content</p>,
nextButtonText: 'Finish',
drawerPanelContent: reviewPanelContent,
drawerToggleButton: drawerToggleButton
}
];
const title = 'Basic wizard';
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>
<PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
<Wizard
hasDrawer
isDrawerExpanded={isDrawerExpanded}
navAriaLabel={`${title} steps`}
mainAriaLabel={`${title} content`}
steps={steps}
/>
</PageSection>
</Page>
</React.Fragment>
);
}
}
```
### In page, with drawer and informational step
```js isFullscreen
import React from 'react';
import {
Brand,
Breadcrumb,
BreadcrumbItem,
Button,
DrawerActions,
DrawerCloseButton,
DrawerHead,
DrawerPanelContent,
Nav,
NavItem,
NavList,
Page,
PageSection,
PageSectionTypes,
PageSectionVariants,
PageSidebar,
Progress,
SkipToContent,
Text,
TextContent,
Title,
Wizard,
Masthead,
PageToggleButton,
MastheadToggle,
MastheadMain,
MastheadBrand
} from '@patternfly/react-core';
import imgBrand from './imgBrand.svg';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
class FullPageWizard extends React.Component {
constructor(props) {
super(props);
this.state = {
isDrawerExpanded: false,
activeItem: 0
};
this.drawerRef = React.createRef();
this.onExpand = () => {
this.drawerRef.current && this.drawerRef.current.focus();
};
this.onOpenClick = () => {
this.setState({
isDrawerExpanded: true
});
};
this.onCloseClick = () => {
this.setState({
isDrawerExpanded: false
});
};
this.onNavSelect = result => {
this.setState({
activeItem: result.itemId
});
};
}
render() {
const { activeItem, isDrawerExpanded } = 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 informationPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Information panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const configSubstepAPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Configuration substep A content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const configSubstepBPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Configuration substep B content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const additionalPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Additional panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const reviewPanelContent = (
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={0} ref={this.drawerRef}>
Review panel content
</span>
<DrawerActions>
<DrawerCloseButton onClick={this.onCloseClick} />
</DrawerActions>
</DrawerHead>
</DrawerPanelContent>
);
const drawerToggleButton = (
<Button className="pf-u-float-right pf-u-ml-md" isInline variant="link" onClick={this.onOpenClick}>
Open drawer
</Button>
);
const steps = [
{
id: 0,
name: 'Information',
component: (
<TextContent>
<Text component={TextVariants.h1}>Information step content</Text>
<p>
Wizard description goes here. If you need more assistance,{' '}
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>{' '}
in the side drawer.{' '}
</p>
</TextContent>
),
drawerPanelContent: informationPanelContent
},
{
id: 1,
name: 'Configuration',
steps: [
{
id: 2,
name: 'Substep A',
component: (
<TextContent>
<Text component={TextVariants.h1}>Configuration substep A content</Text>
<p>
Wizard description goes here. If you need more assistance,
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>
in the side drawer.
</p>
</TextContent>
),
drawerPanelContent: configSubstepAPanelContent
},
{
id: 3,
name: 'Substep B',
component: (
<TextContent>
<Text component={TextVariants.h1}>Configuration substep B content</Text>
<p>
Wizard description goes here. If you need more assistance,
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>
in the side drawer.
</p>
</TextContent>
),
drawerPanelContent: configSubstepBPanelContent
}
]
},
{
id: 4,
name: 'Additional',
component: (
<TextContent>
<Text component={TextVariants.h1}>Additional step content</Text>
<p>
Wizard description goes here. If you need more assistance,
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>
in the side drawer.
</p>
</TextContent>
),
drawerPanelContent: additionalPanelContent
},
{
id: 5,
name: 'Review',
component: (
<TextContent>
<Text component={TextVariants.h1}>Review step content</Text>
<p>
Wizard description goes here. If you need more assistance,
<Button isInline variant="link" onClick={this.onOpenClick}>
see more information
</Button>
in the side drawer.
</p>
</TextContent>
),
nextButtonText: 'Finish',
drawerPanelContent: reviewPanelContent
}
];
const title = 'Basic wizard';
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>
<PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
<Wizard
hasDrawer
isDrawerExpanded={isDrawerExpanded}
navAriaLabel={`${title} steps`}
mainAriaLabel={`${title} content`}
steps={steps}
/>
</PageSection>
</Page>
</React.Fragment>
);
}
}
```