@atlaskit/progress-tracker 8.0.4 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/progress-tracker
 
+## 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

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: _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.LABEL_TOP_SPACING = exports.PROGRESS_BAR_HEIGHT = exports.HALF_GRID_SIZE = exports.REGULAR_FONT_WEIGHT = exports.SEMI_BOLD_FONT_WEIGHT = exports.varBackgroundColor = exports.varMarkerColor = exports.varTransitionEasing = exports.varTransitionDelay = exports.varTransitionSpeed = exports.varSpacing = exports.ANIMATION_EASE_OUT = exports.LINEAR_TRANSITION_SPEED = exports.TRANSITION_SPEED = 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: _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/{ProgressTrackerStage/index.js → internal/stage.js}

@@ -2,36 +2,40 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 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 _react = _interopRequireWildcard(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _constants = require("@atlaskit/theme/constants");
 
-var _styled = require("./styled");
+var _bar = _interopRequireDefault(require("./bar"));
 
-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 _constants2 = require("./constants");
 
-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 _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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -41,57 +45,29 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 semibold = '600';
-var regular = '400';
-
-var getMarkerColor = function getMarkerColor(status) {
-  switch (status) {
-    case 'unvisited':
-      return colors.N70;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return colors.B300;
-
-    default:
-      return;
-  }
-};
-
-var getTextColor = function getTextColor(status) {
-  switch (status) {
-    case 'unvisited':
-      return colors.N300;
-
-    case 'current':
-      return colors.B300;
-
-    case 'visited':
-      return colors.N800;
-
-    case 'disabled':
-      return colors.N70;
-
-    default:
-      return;
-  }
-};
-
-var getFontWeight = function getFontWeight(status) {
-  switch (status) {
-    case 'unvisited':
-      return regular;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return semibold;
-
-    default:
-      return;
+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);
@@ -103,9 +79,16 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
 
     (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: getMarkerColor(_this.props.item.status),
+      oldMarkerColor: (0, _utils.getMarkerColor)(_this.props.item.status),
       oldPercentageComplete: 0
     };
     return _this;
@@ -133,61 +116,53 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      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;
-
-      var onEntered = function onEntered() {
-        _this2.setState({
-          transitioning: false,
-          oldMarkerColor: getMarkerColor(item.status),
-          oldPercentageComplete: item.percentageComplete
-        });
-      };
-
+          transitionEasing = _this$props.transitionEasing,
+          testId = _this$props.testId;
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
-      return /*#__PURE__*/_react.default.createElement(_styled.ProgressTrackerListItem, {
+      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
-      }, /*#__PURE__*/_react.default.createElement(_styled.ProgressTrackerStageContainer, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      }, (0, _core.jsx)("div", {
+        css: containerStyles
+      }, (0, _core.jsx)(_reactTransitionGroup.CSSTransition, {
         appear: true,
         in: this.state.transitioning,
-        onEntered: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/_react.default.createElement(_styled.ProgressTrackerStageMarker, {
-        oldMarkerColor: this.state.oldMarkerColor,
-        color: getMarkerColor(item.status),
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay,
-        transitionEasing: transitionEasing
-      })), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      }, (0, _core.jsx)(_marker.default, {
+        testId: testId && "".concat(testId, "-marker")
+      })), (0, _core.jsx)(_reactTransitionGroup.CSSTransition, {
         appear: true,
         in: this.state.transitioning,
-        onEntered: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/_react.default.createElement(_styled.ProgressTrackerStageBar, {
-        oldPercentageComplete: this.state.oldPercentageComplete,
-        percentageComplete: item.percentageComplete,
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay,
-        transitionEasing: transitionEasing
-      })), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+      }, (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: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/_react.default.createElement(_styled.ProgressTrackerStageTitle, {
-        color: getTextColor(item.status),
-        fontweight: getFontWeight(item.status),
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay
+      }, (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))));

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.getFontWeight = exports.getTextColor = exports.getMarkerColor = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("./constants");
+
+var getMarkerColor = function getMarkerColor(status) {
+  switch (status) {
+    case 'unvisited':
+      return _colors.N70;
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return _colors.B300;
+
+    default:
+      return;
+  }
+};
+
+exports.getMarkerColor = getMarkerColor;
+
+var getTextColor = function getTextColor(status) {
+  switch (status) {
+    case 'unvisited':
+      return _colors.N300;
+
+    case 'current':
+      return _colors.B300;
+
+    case 'visited':
+      return _colors.N800;
+
+    case 'disabled':
+      return _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;