carbon-react 98.0.1 → 99.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.
- package/lib/components/detail/detail.component.js +23 -81
- package/lib/components/loader-bar/loader-bar.style.js +3 -4
- package/lib/components/progress-tracker/index.d.ts +1 -0
- package/lib/components/progress-tracker/index.js +15 -0
- package/lib/components/progress-tracker/progress-tracker-test.stories.js +85 -0
- package/lib/components/progress-tracker/progress-tracker.component.js +115 -0
- package/lib/components/progress-tracker/progress-tracker.config.js +12 -0
- package/lib/components/progress-tracker/progress-tracker.d.ts +32 -0
- package/lib/components/progress-tracker/progress-tracker.style.js +189 -0
- package/lib/style/themes/base/base-theme.config.js +5 -0
- package/package.json +3 -4
|
@@ -23,88 +23,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
23
23
|
|
|
24
24
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
25
|
|
|
26
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
27
|
-
|
|
28
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
29
|
-
|
|
30
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
31
|
-
|
|
32
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
33
|
-
|
|
34
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
35
|
-
|
|
36
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
37
|
-
|
|
38
|
-
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
39
|
-
|
|
40
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
41
|
-
|
|
42
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
43
|
-
|
|
44
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
45
|
-
|
|
46
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
47
|
-
|
|
48
26
|
const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default);
|
|
49
27
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
_defineProperty(_assertThisInitialized(_this), "footnote", () => {
|
|
74
|
-
if (!_this.props.footnote) {
|
|
75
|
-
return null;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
return /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
|
|
79
|
-
"data-element": "footnote",
|
|
80
|
-
hasIcon: _this.props.icon
|
|
81
|
-
}, _this.props.footnote);
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
return _this;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
_createClass(Detail, [{
|
|
88
|
-
key: "render",
|
|
89
|
-
value:
|
|
90
|
-
/**
|
|
91
|
-
* @method render
|
|
92
|
-
* @return {Object} JSX
|
|
93
|
-
*/
|
|
94
|
-
function render() {
|
|
95
|
-
const marginProps = (0, _utils.filterStyledSystemMarginProps)(this.props);
|
|
96
|
-
return /*#__PURE__*/_react.default.createElement(_detail.StyledDetail, _extends({
|
|
97
|
-
className: (0, _classnames.default)("carbon-detail", this.props.className),
|
|
98
|
-
hasIcon: this.props.icon
|
|
99
|
-
}, (0, _tags.default)("detail", this.props), marginProps), this.icon(), /*#__PURE__*/_react.default.createElement(_detail.StyledDetailContent, {
|
|
100
|
-
"data-element": "detail-content",
|
|
101
|
-
hasIcon: this.props.icon
|
|
102
|
-
}, this.props.children), this.footnote());
|
|
103
|
-
}
|
|
104
|
-
}]);
|
|
105
|
-
|
|
106
|
-
return Detail;
|
|
107
|
-
}(_react.default.Component);
|
|
28
|
+
const Detail = ({
|
|
29
|
+
className,
|
|
30
|
+
icon,
|
|
31
|
+
footnote,
|
|
32
|
+
children,
|
|
33
|
+
...rest
|
|
34
|
+
}) => {
|
|
35
|
+
const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
|
|
36
|
+
return /*#__PURE__*/_react.default.createElement(_detail.StyledDetail, _extends({
|
|
37
|
+
className: (0, _classnames.default)("carbon-detail", className),
|
|
38
|
+
hasIcon: icon
|
|
39
|
+
}, (0, _tags.default)("detail", rest), marginProps), icon && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailIcon, {
|
|
40
|
+
type: icon,
|
|
41
|
+
"data-element": "icon"
|
|
42
|
+
}), /*#__PURE__*/_react.default.createElement(_detail.StyledDetailContent, {
|
|
43
|
+
"data-element": "detail-content",
|
|
44
|
+
hasIcon: icon
|
|
45
|
+
}, children), footnote && /*#__PURE__*/_react.default.createElement(_detail.StyledDetailFootnote, {
|
|
46
|
+
"data-element": "footnote",
|
|
47
|
+
hasIcon: icon
|
|
48
|
+
}, footnote));
|
|
49
|
+
};
|
|
108
50
|
|
|
109
51
|
Detail.propTypes = { ...marginPropTypes,
|
|
110
52
|
|
|
@@ -114,7 +56,7 @@ Detail.propTypes = { ...marginPropTypes,
|
|
|
114
56
|
className: _propTypes.default.string,
|
|
115
57
|
|
|
116
58
|
/**
|
|
117
|
-
* <a href="https://
|
|
59
|
+
* <a href="https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons" target="_blank">List of supported icons</a>
|
|
118
60
|
*
|
|
119
61
|
* The type of icon to use.
|
|
120
62
|
*/
|
|
@@ -22,7 +22,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
|
|
|
22
22
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
23
|
|
|
24
24
|
const INNER_BAR_LENGTH = "128px";
|
|
25
|
-
const OUTER_BAR_LENGTH = "256px";
|
|
26
25
|
const StyledLoader = _styledComponents.default.div`
|
|
27
26
|
${_styledSystem.margin}
|
|
28
27
|
text-align: center;
|
|
@@ -33,10 +32,10 @@ const StyledLoader = _styledComponents.default.div`
|
|
|
33
32
|
exports.StyledLoader = StyledLoader;
|
|
34
33
|
const innerBarAnimation = (0, _styledComponents.keyframes)`
|
|
35
34
|
0% {
|
|
36
|
-
left: -${INNER_BAR_LENGTH}
|
|
35
|
+
left: -${INNER_BAR_LENGTH};
|
|
37
36
|
}
|
|
38
37
|
100% {
|
|
39
|
-
left:
|
|
38
|
+
left: 100%;
|
|
40
39
|
}
|
|
41
40
|
`;
|
|
42
41
|
const StyledLoaderBar = _styledComponents.default.div`
|
|
@@ -46,7 +45,7 @@ const StyledLoaderBar = _styledComponents.default.div`
|
|
|
46
45
|
}) => (0, _styledComponents.css)`
|
|
47
46
|
display: inline-block;
|
|
48
47
|
height: ${getHeight(size)};
|
|
49
|
-
width:
|
|
48
|
+
width: 100%;
|
|
50
49
|
background-color: ${theme.colors.loadingBarBackground};
|
|
51
50
|
overflow: hidden;
|
|
52
51
|
position: relative;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./progress-tracker";
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "default", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _progressTracker.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _progressTracker = _interopRequireDefault(require("./progress-tracker.component"));
|
|
14
|
+
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Default = exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _ = _interopRequireDefault(require("."));
|
|
11
|
+
|
|
12
|
+
var _progressTracker = require("./progress-tracker.config");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
var _default = {
|
|
17
|
+
component: _.default,
|
|
18
|
+
title: "Progress Tracker/Test",
|
|
19
|
+
parameters: {
|
|
20
|
+
info: {
|
|
21
|
+
disable: true
|
|
22
|
+
},
|
|
23
|
+
chromatic: {
|
|
24
|
+
disable: true
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
argTypes: {
|
|
28
|
+
size: {
|
|
29
|
+
options: _progressTracker.PROGRESS_TRACKER_SIZES,
|
|
30
|
+
control: {
|
|
31
|
+
type: "select"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
progress: {
|
|
35
|
+
control: {
|
|
36
|
+
type: "number"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
currentProgressLabel: {
|
|
40
|
+
options: ["", "$100", "100ml"],
|
|
41
|
+
control: {
|
|
42
|
+
type: "select"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
maxProgressLabel: {
|
|
46
|
+
options: ["", "$200", "200ml"],
|
|
47
|
+
control: {
|
|
48
|
+
type: "select"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
variant: {
|
|
52
|
+
options: _progressTracker.PROGRESS_TRACKER_VARIANTS,
|
|
53
|
+
control: {
|
|
54
|
+
type: "select"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
orientation: {
|
|
58
|
+
options: ["horizontal", "vertical"],
|
|
59
|
+
control: {
|
|
60
|
+
type: "select"
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
direction: {
|
|
64
|
+
options: ["up", "down"],
|
|
65
|
+
control: {
|
|
66
|
+
type: "select"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
labelsPosition: {
|
|
70
|
+
options: ["top", "bottom", "left", "right"],
|
|
71
|
+
control: {
|
|
72
|
+
type: "select"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
exports.default = _default;
|
|
78
|
+
|
|
79
|
+
const Default = ({ ...args
|
|
80
|
+
}) => {
|
|
81
|
+
return /*#__PURE__*/_react.default.createElement(_.default, args);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
exports.Default = Default;
|
|
85
|
+
Default.storyName = "default";
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
|
|
13
|
+
|
|
14
|
+
var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
|
|
15
|
+
|
|
16
|
+
var _utils = require("../../style/utils");
|
|
17
|
+
|
|
18
|
+
var _progressTracker = require("./progress-tracker.style");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
|
+
|
|
24
|
+
const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
|
|
25
|
+
|
|
26
|
+
const ProgressTracker = ({
|
|
27
|
+
size = "medium",
|
|
28
|
+
progress = 0,
|
|
29
|
+
showDefaultLabels = false,
|
|
30
|
+
currentProgressLabel,
|
|
31
|
+
maxProgressLabel,
|
|
32
|
+
variant = "default",
|
|
33
|
+
orientation = "horizontal",
|
|
34
|
+
direction = "up",
|
|
35
|
+
labelsPosition,
|
|
36
|
+
...rest
|
|
37
|
+
}) => {
|
|
38
|
+
const isVertical = orientation === "vertical";
|
|
39
|
+
const prefixLabels = !isVertical && labelsPosition !== "bottom" || isVertical && labelsPosition === "left";
|
|
40
|
+
|
|
41
|
+
const renderValueLabels = () => {
|
|
42
|
+
if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const label = (value, defaultValue) => {
|
|
47
|
+
if (value) {
|
|
48
|
+
return value;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
return showDefaultLabels ? defaultValue : undefined;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValuesLabel, {
|
|
55
|
+
position: labelsPosition,
|
|
56
|
+
isVertical: isVertical
|
|
57
|
+
}, isVertical && direction === "up" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
|
|
58
|
+
isMaxValue: true
|
|
59
|
+
}, label(maxProgressLabel, "100%")), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, label(currentProgressLabel, `${progress}%`))), (direction === "down" || !isVertical) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, null, label(currentProgressLabel, `${progress}%`)), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
|
|
60
|
+
isMaxValue: true
|
|
61
|
+
}, label(maxProgressLabel, "100%"))));
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
|
|
65
|
+
size: size,
|
|
66
|
+
isVertical: isVertical
|
|
67
|
+
}, rest, (0, _tags.default)("progress-bar", rest)), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
|
|
68
|
+
direction: isVertical ? direction : undefined,
|
|
69
|
+
isVertical: isVertical,
|
|
70
|
+
size: size
|
|
71
|
+
}, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
|
|
72
|
+
isVertical: isVertical,
|
|
73
|
+
size: size,
|
|
74
|
+
progress: progress,
|
|
75
|
+
variant: variant
|
|
76
|
+
})), !prefixLabels && renderValueLabels());
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
ProgressTracker.propTypes = { ...marginPropTypes,
|
|
80
|
+
|
|
81
|
+
/** Size of the progress bar. */
|
|
82
|
+
size: _propTypes.default.oneOf(["small", "medium", "large"]),
|
|
83
|
+
|
|
84
|
+
/** Current progress (percentage). */
|
|
85
|
+
progress: _propTypes.default.number,
|
|
86
|
+
|
|
87
|
+
/** Flag to control whether the default value labels (as percentages) should be rendered. */
|
|
88
|
+
showDefaultLabels: _propTypes.default.bool,
|
|
89
|
+
|
|
90
|
+
/** Value to display as current progress. */
|
|
91
|
+
currentProgressLabel: _propTypes.default.string,
|
|
92
|
+
|
|
93
|
+
/** Value to display as the maximum progress limit. */
|
|
94
|
+
maxProgressLabel: _propTypes.default.string,
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Sets the colour of the bar that shows the current progress.
|
|
98
|
+
* The "traffic" variant changes the colour of status bar depending on current progress.
|
|
99
|
+
*/
|
|
100
|
+
variant: _propTypes.default.oneOf(["default", "traffic"]),
|
|
101
|
+
|
|
102
|
+
/** The orientation of the component. */
|
|
103
|
+
orientation: _propTypes.default.oneOf(["horizontal", "vertical"]),
|
|
104
|
+
|
|
105
|
+
/** The direction the bar should move as progress increases, only applies in vertical orientation. */
|
|
106
|
+
direction: _propTypes.default.oneOf(["up", "down"]),
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* The position the value label are rendered in.
|
|
110
|
+
* Top/bottom apply to horizontal and left/right to vertical orientation.
|
|
111
|
+
*/
|
|
112
|
+
labelsPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
|
|
113
|
+
};
|
|
114
|
+
var _default = ProgressTracker;
|
|
115
|
+
exports.default = _default;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.PROGRESS_TRACKER_VARIANTS = exports.PROGRESS_TRACKER_SIZES = exports.OUTER_TRACKER_LENGTH = void 0;
|
|
7
|
+
const OUTER_TRACKER_LENGTH = "256px";
|
|
8
|
+
exports.OUTER_TRACKER_LENGTH = OUTER_TRACKER_LENGTH;
|
|
9
|
+
const PROGRESS_TRACKER_SIZES = ["small", "medium", "large"];
|
|
10
|
+
exports.PROGRESS_TRACKER_SIZES = PROGRESS_TRACKER_SIZES;
|
|
11
|
+
const PROGRESS_TRACKER_VARIANTS = ["default", "traffic"];
|
|
12
|
+
exports.PROGRESS_TRACKER_VARIANTS = PROGRESS_TRACKER_VARIANTS;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { MarginProps } from "styled-system";
|
|
2
|
+
|
|
3
|
+
export interface ProgressBarProps extends MarginProps {
|
|
4
|
+
/** Size of the progressBar. */
|
|
5
|
+
size?: "small" | "medium" | "large";
|
|
6
|
+
/** Current progress (percentage). */
|
|
7
|
+
progress?: number;
|
|
8
|
+
/** Flag to control whether the default value labels (as percentages) should be rendered. */
|
|
9
|
+
showDefaultLabels?: boolean;
|
|
10
|
+
/** Value to display as current progress. */
|
|
11
|
+
currentProgressLabel?: string;
|
|
12
|
+
/** Value to display as the maximum progress limit. */
|
|
13
|
+
maxProgressLabel?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Sets the colour of the bar that shows the current progress.
|
|
16
|
+
* The "traffic" variant changes the colour of status bar depending on current progress.
|
|
17
|
+
* */
|
|
18
|
+
variant?: "default" | "traffic";
|
|
19
|
+
/** The orientation of the component. */
|
|
20
|
+
orientation?: "horizontal" | "vertical";
|
|
21
|
+
/** The direction the bar should move as progress increases, only applies in vertical orientation. */
|
|
22
|
+
direction?: "up" | "down";
|
|
23
|
+
/**
|
|
24
|
+
* The position the value label are rendered in.
|
|
25
|
+
* Top/bottom apply to horizontal and left/right to vertical orientation.
|
|
26
|
+
*/
|
|
27
|
+
labelsPosition?: "top" | "bottom" | "left" | "right";
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
declare function ProgressBar(props: ProgressBarProps): JSX.Element;
|
|
31
|
+
|
|
32
|
+
export default ProgressBar;
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledValue = exports.StyledValuesLabel = exports.StyledProgressTracker = exports.InnerBar = exports.StyledProgressBar = void 0;
|
|
7
|
+
|
|
8
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _styledSystem = require("styled-system");
|
|
13
|
+
|
|
14
|
+
var _base = _interopRequireDefault(require("../../style/themes/base"));
|
|
15
|
+
|
|
16
|
+
var _progressTracker = require("./progress-tracker.config");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
21
|
+
|
|
22
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
|
+
|
|
24
|
+
const StyledProgressTracker = _styledComponents.default.div`
|
|
25
|
+
${_styledSystem.margin}
|
|
26
|
+
text-align: center;
|
|
27
|
+
white-space: nowrap;
|
|
28
|
+
|
|
29
|
+
${({
|
|
30
|
+
isVertical
|
|
31
|
+
}) => (0, _styledComponents.css)`
|
|
32
|
+
${!isVertical && `
|
|
33
|
+
width: ${_progressTracker.OUTER_TRACKER_LENGTH};
|
|
34
|
+
`}
|
|
35
|
+
${isVertical && `
|
|
36
|
+
height: ${_progressTracker.OUTER_TRACKER_LENGTH};
|
|
37
|
+
display: flex;
|
|
38
|
+
`}
|
|
39
|
+
`}
|
|
40
|
+
`;
|
|
41
|
+
exports.StyledProgressTracker = StyledProgressTracker;
|
|
42
|
+
const StyledProgressBar = _styledComponents.default.span`
|
|
43
|
+
${({
|
|
44
|
+
direction,
|
|
45
|
+
isVertical,
|
|
46
|
+
size,
|
|
47
|
+
theme
|
|
48
|
+
}) => (0, _styledComponents.css)`
|
|
49
|
+
display: flex;
|
|
50
|
+
position: relative;
|
|
51
|
+
background-color: ${theme.progressTracker.background};
|
|
52
|
+
|
|
53
|
+
${!isVertical && (0, _styledComponents.css)`
|
|
54
|
+
overflow-x: hidden;
|
|
55
|
+
height: ${getHeight(size)};
|
|
56
|
+
width: 100%;
|
|
57
|
+
`}
|
|
58
|
+
${isVertical && (0, _styledComponents.css)`
|
|
59
|
+
overflow-y: hidden;
|
|
60
|
+
width: ${getHeight(size)};
|
|
61
|
+
height: 100%;
|
|
62
|
+
|
|
63
|
+
${direction === "up" && `
|
|
64
|
+
align-items: flex-end;
|
|
65
|
+
`}
|
|
66
|
+
`}
|
|
67
|
+
`}
|
|
68
|
+
`;
|
|
69
|
+
exports.StyledProgressBar = StyledProgressBar;
|
|
70
|
+
const StyledValue = _styledComponents.default.span`
|
|
71
|
+
${({
|
|
72
|
+
isMaxValue,
|
|
73
|
+
theme
|
|
74
|
+
}) => (0, _styledComponents.css)`
|
|
75
|
+
${isMaxValue && `
|
|
76
|
+
color: ${theme.text.placeholder};
|
|
77
|
+
`}
|
|
78
|
+
${!isMaxValue && `
|
|
79
|
+
font-weight: bold;
|
|
80
|
+
`}
|
|
81
|
+
`}
|
|
82
|
+
`;
|
|
83
|
+
exports.StyledValue = StyledValue;
|
|
84
|
+
const StyledValuesLabel = _styledComponents.default.span`
|
|
85
|
+
text-align: start;
|
|
86
|
+
display: flex;
|
|
87
|
+
justify-content: space-between;
|
|
88
|
+
${({
|
|
89
|
+
isVertical,
|
|
90
|
+
position
|
|
91
|
+
}) => (0, _styledComponents.css)`
|
|
92
|
+
${isVertical && (0, _styledComponents.css)`
|
|
93
|
+
flex-direction: column;
|
|
94
|
+
|
|
95
|
+
${position !== "left" && (0, _styledComponents.css)`
|
|
96
|
+
padding-left: 4px;
|
|
97
|
+
`}
|
|
98
|
+
|
|
99
|
+
${position === "left" && (0, _styledComponents.css)`
|
|
100
|
+
padding-right: 4px;
|
|
101
|
+
|
|
102
|
+
${StyledValue} {
|
|
103
|
+
text-align: right;
|
|
104
|
+
}
|
|
105
|
+
`}
|
|
106
|
+
`}
|
|
107
|
+
|
|
108
|
+
${!isVertical && (0, _styledComponents.css)`
|
|
109
|
+
${position !== "bottom" && (0, _styledComponents.css)`
|
|
110
|
+
padding-bottom: 4px;
|
|
111
|
+
`}
|
|
112
|
+
|
|
113
|
+
${position === "bottom" && (0, _styledComponents.css)`
|
|
114
|
+
padding-top: 4px;
|
|
115
|
+
`}
|
|
116
|
+
`}
|
|
117
|
+
`}
|
|
118
|
+
`;
|
|
119
|
+
exports.StyledValuesLabel = StyledValuesLabel;
|
|
120
|
+
const InnerBar = _styledComponents.default.span`
|
|
121
|
+
${({
|
|
122
|
+
isVertical,
|
|
123
|
+
progress,
|
|
124
|
+
size,
|
|
125
|
+
theme,
|
|
126
|
+
variant
|
|
127
|
+
}) => (0, _styledComponents.css)`
|
|
128
|
+
position: absolute;
|
|
129
|
+
left: 0;
|
|
130
|
+
background-color: ${getInnerBarColour(variant, progress, theme)};
|
|
131
|
+
|
|
132
|
+
${!isVertical && (0, _styledComponents.css)`
|
|
133
|
+
width: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
|
|
134
|
+
min-width: 2px;
|
|
135
|
+
height: ${getHeight(size)};
|
|
136
|
+
`}
|
|
137
|
+
${isVertical && (0, _styledComponents.css)`
|
|
138
|
+
height: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
|
|
139
|
+
min-height: 2px;
|
|
140
|
+
width: ${getHeight(size)};
|
|
141
|
+
`}
|
|
142
|
+
`}
|
|
143
|
+
`;
|
|
144
|
+
exports.InnerBar = InnerBar;
|
|
145
|
+
|
|
146
|
+
function getHeight(size) {
|
|
147
|
+
switch (size) {
|
|
148
|
+
case "small":
|
|
149
|
+
return "4px";
|
|
150
|
+
|
|
151
|
+
case "large":
|
|
152
|
+
return "16px";
|
|
153
|
+
|
|
154
|
+
default:
|
|
155
|
+
return "8px";
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
function getInnerBarColour(variant, progress, theme) {
|
|
160
|
+
if (progress >= 100) return theme.colors.success;
|
|
161
|
+
if (variant === "default") return theme.progressTracker.innerBackground;
|
|
162
|
+
if (progress < 20) return theme.colors.error;
|
|
163
|
+
return theme.progressTracker.trafficNeutral;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
StyledProgressTracker.defaultProps = {
|
|
167
|
+
theme: _base.default
|
|
168
|
+
};
|
|
169
|
+
StyledProgressBar.defaultProps = {
|
|
170
|
+
theme: _base.default,
|
|
171
|
+
size: "medium"
|
|
172
|
+
};
|
|
173
|
+
InnerBar.propTypes = {
|
|
174
|
+
size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES),
|
|
175
|
+
progress: _propTypes.default.number,
|
|
176
|
+
variant: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_VARIANTS)
|
|
177
|
+
};
|
|
178
|
+
InnerBar.defaultProps = {
|
|
179
|
+
progress: 0,
|
|
180
|
+
theme: _base.default,
|
|
181
|
+
size: "medium",
|
|
182
|
+
variant: "default"
|
|
183
|
+
};
|
|
184
|
+
StyledValue.defaultProps = {
|
|
185
|
+
theme: _base.default
|
|
186
|
+
};
|
|
187
|
+
StyledProgressBar.propTypes = {
|
|
188
|
+
size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES)
|
|
189
|
+
};
|
|
@@ -51,6 +51,11 @@ var _default = palette => {
|
|
|
51
51
|
},
|
|
52
52
|
asterisk: palette.errorRed
|
|
53
53
|
},
|
|
54
|
+
progressTracker: {
|
|
55
|
+
background: palette.slateTint(90),
|
|
56
|
+
innerBackground: palette.slateTint(40),
|
|
57
|
+
trafficNeutral: palette.productBlueShade(3)
|
|
58
|
+
},
|
|
54
59
|
anchorNavigation: {
|
|
55
60
|
divider: palette.slateTint(80),
|
|
56
61
|
navItemHoverBackground: palette.slateTint(90)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "99.1.0",
|
|
4
4
|
"description": "A library of reusable React components for easily building user interfaces.",
|
|
5
5
|
"engineStrict": true,
|
|
6
6
|
"engines": {
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
"test": "jest --config=./jest.conf.json",
|
|
19
19
|
"test-update": "jest --config=./jest.conf.json --updateSnapshot",
|
|
20
20
|
"test-cypress": "cypress open",
|
|
21
|
-
"cypress:ci": "cypress run --record --parallel",
|
|
22
21
|
"debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
|
|
23
22
|
"format": "prettier --write './src'",
|
|
24
23
|
"lint": "eslint ./src",
|
|
@@ -94,9 +93,9 @@
|
|
|
94
93
|
"core-js": "^3.1.4",
|
|
95
94
|
"cpy-cli": "^3.1.1",
|
|
96
95
|
"cross-env": "^5.2.0",
|
|
97
|
-
"cypress": "^
|
|
96
|
+
"cypress": "^9.0.0",
|
|
98
97
|
"cypress-axe": "^0.13.0",
|
|
99
|
-
"cypress-cucumber-preprocessor": "^4.
|
|
98
|
+
"cypress-cucumber-preprocessor": "^4.3.0",
|
|
100
99
|
"cypress-each": "^1.5.0",
|
|
101
100
|
"cypress-plugin-tab": "^1.0.5",
|
|
102
101
|
"cypress-real-events": "^1.5.1",
|