@patternfly/react-core 4.267.3 → 4.267.5

package/src/components/Wizard/examples/WizardWithDrawer.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import {
+  Button,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerColorVariant,
+  DrawerHead,
+  DrawerPanelContent,
+  Wizard
+} from '@patternfly/react-core';
+
+export const WizardWithDrawer: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
+
+  const onOpenClick = () => {
+    setIsDrawerExpanded(true);
+  };
+
+  const onCloseClick = () => {
+    setIsDrawerExpanded(false);
+  };
+
+  const panel1Content = (
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+      <DrawerHead>
+        <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel-1 content
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const panel2Content = (
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+      <DrawerHead>
+        <span tabIndex={0} ref={drawerRef}>
+          drawer-panel-2 content
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const panel3Content = (
+    <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+      <DrawerHead>
+        <span tabIndex={0} ref={drawerRef}>
+          drawer-panel-3 content
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerToggleButton = (
+    <Button isInline variant="link" onClick={onOpenClick}>
+      Open Drawer
+    </Button>
+  );
+
+  const steps = [
+    {
+      name: 'Information',
+      component: <p>Information step content</p>,
+      drawerPanelContent: panel1Content,
+      drawerToggleButton
+    },
+    {
+      name: 'Configuration',
+      steps: [
+        {
+          name: 'Substep A',
+          component: <p>Substep A content</p>,
+          drawerPanelContent: panel2Content,
+          drawerToggleButton
+        },
+        {
+          name: 'Substep B',
+          component: <p>Substep B content</p>,
+          drawerPanelContent: panel2Content,
+          drawerToggleButton
+        },
+        {
+          name: 'Substep C',
+          component: <p>Substep C content</p>,
+          drawerPanelContent: panel2Content,
+          drawerToggleButton
+        }
+      ]
+    },
+    {
+      name: 'Additional',
+      component: <p>Additional step content</p>,
+      drawerPanelContent: panel3Content,
+      drawerToggleButton
+    },
+    {
+      name: 'Review',
+      component: <p>Review step content</p>,
+      nextButtonText: 'Finish'
+    }
+  ];
+
+  const title = 'Wizard with drawer example';
+
+  return (
+    <React.Fragment>
+      <Wizard
+        height={400}
+        isDrawerExpanded={isDrawerExpanded}
+        hasDrawer
+        navAriaLabel={`${title} steps`}
+        steps={steps}
+      />
+    </React.Fragment>
+  );
+};

package/src/components/Wizard/examples/FinishedStep.js

@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions,
-  Title,
-  Progress,
-  Button
-} from '@patternfly/react-core';
-// eslint-disable-next-line patternfly-react/import-tokens-icons
-import { CogsIcon } from '@patternfly/react-icons';
-
-const propTypes = {
-  onClose: PropTypes.func.isRequired
-};
-
-class FinishedStep extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { percent: 0 };
-  }
-
-  tick() {
-    if (this.state.percent < 100) {
-      this.setState(prevState => ({
-        percent: prevState.percent + 20
-      }));
-    }
-  }
-
-  componentDidMount() {
-    this.interval = setInterval(() => this.tick(), 1000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
-
-  render() {
-    const { percent } = this.state;
-    return (
-      <div className="pf-l-bullseye">
-        <EmptyState variant="large">
-          <EmptyStateIcon icon={CogsIcon} />
-          <Title headingLevel="h4" size="lg">
-            {percent === 100 ? 'Validation complete' : 'Validating credentials'}
-          </Title>
-          <EmptyStateBody>
-            <Progress value={percent} measureLocation="outside" />
-          </EmptyStateBody>
-          <EmptyStateBody>
-            Description can be used to further elaborate on the validation step, or give the user a better idea of how
-            long the process will take.
-          </EmptyStateBody>
-          <EmptyStateSecondaryActions>
-            <Button isDisabled={percent !== 100} onClick={this.props.onClose}>
-              Log to console
-            </Button>
-          </EmptyStateSecondaryActions>
-        </EmptyState>
-      </div>
-    );
-  }
-}
-
-FinishedStep.propTypes = propTypes;
-
-export default FinishedStep;

package/src/components/Wizard/examples/SampleForm.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
-
-const propTypes = {
-  formValue: PropTypes.string,
-  isFormValid: PropTypes.bool,
-  onChange: PropTypes.func
-};
-
-const defaultProps = {
-  formValue: '',
-  isFormValid: false,
-  onChange: () => undefined
-};
-
-class SampleForm extends React.Component {
-  static propTypes = propTypes;
-  static defaultProps = defaultProps;
-
-  state = {
-    value: this.props.formValue,
-    isValid: this.props.isFormValid
-  };
-
-  handleTextInputChange = value => {
-    const isValid = /^\d+$/.test(value);
-    this.setState({ value, isValid });
-    this.props.onChange && this.props.onChange(isValid, value);
-  };
-
-  render() {
-    const { value, isValid } = this.state;
-    const validated = isValid ? 'default' : 'error';
-
-    return (
-      <Form>
-        <FormGroup
-          label="Age:"
-          type="number"
-          helperText="Write your age in numbers."
-          helperTextInvalid="Age has to be a number"
-          fieldId="age"
-          validated={validated}
-        >
-          <TextInput
-            validated={validated}
-            value={value}
-            id="age"
-            aria-describedby="age-helper"
-            onChange={this.handleTextInputChange}
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
-
-export default SampleForm;