-
Notifications
You must be signed in to change notification settings - Fork 355
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(wizard): adds the pf wizard and modal components
- Loading branch information
Showing
14 changed files
with
1,959 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,31 @@ | ||
| /** | ||
| PatternFly React Stylesheets | ||
| */ | ||
|
|
||
| .wizard-pf-header { | ||
| background-color: #f5f5f5; | ||
| border-bottom: none; | ||
| padding: 10px 18px; | ||
| } | ||
| .wizard-pf-title { | ||
| font-size: 13px; | ||
| font-weight: 700; | ||
| } | ||
| .wizard-pf-footer { | ||
| padding: 14px 15px 17px; | ||
| text-align: right; | ||
| & .btn + .btn { | ||
| margin-left: 5px; | ||
| margin-bottom: 0; | ||
| } | ||
| & > .btn { | ||
| padding-left: 10px; | ||
| padding-right: 10px; | ||
| & > .fa-angle-left { | ||
| margin-right: 5px; | ||
| } | ||
| & > .fa-angle-right { | ||
| margin-left: 5px; | ||
| } | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from 'react' | ||
| import PropTypes from 'prop-types' | ||
|
|
||
| import { | ||
| WizardHeader, | ||
| WizardBody, | ||
| WizardFooter, | ||
| WizardRow, | ||
| WizardMain, | ||
| WizardContents | ||
| } from './WizardTemplates' | ||
|
|
||
| import { WizardSubStep, WizardStep, WizardSteps } from './WizardSteps' | ||
|
|
||
| import { | ||
| WizardSidebar, | ||
| WizardSidebarGroup, | ||
| WizardSidebarGroupItem | ||
| } from './WizardSidebar' | ||
|
|
||
| /** | ||
| * Wizard - main Wizard component. | ||
| */ | ||
| const Wizard = ({ className, children, ...rest }) => { | ||
| return ( | ||
| <div className={className} {...rest}> | ||
| {children} | ||
| </div> | ||
| ) | ||
| } | ||
| Wizard.propTypes = { | ||
| /** Additional css classes */ | ||
| className: PropTypes.string, | ||
| /** Children nodes */ | ||
| children: PropTypes.node | ||
| } | ||
| Wizard.Header = WizardHeader | ||
| Wizard.Body = WizardBody | ||
| Wizard.Row = WizardRow | ||
| Wizard.Main = WizardMain | ||
| Wizard.Contents = WizardContents | ||
| Wizard.Footer = WizardFooter | ||
| Wizard.Steps = WizardSteps | ||
| Wizard.Step = WizardStep | ||
| Wizard.SubStep = WizardSubStep | ||
| Wizard.Sidebar = WizardSidebar | ||
| Wizard.SidebarGroup = WizardSidebarGroup | ||
| Wizard.SidebarGroupItem = WizardSidebarGroupItem | ||
|
|
||
| export default Wizard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,241 @@ | ||
| import React from 'react' | ||
| import { storiesOf } from '@storybook/react' | ||
| import { withInfo } from '@storybook/addon-info' | ||
| import { Row, Col } from 'react-bootstrap' | ||
| import { withKnobs } from '@storybook/addon-knobs' | ||
| import { defaultTemplate } from '../../storybook/decorators/storyTemplates' | ||
|
|
||
| import { Button, Wizard } from '../index' | ||
|
|
||
| import { MockWizardManager } from './__mocks__/mockWizardManager' | ||
| import { MockEmbeddedWizardManager } from './__mocks__/mockEmbeddedWizardManager' | ||
|
|
||
| import { | ||
| mockLoadingContents, | ||
| mockWizardItems | ||
| } from './__mocks__/mockWizardItems' | ||
|
|
||
| const stories = storiesOf('Wizard', module) | ||
| stories.addDecorator(withKnobs) | ||
| stories.addDecorator( | ||
| defaultTemplate({ | ||
| title: 'Wizard', | ||
| documentationLink: | ||
| 'http://www.patternfly.org/pattern-library/communication/wizard/#/overview' | ||
| }) | ||
| ) | ||
|
|
||
| stories.addWithInfo('Loading', `Wizard loading screen.`, () => { | ||
| return ( | ||
| <Row> | ||
| <Col sm={12}> | ||
| <Wizard className="wizard-pf"> | ||
| <Wizard.Header title="Wizard Title" /> | ||
| <Wizard.Body> | ||
| <Wizard.Row> | ||
| <Wizard.Main>{mockLoadingContents()}</Wizard.Main> | ||
| </Wizard.Row> | ||
| </Wizard.Body> | ||
| <Wizard.Footer> | ||
| <Button bsStyle="default" className="btn-cancel"> | ||
| Cancel | ||
| </Button> | ||
| <Button bsStyle="default" disabled> | ||
| <span className="i fa fa-angle-left" />Back | ||
| </Button> | ||
| <Button bsStyle="primary" disabled> | ||
| Next<span className="i fa fa-angle-right" /> | ||
| </Button> | ||
| </Wizard.Footer> | ||
| </Wizard> | ||
| </Col> | ||
| </Row> | ||
| ) | ||
| }) | ||
|
|
||
| const modalWizardSource = ` | ||
| <Button bsStyle="primary" bsSize="large" onClick={this.open}> | ||
| Launch modal wizard | ||
| </Button> | ||
| <Modal | ||
| show={showModal} | ||
| onHide={this.close} | ||
| dialogClassName="modal-lg wizard-pf" | ||
| > | ||
| <Wizard> | ||
| <Modal.Header> | ||
| <button | ||
| className="close" | ||
| onClick={this.close} | ||
| aria-hidden="true" | ||
| aria-label="Close" | ||
| > | ||
| <span className="pficon pficon-close" /> | ||
| </button> | ||
| <Modal.Title>Wizard Title</Modal.Title> | ||
| </Modal.Header> | ||
| <Modal.Body className="wizard-pf-body clearfix"> | ||
| <Wizard.Steps | ||
| steps={renderWizardSteps( | ||
| mockWizardItems, | ||
| activeStepIndex, | ||
| activeSubStepIndex, | ||
| this.onStepClick | ||
| )} | ||
| /> | ||
| <Wizard.Row> | ||
| <Wizard.Sidebar | ||
| items={renderSidebarItems( | ||
| mockWizardItems, | ||
| activeStepIndex, | ||
| activeSubStepIndex, | ||
| this.onSidebarItemClick | ||
| )} | ||
| /> | ||
| <Wizard.Main> | ||
| {renderWizardContents( | ||
| mockWizardItems, | ||
| activeStepIndex, | ||
| activeSubStepIndex | ||
| )} | ||
| </Wizard.Main> | ||
| </Wizard.Row> | ||
| </Modal.Body> | ||
| <Modal.Footer className="wizard-pf-footer"> | ||
| <Button | ||
| bsStyle="default" | ||
| className="btn-cancel" | ||
| onClick={this.close} | ||
| > | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| bsStyle="default" | ||
| disabled={activeStepIndex === 0 && activeSubStepIndex === 0} | ||
| onClick={this.onBackButtonClick} | ||
| > | ||
| <span className="i fa fa-angle-left" />Back | ||
| </Button> | ||
| {(activeStepIndex === 0 || activeStepIndex === 1) && ( | ||
| <Button bsStyle="primary" onClick={this.onNextButtonClick}> | ||
| Next<span className="i fa fa-angle-right" /> | ||
| </Button> | ||
| )} | ||
| {activeStepIndex === 2 && | ||
| activeSubStepIndex === 0 && ( | ||
| <Button bsStyle="primary" onClick={this.onNextButtonClick}> | ||
| Deploy<span className="i fa fa-angle-right" /> | ||
| </Button> | ||
| )} | ||
| {activeStepIndex === 2 && | ||
| activeSubStepIndex === 1 && ( | ||
| <Button bsStyle="primary" onClick={this.close}> | ||
| Close<span className="i fa fa-angle-right" /> | ||
| </Button> | ||
| )} | ||
| </Modal.Footer> | ||
| </Wizard> | ||
| </Modal>` | ||
|
|
||
| stories.add( | ||
| 'Modal wizard', | ||
| withInfo({ | ||
| source: false, | ||
| propTablesExclude: [Row, Col, MockWizardManager], | ||
| text: ( | ||
| <div> | ||
| <h1>Story Source</h1> | ||
| <pre>{modalWizardSource}</pre> | ||
| </div> | ||
| ) | ||
| })(() => ( | ||
| <Row> | ||
| <Col sm={12}> | ||
| <MockWizardManager steps={mockWizardItems} /> | ||
| </Col> | ||
| </Row> | ||
| )) | ||
| ) | ||
|
|
||
| const embeddedWizardSource = ` | ||
| <Wizard className="wizard-pf"> | ||
| <Wizard.Header title="Wizard Title" /> | ||
| <Wizard.Body> | ||
| <Wizard.Steps | ||
| steps={renderWizardSteps( | ||
| mockWizardItems, | ||
| activeStepIndex, | ||
| activeSubStepIndex, | ||
| this.onStepClick | ||
| )} | ||
| /> | ||
| <Wizard.Row> | ||
| <Wizard.Sidebar | ||
| items={renderSidebarItems( | ||
| mockWizardItems, | ||
| activeStepIndex, | ||
| activeSubStepIndex, | ||
| this.onSidebarItemClick | ||
| )} | ||
| /> | ||
| <Wizard.Main> | ||
| {renderWizardContents( | ||
| mockWizardItems, | ||
| activeStepIndex, | ||
| activeSubStepIndex | ||
| )} | ||
| </Wizard.Main> | ||
| </Wizard.Row> | ||
| </Wizard.Body> | ||
| <Wizard.Footer> | ||
| <Button bsStyle="default" className="btn-cancel"> | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| bsStyle="default" | ||
| disabled={activeStepIndex === 0 && activeSubStepIndex === 0} | ||
| onClick={this.onBackButtonClick} | ||
| > | ||
| <span className="i fa fa-angle-left" />Back | ||
| </Button> | ||
| {(activeStepIndex === 0 || activeStepIndex === 1) && ( | ||
| <Button bsStyle="primary" onClick={this.onNextButtonClick}> | ||
| Next<span className="i fa fa-angle-right" /> | ||
| </Button> | ||
| )} | ||
| {activeStepIndex === 2 && | ||
| activeSubStepIndex === 0 && ( | ||
| <Button bsStyle="primary" onClick={this.onNextButtonClick}> | ||
| Deploy<span className="i fa fa-angle-right" /> | ||
| </Button> | ||
| )} | ||
| {activeStepIndex === 2 && | ||
| activeSubStepIndex === 1 && ( | ||
| <Button bsStyle="primary"> | ||
| Done<span className="i fa fa-angle-right" /> | ||
| </Button> | ||
| )} | ||
| </Wizard.Footer> | ||
| </Wizard> | ||
| ` | ||
|
|
||
| stories.add( | ||
| 'Embedded in page', | ||
| withInfo({ | ||
| source: false, | ||
| propTablesExclude: [Row, Col, MockEmbeddedWizardManager], | ||
| text: ( | ||
| <div> | ||
| <h1>Story Source</h1> | ||
| <pre>{embeddedWizardSource}</pre> | ||
| </div> | ||
| ) | ||
| })(() => ( | ||
| <Row> | ||
| <Col sm={12}> | ||
| <MockEmbeddedWizardManager steps={mockWizardItems} /> | ||
| </Col> | ||
| </Row> | ||
| )) | ||
| ) |
Oops, something went wrong.