@atlaskit/progress-bar 0.5.7 → 0.5.8

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

@@ -1,60 +1,28 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-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); 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) { _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); }; }
-
-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 ProgressBar from './progress-bar';
-
-var TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(TransparentProgressBar, _React$PureComponent);
-
-  var _super = _createSuper(TransparentProgressBar);
-
-  function TransparentProgressBar() {
-    _classCallCheck(this, TransparentProgressBar);
-
-    return _super.apply(this, arguments);
-  }
-
-  _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: "var(--ds-background-inverse-subtle, rgba(255, 255, 255, 0.5))"
-            }),
-            bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: "var(--ds-surface, white)"
-            })
-          });
-        }
-      }));
-    }
-  }]);
-
-  return TransparentProgressBar;
-}(React.PureComponent);
-
-_defineProperty(TransparentProgressBar, "defaultProps", {
-  value: 0,
-  isIndeterminate: false
-});
-
-export { TransparentProgressBar as default };
+/**
+ * __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.createElement(ProgressBar, {
+    appearance: "inverse",
+    value: value,
+    isIndeterminate: isIndeterminate,
+    ariaLabel: ariaLabel,
+    testId: testId
+  });
+};
+
+export default TransparentProgressBar;

package/dist/esm/theme.js

@@ -1,42 +1,16 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
-import { keyframes } from '@emotion/core';
-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
+ * Creates the default theme, which can be customised using the `theme` prop
+ *
+ * @deprecated
  */
-
 export var Theme = createTheme(function (props) {
   return {
-    container: {
-      background: "var(--ds-background-neutral, ".concat(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(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: {}
   };
 });

package/dist/esm/version.json

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

package/dist/types/components/progress-bar.d.ts

@@ -1,10 +1,13 @@
-/** @jsx jsx */
-import React from 'react';
+/// <reference types="react" />
 import { DefaultProgressBarProps } from '../types';
-export default class ProgressBar extends React.PureComponent<DefaultProgressBarProps> {
-    static defaultProps: {
-        value: number;
-        isIndeterminate: boolean;
-    };
-    render(): JSX.Element;
-}
+/**
+ * __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)
+ */
+declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, theme, value, }: DefaultProgressBarProps) => JSX.Element;
+export default ProgressBar;

package/dist/types/components/success-progress-bar.d.ts

@@ -1,9 +1,12 @@
-import React from 'react';
+/// <reference types="react" />
 import { CustomProgressBarProps } from '../types';
-export default class SuccessProgressBar extends React.PureComponent<CustomProgressBarProps> {
-    static defaultProps: {
-        value: number;
-        isIndeterminate: boolean;
-    };
-    render(): JSX.Element;
-}
+/**
+ * __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)
+ */
+declare const SuccessProgressBar: ({ ariaLabel, isIndeterminate, testId, value, }: CustomProgressBarProps) => JSX.Element;
+export default SuccessProgressBar;

package/dist/types/components/transparent-progress-bar.d.ts

@@ -1,9 +1,12 @@
-import React from 'react';
+/// <reference types="react" />
 import { CustomProgressBarProps } from '../types';
-export default class TransparentProgressBar extends React.PureComponent<CustomProgressBarProps> {
-    static defaultProps: {
-        value: number;
-        isIndeterminate: boolean;
-    };
-    render(): JSX.Element;
-}
+/**
+ * __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)
+ */
+declare const TransparentProgressBar: ({ ariaLabel, isIndeterminate, testId, value, }: CustomProgressBarProps) => JSX.Element;
+export default TransparentProgressBar;

package/dist/types/theme.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { ThemeProps, ThemeTokens } from './types';
 /**
- * @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
  */
 export declare const Theme: {
     Consumer: import("react").ComponentType<{

package/dist/types/types.d.ts

@@ -1,4 +1,7 @@
 import { ThemeProp } from '@atlaskit/theme/components';
+/**
+ * @deprecated
+ */
 export declare type ThemeProps = {
     value: string | number;
 };
@@ -15,22 +18,32 @@ export declare type ThemeTokens = {
 };
 export interface CustomProgressBarProps {
     /**
-     * Current progress, a number between 0 and 1.
+     * Sets the value of the progress bar, between `0` and `1` inclusive.
      */
-    value: number;
+    value?: number;
     /**
-     * When true the component is in indeterminate state.
+     * Shows the progress bar in an indeterminate state when `true`.
      */
-    isIndeterminate: boolean;
+    isIndeterminate?: boolean;
     /**
-     * The aria-label attribute associated with the progress bar.
+     * Label associated with the progress bar,
+     * read by screen readers.
      */
     ariaLabel?: string;
+    /**
+     * A `testId` prop is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
 }
 export interface DefaultProgressBarProps extends CustomProgressBarProps {
     /**
-     * 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.
+     * @deprecated
+     * Theme prop is deprecated and will be removed in the future.
      */
     theme?: ThemeProp<ThemeTokens, ThemeProps>;
+    /**
+     * Visual style of the progress bar.
+     */
+    appearance?: 'default' | 'success' | 'inverse';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-bar",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "A progress bar displays the status of a given process.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,7 +25,7 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^2.0.0",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
@@ -38,6 +38,7 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/visual-regression": "*",
     "@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",
@@ -54,9 +55,11 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [
+        "static",
         "emotion"
       ]
     }

package/report.api.md

@@ -0,0 +1,80 @@
+## API Report File for "@atlaskit/progress-bar"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { default as React_2 } from 'react';
+import { ThemeProp } from '@atlaskit/theme/components';
+
+declare interface CustomProgressBarProps {
+  /**
+   * Current progress, a number between 0 and 1.
+   */
+  value: number;
+  /**
+   * When true the component is in indeterminate state.
+   */
+  isIndeterminate: boolean;
+  /**
+   * The aria-label attribute associated with the progress bar.
+   */
+  ariaLabel?: string;
+}
+
+declare interface DefaultProgressBarProps extends CustomProgressBarProps {
+  /**
+   * 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>;
+}
+
+declare class ProgressBar extends React_2.PureComponent<
+  DefaultProgressBarProps
+> {
+  static defaultProps: {
+    value: number;
+    isIndeterminate: boolean;
+  };
+  render(): JSX.Element;
+}
+export default ProgressBar;
+
+export declare class SuccessProgressBar extends React_2.PureComponent<
+  CustomProgressBarProps
+> {
+  static defaultProps: {
+    value: number;
+    isIndeterminate: boolean;
+  };
+  render(): JSX.Element;
+}
+
+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.
+ */
+declare type ThemeTokens = {
+  container: any;
+  bar: any;
+  determinateBar: any;
+  increasingBar: any;
+  decreasingBar: any;
+};
+
+export declare class TransparentProgressBar extends React_2.PureComponent<
+  CustomProgressBarProps
+> {
+  static defaultProps: {
+    value: number;
+    isIndeterminate: boolean;
+  };
+  render(): JSX.Element;
+}
+
+export {};
+```