carbon-react 146.0.1 → 146.1.0
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.
|
@@ -2,7 +2,15 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
4
4
|
export declare type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
5
|
-
|
|
5
|
+
interface StepFlowAriaProps {
|
|
6
|
+
/** Prop to specify the aria-label of the component */
|
|
7
|
+
"aria-label"?: string;
|
|
8
|
+
/** Prop to specify the aria-labelledby of the component */
|
|
9
|
+
"aria-labelledby"?: string;
|
|
10
|
+
/** Prop to specify the aria-describedby of the component */
|
|
11
|
+
"aria-describedby"?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface StepFlowProps extends StepFlowAriaProps, MarginProps, TagProps {
|
|
6
14
|
/** A category for the user journey. */
|
|
7
15
|
category?: string;
|
|
8
16
|
/** The title of the current step, this can be a string or a valid React node
|
|
@@ -18,6 +18,9 @@ const StepFlow = /*#__PURE__*/forwardRef(({
|
|
|
18
18
|
showProgressIndicator = false,
|
|
19
19
|
showCloseIcon = false,
|
|
20
20
|
onDismiss,
|
|
21
|
+
"aria-label": ariaLabel,
|
|
22
|
+
"aria-labelledby": ariaLabelledBy,
|
|
23
|
+
"aria-describedby": ariaDescribedBy,
|
|
21
24
|
...rest
|
|
22
25
|
}, ref) => {
|
|
23
26
|
const totalStepsArray = Array.from({
|
|
@@ -89,7 +92,12 @@ const StepFlow = /*#__PURE__*/forwardRef(({
|
|
|
89
92
|
"data-element": "step-label",
|
|
90
93
|
"aria-hidden": "true"
|
|
91
94
|
}, locale.stepFlow.stepLabel(validatedCurrentStep, totalSteps));
|
|
92
|
-
return /*#__PURE__*/React.createElement(StyledStepFlow, _extends({
|
|
95
|
+
return /*#__PURE__*/React.createElement(StyledStepFlow, _extends({
|
|
96
|
+
role: "group",
|
|
97
|
+
"aria-label": ariaLabel,
|
|
98
|
+
"aria-describedby": ariaDescribedBy,
|
|
99
|
+
"aria-labelledby": ariaLabelledBy
|
|
100
|
+
}, rest, tagComponent("step-flow", rest)), /*#__PURE__*/React.createElement(StyledStepContent, null, category ? /*#__PURE__*/React.createElement(StyledStepContentText, null, /*#__PURE__*/React.createElement(Typography, {
|
|
93
101
|
fontWeight: "400",
|
|
94
102
|
fontSize: "var(--fontSizes100)",
|
|
95
103
|
lineHeight: "var(--sizing250)",
|
|
@@ -103,6 +111,9 @@ const StepFlow = /*#__PURE__*/forwardRef(({
|
|
|
103
111
|
});
|
|
104
112
|
if (process.env.NODE_ENV !== "production") {
|
|
105
113
|
StepFlow.propTypes = {
|
|
114
|
+
"aria-describedby": PropTypes.string,
|
|
115
|
+
"aria-label": PropTypes.string,
|
|
116
|
+
"aria-labelledby": PropTypes.string,
|
|
106
117
|
"category": PropTypes.string,
|
|
107
118
|
"children": PropTypes.node,
|
|
108
119
|
"currentStep": PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired,
|
|
@@ -2,7 +2,15 @@ import React from "react";
|
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
4
4
|
export declare type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
|
5
|
-
|
|
5
|
+
interface StepFlowAriaProps {
|
|
6
|
+
/** Prop to specify the aria-label of the component */
|
|
7
|
+
"aria-label"?: string;
|
|
8
|
+
/** Prop to specify the aria-labelledby of the component */
|
|
9
|
+
"aria-labelledby"?: string;
|
|
10
|
+
/** Prop to specify the aria-describedby of the component */
|
|
11
|
+
"aria-describedby"?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface StepFlowProps extends StepFlowAriaProps, MarginProps, TagProps {
|
|
6
14
|
/** A category for the user journey. */
|
|
7
15
|
category?: string;
|
|
8
16
|
/** The title of the current step, this can be a string or a valid React node
|
|
@@ -27,6 +27,9 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
27
27
|
showProgressIndicator = false,
|
|
28
28
|
showCloseIcon = false,
|
|
29
29
|
onDismiss,
|
|
30
|
+
"aria-label": ariaLabel,
|
|
31
|
+
"aria-labelledby": ariaLabelledBy,
|
|
32
|
+
"aria-describedby": ariaDescribedBy,
|
|
30
33
|
...rest
|
|
31
34
|
}, ref) => {
|
|
32
35
|
const totalStepsArray = Array.from({
|
|
@@ -98,7 +101,12 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
98
101
|
"data-element": "step-label",
|
|
99
102
|
"aria-hidden": "true"
|
|
100
103
|
}, locale.stepFlow.stepLabel(validatedCurrentStep, totalSteps));
|
|
101
|
-
return /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepFlow, _extends({
|
|
104
|
+
return /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepFlow, _extends({
|
|
105
|
+
role: "group",
|
|
106
|
+
"aria-label": ariaLabel,
|
|
107
|
+
"aria-describedby": ariaDescribedBy,
|
|
108
|
+
"aria-labelledby": ariaLabelledBy
|
|
109
|
+
}, rest, (0, _tags.default)("step-flow", rest)), /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepContent, null, category ? /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepContentText, null, /*#__PURE__*/_react.default.createElement(_typography.default, {
|
|
102
110
|
fontWeight: "400",
|
|
103
111
|
fontSize: "var(--fontSizes100)",
|
|
104
112
|
lineHeight: "var(--sizing250)",
|
|
@@ -112,6 +120,9 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
112
120
|
});
|
|
113
121
|
if (process.env.NODE_ENV !== "production") {
|
|
114
122
|
StepFlow.propTypes = {
|
|
123
|
+
"aria-describedby": _propTypes.default.string,
|
|
124
|
+
"aria-label": _propTypes.default.string,
|
|
125
|
+
"aria-labelledby": _propTypes.default.string,
|
|
115
126
|
"category": _propTypes.default.string,
|
|
116
127
|
"children": _propTypes.default.node,
|
|
117
128
|
"currentStep": _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired,
|