@atlaskit/progress-bar 0.5.5 → 0.5.8

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/progress-bar
 
+## 0.5.8
+
+### Patch Changes
+
+- [`7d4fbb433e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d4fbb433e7) - Internal styles refactor after turning on the static styles tech stack.
+- [`247bf9bb0e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/247bf9bb0e4) - Introduces `testId` prop for use for automated tests.
+- [`54deac49754`](https://bitbucket.org/atlassian/atlassian-frontend/commits/54deac49754) - [ux] Appearance prop now available for default, success, and inverse appearances.
+- [`c960c028450`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c960c028450) - Adds jsdoc descriptions to exported components.
+- Updated dependencies
+
+## 0.5.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.5.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.5.5
 
 ### Patch Changes

package/dist/cjs/components/progress-bar.js

@@ -7,95 +7,135 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
-var _deprecationWarning = _interopRequireDefault(require("@atlaskit/ds-lib/deprecation-warning"));
-
-var _theme = require("../theme");
-
-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 _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
 
-var maxValue = 1;
+var _colors = require("@atlaskit/theme/colors");
 
-var Bar = function Bar(_ref) {
-  var isIndeterminate = _ref.isIndeterminate,
-      tokens = _ref.tokens;
+var _theme = require("../theme");
 
-  if (isIndeterminate) {
-    return (0, _core.jsx)(_react.default.Fragment, null, (0, _core.jsx)("span", {
-      css: [tokens.bar, tokens.increasingBar]
+/** @jsx jsx */
+var MIN_VALUE = 0;
+var MAX_VALUE = 1;
+var increasingBarAnimation = (0, _core.keyframes)({
+  from: {
+    left: '-5%',
+    width: '5%'
+  },
+  to: {
+    left: '130%',
+    width: ' 100%'
+  }
+});
+var decreasingBarAnimation = (0, _core.keyframes)({
+  from: {
+    left: '-80%',
+    width: '80%'
+  },
+  to: {
+    left: '110%',
+    width: '10%'
+  }
+});
+var containerStyles = (0, _core.css)({
+  width: "100%",
+  height: 6,
+  position: 'relative',
+  background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")"),
+  borderRadius: 3,
+  overflow: 'hidden'
+});
+var containerAppearance = {
+  default: (0, _core.css)({
+    background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")")
+  }),
+  success: (0, _core.css)({
+    background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")")
+  }),
+  inverse: (0, _core.css)({
+    background: "var(--ds-background-inverse-subtle, rgba(255, 255, 255, 0.5))"
+  })
+};
+var barAppearance = {
+  default: (0, _core.css)({
+    background: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")")
+  }),
+  success: (0, _core.css)({
+    background: "var(--ds-background-success-bold, ".concat(_colors.G300, ")")
+  }),
+  inverse: (0, _core.css)({
+    background: "var(--ds-surface, white)"
+  })
+};
+var barStyles = (0, _core.css)({
+  display: 'block',
+  height: 6,
+  position: 'absolute',
+  borderRadius: 3
+});
+var determinateBarStyles = (0, _core.css)({
+  transition: 'width 0.2s'
+});
+var increasingBarStyles = (0, _core.css)({
+  animation: "".concat(increasingBarAnimation, " 2s infinite")
+});
+var decreasingBarStyles = (0, _core.css)({
+  animation: "".concat(decreasingBarAnimation, " 2s 0.5s infinite")
+});
+/**
+ * __Progress bar__
+ *
+ * A progress bar displays the status of a given process.
+ *
+ * - [Examples](https://atlassian.design/components/progress-bar/examples)
+ * - [Code](https://atlassian.design/components/progress-bar/code)
+ * - [Usage](https://atlassian.design/components/progress-bar/usage)
+ */
+
+var ProgressBar = function ProgressBar(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      ariaLabel = _ref.ariaLabel,
+      _ref$isIndeterminate = _ref.isIndeterminate,
+      isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'progress-bar' : _ref$testId,
+      theme = _ref.theme,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value;
+  var valueParsed = isIndeterminate ? MIN_VALUE : Math.max(MIN_VALUE, Math.min(value, MAX_VALUE));
+  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/progress-bar", 'theme', (0, _typeof2.default)(theme) !== undefined, 'https://community.developer.atlassian.com/t/theme-prop-in-atlaskit-progress-bar-is-being-deprecated/56198');
+  return (0, _core.jsx)(_theme.Theme.Provider, {
+    value: theme
+  }, (0, _core.jsx)(_theme.Theme.Consumer, {
+    value: value
+  }, function (tokens) {
+    return (0, _core.jsx)("div", {
+      css: [containerStyles, containerAppearance[appearance], tokens.container],
+      role: "progressbar",
+      "aria-label": ariaLabel,
+      "aria-valuemin": MIN_VALUE,
+      "aria-valuenow": valueParsed,
+      "aria-valuemax": MAX_VALUE,
+      tabIndex: 0,
+      "data-testid": testId
+    }, isIndeterminate ? (0, _core.jsx)(_react.default.Fragment, null, (0, _core.jsx)("span", {
+      css: [barStyles, barAppearance[appearance], increasingBarStyles, tokens.bar, tokens.increasingBar]
     }), (0, _core.jsx)("span", {
-      css: [tokens.bar, tokens.decreasingBar]
+      css: [barStyles, barAppearance[appearance], decreasingBarStyles, tokens.bar, tokens.decreasingBar]
+    })) : (0, _core.jsx)("span", {
+      style: {
+        width: "".concat(Number(value) * 100, "%")
+      },
+      css: [barStyles, barAppearance[appearance], determinateBarStyles, tokens.bar, tokens.determinateBar]
     }));
-  }
-
-  return (0, _core.jsx)("span", {
-    css: [tokens.bar, tokens.determinateBar]
-  });
+  }));
 };
 
-var ProgressBar = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(ProgressBar, _React$PureComponent);
-
-  var _super = _createSuper(ProgressBar);
-
-  function ProgressBar() {
-    (0, _classCallCheck2.default)(this, ProgressBar);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(ProgressBar, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          ariaLabel = _this$props.ariaLabel,
-          value = _this$props.value,
-          isIndeterminate = _this$props.isIndeterminate,
-          theme = _this$props.theme;
-      var valueParsed = isIndeterminate ? 0 : Math.max(0, Math.min(value, maxValue));
-      (0, _deprecationWarning.default)('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
-      return (0, _core.jsx)(_theme.Theme.Provider, {
-        value: theme
-      }, (0, _core.jsx)(_theme.Theme.Consumer, {
-        value: value
-      }, function (tokens) {
-        return (0, _core.jsx)("div", {
-          css: tokens.container,
-          role: "progressbar",
-          "aria-label": ariaLabel,
-          "aria-valuemin": 0,
-          "aria-valuenow": valueParsed,
-          "aria-valuemax": maxValue,
-          tabIndex: 0,
-          "data-testid": "progress-bar"
-        }, (0, _core.jsx)(Bar, {
-          isIndeterminate: isIndeterminate,
-          tokens: tokens
-        }));
-      }));
-    }
-  }]);
-  return ProgressBar;
-}(_react.default.PureComponent);
-
-exports.default = ProgressBar;
-(0, _defineProperty2.default)(ProgressBar, "defaultProps", {
-  value: 0,
-  isIndeterminate: false
-});
+var _default = ProgressBar;
+exports.default = _default;

package/dist/cjs/components/success-progress-bar.js

@@ -7,77 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 = _interopRequireDefault(require("react"));
 
-var _deprecationWarning = _interopRequireDefault(require("@atlaskit/ds-lib/deprecation-warning"));
-
-var _colors = require("@atlaskit/theme/colors");
-
 var _progressBar = _interopRequireDefault(require("./progress-bar"));
 
-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 SuccessProgressBar = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(SuccessProgressBar, _React$PureComponent);
-
-  var _super = _createSuper(SuccessProgressBar);
-
-  function SuccessProgressBar() {
-    (0, _classCallCheck2.default)(this, SuccessProgressBar);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(SuccessProgressBar, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      (0, _deprecationWarning.default)('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
-      return /*#__PURE__*/_react.default.createElement(_progressBar.default, (0, _extends2.default)({}, this.props, {
-        theme: function theme(currentTheme, props) {
-          var theme = currentTheme(props);
-          var _this$props = _this.props,
-              value = _this$props.value,
-              isIndeterminate = _this$props.isIndeterminate;
-
-          if (value < 1 || isIndeterminate) {
-            return theme;
-          }
-
-          return _objectSpread(_objectSpread({}, theme), {}, {
-            bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: "var(--ds-background-success-bold, ".concat(_colors.G300, ")")
-            })
-          });
-        }
-      }));
-    }
-  }]);
-  return SuccessProgressBar;
-}(_react.default.PureComponent);
-
-exports.default = SuccessProgressBar;
-(0, _defineProperty2.default)(SuccessProgressBar, "defaultProps", {
-  value: 0,
-  isIndeterminate: false
-});
+/**
+ * __Success progress bar__
+ *
+ * A success progress bar indicates the completion of a process.
+ *
+ * - [Examples](https://atlassian.design/components/progress-bar/success-progress-bar/examples)
+ * - [Code](https://atlassian.design/components/progress-bar/success-progress-bar/code)
+ */
+var SuccessProgressBar = function SuccessProgressBar(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+      _ref$isIndeterminate = _ref.isIndeterminate,
+      isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
+      testId = _ref.testId,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value;
+  return /*#__PURE__*/_react.default.createElement(_progressBar.default, {
+    appearance: value < 1 || isIndeterminate ? 'default' : 'success',
+    value: value,
+    isIndeterminate: isIndeterminate,
+    ariaLabel: ariaLabel,
+    testId: testId
+  });
+};
+
+var _default = SuccessProgressBar;
+exports.default = _default;

package/dist/cjs/components/transparent-progress-bar.js

@@ -7,68 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 = _interopRequireDefault(require("react"));
 
-var _deprecationWarning = _interopRequireDefault(require("@atlaskit/ds-lib/deprecation-warning"));
-
 var _progressBar = _interopRequireDefault(require("./progress-bar"));
 
-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 TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(TransparentProgressBar, _React$PureComponent);
-
-  var _super = _createSuper(TransparentProgressBar);
-
-  function TransparentProgressBar() {
-    (0, _classCallCheck2.default)(this, TransparentProgressBar);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(TransparentProgressBar, [{
-    key: "render",
-    value: function render() {
-      (0, _deprecationWarning.default)('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
-      return /*#__PURE__*/_react.default.createElement(_progressBar.default, (0, _extends2.default)({}, this.props, {
-        theme: function theme(currentTheme, props) {
-          var theme = currentTheme(props);
-          return _objectSpread(_objectSpread({}, theme), {}, {
-            container: _objectSpread(_objectSpread({}, theme.container), {}, {
-              background: "var(--ds-background-inverse-subtle, rgba(255, 255, 255, 0.5))"
-            }),
-            bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: "var(--ds-surface, white)"
-            })
-          });
-        }
-      }));
-    }
-  }]);
-  return TransparentProgressBar;
-}(_react.default.PureComponent);
-
-exports.default = TransparentProgressBar;
-(0, _defineProperty2.default)(TransparentProgressBar, "defaultProps", {
-  value: 0,
-  isIndeterminate: false
-});
+/**
+ * __Transparent progress bar__
+ *
+ * A transparent progress bar is used on bold backgrounds to maintain suitable contrast.
+ *
+ * - [Examples](https://atlassian.design/components/progress-bar/transparent-progress-bar/examples)
+ * - [Code](https://atlassian.design/components/progress-bar/transparent-progress-bar/code)
+ */
+var TransparentProgressBar = function TransparentProgressBar(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+      _ref$isIndeterminate = _ref.isIndeterminate,
+      isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
+      testId = _ref.testId,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value;
+  return /*#__PURE__*/_react.default.createElement(_progressBar.default, {
+    appearance: "inverse",
+    value: value,
+    isIndeterminate: isIndeterminate,
+    ariaLabel: ariaLabel,
+    testId: testId
+  });
+};
+
+var _default = TransparentProgressBar;
+exports.default = _default;

package/dist/cjs/theme.js

@@ -1,55 +1,24 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Theme = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _core = require("@emotion/core");
-
-var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("@atlaskit/theme/components");
 
-var _templateObject, _templateObject2;
-
-var increasingBarAnimation = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from { left: -5%; width: 5%; }\n  to { left: 130%; width: 100%;}\n"])));
-var decreasingBarAnimation = (0, _core.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  from { left: -80%; width: 80%; }\n  to { left: 110%; width: 10%;}\n"])));
 /**
- * @deprecated creates the default theme, which can be customised using the `theme` prop
+ * Creates the default theme, which can be customised using the `theme` prop
+ *
+ * @deprecated
  */
-
 var Theme = (0, _components.createTheme)(function (props) {
   return {
-    container: {
-      background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")"),
-      borderRadius: 3,
-      height: 6,
-      overflow: 'hidden',
-      position: 'relative',
-      width: "100%"
-    },
-    bar: {
-      borderRadius: 3,
-      display: 'block',
-      height: 6,
-      position: 'absolute',
-      background: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")")
-    },
-    determinateBar: {
-      transition: 'width 0.2s',
-      width: "".concat(Number(props.value) * 100, "%")
-    },
-    increasingBar: {
-      animation: "".concat(increasingBarAnimation, " 2s infinite")
-    },
-    decreasingBar: {
-      animation: "".concat(decreasingBarAnimation, " 2s 0.5s infinite")
-    }
+    container: {},
+    bar: {},
+    determinateBar: {},
+    increasingBar: {},
+    decreasingBar: {}
   };
 });
 exports.Theme = Theme;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "0.5.5",
+	"version": "0.5.8",
 	"sideEffects": false
 }