@patternfly/react-core 4.227.1 → 4.227.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/umd/react-core.min.css +2763 -2763
- package/package.json +5 -5
- package/src/components/ProgressStepper/examples/ProgressStepper.md +13 -356
- package/src/components/ProgressStepper/examples/ProgressStepperBasic.tsx +21 -0
- package/src/components/ProgressStepper/examples/ProgressStepperBasicFailure.tsx +48 -0
- package/src/components/ProgressStepper/examples/ProgressStepperBasicIssue.tsx +48 -0
- package/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx +59 -0
- package/src/components/ProgressStepper/examples/ProgressStepperBasicWithDescription.tsx +35 -0
- package/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx +51 -0
- package/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx +35 -0
- package/src/components/ProgressStepper/examples/ProgressStepperHelpPopover.tsx +62 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
|
|
3
|
+
import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
|
|
4
|
+
import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
|
|
5
|
+
|
|
6
|
+
export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
|
|
7
|
+
<ProgressStepper>
|
|
8
|
+
<ProgressStep
|
|
9
|
+
variant="success"
|
|
10
|
+
id="custom-step1"
|
|
11
|
+
titleId="custom-step1-title"
|
|
12
|
+
aria-label="completed step, step with success"
|
|
13
|
+
>
|
|
14
|
+
Successful completion
|
|
15
|
+
</ProgressStep>
|
|
16
|
+
<ProgressStep
|
|
17
|
+
isCurrent
|
|
18
|
+
icon={<InProgressIcon />}
|
|
19
|
+
id="custom-step2"
|
|
20
|
+
titleId="custom-step2-title"
|
|
21
|
+
aria-label="in progress"
|
|
22
|
+
>
|
|
23
|
+
In process
|
|
24
|
+
</ProgressStep>
|
|
25
|
+
<ProgressStep
|
|
26
|
+
variant="pending"
|
|
27
|
+
icon={<PendingIcon />}
|
|
28
|
+
id="custom-step3"
|
|
29
|
+
titleId="custom-step3-title"
|
|
30
|
+
aria-label="pending step"
|
|
31
|
+
>
|
|
32
|
+
Pending
|
|
33
|
+
</ProgressStep>
|
|
34
|
+
</ProgressStepper>
|
|
35
|
+
);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const PopoverProgressStep = () => (
|
|
5
|
+
<ProgressStepper>
|
|
6
|
+
<ProgressStep
|
|
7
|
+
variant="success"
|
|
8
|
+
id="popover-step1"
|
|
9
|
+
titleId="popover-step1-title"
|
|
10
|
+
aria-label="completed step with popover, step with success"
|
|
11
|
+
popoverRender={stepRef => (
|
|
12
|
+
<Popover
|
|
13
|
+
aria-label="First step help"
|
|
14
|
+
headerContent={<div>First step popover</div>}
|
|
15
|
+
bodyContent={<div>Additional info or help text content.</div>}
|
|
16
|
+
reference={stepRef}
|
|
17
|
+
position="right"
|
|
18
|
+
/>
|
|
19
|
+
)}
|
|
20
|
+
>
|
|
21
|
+
First step
|
|
22
|
+
</ProgressStep>
|
|
23
|
+
<ProgressStep
|
|
24
|
+
variant="danger"
|
|
25
|
+
id="popover-step2"
|
|
26
|
+
titleId="popover-step2-title"
|
|
27
|
+
aria-label="completed step with popover, step with danger"
|
|
28
|
+
popoverRender={stepRef => (
|
|
29
|
+
<Popover
|
|
30
|
+
aria-label="Second step help"
|
|
31
|
+
headerContent={<div>Second step popover</div>}
|
|
32
|
+
bodyContent={<div>Additional info or help text content.</div>}
|
|
33
|
+
reference={stepRef}
|
|
34
|
+
position="right"
|
|
35
|
+
/>
|
|
36
|
+
)}
|
|
37
|
+
>
|
|
38
|
+
Second step
|
|
39
|
+
</ProgressStep>
|
|
40
|
+
<ProgressStep
|
|
41
|
+
variant="info"
|
|
42
|
+
id="popover-step3"
|
|
43
|
+
titleId="popover-step3-title"
|
|
44
|
+
aria-label="step with popover"
|
|
45
|
+
popoverRender={stepRef => (
|
|
46
|
+
<Popover
|
|
47
|
+
aria-label="Third step help"
|
|
48
|
+
headerContent={<div>Third step popover</div>}
|
|
49
|
+
bodyContent={<div>Additional info or help text content.</div>}
|
|
50
|
+
reference={stepRef}
|
|
51
|
+
position="right"
|
|
52
|
+
/>
|
|
53
|
+
)}
|
|
54
|
+
isCurrent
|
|
55
|
+
>
|
|
56
|
+
Third step
|
|
57
|
+
</ProgressStep>
|
|
58
|
+
<ProgressStep variant="pending" id="popover-step4" titleId="popover-step4-title" aria-label="pending step">
|
|
59
|
+
Fourth step
|
|
60
|
+
</ProgressStep>
|
|
61
|
+
</ProgressStepper>
|
|
62
|
+
);
|