@atlaskit/progress-bar 0.3.8 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/progress-bar
 
+## 0.5.0
+
+### Minor Changes
+
+- [`53060e14621`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53060e14621) - [ux] Instrumented `progress-bar` 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
+
+## 0.4.0
+
+### Minor Changes
+
+- [`9d0e0a31638`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d0e0a31638) - Adds ariaLabel prop to progress bar for accessibility
+
+## 0.3.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.3.8
 
 ### Patch Changes

package/dist/cjs/components/ProgressBar.js

@@ -62,6 +62,7 @@ var ProgressBar = /*#__PURE__*/function (_React$PureComponent) {
     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;
@@ -74,10 +75,12 @@ var ProgressBar = /*#__PURE__*/function (_React$PureComponent) {
         return (0, _core.jsx)("div", {
           css: tokens.container,
           role: "progressbar",
+          "aria-label": ariaLabel,
           "aria-valuemin": 0,
           "aria-valuenow": valueParsed,
           "aria-valuemax": maxValue,
-          tabIndex: 0
+          tabIndex: 0,
+          "data-testid": "progress-bar"
         }, (0, _core.jsx)(Bar, {
           isIndeterminate: isIndeterminate,
           tokens: tokens

package/dist/cjs/components/SuccessProgressBar.js

@@ -27,9 +27,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 
-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); }; }
 
@@ -63,7 +63,7 @@ var SuccessProgressBar = /*#__PURE__*/function (_React$PureComponent) {
 
           return _objectSpread(_objectSpread({}, theme), {}, {
             bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: _colors.G300
+              background: "var(--ds-background-success-bold, ".concat(_colors.G300, ")")
             })
           });
         }

package/dist/cjs/components/TransparentProgressBar.js

@@ -25,9 +25,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 
-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); }; }
 
@@ -51,10 +51,10 @@ var TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
           var theme = currentTheme(props);
           return _objectSpread(_objectSpread({}, theme), {}, {
             container: _objectSpread(_objectSpread({}, theme.container), {}, {
-              background: 'rgba(255, 255, 255, 0.5)'
+              background: "var(--ds-background-inverse, rgba(255, 255, 255, 0.5))"
             }),
             bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: 'white'
+              background: "var(--ds-surface, white)"
             })
           });
         }

package/dist/cjs/index.js

@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _ProgressBar.default;
-  }
-});
 Object.defineProperty(exports, "SuccessProgressBar", {
   enumerable: true,
   get: function get() {
@@ -23,6 +17,12 @@ Object.defineProperty(exports, "TransparentProgressBar", {
     return _TransparentProgressBar.default;
   }
 });
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressBar.default;
+  }
+});
 
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
 

package/dist/cjs/theme.js

@@ -22,7 +22,7 @@ var decreasingBarAnimation = (0, _core.keyframes)(_templateObject2 || (_template
 var Theme = (0, _components.createTheme)(function (props) {
   return {
     container: {
-      background: _colors.N40A,
+      background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")"),
       borderRadius: 3,
       height: 6,
       overflow: 'hidden',
@@ -34,7 +34,7 @@ var Theme = (0, _components.createTheme)(function (props) {
       display: 'block',
       height: 6,
       position: 'absolute',
-      background: _colors.N500
+      background: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")")
     },
     determinateBar: {
       transition: 'width 0.2s',

package/dist/cjs/version.json

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

package/dist/es2019/components/ProgressBar.js

@@ -26,6 +26,7 @@ const Bar = ({
 export default class ProgressBar extends React.PureComponent {
   render() {
     const {
+      ariaLabel,
       value,
       isIndeterminate,
       theme
@@ -38,10 +39,12 @@ export default class ProgressBar extends React.PureComponent {
     }, tokens => jsx("div", {
       css: tokens.container,
       role: "progressbar",
+      "aria-label": ariaLabel,
       "aria-valuemin": 0,
       "aria-valuenow": valueParsed,
       "aria-valuemax": maxValue,
-      tabIndex: 0
+      tabIndex: 0,
+      "data-testid": "progress-bar"
     }, jsx(Bar, {
       isIndeterminate: isIndeterminate,
       tokens: tokens

package/dist/es2019/components/SuccessProgressBar.js

@@ -19,7 +19,7 @@ export default class SuccessProgressBar extends React.PureComponent {
 
         return { ...theme,
           bar: { ...theme.bar,
-            background: G300
+            background: `var(--ds-background-success-bold, ${G300})`
           }
         };
       }

package/dist/es2019/components/TransparentProgressBar.js

@@ -9,10 +9,10 @@ export default class TransparentProgressBar extends React.PureComponent {
         const theme = currentTheme(props);
         return { ...theme,
           container: { ...theme.container,
-            background: 'rgba(255, 255, 255, 0.5)'
+            background: "var(--ds-background-inverse, rgba(255, 255, 255, 0.5))"
           },
           bar: { ...theme.bar,
-            background: 'white'
+            background: "var(--ds-surface, white)"
           }
         };
       }

package/dist/es2019/theme.js

@@ -11,7 +11,7 @@ const decreasingBarAnimation = keyframes`
 `;
 export const Theme = createTheme(props => ({
   container: {
-    background: N40A,
+    background: `var(--ds-background-neutral, ${N40A})`,
     borderRadius: 3,
     height: 6,
     overflow: 'hidden',
@@ -23,7 +23,7 @@ export const Theme = createTheme(props => ({
     display: 'block',
     height: 6,
     position: 'absolute',
-    background: N500
+    background: `var(--ds-background-neutral-bold, ${N500})`
   },
   determinateBar: {
     transition: 'width 0.2s',

package/dist/es2019/version.json

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

package/dist/esm/components/ProgressBar.js

@@ -47,6 +47,7 @@ var ProgressBar = /*#__PURE__*/function (_React$PureComponent) {
     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;
@@ -59,10 +60,12 @@ var ProgressBar = /*#__PURE__*/function (_React$PureComponent) {
         return jsx("div", {
           css: tokens.container,
           role: "progressbar",
+          "aria-label": ariaLabel,
           "aria-valuemin": 0,
           "aria-valuenow": valueParsed,
           "aria-valuemax": maxValue,
-          tabIndex: 0
+          tabIndex: 0,
+          "data-testid": "progress-bar"
         }, jsx(Bar, {
           isIndeterminate: isIndeterminate,
           tokens: tokens

package/dist/esm/components/SuccessProgressBar.js

@@ -6,9 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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) { _defineProperty(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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -47,7 +47,7 @@ var SuccessProgressBar = /*#__PURE__*/function (_React$PureComponent) {
 
           return _objectSpread(_objectSpread({}, theme), {}, {
             bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: G300
+              background: "var(--ds-background-success-bold, ".concat(G300, ")")
             })
           });
         }

package/dist/esm/components/TransparentProgressBar.js

@@ -6,9 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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) { _defineProperty(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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -36,10 +36,10 @@ var TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
           var theme = currentTheme(props);
           return _objectSpread(_objectSpread({}, theme), {}, {
             container: _objectSpread(_objectSpread({}, theme.container), {}, {
-              background: 'rgba(255, 255, 255, 0.5)'
+              background: "var(--ds-background-inverse, rgba(255, 255, 255, 0.5))"
             }),
             bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: 'white'
+              background: "var(--ds-surface, white)"
             })
           });
         }

package/dist/esm/theme.js

@@ -10,7 +10,7 @@ var decreasingBarAnimation = keyframes(_templateObject2 || (_templateObject2 = _
 export var Theme = createTheme(function (props) {
   return {
     container: {
-      background: N40A,
+      background: "var(--ds-background-neutral, ".concat(N40A, ")"),
       borderRadius: 3,
       height: 6,
       overflow: 'hidden',
@@ -22,7 +22,7 @@ export var Theme = createTheme(function (props) {
       display: 'block',
       height: 6,
       position: 'absolute',
-      background: N500
+      background: "var(--ds-background-neutral-bold, ".concat(N500, ")")
     },
     determinateBar: {
       transition: 'width 0.2s',

package/dist/esm/version.json

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

package/dist/types/types.d.ts

@@ -14,8 +14,13 @@ export interface CustomProgressBarProps {
     value: number;
     /** When true the component is in indeterminate state. */
     isIndeterminate: boolean;
+    /** The aria-label attribute associated with the progress bar. */
+    ariaLabel?: string;
 }
 export interface DefaultProgressBarProps extends CustomProgressBarProps {
-    /** The theme the component should use. */
+    /**
+     * The theme the component should use.
+     * NOTE: `theme` is being deprecated, and will be deleted after May 13 2022. If you depend on `theme`, we recommend migrating to one of its variants.
+     */
     theme?: ThemeProp<ThemeTokens, ThemeProps>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-bar",
-  "version": "0.3.8",
+  "version": "0.5.0",
   "description": "A progress bar displays the status of a given process.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,14 +18,14 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Progress bar"
     }
   },
   "dependencies": {
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.7.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -33,11 +33,11 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.0.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^8.0.1",
     "react-dom": "^16.8.0",
     "typescript": "3.9.6"
   },
@@ -49,6 +49,13 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
+      ]
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"