@atlaskit/progress-tracker 8.0.3 → 8.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/progress-tracker
 
+## 8.2.0
+
+### Minor Changes
+
+- [`4e96270c06e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4e96270c06e) - [ux] Instrumented progress-tracker with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.1.0
+
+### Minor Changes
+
+- [`d2429272ffa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2429272ffa) - Migrates usage of `styled-components` to `@emotion`. Under the hood the component also no longer uses `@atlaskit/page/grid`, although still uses the same spacing scale.
+
+## 8.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.0.3
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -8,12 +8,14 @@ exports.spacing = exports.defaultGridSize = void 0;
 var _constants = require("@atlaskit/theme/constants");
 
 var defaultGridSize = (0, _constants.gridSize)();
-/** Ideally these are exported by @atlaskit/page */
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
 
 exports.defaultGridSize = defaultGridSize;
 var spacing = {
   comfortable: defaultGridSize * 5,
   cosy: defaultGridSize * 2,
-  compact: defaultGridSize * 0.5
+  compact: defaultGridSize / 2
 };
 exports.spacing = spacing;

package/dist/cjs/index.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ProgressTracker", {
   enumerable: true,
   get: function get() {
-    return _ProgressTracker.default;
+    return _progressTracker.default;
   }
 });
 
-var _ProgressTracker = _interopRequireDefault(require("./ProgressTracker"));
+var _progressTracker = _interopRequireDefault(require("./progress-tracker"));

package/dist/cjs/internal/bar.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("../constants");
+
+var _constants2 = require("./constants");
+
+/** @jsx jsx */
+var progressBarStyles = (0, _core.css)({
+  height: _constants2.PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"),
+  borderBottomRightRadius: _constants2.PROGRESS_BAR_HEIGHT,
+  borderTopRightRadius: _constants2.PROGRESS_BAR_HEIGHT,
+  transform: "translate(0, -".concat(_constants2.LABEL_TOP_SPACING, "px)"),
+  transition: "width var(".concat(_constants2.varTransitionSpeed, ") var(").concat(_constants2.varTransitionEasing, ")"),
+  transitionDelay: "var(".concat(_constants2.varTransitionDelay, ")")
+});
+/**
+ * __Progress bar__
+ *
+ * A progress bar describes the horizontal tracking bar that traverses each individual step.
+ *
+ */
+
+var ProgressBar = function ProgressBar(_ref) {
+  var percentageComplete = _ref.percentageComplete,
+      testId = _ref.testId;
+  return (0, _core.jsx)("div", {
+    "data-testid": testId,
+    style: {
+      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(").concat(_constants2.varSpacing, ", ").concat(_constants.spacing.cosy, "px) + ").concat(_constants2.HALF_GRID_SIZE, "px))")
+    },
+    css: progressBarStyles
+  });
+};
+
+var _default = ProgressBar;
+exports.default = _default;

package/dist/cjs/internal/constants.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.varTransitionSpeed = exports.varTransitionEasing = exports.varTransitionDelay = exports.varSpacing = exports.varMarkerColor = exports.varBackgroundColor = exports.TRANSITION_SPEED = exports.SEMI_BOLD_FONT_WEIGHT = exports.REGULAR_FONT_WEIGHT = exports.PROGRESS_BAR_HEIGHT = exports.LINEAR_TRANSITION_SPEED = exports.LABEL_TOP_SPACING = exports.HALF_GRID_SIZE = exports.ANIMATION_EASE_OUT = void 0;
+
+var _constants = require("../constants");
+
+var TRANSITION_SPEED = 300;
+exports.TRANSITION_SPEED = TRANSITION_SPEED;
+var LINEAR_TRANSITION_SPEED = 50;
+exports.LINEAR_TRANSITION_SPEED = LINEAR_TRANSITION_SPEED;
+var ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
+exports.ANIMATION_EASE_OUT = ANIMATION_EASE_OUT;
+var varSpacing = '--ds--pt--sp';
+exports.varSpacing = varSpacing;
+var varTransitionSpeed = '--ds--pt--ts';
+exports.varTransitionSpeed = varTransitionSpeed;
+var varTransitionDelay = '--ds--pt--td';
+exports.varTransitionDelay = varTransitionDelay;
+var varTransitionEasing = '--ds--pt--te';
+exports.varTransitionEasing = varTransitionEasing;
+var varMarkerColor = '--ds--pt--mc';
+exports.varMarkerColor = varMarkerColor;
+var varBackgroundColor = '--ds--pt--bg';
+exports.varBackgroundColor = varBackgroundColor;
+var SEMI_BOLD_FONT_WEIGHT = '600';
+exports.SEMI_BOLD_FONT_WEIGHT = SEMI_BOLD_FONT_WEIGHT;
+var REGULAR_FONT_WEIGHT = '400';
+exports.REGULAR_FONT_WEIGHT = REGULAR_FONT_WEIGHT;
+var HALF_GRID_SIZE = _constants.defaultGridSize / 2;
+exports.HALF_GRID_SIZE = HALF_GRID_SIZE;
+var PROGRESS_BAR_HEIGHT = _constants.defaultGridSize; // Labels sit 20px from bottom of progress bar.
+
+exports.PROGRESS_BAR_HEIGHT = PROGRESS_BAR_HEIGHT;
+var LABEL_TOP_SPACING = _constants.defaultGridSize + 20;
+exports.LABEL_TOP_SPACING = LABEL_TOP_SPACING;

package/dist/cjs/internal/link.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+/** @jsx jsx */
+var linkStyles = (0, _core.css)({
+  color: "var(--ds-text, ".concat(_colors.N800, ")"),
+  cursor: 'pointer'
+});
+/**
+ * __Progress tracker link__
+ */
+
+var Link = function Link(_ref) {
+  var href = _ref.href,
+      onClick = _ref.onClick,
+      label = _ref.label,
+      testId = _ref.testId;
+  return (0, _core.jsx)("a", {
+    css: linkStyles,
+    href: href,
+    onClick: onClick,
+    "data-testid": testId
+  }, label);
+};
+
+var _default = Link;
+exports.default = _default;

package/dist/cjs/internal/marker.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _constants = require("./constants");
+
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+var progressMarkerStyles = (0, _core.css)({
+  width: _constants.PROGRESS_BAR_HEIGHT,
+  height: _constants.PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: "var(".concat(_constants.varBackgroundColor, ")"),
+  borderRadius: _constants.PROGRESS_BAR_HEIGHT,
+  transform: "translate(-50%, -".concat(_constants.LABEL_TOP_SPACING, "px)"),
+  transition: "opacity var(".concat(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, "), background-color var(").concat(_constants.varTransitionSpeed, ") var(").concat(_constants.varTransitionEasing, ")"),
+  transitionDelay: "var(".concat(_constants.varTransitionDelay, ")"),
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1
+  },
+  '&.fade-enter': {
+    backgroundColor: "var(".concat(_constants.varMarkerColor, ")")
+  },
+  '&.fade-enter.fade-enter-active': {
+    backgroundColor: "var(".concat(_constants.varBackgroundColor, ")")
+  }
+});
+/**
+ * __Progress marker__
+ *
+ * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
+ */
+
+var ProgressMarker = function ProgressMarker(_ref) {
+  var testId = _ref.testId;
+  return (0, _core.jsx)("div", {
+    "data-testid": testId,
+    css: progressMarkerStyles
+  });
+};
+
+var _default = ProgressMarker;
+exports.default = _default;

package/dist/cjs/internal/stage.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _bar = _interopRequireDefault(require("./bar"));
+
+var _constants2 = require("./constants");
+
+var _marker = _interopRequireDefault(require("./marker"));
+
+var _utils = require("./utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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); }; }
+
+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; } }
+
+var containerStyles = (0, _core.css)({
+  width: '100%',
+  position: 'relative'
+});
+var listItemStyles = (0, _core.css)({
+  margin: 0,
+  overflowWrap: 'break-word'
+});
+var titleStyles = (0, _core.css)({
+  marginTop: _constants2.LABEL_TOP_SPACING,
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  fontSize: (0, _constants.fontSize)(),
+  lineHeight: '16px',
+  textAlign: 'center',
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1,
+    transition: "opacity var(".concat(_constants2.varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
+  }
+});
+
+var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(ProgressTrackerStage, _PureComponent);
+
+  var _super = _createSuper(ProgressTrackerStage);
+
+  function ProgressTrackerStage(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ProgressTrackerStage);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEntered", function () {
+      _this.setState({
+        transitioning: false,
+        oldMarkerColor: (0, _utils.getMarkerColor)(_this.props.item.status),
+        oldPercentageComplete: _this.props.item.percentageComplete
+      });
+    });
+    _this.state = {
+      transitioning: false,
+      oldMarkerColor: (0, _utils.getMarkerColor)(_this.props.item.status),
+      oldPercentageComplete: 0
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(ProgressTrackerStage, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
+        transitioning: true
+      }));
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps() {
+      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
+        transitioning: true
+      }));
+    }
+  }, {
+    key: "shouldShowLink",
+    value: function shouldShowLink() {
+      return this.props.item.status === 'visited' && !this.props.item.noLink;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref;
+
+      var _this$props = this.props,
+          item = _this$props.item,
+          render = _this$props.render,
+          transitionDelay = _this$props.transitionDelay,
+          transitionSpeed = _this$props.transitionSpeed,
+          transitionEasing = _this$props.transitionEasing,
+          testId = _this$props.testId;
+      var ariaCurrent = item.status === 'current' ? 'step' : 'false';
+      return (0, _core.jsx)("li", {
+        "data-testid": testId,
+        style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants2.varTransitionSpeed, "".concat(transitionSpeed, "ms")), (0, _defineProperty2.default)(_ref, _constants2.varTransitionDelay, "".concat(transitionDelay, "ms")), (0, _defineProperty2.default)(_ref, _constants2.varTransitionEasing, transitionEasing), (0, _defineProperty2.default)(_ref, _constants2.varMarkerColor, this.state.oldMarkerColor), (0, _defineProperty2.default)(_ref, _constants2.varBackgroundColor, (0, _utils.getMarkerColor)(item.status)), _ref),
+        css: listItemStyles,
+        "aria-current": ariaCurrent
+      }, (0, _core.jsx)("div", {
+        css: containerStyles
+      }, (0, _core.jsx)(_reactTransitionGroup.CSSTransition, {
+        appear: true,
+        in: this.state.transitioning,
+        onEntered: this.onEntered,
+        timeout: transitionDelay + transitionSpeed,
+        classNames: "fade"
+      }, (0, _core.jsx)(_marker.default, {
+        testId: testId && "".concat(testId, "-marker")
+      })), (0, _core.jsx)(_reactTransitionGroup.CSSTransition, {
+        appear: true,
+        in: this.state.transitioning,
+        onEntered: this.onEntered,
+        timeout: transitionDelay + transitionSpeed,
+        classNames: "fade"
+      }, (0, _core.jsx)(_bar.default, {
+        testId: testId && "".concat(testId, "-bar"),
+        percentageComplete: item.percentageComplete
+      })), (0, _core.jsx)(_reactTransitionGroup.CSSTransition, {
+        appear: true,
+        in: this.state.transitioning,
+        onEntered: this.onEntered,
+        timeout: transitionDelay + transitionSpeed,
+        classNames: "fade"
+      }, (0, _core.jsx)("div", {
+        css: titleStyles,
+        "data-testid": testId && "".concat(testId, "-title"),
+        style: {
+          color: (0, _utils.getTextColor)(item.status),
+          fontWeight: (0, _utils.getFontWeight)(item.status)
+        }
+      }, this.shouldShowLink() ? render.link({
+        item: item
+      }) : item.label))));
+    }
+  }]);
+  return ProgressTrackerStage;
+}(_react.PureComponent);
+
+exports.default = ProgressTrackerStage;

package/dist/cjs/internal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/internal/utils.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextColor = exports.getMarkerColor = exports.getFontWeight = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("./constants");
+
+var getMarkerColor = function getMarkerColor(status) {
+  switch (status) {
+    case 'unvisited':
+      return "var(--ds-icon-subtle, ".concat(_colors.N70, ")");
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
+
+    default:
+      return;
+  }
+};
+
+exports.getMarkerColor = getMarkerColor;
+
+var getTextColor = function getTextColor(status) {
+  switch (status) {
+    case 'unvisited':
+      return "var(--ds-text-subtlest, ".concat(_colors.N300, ")");
+
+    case 'current':
+      return "var(--ds-text-brand, ".concat(_colors.B300, ")");
+
+    case 'visited':
+      return "var(--ds-text, ".concat(_colors.N800, ")");
+
+    case 'disabled':
+      return "var(--ds-text-disabled, ".concat(_colors.N70, ")");
+
+    default:
+      return;
+  }
+};
+
+exports.getTextColor = getTextColor;
+
+var getFontWeight = function getFontWeight(status) {
+  switch (status) {
+    case 'unvisited':
+      return _constants.REGULAR_FONT_WEIGHT;
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return _constants.SEMI_BOLD_FONT_WEIGHT;
+
+    default:
+      return undefined;
+  }
+};
+
+exports.getFontWeight = getFontWeight;

package/dist/cjs/{ProgressTracker/index.js → progress-tracker.js}

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,34 +21,37 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = require("styled-components");
-
-var _page = require("@atlaskit/page");
+var _react = require("react");
 
-var _ProgressTrackerLink = _interopRequireDefault(require("../ProgressTrackerLink"));
+var _core = require("@emotion/core");
 
-var _ProgressTrackerStage = _interopRequireDefault(require("../ProgressTrackerStage"));
+var _constants = require("./constants");
 
-var _styled = require("./styled");
+var _constants2 = require("./internal/constants");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _link = _interopRequireDefault(require("./internal/link"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+var _stage = _interopRequireDefault(require("./internal/stage"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
 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; } }
 
-var TRANSITION_SPEED = 300;
-var LINEAR_TRANSITION_SPEED = 50;
-var easeOut = 'cubic-bezier(0.15,1,0.3,1)';
-var defaultLabel = 'Progress';
+var containerStyles = (0, _core.css)({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: 0,
+  gap: "var(".concat(_constants2.varSpacing, ")"),
+  listStyleType: 'none',
+  '&&': {
+    marginTop: 40
+  }
+});
 
 var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ProgressTracker, _PureComponent);
@@ -67,14 +68,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createTheme", function () {
-      return {
-        spacing: _this.props.spacing,
-        columns: _this.props.items.length * 2
-      };
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      prevStages: _this.props.items.map(function (stage, index) {
+      prevStages: _this.props.items.map(function (stage) {
         return _objectSpread(_objectSpread({}, stage), {}, {
           percentageComplete: 0
         });
@@ -102,7 +97,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this3 = this,
+          _ref;
 
       var _this$props = this.props,
           testId = _this$props.testId,
@@ -121,38 +117,43 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
       var items = this.props.items.map(function (stage, index) {
         var transitionSpeed = 0;
         var transitionDelay = 0;
-        var transitionEasing = progressChanges > 1 ? 'linear' : easeOut;
+        var transitionEasing = progressChanges > 1 ? 'linear' : _constants2.ANIMATION_EASE_OUT;
 
         if (_this3.props.animated) {
-          transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
+          transitionSpeed = progressChanges > 1 ? _constants2.LINEAR_TRANSITION_SPEED : _constants2.TRANSITION_SPEED;
 
           if (stage.percentageComplete < _this3.state.prevStages[index].percentageComplete) {
-            /** load each transition sequentially in reverse */
+            /**
+             * load each transition sequentially in reverse
+             */
             transitionDelay = (stepsBack - 1) * transitionSpeed;
             stepsBack -= 1;
           } else if (stage.percentageComplete > _this3.state.prevStages[index].percentageComplete) {
-            /** load each transition sequentially */
+            /**
+             * load each transition sequentially
+             */
             transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
             stepsForward -= 1;
           }
         }
 
-        return /*#__PURE__*/_react.default.createElement(_ProgressTrackerStage.default, {
-          key: stage.id,
-          item: stage,
-          render: _this3.props.render,
+        return (0, _core.jsx)(_stage.default, {
           transitionSpeed: transitionSpeed,
           transitionDelay: transitionDelay,
-          transitionEasing: transitionEasing
+          transitionEasing: transitionEasing,
+          key: stage.id,
+          item: stage,
+          render: _this3.props.render
         });
       });
-      return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-        theme: this.createTheme()
-      }, /*#__PURE__*/_react.default.createElement(_page.Grid, {
-        testId: testId
-      }, /*#__PURE__*/_react.default.createElement(_styled.ProgressTrackerContainer, {
+      return (0, _core.jsx)("ul", {
+        "data-testid": testId,
+        style: (_ref = {
+          gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+        }, (0, _defineProperty2.default)(_ref, _constants2.varSpacing, "".concat(_constants.spacing[this.props.spacing], "px")), (0, _defineProperty2.default)(_ref, "maxWidth", _constants.defaultGridSize * 10 * items.length * 2), _ref),
+        css: containerStyles,
         "aria-label": label
-      }, items)));
+      }, items);
     }
   }]);
   return ProgressTracker;
@@ -163,10 +164,11 @@ exports.default = ProgressTracker;
   items: [],
   spacing: 'cosy',
   render: {
-    link: function link(props) {
-      return /*#__PURE__*/_react.default.createElement(_ProgressTrackerLink.default, props);
+    link: function link(_ref2) {
+      var item = _ref2.item;
+      return (0, _core.jsx)(_link.default, item);
     }
   },
   animated: true,
-  label: defaultLabel
+  label: 'Progress'
 });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.0.3",
+	"version": "8.2.0",
 	"sideEffects": false
 }