@atlaskit/progress-tracker 9.0.3 → 9.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/internal/stage.js +22 -4
  3. package/dist/es2019/internal/stage.js +23 -4
  4. package/dist/esm/internal/stage.js +22 -4
  5. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/progress-tracker
2
2
 
3
+ ## 9.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#103302](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103302)
8
+ [`057afb45671d1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/057afb45671d1) -
9
+ [ux] The step marker for disabled steps has been updated to use the disabled icon color token.
10
+
3
11
  ## 9.0.3
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/internal/stage.js CHANGED
@@ -18,6 +18,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
18
18
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
19
19
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
20
20
  var _reactTransitionGroup = require("react-transition-group");
21
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
21
22
  var _compiled = require("@atlaskit/primitives/compiled");
22
23
  var _colors = require("@atlaskit/theme/colors");
23
24
  var _bar = _interopRequireDefault(require("./bar"));
@@ -43,13 +44,21 @@ var fontWeight = {
43
44
  visited: "_k48pmoej",
44
45
  disabled: "_k48pmoej"
45
46
  };
46
- var getMarkerColor = function getMarkerColor(status) {
47
+ var getMarkerColor = function getMarkerColor(_ref) {
48
+ var status = _ref.status,
49
+ percentageCompleted = _ref.percentageCompleted;
47
50
  switch (status) {
48
51
  case 'unvisited':
49
52
  return "var(--ds-icon-subtle, ".concat(_colors.N70, ")");
50
53
  case 'current':
51
54
  case 'visited':
55
+ return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
52
56
  case 'disabled':
57
+ if (percentageCompleted === 0 && (0, _platformFeatureFlags.fg)('platform_progress_tracker_disabled_marker_color')) {
58
+ return "var(--ds-icon-disabled, ".concat(_colors.N70, ")");
59
+ }
60
+ // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
61
+ // Otherwise, the grey marker would be visible within the progress bar.
53
62
  return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
54
63
  default:
55
64
  return;
@@ -68,13 +77,19 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
68
77
  (0, _defineProperty2.default)(_this, "onEntered", function () {
69
78
  _this.setState({
70
79
  transitioning: false,
71
- oldMarkerColor: getMarkerColor(_this.props.item.status),
80
+ oldMarkerColor: getMarkerColor({
81
+ status: _this.props.item.status,
82
+ percentageCompleted: _this.props.item.percentageComplete
83
+ }),
72
84
  oldPercentageComplete: _this.props.item.percentageComplete
73
85
  });
74
86
  });
75
87
  _this.state = {
76
88
  transitioning: false,
77
- oldMarkerColor: getMarkerColor(_this.props.item.status),
89
+ oldMarkerColor: getMarkerColor({
90
+ status: _this.props.item.status,
91
+ percentageCompleted: _this.props.item.percentageComplete
92
+ }),
78
93
  oldPercentageComplete: 0
79
94
  };
80
95
  return _this;
@@ -112,7 +127,10 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
112
127
  transitionEasing = _this$props.transitionEasing,
113
128
  testId = _this$props.testId;
114
129
  var ariaCurrent = item.status === 'current' ? 'step' : 'false';
115
- var listInlineStyles = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing), '--ds--pt--mc', this.state.oldMarkerColor), '--ds--pt--bg', getMarkerColor(item.status)), "listStyleType", 'none');
130
+ var listInlineStyles = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing), '--ds--pt--mc', this.state.oldMarkerColor), '--ds--pt--bg', getMarkerColor({
131
+ status: item.status,
132
+ percentageCompleted: item.percentageComplete
133
+ })), "listStyleType", 'none');
116
134
  return /*#__PURE__*/React.createElement("li", {
117
135
  "data-testid": testId
118
136
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/dist/es2019/internal/stage.js CHANGED
@@ -5,6 +5,7 @@ import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { createRef, PureComponent } from 'react';
7
7
  import { CSSTransition } from 'react-transition-group';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  import { Box } from '@atlaskit/primitives/compiled';
9
10
  import { B300, N70 } from '@atlaskit/theme/colors';
10
11
  import ProgressBar from './bar';
@@ -24,13 +25,22 @@ const fontWeight = {
24
25
  visited: "_k48pmoej",
25
26
  disabled: "_k48pmoej"
26
27
  };
27
- const getMarkerColor = status => {
28
+ const getMarkerColor = ({
29
+ status,
30
+ percentageCompleted
31
+ }) => {
28
32
  switch (status) {
29
33
  case 'unvisited':
30
34
  return `var(--ds-icon-subtle, ${N70})`;
31
35
  case 'current':
32
36
  case 'visited':
37
+ return `var(--ds-icon-brand, ${B300})`;
33
38
  case 'disabled':
39
+ if (percentageCompleted === 0 && fg('platform_progress_tracker_disabled_marker_color')) {
40
+ return `var(--ds-icon-disabled, ${N70})`;
41
+ }
42
+ // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
43
+ // Otherwise, the grey marker would be visible within the progress bar.
34
44
  return `var(--ds-icon-brand, ${B300})`;
35
45
  default:
36
46
  return;
@@ -47,13 +57,19 @@ export default class ProgressTrackerStage extends PureComponent {
47
57
  _defineProperty(this, "onEntered", () => {
48
58
  this.setState({
49
59
  transitioning: false,
50
- oldMarkerColor: getMarkerColor(this.props.item.status),
60
+ oldMarkerColor: getMarkerColor({
61
+ status: this.props.item.status,
62
+ percentageCompleted: this.props.item.percentageComplete
63
+ }),
51
64
  oldPercentageComplete: this.props.item.percentageComplete
52
65
  });
53
66
  });
54
67
  this.state = {
55
68
  transitioning: false,
56
- oldMarkerColor: getMarkerColor(this.props.item.status),
69
+ oldMarkerColor: getMarkerColor({
70
+ status: this.props.item.status,
71
+ percentageCompleted: this.props.item.percentageComplete
72
+ }),
57
73
  oldPercentageComplete: 0
58
74
  };
59
75
  }
@@ -89,7 +105,10 @@ export default class ProgressTrackerStage extends PureComponent {
89
105
  ['--ds--pt--td']: `${transitionDelay}ms`,
90
106
  ['--ds--pt--te']: transitionEasing,
91
107
  ['--ds--pt--mc']: this.state.oldMarkerColor,
92
- ['--ds--pt--bg']: getMarkerColor(item.status),
108
+ ['--ds--pt--bg']: getMarkerColor({
109
+ status: item.status,
110
+ percentageCompleted: item.percentageComplete
111
+ }),
93
112
  listStyleType: 'none'
94
113
  };
95
114
  return /*#__PURE__*/React.createElement("li", {
package/dist/esm/internal/stage.js CHANGED
@@ -14,6 +14,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
14
14
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
15
15
  import { createRef, PureComponent } from 'react';
16
16
  import { CSSTransition } from 'react-transition-group';
17
+ import { fg } from '@atlaskit/platform-feature-flags';
17
18
  import { Box } from '@atlaskit/primitives/compiled';
18
19
  import { B300, N70 } from '@atlaskit/theme/colors';
19
20
  import ProgressBar from './bar';
@@ -33,13 +34,21 @@ var fontWeight = {
33
34
  visited: "_k48pmoej",
34
35
  disabled: "_k48pmoej"
35
36
  };
36
- var getMarkerColor = function getMarkerColor(status) {
37
+ var getMarkerColor = function getMarkerColor(_ref) {
38
+ var status = _ref.status,
39
+ percentageCompleted = _ref.percentageCompleted;
37
40
  switch (status) {
38
41
  case 'unvisited':
39
42
  return "var(--ds-icon-subtle, ".concat(N70, ")");
40
43
  case 'current':
41
44
  case 'visited':
45
+ return "var(--ds-icon-brand, ".concat(B300, ")");
42
46
  case 'disabled':
47
+ if (percentageCompleted === 0 && fg('platform_progress_tracker_disabled_marker_color')) {
48
+ return "var(--ds-icon-disabled, ".concat(N70, ")");
49
+ }
50
+ // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
51
+ // Otherwise, the grey marker would be visible within the progress bar.
43
52
  return "var(--ds-icon-brand, ".concat(B300, ")");
44
53
  default:
45
54
  return;
@@ -58,13 +67,19 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
58
67
  _defineProperty(_this, "onEntered", function () {
59
68
  _this.setState({
60
69
  transitioning: false,
61
- oldMarkerColor: getMarkerColor(_this.props.item.status),
70
+ oldMarkerColor: getMarkerColor({
71
+ status: _this.props.item.status,
72
+ percentageCompleted: _this.props.item.percentageComplete
73
+ }),
62
74
  oldPercentageComplete: _this.props.item.percentageComplete
63
75
  });
64
76
  });
65
77
  _this.state = {
66
78
  transitioning: false,
67
- oldMarkerColor: getMarkerColor(_this.props.item.status),
79
+ oldMarkerColor: getMarkerColor({
80
+ status: _this.props.item.status,
81
+ percentageCompleted: _this.props.item.percentageComplete
82
+ }),
68
83
  oldPercentageComplete: 0
69
84
  };
70
85
  return _this;
@@ -102,7 +117,10 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
102
117
  transitionEasing = _this$props.transitionEasing,
103
118
  testId = _this$props.testId;
104
119
  var ariaCurrent = item.status === 'current' ? 'step' : 'false';
105
- var listInlineStyles = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing), '--ds--pt--mc', this.state.oldMarkerColor), '--ds--pt--bg', getMarkerColor(item.status)), "listStyleType", 'none');
120
+ var listInlineStyles = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '--ds--pt--ts', "".concat(transitionSpeed, "ms")), '--ds--pt--td', "".concat(transitionDelay, "ms")), '--ds--pt--te', transitionEasing), '--ds--pt--mc', this.state.oldMarkerColor), '--ds--pt--bg', getMarkerColor({
121
+ status: item.status,
122
+ percentageCompleted: item.percentageComplete
123
+ })), "listStyleType", 'none');
106
124
  return /*#__PURE__*/React.createElement("li", {
107
125
  "data-testid": testId
108
126
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/progress-tracker",
3
- "version": "9.0.3",
3
+ "version": "9.1.0",
4
4
  "description": "A progress tracker displays the steps and progress through a journey.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/platform-feature-flags": "^0.3.0",
30
30
  "@atlaskit/primitives": "^13.3.0",
31
31
  "@atlaskit/theme": "^14.0.0",
32
- "@atlaskit/tokens": "^3.0.0",
32
+ "@atlaskit/tokens": "^3.1.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@compiled/react": "^0.18.1",
35
35
  "react-transition-group": "^4.4.1"
@@ -87,6 +87,9 @@
87
87
  "platform_progress_tracker_link_migration": {
88
88
  "type": "boolean",
89
89
  "showOnWebsiteForTransitiveDependencies": true
90
+ },
91
+ "platform_progress_tracker_disabled_marker_color": {
92
+ "type": "boolean"
90
93
  }
91
94
  }
92
95
  }