@atlaskit/progress-tracker 8.1.0 → 8.2.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/progress-tracker
 
+## 8.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.2.0
+
+### Minor Changes
+
+- [`4e96270c06e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4e96270c06e) - [ux] Instrumented progress-tracker 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
+
 ## 8.1.0
 
 ### Minor Changes

package/dist/cjs/internal/bar.js

@@ -18,7 +18,7 @@ var progressBarStyles = (0, _core.css)({
   height: _constants2.PROGRESS_BAR_HEIGHT,
   position: 'absolute',
   left: '50%',
-  backgroundColor: _colors.B300,
+  backgroundColor: "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"),
   borderBottomRightRadius: _constants2.PROGRESS_BAR_HEIGHT,
   borderTopRightRadius: _constants2.PROGRESS_BAR_HEIGHT,
   transform: "translate(0, -".concat(_constants2.LABEL_TOP_SPACING, "px)"),

package/dist/cjs/internal/constants.js

@@ -3,7 +3,7 @@
 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;
+exports.varTransitionSpeed = exports.varTransitionEasing = exports.varTransitionDelay = exports.varSpacing = exports.varMarkerColor = exports.varBackgroundColor = exports.TRANSITION_SPEED = exports.SEMI_BOLD_FONT_WEIGHT = exports.REGULAR_FONT_WEIGHT = exports.PROGRESS_BAR_HEIGHT = exports.LINEAR_TRANSITION_SPEED = exports.LABEL_TOP_SPACING = exports.HALF_GRID_SIZE = exports.ANIMATION_EASE_OUT = void 0;
 
 var _constants = require("../constants");
 

package/dist/cjs/internal/link.js

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
 var linkStyles = (0, _core.css)({
-  color: _colors.N800,
+  color: "var(--ds-text, ".concat(_colors.N800, ")"),
   cursor: 'pointer'
 });
 /**

package/dist/cjs/internal/stage.js

@@ -37,9 +37,9 @@ 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; }
+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); }; }
 

package/dist/cjs/internal/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFontWeight = exports.getTextColor = exports.getMarkerColor = void 0;
+exports.getTextColor = exports.getMarkerColor = exports.getFontWeight = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -12,12 +12,12 @@ var _constants = require("./constants");
 var getMarkerColor = function getMarkerColor(status) {
   switch (status) {
     case 'unvisited':
-      return _colors.N70;
+      return "var(--ds-icon-subtle, ".concat(_colors.N70, ")");
 
     case 'current':
     case 'visited':
     case 'disabled':
-      return _colors.B300;
+      return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
 
     default:
       return;
@@ -29,16 +29,16 @@ exports.getMarkerColor = getMarkerColor;
 var getTextColor = function getTextColor(status) {
   switch (status) {
     case 'unvisited':
-      return _colors.N300;
+      return "var(--ds-text-subtlest, ".concat(_colors.N300, ")");
 
     case 'current':
-      return _colors.B300;
+      return "var(--ds-text-brand, ".concat(_colors.B300, ")");
 
     case 'visited':
-      return _colors.N800;
+      return "var(--ds-text, ".concat(_colors.N800, ")");
 
     case 'disabled':
-      return _colors.N70;
+      return "var(--ds-text-disabled, ".concat(_colors.N70, ")");
 
     default:
       return;

package/dist/cjs/progress-tracker.js

@@ -33,9 +33,9 @@ var _link = _interopRequireDefault(require("./internal/link"));
 
 var _stage = _interopRequireDefault(require("./internal/stage"));
 
-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); }; }
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.1.0",
+	"version": "8.2.2",
 	"sideEffects": false
 }

package/dist/es2019/internal/bar.js

@@ -7,7 +7,7 @@ const progressBarStyles = css({
   height: PROGRESS_BAR_HEIGHT,
   position: 'absolute',
   left: '50%',
-  backgroundColor: B300,
+  backgroundColor: `var(--ds-background-brand-bold, ${B300})`,
   borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
   borderTopRightRadius: PROGRESS_BAR_HEIGHT,
   transform: `translate(0, -${LABEL_TOP_SPACING}px)`,

package/dist/es2019/internal/link.js

@@ -2,7 +2,7 @@
 import { css, jsx } from '@emotion/core';
 import { N800 } from '@atlaskit/theme/colors';
 const linkStyles = css({
-  color: N800,
+  color: `var(--ds-text, ${N800})`,
   cursor: 'pointer'
 });
 /**

package/dist/es2019/internal/utils.js

@@ -3,12 +3,12 @@ import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
 export const getMarkerColor = status => {
   switch (status) {
     case 'unvisited':
-      return N70;
+      return `var(--ds-icon-subtle, ${N70})`;
 
     case 'current':
     case 'visited':
     case 'disabled':
-      return B300;
+      return `var(--ds-icon-brand, ${B300})`;
 
     default:
       return;
@@ -17,16 +17,16 @@ export const getMarkerColor = status => {
 export const getTextColor = status => {
   switch (status) {
     case 'unvisited':
-      return N300;
+      return `var(--ds-text-subtlest, ${N300})`;
 
     case 'current':
-      return B300;
+      return `var(--ds-text-brand, ${B300})`;
 
     case 'visited':
-      return N800;
+      return `var(--ds-text, ${N800})`;
 
     case 'disabled':
-      return N70;
+      return `var(--ds-text-disabled, ${N70})`;
 
     default:
       return;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.1.0",
+	"version": "8.2.2",
 	"sideEffects": false
 }

package/dist/esm/internal/bar.js

@@ -7,7 +7,7 @@ var progressBarStyles = css({
   height: PROGRESS_BAR_HEIGHT,
   position: 'absolute',
   left: '50%',
-  backgroundColor: B300,
+  backgroundColor: "var(--ds-background-brand-bold, ".concat(B300, ")"),
   borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
   borderTopRightRadius: PROGRESS_BAR_HEIGHT,
   transform: "translate(0, -".concat(LABEL_TOP_SPACING, "px)"),

package/dist/esm/internal/link.js

@@ -2,7 +2,7 @@
 import { css, jsx } from '@emotion/core';
 import { N800 } from '@atlaskit/theme/colors';
 var linkStyles = css({
-  color: N800,
+  color: "var(--ds-text, ".concat(N800, ")"),
   cursor: 'pointer'
 });
 /**

package/dist/esm/internal/stage.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); }; }
 

package/dist/esm/internal/utils.js

@@ -3,12 +3,12 @@ import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
 export var getMarkerColor = function getMarkerColor(status) {
   switch (status) {
     case 'unvisited':
-      return N70;
+      return "var(--ds-icon-subtle, ".concat(N70, ")");
 
     case 'current':
     case 'visited':
     case 'disabled':
-      return B300;
+      return "var(--ds-icon-brand, ".concat(B300, ")");
 
     default:
       return;
@@ -17,16 +17,16 @@ export var getMarkerColor = function getMarkerColor(status) {
 export var getTextColor = function getTextColor(status) {
   switch (status) {
     case 'unvisited':
-      return N300;
+      return "var(--ds-text-subtlest, ".concat(N300, ")");
 
     case 'current':
-      return B300;
+      return "var(--ds-text-brand, ".concat(B300, ")");
 
     case 'visited':
-      return N800;
+      return "var(--ds-text, ".concat(N800, ")");
 
     case 'disabled':
-      return N70;
+      return "var(--ds-text-disabled, ".concat(N70, ")");
 
     default:
       return;

package/dist/esm/progress-tracker.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); }; }
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.1.0",
+	"version": "8.2.2",
 	"sideEffects": false
 }

package/dist/types/internal/bar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface StageBarProps {
     testId?: string;
     percentageComplete: number;

package/dist/types/internal/utils.d.ts

@@ -1,4 +1,4 @@
 import type { Status } from '../types';
-export declare const getMarkerColor: (status: Status) => "#0065FF" | "#A5ADBA" | undefined;
-export declare const getTextColor: (status: Status) => "#172B4D" | "#0065FF" | "#A5ADBA" | "#5E6C84" | undefined;
+export declare const getMarkerColor: (status: Status) => "var(--ds-icon-subtle)" | "var(--ds-icon-brand)" | undefined;
+export declare const getTextColor: (status: Status) => "var(--ds-text)" | "var(--ds-text-subtlest)" | "var(--ds-text-brand)" | "var(--ds-text-disabled)" | undefined;
 export declare const getFontWeight: (status: Status) => "600" | "400" | undefined;

package/dist/types/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Ideally these are exported by @atlaskit/page
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-tracker",
-  "version": "8.1.0",
+  "version": "8.2.2",
   "description": "A progress tracker displays the steps and progress through a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,14 +16,14 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Progress tracker"
     }
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "react-transition-group": "^4.4.1"
@@ -32,10 +32,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -45,7 +44,7 @@
     "react-dom": "^16.8.0",
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.8.0",
-    "typescript": "3.9.6"
+    "typescript": "3.9.10"
   },
   "techstack": {
     "@atlassian/frontend": {
@@ -53,7 +52,11 @@
     },
     "@repo/internal": {
       "design-system": "v1",
-      "styling": "emotion",
+      "theming": "tokens",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "analytics": "analytics-next",
       "deprecation": "no-deprecated-imports"
     }