@atlaskit/progress-tracker 8.6.2 → 8.7.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/CHANGELOG.md +22 -1
- package/README.md +2 -1
- package/dist/cjs/internal/bar.js +16 -5
- package/dist/cjs/internal/constants.js +4 -5
- package/dist/cjs/internal/link.js +5 -0
- package/dist/cjs/internal/marker.js +19 -2
- package/dist/cjs/internal/stage.js +10 -13
- package/dist/cjs/internal/utils.js +2 -3
- package/dist/cjs/progress-tracker.js +7 -2
- package/dist/es2019/internal/bar.js +16 -5
- package/dist/es2019/internal/constants.js +3 -4
- package/dist/es2019/internal/link.js +4 -0
- package/dist/es2019/internal/marker.js +18 -2
- package/dist/es2019/internal/stage.js +12 -12
- package/dist/es2019/internal/utils.js +2 -3
- package/dist/es2019/progress-tracker.js +9 -1
- package/dist/esm/internal/bar.js +16 -5
- package/dist/esm/internal/constants.js +3 -4
- package/dist/esm/internal/link.js +4 -0
- package/dist/esm/internal/marker.js +18 -2
- package/dist/esm/internal/stage.js +12 -12
- package/dist/esm/internal/utils.js +2 -3
- package/dist/esm/progress-tracker.js +9 -1
- package/dist/types/internal/bar.d.ts +3 -0
- package/dist/types/internal/constants.d.ts +1 -3
- package/dist/types/internal/link.d.ts +3 -0
- package/dist/types/internal/marker.d.ts +3 -0
- package/dist/types/internal/stage.d.ts +3 -0
- package/dist/types/progress-tracker.d.ts +3 -0
- package/dist/types-ts4.5/internal/bar.d.ts +3 -0
- package/dist/types-ts4.5/internal/constants.d.ts +1 -3
- package/dist/types-ts4.5/internal/link.d.ts +3 -0
- package/dist/types-ts4.5/internal/marker.d.ts +3 -0
- package/dist/types-ts4.5/internal/stage.d.ts +3 -0
- package/dist/types-ts4.5/progress-tracker.d.ts +3 -0
- package/package.json +88 -88
- package/report.api.md +59 -61
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/progress-tracker
|
|
2
2
|
|
|
3
|
+
## 8.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#110836](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110836)
|
|
8
|
+
[`a8bd419fd70b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a8bd419fd70b9) -
|
|
9
|
+
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
|
|
10
|
+
is implicitly set to automatic.
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 8.6.3
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [#102669](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102669)
|
|
21
|
+
[`57f9d0819e9e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f9d0819e9e6) -
|
|
22
|
+
Internal change only. Update spacing to use logical properties and tokenise typography values.
|
|
23
|
+
|
|
3
24
|
## 8.6.2
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -20,7 +41,7 @@
|
|
|
20
41
|
|
|
21
42
|
- [#99069](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99069)
|
|
22
43
|
[`609d5a37c656`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/609d5a37c656) -
|
|
23
|
-
Add support for React 18.
|
|
44
|
+
Add support for React 18 in non-strict mode.
|
|
24
45
|
|
|
25
46
|
## 8.5.11
|
|
26
47
|
|
package/README.md
CHANGED
|
@@ -10,4 +10,5 @@ yarn add @atlaskit/progress-tracker
|
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
Detailed docs and example usage can be found
|
|
13
|
+
Detailed docs and example usage can be found
|
|
14
|
+
[here](https://atlassian.design/components/progress-tracker/).
|
package/dist/cjs/internal/bar.js
CHANGED
|
@@ -8,18 +8,27 @@ var _react = require("@emotion/react");
|
|
|
8
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
9
9
|
var _constants = require("../constants");
|
|
10
10
|
var _constants2 = require("./constants");
|
|
11
|
+
/**
|
|
12
|
+
* @jsxRuntime classic
|
|
13
|
+
*/
|
|
11
14
|
/** @jsx jsx */
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
12
16
|
|
|
13
17
|
var progressBarStyles = (0, _react.css)({
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
14
19
|
height: _constants2.PROGRESS_BAR_HEIGHT,
|
|
15
20
|
position: 'absolute',
|
|
16
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
17
|
-
left: '50%',
|
|
18
21
|
backgroundColor: "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"),
|
|
19
|
-
|
|
20
|
-
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
23
|
+
borderEndEndRadius: _constants2.PROGRESS_BAR_HEIGHT,
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
25
|
+
borderStartEndRadius: _constants2.PROGRESS_BAR_HEIGHT,
|
|
26
|
+
insetInlineStart: '50%',
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
21
28
|
transform: "translate(0, calc(-1 * ".concat(_constants2.LABEL_TOP_SPACING, "))"),
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
22
30
|
transition: "width var(".concat(_constants2.varTransitionSpeed, ") var(").concat(_constants2.varTransitionEasing, ")"),
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
23
32
|
transitionDelay: "var(".concat(_constants2.varTransitionDelay, ")")
|
|
24
33
|
});
|
|
25
34
|
|
|
@@ -35,7 +44,9 @@ var ProgressBar = function ProgressBar(_ref) {
|
|
|
35
44
|
return (0, _react.jsx)("div", {
|
|
36
45
|
"data-testid": testId,
|
|
37
46
|
style: {
|
|
38
|
-
width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100
|
|
47
|
+
width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100
|
|
48
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
49
|
+
, " * calc(var(").concat(_constants2.varSpacing, ", ").concat(_constants.spacing.cosy, ") + ").concat(_constants2.HALF_GRID_SIZE, "))")
|
|
39
50
|
},
|
|
40
51
|
css: progressBarStyles
|
|
41
52
|
});
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.varTransitionSpeed = exports.varTransitionEasing = exports.varTransitionDelay = exports.varSpacing = exports.varMarkerColor = exports.varBackgroundColor = exports.TRANSITION_SPEED = exports.
|
|
6
|
+
exports.varTransitionSpeed = exports.varTransitionEasing = exports.varTransitionDelay = exports.varSpacing = exports.varMarkerColor = exports.varBackgroundColor = exports.TRANSITION_SPEED = exports.PROGRESS_BAR_HEIGHT = exports.LINEAR_TRANSITION_SPEED = exports.LABEL_TOP_SPACING = exports.HALF_GRID_SIZE = exports.ANIMATION_EASE_OUT = void 0;
|
|
7
7
|
var TRANSITION_SPEED = exports.TRANSITION_SPEED = 300;
|
|
8
8
|
var LINEAR_TRANSITION_SPEED = exports.LINEAR_TRANSITION_SPEED = 50;
|
|
9
9
|
var ANIMATION_EASE_OUT = exports.ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
|
|
@@ -13,10 +13,9 @@ var varTransitionDelay = exports.varTransitionDelay = '--ds--pt--td';
|
|
|
13
13
|
var varTransitionEasing = exports.varTransitionEasing = '--ds--pt--te';
|
|
14
14
|
var varMarkerColor = exports.varMarkerColor = '--ds--pt--mc';
|
|
15
15
|
var varBackgroundColor = exports.varBackgroundColor = '--ds--pt--bg';
|
|
16
|
-
var REGULAR_FONT_WEIGHT = exports.REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
|
|
17
|
-
var SEMI_BOLD_FONT_WEIGHT = exports.SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
|
|
18
16
|
var HALF_GRID_SIZE = exports.HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
|
|
19
17
|
var PROGRESS_BAR_HEIGHT = exports.PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
|
|
20
18
|
|
|
21
|
-
// Labels sit 16px from bottom of progress bar
|
|
22
|
-
|
|
19
|
+
// Labels sit 16px from bottom of progress bar
|
|
20
|
+
// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
|
|
21
|
+
var LABEL_TOP_SPACING = exports.LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";
|
|
@@ -6,8 +6,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
9
|
+
/**
|
|
10
|
+
* @jsxRuntime classic
|
|
11
|
+
*/
|
|
9
12
|
/** @jsx jsx */
|
|
10
13
|
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
|
+
|
|
11
16
|
var linkStyles = (0, _react.css)({
|
|
12
17
|
color: "var(--ds-text, ".concat(_colors.N800, ")"),
|
|
13
18
|
cursor: 'pointer'
|
|
@@ -7,29 +7,46 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _constants = require("./constants");
|
|
9
9
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
10
|
+
/**
|
|
11
|
+
* @jsxRuntime classic
|
|
12
|
+
*/
|
|
10
13
|
/** @jsx jsx */
|
|
11
14
|
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
16
|
+
|
|
12
17
|
var progressMarkerStyles = (0, _react.css)({
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
13
19
|
width: _constants.PROGRESS_BAR_HEIGHT,
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
14
21
|
height: _constants.PROGRESS_BAR_HEIGHT,
|
|
15
22
|
position: 'absolute',
|
|
16
|
-
// eslint-disable-next-line @atlaskit/
|
|
17
|
-
left: '50%',
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
18
24
|
backgroundColor: "var(".concat(_constants.varBackgroundColor, ")"),
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
19
26
|
borderRadius: _constants.PROGRESS_BAR_HEIGHT,
|
|
27
|
+
insetInlineStart: '50%',
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
20
29
|
transform: "translate(-50%, calc(-1 * ".concat(_constants.LABEL_TOP_SPACING, "))"),
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
21
31
|
transition: "opacity var(".concat(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, "), background-color var(").concat(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, ")"),
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
22
33
|
transitionDelay: "var(".concat(_constants.varTransitionDelay, ")"),
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
23
35
|
'&.fade-appear': {
|
|
24
36
|
opacity: 0.01
|
|
25
37
|
},
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
26
39
|
'&.fade-appear.fade-appear-active': {
|
|
27
40
|
opacity: 1
|
|
28
41
|
},
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
29
43
|
'&.fade-enter': {
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
30
45
|
backgroundColor: "var(".concat(_constants.varMarkerColor, ")")
|
|
31
46
|
},
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
32
48
|
'&.fade-enter.fade-enter-active': {
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
33
50
|
backgroundColor: "var(".concat(_constants.varBackgroundColor, ")")
|
|
34
51
|
}
|
|
35
52
|
});
|
|
@@ -23,7 +23,9 @@ var _utils = require("./utils");
|
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
24
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
25
25
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
26
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
|
|
26
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
|
|
27
|
+
* @jsxRuntime classic
|
|
28
|
+
*/ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
27
29
|
var listItemContentStyles = (0, _primitives.xcss)({
|
|
28
30
|
width: '100%',
|
|
29
31
|
position: 'relative'
|
|
@@ -33,23 +35,20 @@ var listItemStyles = (0, _react2.css)({
|
|
|
33
35
|
overflowWrap: 'break-word'
|
|
34
36
|
});
|
|
35
37
|
var titleStyles = (0, _react2.css)({
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
39
|
-
lineHeight: '16px',
|
|
38
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
39
|
+
marginBlockStart: _constants.LABEL_TOP_SPACING,
|
|
40
40
|
textAlign: 'center',
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
41
42
|
'&.fade-appear': {
|
|
42
43
|
opacity: 0.01
|
|
43
44
|
},
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
44
46
|
'&.fade-appear.fade-appear-active': {
|
|
45
47
|
opacity: 1,
|
|
48
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
46
49
|
transition: "opacity var(".concat(_constants.varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
|
|
47
50
|
}
|
|
48
51
|
});
|
|
49
|
-
var textStyles = (0, _react2.css)({
|
|
50
|
-
fontSize: '14px',
|
|
51
|
-
lineHeight: '16px'
|
|
52
|
-
});
|
|
53
52
|
var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
54
53
|
(0, _inherits2.default)(ProgressTrackerStage, _PureComponent);
|
|
55
54
|
var _super = _createSuper(ProgressTrackerStage);
|
|
@@ -136,9 +135,7 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
|
|
|
136
135
|
timeout: transitionDelay + transitionSpeed,
|
|
137
136
|
classNames: "fade"
|
|
138
137
|
}, (0, _react2.jsx)("div", {
|
|
139
|
-
css: titleStyles
|
|
140
|
-
}, (0, _react2.jsx)("span", {
|
|
141
|
-
css: textStyles,
|
|
138
|
+
css: titleStyles,
|
|
142
139
|
style: {
|
|
143
140
|
color: (0, _utils.getTextColor)(item.status),
|
|
144
141
|
fontWeight: (0, _utils.getFontWeight)(item.status)
|
|
@@ -146,7 +143,7 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
|
|
|
146
143
|
"data-testid": testId && "".concat(testId, "-title")
|
|
147
144
|
}, this.shouldShowLink() ? render.link({
|
|
148
145
|
item: item
|
|
149
|
-
}) : item.label))))
|
|
146
|
+
}) : item.label))));
|
|
150
147
|
}
|
|
151
148
|
}]);
|
|
152
149
|
return ProgressTrackerStage;
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.getTextColor = exports.getMarkerColor = exports.getFontWeight = void 0;
|
|
7
7
|
var _colors = require("@atlaskit/theme/colors");
|
|
8
|
-
var _constants = require("./constants");
|
|
9
8
|
var getMarkerColor = exports.getMarkerColor = function getMarkerColor(status) {
|
|
10
9
|
switch (status) {
|
|
11
10
|
case 'unvisited':
|
|
@@ -35,11 +34,11 @@ var getTextColor = exports.getTextColor = function getTextColor(status) {
|
|
|
35
34
|
var getFontWeight = exports.getFontWeight = function getFontWeight(status) {
|
|
36
35
|
switch (status) {
|
|
37
36
|
case 'unvisited':
|
|
38
|
-
return
|
|
37
|
+
return "var(--ds-font-weight-regular, 400)";
|
|
39
38
|
case 'current':
|
|
40
39
|
case 'visited':
|
|
41
40
|
case 'disabled':
|
|
42
|
-
return
|
|
41
|
+
return "var(--ds-font-weight-semibold, 600)";
|
|
43
42
|
default:
|
|
44
43
|
return undefined;
|
|
45
44
|
}
|
|
@@ -21,16 +21,19 @@ var _stage = _interopRequireDefault(require("./internal/stage"));
|
|
|
21
21
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
22
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
23
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
24
|
-
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
|
|
24
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
|
|
25
|
+
* @jsxRuntime classic
|
|
26
|
+
*/ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
25
27
|
var containerStyles = (0, _react2.css)({
|
|
26
28
|
display: 'grid',
|
|
27
29
|
width: '100%',
|
|
28
30
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
29
31
|
margin: '0 auto',
|
|
30
32
|
padding: "var(--ds-space-0, 0px)",
|
|
31
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
33
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
32
34
|
gap: "var(".concat(_constants2.varSpacing, ")"),
|
|
33
35
|
listStyleType: 'none',
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
34
37
|
'&&': {
|
|
35
38
|
marginBlockStart: "var(--ds-space-500, 40px)"
|
|
36
39
|
}
|
|
@@ -135,6 +138,8 @@ var ProgressTracker = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
135
138
|
items: [],
|
|
136
139
|
spacing: 'cosy',
|
|
137
140
|
render: {
|
|
141
|
+
// Anchor content is coming from another location
|
|
142
|
+
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
138
143
|
link: function link(_ref) {
|
|
139
144
|
var item = _ref.item;
|
|
140
145
|
return (0, _react2.jsx)(_link.default, item);
|
|
@@ -1,18 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { B300 } from '@atlaskit/theme/colors';
|
|
4
8
|
import { spacing } from '../constants';
|
|
5
9
|
import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
|
|
6
10
|
const progressBarStyles = css({
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
7
12
|
height: PROGRESS_BAR_HEIGHT,
|
|
8
13
|
position: 'absolute',
|
|
9
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
10
|
-
left: '50%',
|
|
11
14
|
backgroundColor: `var(--ds-background-brand-bold, ${B300})`,
|
|
12
|
-
|
|
13
|
-
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
|
+
borderEndEndRadius: PROGRESS_BAR_HEIGHT,
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
18
|
+
borderStartEndRadius: PROGRESS_BAR_HEIGHT,
|
|
19
|
+
insetInlineStart: '50%',
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
14
21
|
transform: `translate(0, calc(-1 * ${LABEL_TOP_SPACING}))`,
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
15
23
|
transition: `width var(${varTransitionSpeed}) var(${varTransitionEasing})`,
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
25
|
transitionDelay: `var(${varTransitionDelay})`
|
|
17
26
|
});
|
|
18
27
|
|
|
@@ -28,7 +37,9 @@ const ProgressBar = ({
|
|
|
28
37
|
}) => jsx("div", {
|
|
29
38
|
"data-testid": testId,
|
|
30
39
|
style: {
|
|
31
|
-
width: `calc(${percentageComplete}% + ${percentageComplete / 100
|
|
40
|
+
width: `calc(${percentageComplete}% + ${percentageComplete / 100
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
42
|
+
} * calc(var(${varSpacing}, ${spacing.cosy}) + ${HALF_GRID_SIZE}))`
|
|
32
43
|
},
|
|
33
44
|
css: progressBarStyles
|
|
34
45
|
});
|
|
@@ -7,10 +7,9 @@ export const varTransitionDelay = '--ds--pt--td';
|
|
|
7
7
|
export const varTransitionEasing = '--ds--pt--te';
|
|
8
8
|
export const varMarkerColor = '--ds--pt--mc';
|
|
9
9
|
export const varBackgroundColor = '--ds--pt--bg';
|
|
10
|
-
export const REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
|
|
11
|
-
export const SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
|
|
12
10
|
export const HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
|
|
13
11
|
export const PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
|
|
14
12
|
|
|
15
|
-
// Labels sit 16px from bottom of progress bar
|
|
16
|
-
|
|
13
|
+
// Labels sit 16px from bottom of progress bar
|
|
14
|
+
// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
|
|
15
|
+
export const LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { N800 } from '@atlaskit/theme/colors';
|
|
5
9
|
const linkStyles = css({
|
|
@@ -1,29 +1,45 @@
|
|
|
1
1
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
*/
|
|
2
5
|
/** @jsx jsx */
|
|
3
6
|
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
4
8
|
import { css, jsx } from '@emotion/react';
|
|
5
9
|
import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
|
|
6
10
|
const progressMarkerStyles = css({
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
7
12
|
width: PROGRESS_BAR_HEIGHT,
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
8
14
|
height: PROGRESS_BAR_HEIGHT,
|
|
9
15
|
position: 'absolute',
|
|
10
|
-
// eslint-disable-next-line @atlaskit/
|
|
11
|
-
left: '50%',
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
12
17
|
backgroundColor: `var(${varBackgroundColor})`,
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
13
19
|
borderRadius: PROGRESS_BAR_HEIGHT,
|
|
20
|
+
insetInlineStart: '50%',
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
14
22
|
transform: `translate(-50%, calc(-1 * ${LABEL_TOP_SPACING}))`,
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
15
24
|
transition: `opacity var(${varTransitionSpeed}) var(${varTransitionEasing}), background-color var(${varTransitionSpeed}) var(${varTransitionEasing})`,
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
26
|
transitionDelay: `var(${varTransitionDelay})`,
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
17
28
|
'&.fade-appear': {
|
|
18
29
|
opacity: 0.01
|
|
19
30
|
},
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
20
32
|
'&.fade-appear.fade-appear-active': {
|
|
21
33
|
opacity: 1
|
|
22
34
|
},
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
23
36
|
'&.fade-enter': {
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
24
38
|
backgroundColor: `var(${varMarkerColor})`
|
|
25
39
|
},
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
26
41
|
'&.fade-enter.fade-enter-active': {
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
27
43
|
backgroundColor: `var(${varBackgroundColor})`
|
|
28
44
|
}
|
|
29
45
|
});
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
3
|
+
/**
|
|
4
|
+
* @jsxRuntime classic
|
|
5
|
+
*/
|
|
3
6
|
/** @jsx jsx */
|
|
4
7
|
import { PureComponent } from 'react';
|
|
8
|
+
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
10
|
import { css, jsx } from '@emotion/react';
|
|
6
11
|
import { CSSTransition } from 'react-transition-group';
|
|
7
12
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
@@ -18,23 +23,20 @@ const listItemStyles = css({
|
|
|
18
23
|
overflowWrap: 'break-word'
|
|
19
24
|
});
|
|
20
25
|
const titleStyles = css({
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
24
|
-
lineHeight: '16px',
|
|
26
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
27
|
+
marginBlockStart: LABEL_TOP_SPACING,
|
|
25
28
|
textAlign: 'center',
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
26
30
|
'&.fade-appear': {
|
|
27
31
|
opacity: 0.01
|
|
28
32
|
},
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
29
34
|
'&.fade-appear.fade-appear-active': {
|
|
30
35
|
opacity: 1,
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
31
37
|
transition: `opacity var(${varTransitionSpeed}) cubic-bezier(0.2, 0, 0, 1)`
|
|
32
38
|
}
|
|
33
39
|
});
|
|
34
|
-
const textStyles = css({
|
|
35
|
-
fontSize: '14px',
|
|
36
|
-
lineHeight: '16px'
|
|
37
|
-
});
|
|
38
40
|
export default class ProgressTrackerStage extends PureComponent {
|
|
39
41
|
constructor(props) {
|
|
40
42
|
super(props);
|
|
@@ -116,9 +118,7 @@ export default class ProgressTrackerStage extends PureComponent {
|
|
|
116
118
|
timeout: transitionDelay + transitionSpeed,
|
|
117
119
|
classNames: "fade"
|
|
118
120
|
}, jsx("div", {
|
|
119
|
-
css: titleStyles
|
|
120
|
-
}, jsx("span", {
|
|
121
|
-
css: textStyles,
|
|
121
|
+
css: titleStyles,
|
|
122
122
|
style: {
|
|
123
123
|
color: getTextColor(item.status),
|
|
124
124
|
fontWeight: getFontWeight(item.status)
|
|
@@ -126,6 +126,6 @@ export default class ProgressTrackerStage extends PureComponent {
|
|
|
126
126
|
"data-testid": testId && `${testId}-title`
|
|
127
127
|
}, this.shouldShowLink() ? render.link({
|
|
128
128
|
item
|
|
129
|
-
}) : item.label))))
|
|
129
|
+
}) : item.label))));
|
|
130
130
|
}
|
|
131
131
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { B300, N70 } from '@atlaskit/theme/colors';
|
|
2
|
-
import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
|
|
3
2
|
export const getMarkerColor = status => {
|
|
4
3
|
switch (status) {
|
|
5
4
|
case 'unvisited':
|
|
@@ -29,11 +28,11 @@ export const getTextColor = status => {
|
|
|
29
28
|
export const getFontWeight = status => {
|
|
30
29
|
switch (status) {
|
|
31
30
|
case 'unvisited':
|
|
32
|
-
return
|
|
31
|
+
return "var(--ds-font-weight-regular, 400)";
|
|
33
32
|
case 'current':
|
|
34
33
|
case 'visited':
|
|
35
34
|
case 'disabled':
|
|
36
|
-
return
|
|
35
|
+
return "var(--ds-font-weight-semibold, 600)";
|
|
37
36
|
default:
|
|
38
37
|
return undefined;
|
|
39
38
|
}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
3
|
+
/**
|
|
4
|
+
* @jsxRuntime classic
|
|
5
|
+
*/
|
|
3
6
|
/** @jsx jsx */
|
|
4
7
|
import { PureComponent } from 'react';
|
|
8
|
+
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
10
|
import { css, jsx } from '@emotion/react';
|
|
6
11
|
import { spacing } from './constants';
|
|
7
12
|
import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
|
|
@@ -13,9 +18,10 @@ const containerStyles = css({
|
|
|
13
18
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
14
19
|
margin: '0 auto',
|
|
15
20
|
padding: "var(--ds-space-0, 0px)",
|
|
16
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
21
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
17
22
|
gap: `var(${varSpacing})`,
|
|
18
23
|
listStyleType: 'none',
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
19
25
|
'&&': {
|
|
20
26
|
marginBlockStart: "var(--ds-space-500, 40px)"
|
|
21
27
|
}
|
|
@@ -97,6 +103,8 @@ _defineProperty(ProgressTracker, "defaultProps", {
|
|
|
97
103
|
items: [],
|
|
98
104
|
spacing: 'cosy',
|
|
99
105
|
render: {
|
|
106
|
+
// Anchor content is coming from another location
|
|
107
|
+
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
100
108
|
link: ({
|
|
101
109
|
item
|
|
102
110
|
}) => jsx(Link, item)
|
package/dist/esm/internal/bar.js
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { B300 } from '@atlaskit/theme/colors';
|
|
4
8
|
import { spacing } from '../constants';
|
|
5
9
|
import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
|
|
6
10
|
var progressBarStyles = css({
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
7
12
|
height: PROGRESS_BAR_HEIGHT,
|
|
8
13
|
position: 'absolute',
|
|
9
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
10
|
-
left: '50%',
|
|
11
14
|
backgroundColor: "var(--ds-background-brand-bold, ".concat(B300, ")"),
|
|
12
|
-
|
|
13
|
-
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
|
+
borderEndEndRadius: PROGRESS_BAR_HEIGHT,
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
18
|
+
borderStartEndRadius: PROGRESS_BAR_HEIGHT,
|
|
19
|
+
insetInlineStart: '50%',
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
14
21
|
transform: "translate(0, calc(-1 * ".concat(LABEL_TOP_SPACING, "))"),
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
15
23
|
transition: "width var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
25
|
transitionDelay: "var(".concat(varTransitionDelay, ")")
|
|
17
26
|
});
|
|
18
27
|
|
|
@@ -28,7 +37,9 @@ var ProgressBar = function ProgressBar(_ref) {
|
|
|
28
37
|
return jsx("div", {
|
|
29
38
|
"data-testid": testId,
|
|
30
39
|
style: {
|
|
31
|
-
width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100
|
|
40
|
+
width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
42
|
+
, " * calc(var(").concat(varSpacing, ", ").concat(spacing.cosy, ") + ").concat(HALF_GRID_SIZE, "))")
|
|
32
43
|
},
|
|
33
44
|
css: progressBarStyles
|
|
34
45
|
});
|
|
@@ -7,10 +7,9 @@ export var varTransitionDelay = '--ds--pt--td';
|
|
|
7
7
|
export var varTransitionEasing = '--ds--pt--te';
|
|
8
8
|
export var varMarkerColor = '--ds--pt--mc';
|
|
9
9
|
export var varBackgroundColor = '--ds--pt--bg';
|
|
10
|
-
export var REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
|
|
11
|
-
export var SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
|
|
12
10
|
export var HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
|
|
13
11
|
export var PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
|
|
14
12
|
|
|
15
|
-
// Labels sit 16px from bottom of progress bar
|
|
16
|
-
|
|
13
|
+
// Labels sit 16px from bottom of progress bar
|
|
14
|
+
// i.e. 8 (bar height) + 16 - 4 (line height 24->20 in PYX-695) = 20px
|
|
15
|
+
export var LABEL_TOP_SPACING = "var(--ds-space-250, 20px)";
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { N800 } from '@atlaskit/theme/colors';
|
|
5
9
|
var linkStyles = css({
|
|
@@ -1,29 +1,45 @@
|
|
|
1
1
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
*/
|
|
2
5
|
/** @jsx jsx */
|
|
3
6
|
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
4
8
|
import { css, jsx } from '@emotion/react';
|
|
5
9
|
import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
|
|
6
10
|
var progressMarkerStyles = css({
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
7
12
|
width: PROGRESS_BAR_HEIGHT,
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
8
14
|
height: PROGRESS_BAR_HEIGHT,
|
|
9
15
|
position: 'absolute',
|
|
10
|
-
// eslint-disable-next-line @atlaskit/
|
|
11
|
-
left: '50%',
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
12
17
|
backgroundColor: "var(".concat(varBackgroundColor, ")"),
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
13
19
|
borderRadius: PROGRESS_BAR_HEIGHT,
|
|
20
|
+
insetInlineStart: '50%',
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
14
22
|
transform: "translate(-50%, calc(-1 * ".concat(LABEL_TOP_SPACING, "))"),
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
15
24
|
transition: "opacity var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, "), background-color var(").concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
26
|
transitionDelay: "var(".concat(varTransitionDelay, ")"),
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
17
28
|
'&.fade-appear': {
|
|
18
29
|
opacity: 0.01
|
|
19
30
|
},
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
20
32
|
'&.fade-appear.fade-appear-active': {
|
|
21
33
|
opacity: 1
|
|
22
34
|
},
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
23
36
|
'&.fade-enter': {
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
24
38
|
backgroundColor: "var(".concat(varMarkerColor, ")")
|
|
25
39
|
},
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
26
41
|
'&.fade-enter.fade-enter-active': {
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
27
43
|
backgroundColor: "var(".concat(varBackgroundColor, ")")
|
|
28
44
|
}
|
|
29
45
|
});
|
|
@@ -10,8 +10,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
10
10
|
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); }; }
|
|
11
11
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
12
12
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
13
|
+
/**
|
|
14
|
+
* @jsxRuntime classic
|
|
15
|
+
*/
|
|
13
16
|
/** @jsx jsx */
|
|
14
17
|
import { PureComponent } from 'react';
|
|
18
|
+
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
20
|
import { css, jsx } from '@emotion/react';
|
|
16
21
|
import { CSSTransition } from 'react-transition-group';
|
|
17
22
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
@@ -28,23 +33,20 @@ var listItemStyles = css({
|
|
|
28
33
|
overflowWrap: 'break-word'
|
|
29
34
|
});
|
|
30
35
|
var titleStyles = css({
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
34
|
-
lineHeight: '16px',
|
|
36
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
37
|
+
marginBlockStart: LABEL_TOP_SPACING,
|
|
35
38
|
textAlign: 'center',
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
36
40
|
'&.fade-appear': {
|
|
37
41
|
opacity: 0.01
|
|
38
42
|
},
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
39
44
|
'&.fade-appear.fade-appear-active': {
|
|
40
45
|
opacity: 1,
|
|
46
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
41
47
|
transition: "opacity var(".concat(varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
|
|
42
48
|
}
|
|
43
49
|
});
|
|
44
|
-
var textStyles = css({
|
|
45
|
-
fontSize: '14px',
|
|
46
|
-
lineHeight: '16px'
|
|
47
|
-
});
|
|
48
50
|
var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
|
|
49
51
|
_inherits(ProgressTrackerStage, _PureComponent);
|
|
50
52
|
var _super = _createSuper(ProgressTrackerStage);
|
|
@@ -131,9 +133,7 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
|
|
|
131
133
|
timeout: transitionDelay + transitionSpeed,
|
|
132
134
|
classNames: "fade"
|
|
133
135
|
}, jsx("div", {
|
|
134
|
-
css: titleStyles
|
|
135
|
-
}, jsx("span", {
|
|
136
|
-
css: textStyles,
|
|
136
|
+
css: titleStyles,
|
|
137
137
|
style: {
|
|
138
138
|
color: getTextColor(item.status),
|
|
139
139
|
fontWeight: getFontWeight(item.status)
|
|
@@ -141,7 +141,7 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
|
|
|
141
141
|
"data-testid": testId && "".concat(testId, "-title")
|
|
142
142
|
}, this.shouldShowLink() ? render.link({
|
|
143
143
|
item: item
|
|
144
|
-
}) : item.label))))
|
|
144
|
+
}) : item.label))));
|
|
145
145
|
}
|
|
146
146
|
}]);
|
|
147
147
|
return ProgressTrackerStage;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { B300, N70 } from '@atlaskit/theme/colors';
|
|
2
|
-
import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
|
|
3
2
|
export var getMarkerColor = function getMarkerColor(status) {
|
|
4
3
|
switch (status) {
|
|
5
4
|
case 'unvisited':
|
|
@@ -29,11 +28,11 @@ export var getTextColor = function getTextColor(status) {
|
|
|
29
28
|
export var getFontWeight = function getFontWeight(status) {
|
|
30
29
|
switch (status) {
|
|
31
30
|
case 'unvisited':
|
|
32
|
-
return
|
|
31
|
+
return "var(--ds-font-weight-regular, 400)";
|
|
33
32
|
case 'current':
|
|
34
33
|
case 'visited':
|
|
35
34
|
case 'disabled':
|
|
36
|
-
return
|
|
35
|
+
return "var(--ds-font-weight-semibold, 600)";
|
|
37
36
|
default:
|
|
38
37
|
return undefined;
|
|
39
38
|
}
|
|
@@ -10,8 +10,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
10
10
|
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); }; }
|
|
11
11
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
12
12
|
/* eslint-disable @atlaskit/design-system/no-nested-styles */
|
|
13
|
+
/**
|
|
14
|
+
* @jsxRuntime classic
|
|
15
|
+
*/
|
|
13
16
|
/** @jsx jsx */
|
|
14
17
|
import { PureComponent } from 'react';
|
|
18
|
+
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
20
|
import { css, jsx } from '@emotion/react';
|
|
16
21
|
import { spacing } from './constants';
|
|
17
22
|
import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
|
|
@@ -23,9 +28,10 @@ var containerStyles = css({
|
|
|
23
28
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
24
29
|
margin: '0 auto',
|
|
25
30
|
padding: "var(--ds-space-0, 0px)",
|
|
26
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
31
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
27
32
|
gap: "var(".concat(varSpacing, ")"),
|
|
28
33
|
listStyleType: 'none',
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
29
35
|
'&&': {
|
|
30
36
|
marginBlockStart: "var(--ds-space-500, 40px)"
|
|
31
37
|
}
|
|
@@ -130,6 +136,8 @@ _defineProperty(ProgressTracker, "defaultProps", {
|
|
|
130
136
|
items: [],
|
|
131
137
|
spacing: 'cosy',
|
|
132
138
|
render: {
|
|
139
|
+
// Anchor content is coming from another location
|
|
140
|
+
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
133
141
|
link: function link(_ref) {
|
|
134
142
|
var item = _ref.item;
|
|
135
143
|
return jsx(Link, item);
|
|
@@ -7,8 +7,6 @@ export declare const varTransitionDelay = "--ds--pt--td";
|
|
|
7
7
|
export declare const varTransitionEasing = "--ds--pt--te";
|
|
8
8
|
export declare const varMarkerColor = "--ds--pt--mc";
|
|
9
9
|
export declare const varBackgroundColor = "--ds--pt--bg";
|
|
10
|
-
export declare const REGULAR_FONT_WEIGHT: "var(--ds-font-weight-regular)";
|
|
11
|
-
export declare const SEMI_BOLD_FONT_WEIGHT: "var(--ds-font-weight-semibold)";
|
|
12
10
|
export declare const HALF_GRID_SIZE: "var(--ds-space-050)";
|
|
13
11
|
export declare const PROGRESS_BAR_HEIGHT: "var(--ds-space-100)";
|
|
14
|
-
export declare const LABEL_TOP_SPACING: "var(--ds-space-
|
|
12
|
+
export declare const LABEL_TOP_SPACING: "var(--ds-space-250)";
|
|
@@ -7,8 +7,6 @@ export declare const varTransitionDelay = "--ds--pt--td";
|
|
|
7
7
|
export declare const varTransitionEasing = "--ds--pt--te";
|
|
8
8
|
export declare const varMarkerColor = "--ds--pt--mc";
|
|
9
9
|
export declare const varBackgroundColor = "--ds--pt--bg";
|
|
10
|
-
export declare const REGULAR_FONT_WEIGHT: "var(--ds-font-weight-regular)";
|
|
11
|
-
export declare const SEMI_BOLD_FONT_WEIGHT: "var(--ds-font-weight-semibold)";
|
|
12
10
|
export declare const HALF_GRID_SIZE: "var(--ds-space-050)";
|
|
13
11
|
export declare const PROGRESS_BAR_HEIGHT: "var(--ds-space-100)";
|
|
14
|
-
export declare const LABEL_TOP_SPACING: "var(--ds-space-
|
|
12
|
+
export declare const LABEL_TOP_SPACING: "var(--ds-space-250)";
|
package/package.json
CHANGED
|
@@ -1,89 +1,89 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
2
|
+
"name": "@atlaskit/progress-tracker",
|
|
3
|
+
"version": "8.7.0",
|
|
4
|
+
"description": "A progress tracker displays the steps and progress through a journey.",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"registry": "https://registry.npmjs.org/"
|
|
7
|
+
},
|
|
8
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
9
|
+
"author": "Atlassian Pty Ltd",
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"main": "dist/cjs/index.js",
|
|
12
|
+
"module": "dist/esm/index.js",
|
|
13
|
+
"module:es2019": "dist/es2019/index.js",
|
|
14
|
+
"types": "dist/types/index.d.ts",
|
|
15
|
+
"sideEffects": false,
|
|
16
|
+
"atlaskit:src": "src/index.tsx",
|
|
17
|
+
"atlassian": {
|
|
18
|
+
"team": "Design System Team",
|
|
19
|
+
"releaseModel": "continuous",
|
|
20
|
+
"runReact18": true,
|
|
21
|
+
"productPushConsumption": [
|
|
22
|
+
"jira"
|
|
23
|
+
],
|
|
24
|
+
"website": {
|
|
25
|
+
"name": "Progress tracker",
|
|
26
|
+
"category": "Components"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@atlaskit/primitives": "^7.4.0",
|
|
31
|
+
"@atlaskit/theme": "^12.10.0",
|
|
32
|
+
"@atlaskit/tokens": "^1.51.0",
|
|
33
|
+
"@babel/runtime": "^7.0.0",
|
|
34
|
+
"@emotion/react": "^11.7.1",
|
|
35
|
+
"react-transition-group": "^4.4.1"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@af/accessibility-testing": "*",
|
|
42
|
+
"@af/visual-regression": "*",
|
|
43
|
+
"@atlaskit/ds-lib": "^2.3.0",
|
|
44
|
+
"@atlaskit/ssr": "*",
|
|
45
|
+
"@atlaskit/visual-regression": "*",
|
|
46
|
+
"@testing-library/react": "^12.1.5",
|
|
47
|
+
"@testing-library/user-event": "^14.4.3",
|
|
48
|
+
"@types/react-transition-group": "^2.0.6",
|
|
49
|
+
"jest-in-case": "^1.0.2",
|
|
50
|
+
"react-dom": "^16.8.0",
|
|
51
|
+
"react-router-dom": "^4.2.2",
|
|
52
|
+
"react-test-renderer": "^16.8.0",
|
|
53
|
+
"typescript": "~5.4.2"
|
|
54
|
+
},
|
|
55
|
+
"techstack": {
|
|
56
|
+
"@atlassian/frontend": {
|
|
57
|
+
"import-structure": "atlassian-conventions"
|
|
58
|
+
},
|
|
59
|
+
"@repo/internal": {
|
|
60
|
+
"dom-events": "use-bind-event-listener",
|
|
61
|
+
"design-system": "v1",
|
|
62
|
+
"design-tokens": [
|
|
63
|
+
"color",
|
|
64
|
+
"spacing"
|
|
65
|
+
],
|
|
66
|
+
"styling": [
|
|
67
|
+
"static",
|
|
68
|
+
"emotion"
|
|
69
|
+
],
|
|
70
|
+
"analytics": "analytics-next",
|
|
71
|
+
"deprecation": "no-deprecated-imports",
|
|
72
|
+
"ui-components": "primitives"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
"typesVersions": {
|
|
76
|
+
">=4.5 <4.9": {
|
|
77
|
+
"*": [
|
|
78
|
+
"dist/types-ts4.5/*",
|
|
79
|
+
"dist/types-ts4.5/index.d.ts"
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
"af:exports": {
|
|
84
|
+
"./constants": "./src/constants.tsx",
|
|
85
|
+
"./types": "./src/types.tsx",
|
|
86
|
+
".": "./src/index.tsx"
|
|
87
|
+
},
|
|
88
|
+
"homepage": "https://atlassian.design/components/progress-tracker/"
|
|
89
|
+
}
|
package/report.api.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
## API Report File for "@atlaskit/progress-tracker"
|
|
4
4
|
|
|
5
|
-
> Do not edit this file. This report is auto-generated using
|
|
5
|
+
> Do not edit this file. This report is auto-generated using
|
|
6
|
+
> [API Extractor](https://api-extractor.com/).
|
|
6
7
|
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
8
|
|
|
8
9
|
### Table of contents
|
|
@@ -22,57 +23,54 @@ import { PureComponent } from 'react';
|
|
|
22
23
|
|
|
23
24
|
// @public (undocumented)
|
|
24
25
|
interface LinkComponentProps {
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
// (undocumented)
|
|
27
|
+
item: Stage;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
// @public (undocumented)
|
|
30
|
-
export class ProgressTracker extends PureComponent<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
};
|
|
58
|
-
// (undocumented)
|
|
59
|
-
UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
|
|
31
|
+
export class ProgressTracker extends PureComponent<ProgressTrackerProps, State> {
|
|
32
|
+
// (undocumented)
|
|
33
|
+
static defaultProps: {
|
|
34
|
+
items: never[];
|
|
35
|
+
spacing: string;
|
|
36
|
+
render: {
|
|
37
|
+
link: ({ item }: LinkComponentProps) => jsx.JSX.Element;
|
|
38
|
+
};
|
|
39
|
+
animated: boolean;
|
|
40
|
+
label: string;
|
|
41
|
+
};
|
|
42
|
+
// (undocumented)
|
|
43
|
+
render(): jsx.JSX.Element;
|
|
44
|
+
// (undocumented)
|
|
45
|
+
state: {
|
|
46
|
+
prevStages: {
|
|
47
|
+
percentageComplete: number;
|
|
48
|
+
id: string;
|
|
49
|
+
label: string;
|
|
50
|
+
status: Status;
|
|
51
|
+
noLink?: boolean | undefined;
|
|
52
|
+
href?: string | undefined;
|
|
53
|
+
onClick?: (() => void) | undefined;
|
|
54
|
+
}[];
|
|
55
|
+
};
|
|
56
|
+
// (undocumented)
|
|
57
|
+
UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
|
|
60
58
|
}
|
|
61
59
|
|
|
62
60
|
// @public (undocumented)
|
|
63
61
|
export interface ProgressTrackerProps {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
62
|
+
animated: boolean;
|
|
63
|
+
items: Stages;
|
|
64
|
+
label?: string;
|
|
65
|
+
render: ProgressTrackerStageRenderProp;
|
|
66
|
+
spacing: Spacing;
|
|
67
|
+
testId?: string;
|
|
70
68
|
}
|
|
71
69
|
|
|
72
70
|
// @public (undocumented)
|
|
73
71
|
interface ProgressTrackerStageRenderProp {
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
// (undocumented)
|
|
73
|
+
link: (props: LinkComponentProps) => JSX.Element;
|
|
76
74
|
}
|
|
77
75
|
|
|
78
76
|
// @public (undocumented)
|
|
@@ -80,27 +78,27 @@ type Spacing = keyof typeof spacing;
|
|
|
80
78
|
|
|
81
79
|
// @public
|
|
82
80
|
const spacing: {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
81
|
+
readonly comfortable: 'var(--ds-space-500)';
|
|
82
|
+
readonly cosy: 'var(--ds-space-200)';
|
|
83
|
+
readonly compact: 'var(--ds-space-050)';
|
|
86
84
|
};
|
|
87
85
|
|
|
88
86
|
// @public (undocumented)
|
|
89
87
|
export interface Stage {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
88
|
+
// (undocumented)
|
|
89
|
+
href?: string;
|
|
90
|
+
// (undocumented)
|
|
91
|
+
id: string;
|
|
92
|
+
// (undocumented)
|
|
93
|
+
label: string;
|
|
94
|
+
// (undocumented)
|
|
95
|
+
noLink?: boolean;
|
|
96
|
+
// (undocumented)
|
|
97
|
+
onClick?: () => void;
|
|
98
|
+
// (undocumented)
|
|
99
|
+
percentageComplete: number;
|
|
100
|
+
// (undocumented)
|
|
101
|
+
status: Status;
|
|
104
102
|
}
|
|
105
103
|
|
|
106
104
|
// @public (undocumented)
|
|
@@ -108,8 +106,8 @@ export type Stages = Stage[];
|
|
|
108
106
|
|
|
109
107
|
// @public (undocumented)
|
|
110
108
|
interface State {
|
|
111
|
-
|
|
112
|
-
|
|
109
|
+
// (undocumented)
|
|
110
|
+
prevStages: Stages;
|
|
113
111
|
}
|
|
114
112
|
|
|
115
113
|
// @public (undocumented)
|
|
@@ -126,7 +124,7 @@ type Status = 'current' | 'disabled' | 'unvisited' | 'visited';
|
|
|
126
124
|
|
|
127
125
|
```json
|
|
128
126
|
{
|
|
129
|
-
|
|
127
|
+
"react": "^16.8.0"
|
|
130
128
|
}
|
|
131
129
|
```
|
|
132
130
|
|