@atlaskit/progress-bar 0.4.0 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/progress-bar
 
+## 0.5.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.5.1
+
+### Patch Changes
+
+- [`cc9f9e1d294`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc9f9e1d294) - Adds warning in developer console for `theme` prop, which is going to be deprecated after 13 May 2022.
+
+## 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

package/dist/cjs/components/{ProgressBar.js → progress-bar.js}

@@ -23,6 +23,8 @@ 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); }; }
@@ -67,6 +69,7 @@ var ProgressBar = /*#__PURE__*/function (_React$PureComponent) {
           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, {

package/dist/cjs/components/{SuccessProgressBar.js → success-progress-bar.js}

@@ -23,9 +23,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _deprecationWarning = _interopRequireDefault(require("@atlaskit/ds-lib/deprecation-warning"));
+
 var _colors = require("@atlaskit/theme/colors");
 
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+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; }
 
@@ -50,7 +52,8 @@ var SuccessProgressBar = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var _this = this;
 
-      return /*#__PURE__*/_react.default.createElement(_ProgressBar.default, (0, _extends2.default)({}, this.props, {
+      (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,
@@ -63,7 +66,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 → transparent-progress-bar.js}

@@ -23,7 +23,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+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; }
 
@@ -46,15 +48,16 @@ var TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(TransparentProgressBar, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_ProgressBar.default, (0, _extends2.default)({}, this.props, {
+      (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: '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

@@ -8,24 +8,24 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "SuccessProgressBar", {
   enumerable: true,
   get: function get() {
-    return _SuccessProgressBar.default;
+    return _successProgressBar.default;
   }
 });
 Object.defineProperty(exports, "TransparentProgressBar", {
   enumerable: true,
   get: function get() {
-    return _TransparentProgressBar.default;
+    return _transparentProgressBar.default;
   }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _ProgressBar.default;
+    return _progressBar.default;
   }
 });
 
-var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
+var _progressBar = _interopRequireDefault(require("./components/progress-bar"));
 
-var _SuccessProgressBar = _interopRequireDefault(require("./components/SuccessProgressBar"));
+var _successProgressBar = _interopRequireDefault(require("./components/success-progress-bar"));
 
-var _TransparentProgressBar = _interopRequireDefault(require("./components/TransparentProgressBar"));
+var _transparentProgressBar = _interopRequireDefault(require("./components/transparent-progress-bar"));

package/dist/cjs/theme.js

@@ -19,10 +19,14 @@ 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
+ */
+
 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 +38,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.4.0",
+	"version": "0.5.2",
 	"sideEffects": false
 }

package/dist/es2019/components/{ProgressBar.js → progress-bar.js}

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
+import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
 import { Theme } from '../theme';
 const maxValue = 1;
 
@@ -32,6 +33,7 @@ export default class ProgressBar extends React.PureComponent {
       theme
     } = this.props;
     const valueParsed = isIndeterminate ? 0 : Math.max(0, Math.min(value, maxValue));
+    deprecationWarning('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
     return jsx(Theme.Provider, {
       value: theme
     }, jsx(Theme.Consumer, {

package/dist/es2019/components/{SuccessProgressBar.js → success-progress-bar.js}

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
 import { G300 } from '@atlaskit/theme/colors';
-import ProgressBar from './ProgressBar';
+import ProgressBar from './progress-bar';
 export default class SuccessProgressBar extends React.PureComponent {
   render() {
+    deprecationWarning('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
     return /*#__PURE__*/React.createElement(ProgressBar, _extends({}, this.props, {
       theme: (currentTheme, props) => {
         const theme = currentTheme(props);
@@ -19,7 +21,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 → transparent-progress-bar.js}

@@ -1,18 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import ProgressBar from './ProgressBar';
+import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
+import ProgressBar from './progress-bar';
 export default class TransparentProgressBar extends React.PureComponent {
   render() {
+    deprecationWarning('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
     return /*#__PURE__*/React.createElement(ProgressBar, _extends({}, this.props, {
       theme: (currentTheme, props) => {
         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/index.js

@@ -1,3 +1,3 @@
-export { default } from './components/ProgressBar';
-export { default as SuccessProgressBar } from './components/SuccessProgressBar';
-export { default as TransparentProgressBar } from './components/TransparentProgressBar';
+export { default } from './components/progress-bar';
+export { default as SuccessProgressBar } from './components/success-progress-bar';
+export { default as TransparentProgressBar } from './components/transparent-progress-bar';

package/dist/es2019/theme.js

@@ -9,9 +9,13 @@ const decreasingBarAnimation = keyframes`
   from { left: -80%; width: 80%; }
   to { left: 110%; width: 10%;}
 `;
+/**
+ * @deprecated creates the default theme, which can be customised using the `theme` prop
+ */
+
 export const Theme = createTheme(props => ({
   container: {
-    background: N40A,
+    background: `var(--ds-background-neutral, ${N40A})`,
     borderRadius: 3,
     height: 6,
     overflow: 'hidden',
@@ -23,7 +27,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.4.0",
+	"version": "0.5.2",
 	"sideEffects": false
 }

package/dist/esm/components/{ProgressBar.js → progress-bar.js}

@@ -12,6 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
+import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
 import { Theme } from '../theme';
 var maxValue = 1;
 
@@ -52,6 +53,7 @@ var ProgressBar = /*#__PURE__*/function (_React$PureComponent) {
           isIndeterminate = _this$props.isIndeterminate,
           theme = _this$props.theme;
       var valueParsed = isIndeterminate ? 0 : Math.max(0, Math.min(value, maxValue));
+      deprecationWarning('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
       return jsx(Theme.Provider, {
         value: theme
       }, jsx(Theme.Consumer, {

package/dist/esm/components/{SuccessProgressBar.js → success-progress-bar.js}

@@ -15,8 +15,9 @@ 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; } }
 
 import React from 'react';
+import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
 import { G300 } from '@atlaskit/theme/colors';
-import ProgressBar from './ProgressBar';
+import ProgressBar from './progress-bar';
 
 var SuccessProgressBar = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(SuccessProgressBar, _React$PureComponent);
@@ -34,6 +35,7 @@ var SuccessProgressBar = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var _this = this;
 
+      deprecationWarning('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
       return /*#__PURE__*/React.createElement(ProgressBar, _extends({}, this.props, {
         theme: function theme(currentTheme, props) {
           var theme = currentTheme(props);
@@ -47,7 +49,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 → transparent-progress-bar.js}

@@ -15,7 +15,8 @@ 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; } }
 
 import React from 'react';
-import ProgressBar from './ProgressBar';
+import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
+import ProgressBar from './progress-bar';
 
 var TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(TransparentProgressBar, _React$PureComponent);
@@ -31,15 +32,16 @@ var TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(TransparentProgressBar, [{
     key: "render",
     value: function render() {
+      deprecationWarning('@atlaskit/progress-bar', '`theme` prop', 'If you depend on `theme`, we recommend migrating to one of its variants.');
       return /*#__PURE__*/React.createElement(ProgressBar, _extends({}, this.props, {
         theme: function theme(currentTheme, props) {
           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/index.js

@@ -1,3 +1,3 @@
-export { default } from './components/ProgressBar';
-export { default as SuccessProgressBar } from './components/SuccessProgressBar';
-export { default as TransparentProgressBar } from './components/TransparentProgressBar';
+export { default } from './components/progress-bar';
+export { default as SuccessProgressBar } from './components/success-progress-bar';
+export { default as TransparentProgressBar } from './components/transparent-progress-bar';

package/dist/esm/theme.js

@@ -7,10 +7,14 @@ import { N40A, N500 } from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
 var increasingBarAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { left: -5%; width: 5%; }\n  to { left: 130%; width: 100%;}\n"])));
 var decreasingBarAnimation = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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
+ */
+
 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 +26,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.4.0",
+	"version": "0.5.2",
 	"sideEffects": false
 }

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './components/ProgressBar';
-export { default as SuccessProgressBar } from './components/SuccessProgressBar';
-export { default as TransparentProgressBar } from './components/TransparentProgressBar';
+export { default } from './components/progress-bar';
+export { default as SuccessProgressBar } from './components/success-progress-bar';
+export { default as TransparentProgressBar } from './components/transparent-progress-bar';

package/dist/types/theme.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 import { ThemeProps, ThemeTokens } from './types';
+/**
+ * @deprecated creates the default theme, which can be customised using the `theme` prop
+ */
 export declare const Theme: {
     Consumer: import("react").ComponentType<{
         children: (tokens: ThemeTokens) => import("react").ReactNode;

package/dist/types/types.d.ts

@@ -2,6 +2,10 @@ import { ThemeProp } from '@atlaskit/theme/components';
 export declare type ThemeProps = {
     value: string | number;
 };
+/**
+ * @deprecated This allows for users to customize the theme. This is being deprecated, please consider
+ * migrating to one of progress bar's variants.
+ */
 export declare type ThemeTokens = {
     container: any;
     bar: any;
@@ -10,14 +14,23 @@ export declare type ThemeTokens = {
     decreasingBar: any;
 };
 export interface CustomProgressBarProps {
-    /** Current progress, a number between 0 and 1. */
+    /**
+     * Current progress, a number between 0 and 1.
+     */
     value: number;
-    /** When true the component is in indeterminate state. */
+    /**
+     * When true the component is in indeterminate state.
+     */
     isIndeterminate: boolean;
-    /** The aria-label attribute associated with the progress bar. */
+    /**
+     * 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: This is being deprecated and will be removed after 13 May 2022. Please consider migrating to
+     * one of progress bar's variants.
+     */
     theme?: ThemeProp<ThemeTokens, ThemeProps>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-bar",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "A progress bar displays the status of a given process.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,7 +13,7 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/progress-bar/",
   "atlassian": {
     "team": "Design System Team",
@@ -24,7 +24,9 @@
     }
   },
   "dependencies": {
+    "@atlaskit/ds-lib": "^1.4.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -32,7 +34,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@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",
@@ -50,6 +52,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [
         "emotion"