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.
@@ -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
- let Detail = /*#__PURE__*/function (_React$Component) {
51
- _inherits(Detail, _React$Component);
52
-
53
- var _super = _createSuper(Detail);
54
-
55
- function Detail(...args) {
56
- var _this;
57
-
58
- _classCallCheck(this, Detail);
59
-
60
- _this = _super.call(this, ...args);
61
-
62
- _defineProperty(_assertThisInitialized(_this), "icon", () => {
63
- if (!_this.props.icon) {
64
- return null;
65
- }
66
-
67
- return /*#__PURE__*/_react.default.createElement(_detail.StyledDetailIcon, {
68
- type: _this.props.icon,
69
- "data-element": "icon"
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://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
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: ${OUTER_BAR_LENGTH}
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: ${OUTER_BAR_LENGTH};
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": "98.0.1",
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": "^8.3.1",
96
+ "cypress": "^9.0.0",
98
97
  "cypress-axe": "^0.13.0",
99
- "cypress-cucumber-preprocessor": "^4.2.0",
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",