@atlaskit/progress-tracker 9.0.3 → 9.2.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 (6) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/internal/stage.js +21 -4
  3. package/dist/es2019/internal/stage.js +22 -4
  4. package/dist/esm/internal/stage.js +21 -4
  5. package/package.json +2 -2
  6. package/__perf__/default.tsx +0 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/progress-tracker
2
2
 
3
+ ## 9.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#107227](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107227)
8
+ [`08728da34c4fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/08728da34c4fd) -
9
+ The step marker for disabled steps has been updated to use the disabled icon color token. This
10
+ change is no longer behind a feature flag.
11
+
12
+ ## 9.1.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#103302](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103302)
17
+ [`057afb45671d1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/057afb45671d1) -
18
+ [ux] The step marker for disabled steps has been updated to use the disabled icon color token.
19
+
3
20
  ## 9.0.3
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/internal/stage.js CHANGED
@@ -43,13 +43,21 @@ var fontWeight = {
43
43
  visited: "_k48pmoej",
44
44
  disabled: "_k48pmoej"
45
45
  };
46
- var getMarkerColor = function getMarkerColor(status) {
46
+ var getMarkerColor = function getMarkerColor(_ref) {
47
+ var status = _ref.status,
48
+ percentageCompleted = _ref.percentageCompleted;
47
49
  switch (status) {
48
50
  case 'unvisited':
49
51
  return "var(--ds-icon-subtle, ".concat(_colors.N70, ")");
50
52
  case 'current':
51
53
  case 'visited':
54
+ return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
52
55
  case 'disabled':
56
+ if (percentageCompleted === 0) {
57
+ return "var(--ds-icon-disabled, ".concat(_colors.N70, ")");
58
+ }
59
+ // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
60
+ // Otherwise, the grey marker would be visible within the progress bar.
53
61
  return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
54
62
  default:
55
63
  return;
@@ -68,13 +76,19 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
68
76
  (0, _defineProperty2.default)(_this, "onEntered", function () {
69
77
  _this.setState({
70
78
  transitioning: false,
71
- oldMarkerColor: getMarkerColor(_this.props.item.status),
79
+ oldMarkerColor: getMarkerColor({
80
+ status: _this.props.item.status,
81
+ percentageCompleted: _this.props.item.percentageComplete
82
+ }),
72
83
  oldPercentageComplete: _this.props.item.percentageComplete
73
84
  });
74
85
  });
75
86
  _this.state = {
76
87
  transitioning: false,
77
- oldMarkerColor: getMarkerColor(_this.props.item.status),
88
+ oldMarkerColor: getMarkerColor({
89
+ status: _this.props.item.status,
90
+ percentageCompleted: _this.props.item.percentageComplete
91
+ }),
78
92
  oldPercentageComplete: 0
79
93
  };
80
94
  return _this;
@@ -112,7 +126,10 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
112
126
  transitionEasing = _this$props.transitionEasing,
113
127
  testId = _this$props.testId;
114
128
  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');
129
+ 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({
130
+ status: item.status,
131
+ percentageCompleted: item.percentageComplete
132
+ })), "listStyleType", 'none');
116
133
  return /*#__PURE__*/React.createElement("li", {
117
134
  "data-testid": testId
118
135
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/dist/es2019/internal/stage.js CHANGED
@@ -24,13 +24,22 @@ const fontWeight = {
24
24
  visited: "_k48pmoej",
25
25
  disabled: "_k48pmoej"
26
26
  };
27
- const getMarkerColor = status => {
27
+ const getMarkerColor = ({
28
+ status,
29
+ percentageCompleted
30
+ }) => {
28
31
  switch (status) {
29
32
  case 'unvisited':
30
33
  return `var(--ds-icon-subtle, ${N70})`;
31
34
  case 'current':
32
35
  case 'visited':
36
+ return `var(--ds-icon-brand, ${B300})`;
33
37
  case 'disabled':
38
+ if (percentageCompleted === 0) {
39
+ return `var(--ds-icon-disabled, ${N70})`;
40
+ }
41
+ // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
42
+ // Otherwise, the grey marker would be visible within the progress bar.
34
43
  return `var(--ds-icon-brand, ${B300})`;
35
44
  default:
36
45
  return;
@@ -47,13 +56,19 @@ export default class ProgressTrackerStage extends PureComponent {
47
56
  _defineProperty(this, "onEntered", () => {
48
57
  this.setState({
49
58
  transitioning: false,
50
- oldMarkerColor: getMarkerColor(this.props.item.status),
59
+ oldMarkerColor: getMarkerColor({
60
+ status: this.props.item.status,
61
+ percentageCompleted: this.props.item.percentageComplete
62
+ }),
51
63
  oldPercentageComplete: this.props.item.percentageComplete
52
64
  });
53
65
  });
54
66
  this.state = {
55
67
  transitioning: false,
56
- oldMarkerColor: getMarkerColor(this.props.item.status),
68
+ oldMarkerColor: getMarkerColor({
69
+ status: this.props.item.status,
70
+ percentageCompleted: this.props.item.percentageComplete
71
+ }),
57
72
  oldPercentageComplete: 0
58
73
  };
59
74
  }
@@ -89,7 +104,10 @@ export default class ProgressTrackerStage extends PureComponent {
89
104
  ['--ds--pt--td']: `${transitionDelay}ms`,
90
105
  ['--ds--pt--te']: transitionEasing,
91
106
  ['--ds--pt--mc']: this.state.oldMarkerColor,
92
- ['--ds--pt--bg']: getMarkerColor(item.status),
107
+ ['--ds--pt--bg']: getMarkerColor({
108
+ status: item.status,
109
+ percentageCompleted: item.percentageComplete
110
+ }),
93
111
  listStyleType: 'none'
94
112
  };
95
113
  return /*#__PURE__*/React.createElement("li", {
package/dist/esm/internal/stage.js CHANGED
@@ -33,13 +33,21 @@ var fontWeight = {
33
33
  visited: "_k48pmoej",
34
34
  disabled: "_k48pmoej"
35
35
  };
36
- var getMarkerColor = function getMarkerColor(status) {
36
+ var getMarkerColor = function getMarkerColor(_ref) {
37
+ var status = _ref.status,
38
+ percentageCompleted = _ref.percentageCompleted;
37
39
  switch (status) {
38
40
  case 'unvisited':
39
41
  return "var(--ds-icon-subtle, ".concat(N70, ")");
40
42
  case 'current':
41
43
  case 'visited':
44
+ return "var(--ds-icon-brand, ".concat(B300, ")");
42
45
  case 'disabled':
46
+ if (percentageCompleted === 0) {
47
+ return "var(--ds-icon-disabled, ".concat(N70, ")");
48
+ }
49
+ // If the percentage completed is greater than 0, we show the brand colour, so that the marker (circle) blends in with the progress bar.
50
+ // Otherwise, the grey marker would be visible within the progress bar.
43
51
  return "var(--ds-icon-brand, ".concat(B300, ")");
44
52
  default:
45
53
  return;
@@ -58,13 +66,19 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
58
66
  _defineProperty(_this, "onEntered", function () {
59
67
  _this.setState({
60
68
  transitioning: false,
61
- oldMarkerColor: getMarkerColor(_this.props.item.status),
69
+ oldMarkerColor: getMarkerColor({
70
+ status: _this.props.item.status,
71
+ percentageCompleted: _this.props.item.percentageComplete
72
+ }),
62
73
  oldPercentageComplete: _this.props.item.percentageComplete
63
74
  });
64
75
  });
65
76
  _this.state = {
66
77
  transitioning: false,
67
- oldMarkerColor: getMarkerColor(_this.props.item.status),
78
+ oldMarkerColor: getMarkerColor({
79
+ status: _this.props.item.status,
80
+ percentageCompleted: _this.props.item.percentageComplete
81
+ }),
68
82
  oldPercentageComplete: 0
69
83
  };
70
84
  return _this;
@@ -102,7 +116,10 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
102
116
  transitionEasing = _this$props.transitionEasing,
103
117
  testId = _this$props.testId;
104
118
  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');
119
+ 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({
120
+ status: item.status,
121
+ percentageCompleted: item.percentageComplete
122
+ })), "listStyleType", 'none');
106
123
  return /*#__PURE__*/React.createElement("li", {
107
124
  "data-testid": testId
108
125
  // 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.2.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.2.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@compiled/react": "^0.18.1",
35
35
  "react-transition-group": "^4.4.1"
package/__perf__/default.tsx DELETED
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
-
3
- import { ProgressTracker } from '../src';
4
-
5
- export default () => <ProgressTracker items={[]} />;