@patternfly/react-core 4.227.1 → 4.227.4

package/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+
+export const ProgressStepperBasicWithDescription: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      description="This is the first thing to happen"
+      id="basic-desc-step1"
+      titleId="basic-desc-step1-title"
+      aria-label="completed step, step with success"
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep
+      variant="info"
+      isCurrent
+      description="This is the second thing to happen"
+      id="basic-desc-step2"
+      titleId="basic-desc-step2-title"
+      aria-label="step with info"
+    >
+      Second step
+    </ProgressStep>
+    <ProgressStep
+      variant="pending"
+      description="This is the last thing to happen"
+      id="basic-desc-step3"
+      titleId="basic-desc-step3-title"
+      aria-label="pending step"
+    >
+      Third step
+    </ProgressStep>
+  </ProgressStepper>
+);

package/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';
+
+export const ProgressStepperCompact: React.FunctionComponent = () => {
+  const [isVertical, setIsVertical] = React.useState(false);
+  const [isCenterAligned, setIsCenterAligned] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        label="Vertical alignment"
+        isChecked={isVertical}
+        onChange={setIsVertical}
+        aria-label="Toggle compact vertical alignment"
+        id="toggle-compact-vertical"
+        name="toggle-compact-vertical"
+      />
+      <Checkbox
+        label="Center alignment"
+        isChecked={isCenterAligned}
+        onChange={setIsCenterAligned}
+        aria-label="Toggle compact center alignment"
+        id="toggle-compact-center"
+        name="toggle-compact-center"
+      />
+      <br />
+      <ProgressStepper isCompact isVertical={isVertical} isCenterAligned={isCenterAligned}>
+        <ProgressStep
+          variant="success"
+          id="compact-step1"
+          titleId="compact-step1-title"
+          aria-label="completed step, step with success"
+        >
+          First step
+        </ProgressStep>
+        <ProgressStep
+          variant="info"
+          isCurrent
+          id="compact-step2"
+          titleId="compact-step2-title"
+          aria-label="step with info"
+        >
+          Second step
+        </ProgressStep>
+        <ProgressStep variant="pending" id="compact-step3" titleId="compact-step3-title" aria-label="pending step">
+          Third step
+        </ProgressStep>
+      </ProgressStepper>
+    </React.Fragment>
+  );
+};

package/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
+import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
+import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
+
+export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="custom-step1"
+      titleId="custom-step1-title"
+      aria-label="completed step, step with success"
+    >
+      Successful completion
+    </ProgressStep>
+    <ProgressStep
+      isCurrent
+      icon={<InProgressIcon />}
+      id="custom-step2"
+      titleId="custom-step2-title"
+      aria-label="in progress"
+    >
+      In process
+    </ProgressStep>
+    <ProgressStep
+      variant="pending"
+      icon={<PendingIcon />}
+      id="custom-step3"
+      titleId="custom-step3-title"
+      aria-label="pending step"
+    >
+      Pending
+    </ProgressStep>
+  </ProgressStepper>
+);

package/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
+
+export const PopoverProgressStep = () => (
+  <ProgressStepper>
+    <ProgressStep
+      variant="success"
+      id="popover-step1"
+      titleId="popover-step1-title"
+      aria-label="completed step with popover, step with success"
+      popoverRender={stepRef => (
+        <Popover
+          aria-label="First step help"
+          headerContent={<div>First step popover</div>}
+          bodyContent={<div>Additional info or help text content.</div>}
+          reference={stepRef}
+          position="right"
+        />
+      )}
+    >
+      First step
+    </ProgressStep>
+    <ProgressStep
+      variant="danger"
+      id="popover-step2"
+      titleId="popover-step2-title"
+      aria-label="completed step with popover, step with danger"
+      popoverRender={stepRef => (
+        <Popover
+          aria-label="Second step help"
+          headerContent={<div>Second step popover</div>}
+          bodyContent={<div>Additional info or help text content.</div>}
+          reference={stepRef}
+          position="right"
+        />
+      )}
+    >
+      Second step
+    </ProgressStep>
+    <ProgressStep
+      variant="info"
+      id="popover-step3"
+      titleId="popover-step3-title"
+      aria-label="step with popover"
+      popoverRender={stepRef => (
+        <Popover
+          aria-label="Third step help"
+          headerContent={<div>Third step popover</div>}
+          bodyContent={<div>Additional info or help text content.</div>}
+          reference={stepRef}
+          position="right"
+        />
+      )}
+      isCurrent
+    >
+      Third step
+    </ProgressStep>
+    <ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
+      Fourth step
+    </ProgressStep>
+  </ProgressStepper>
+);