@atlaskit/progress-tracker 8.6.0 → 8.6.2

package/dist/cjs/internal/constants.js

@@ -13,8 +13,8 @@ var varTransitionDelay = exports.varTransitionDelay = '--ds--pt--td';
 var varTransitionEasing = exports.varTransitionEasing = '--ds--pt--te';
 var varMarkerColor = exports.varMarkerColor = '--ds--pt--mc';
 var varBackgroundColor = exports.varBackgroundColor = '--ds--pt--bg';
-var SEMI_BOLD_FONT_WEIGHT = exports.SEMI_BOLD_FONT_WEIGHT = 'semibold';
-var REGULAR_FONT_WEIGHT = exports.REGULAR_FONT_WEIGHT = 'regular';
+var REGULAR_FONT_WEIGHT = exports.REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
+var SEMI_BOLD_FONT_WEIGHT = exports.SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
 var HALF_GRID_SIZE = exports.HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
 var PROGRESS_BAR_HEIGHT = exports.PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 

package/dist/cjs/internal/stage.js

@@ -15,7 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactTransitionGroup = require("react-transition-group");
-var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 var _primitives = require("@atlaskit/primitives");
 var _bar = _interopRequireDefault(require("./bar"));
 var _constants = require("./constants");
@@ -47,6 +46,10 @@ var titleStyles = (0, _react2.css)({
     transition: "opacity var(".concat(_constants.varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
   }
 });
+var textStyles = (0, _react2.css)({
+  fontSize: '14px',
+  lineHeight: '16px'
+});
 var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ProgressTrackerStage, _PureComponent);
   var _super = _createSuper(ProgressTrackerStage);
@@ -101,7 +104,9 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
       var listInlineStyles = (_listInlineStyles = {}, (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionSpeed, "".concat(transitionSpeed, "ms")), (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionDelay, "".concat(transitionDelay, "ms")), (0, _defineProperty2.default)(_listInlineStyles, _constants.varTransitionEasing, transitionEasing), (0, _defineProperty2.default)(_listInlineStyles, _constants.varMarkerColor, this.state.oldMarkerColor), (0, _defineProperty2.default)(_listInlineStyles, _constants.varBackgroundColor, (0, _utils.getMarkerColor)(item.status)), _listInlineStyles);
       return (0, _react2.jsx)("li", {
-        "data-testid": testId,
+        "data-testid": testId
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: listInlineStyles,
         css: listItemStyles,
         "aria-current": ariaCurrent
@@ -132,12 +137,13 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
         classNames: "fade"
       }, (0, _react2.jsx)("div", {
         css: titleStyles
-      }, (0, _react2.jsx)(_text.default, {
-        fontSize: "size.100",
-        lineHeight: "lineHeight.100",
-        testId: testId && "".concat(testId, "-title"),
-        color: (0, _utils.getTextColor)(item.status),
-        fontWeight: (0, _utils.getFontWeight)(item.status)
+      }, (0, _react2.jsx)("span", {
+        css: textStyles,
+        style: {
+          color: (0, _utils.getTextColor)(item.status),
+          fontWeight: (0, _utils.getFontWeight)(item.status)
+        },
+        "data-testid": testId && "".concat(testId, "-title")
       }, this.shouldShowLink() ? render.link({
         item: item
       }) : item.label)))));

package/dist/cjs/internal/utils.js

@@ -21,13 +21,13 @@ var getMarkerColor = exports.getMarkerColor = function getMarkerColor(status) {
 var getTextColor = exports.getTextColor = function getTextColor(status) {
   switch (status) {
     case 'unvisited':
-      return 'subtlest';
+      return "var(--ds-text-subtlest, #626F86)";
     case 'current':
-      return 'brand';
+      return "var(--ds-text-brand, #0C66E4)";
     case 'visited':
-      return 'color.text';
+      return "var(--ds-text, #172B4D)";
     case 'disabled':
-      return 'disabled';
+      return "var(--ds-text-disabled, #091E424F)";
     default:
       return;
   }

package/dist/cjs/progress-tracker.js

@@ -120,7 +120,9 @@ var ProgressTracker = exports.default = /*#__PURE__*/function (_PureComponent) {
         gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
       }, (0, _defineProperty2.default)(_listInlineStyles, _constants2.varSpacing, _constants.spacing[this.props.spacing]), (0, _defineProperty2.default)(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
       return (0, _react2.jsx)("ul", {
-        "data-testid": testId,
+        "data-testid": testId
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: listInlineStyles,
         css: containerStyles,
         "aria-label": label

package/dist/es2019/internal/constants.js

@@ -7,8 +7,8 @@ export const varTransitionDelay = '--ds--pt--td';
 export const varTransitionEasing = '--ds--pt--te';
 export const varMarkerColor = '--ds--pt--mc';
 export const varBackgroundColor = '--ds--pt--bg';
-export const SEMI_BOLD_FONT_WEIGHT = 'semibold';
-export const REGULAR_FONT_WEIGHT = 'regular';
+export const REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
+export const SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
 export const HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
 export const PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 

package/dist/es2019/internal/stage.js

@@ -4,7 +4,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
-import Text from '@atlaskit/ds-explorations/text';
 import { Box, xcss } from '@atlaskit/primitives';
 import ProgressBar from './bar';
 import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
@@ -32,6 +31,10 @@ const titleStyles = css({
     transition: `opacity var(${varTransitionSpeed}) cubic-bezier(0.2, 0, 0, 1)`
   }
 });
+const textStyles = css({
+  fontSize: '14px',
+  lineHeight: '16px'
+});
 export default class ProgressTrackerStage extends PureComponent {
   constructor(props) {
     super(props);
@@ -81,7 +84,9 @@ export default class ProgressTrackerStage extends PureComponent {
       [varBackgroundColor]: getMarkerColor(item.status)
     };
     return jsx("li", {
-      "data-testid": testId,
+      "data-testid": testId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: listInlineStyles,
       css: listItemStyles,
       "aria-current": ariaCurrent
@@ -112,12 +117,13 @@ export default class ProgressTrackerStage extends PureComponent {
       classNames: "fade"
     }, jsx("div", {
       css: titleStyles
-    }, jsx(Text, {
-      fontSize: "size.100",
-      lineHeight: "lineHeight.100",
-      testId: testId && `${testId}-title`,
-      color: getTextColor(item.status),
-      fontWeight: getFontWeight(item.status)
+    }, jsx("span", {
+      css: textStyles,
+      style: {
+        color: getTextColor(item.status),
+        fontWeight: getFontWeight(item.status)
+      },
+      "data-testid": testId && `${testId}-title`
     }, this.shouldShowLink() ? render.link({
       item
     }) : item.label)))));

package/dist/es2019/internal/utils.js

@@ -15,13 +15,13 @@ export const getMarkerColor = status => {
 export const getTextColor = status => {
   switch (status) {
     case 'unvisited':
-      return 'subtlest';
+      return "var(--ds-text-subtlest, #626F86)";
     case 'current':
-      return 'brand';
+      return "var(--ds-text-brand, #0C66E4)";
     case 'visited':
-      return 'color.text';
+      return "var(--ds-text, #172B4D)";
     case 'disabled':
-      return 'disabled';
+      return "var(--ds-text-disabled, #091E424F)";
     default:
       return;
   }

package/dist/es2019/progress-tracker.js

@@ -84,7 +84,9 @@ export default class ProgressTracker extends PureComponent {
       maxWidth: 8 * 10 * items.length * 2
     };
     return jsx("ul", {
-      "data-testid": testId,
+      "data-testid": testId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: listInlineStyles,
       css: containerStyles,
       "aria-label": label

package/dist/esm/internal/constants.js

@@ -7,8 +7,8 @@ export var varTransitionDelay = '--ds--pt--td';
 export var varTransitionEasing = '--ds--pt--te';
 export var varMarkerColor = '--ds--pt--mc';
 export var varBackgroundColor = '--ds--pt--bg';
-export var SEMI_BOLD_FONT_WEIGHT = 'semibold';
-export var REGULAR_FONT_WEIGHT = 'regular';
+export var REGULAR_FONT_WEIGHT = "var(--ds-font-weight-regular, 400)";
+export var SEMI_BOLD_FONT_WEIGHT = "var(--ds-font-weight-semibold, 600)";
 export var HALF_GRID_SIZE = "var(--ds-space-050, 4px)";
 export var PROGRESS_BAR_HEIGHT = "var(--ds-space-100, 8px)";
 

package/dist/esm/internal/stage.js

@@ -14,7 +14,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
-import Text from '@atlaskit/ds-explorations/text';
 import { Box, xcss } from '@atlaskit/primitives';
 import ProgressBar from './bar';
 import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
@@ -42,6 +41,10 @@ var titleStyles = css({
     transition: "opacity var(".concat(varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
   }
 });
+var textStyles = css({
+  fontSize: '14px',
+  lineHeight: '16px'
+});
 var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   _inherits(ProgressTrackerStage, _PureComponent);
   var _super = _createSuper(ProgressTrackerStage);
@@ -96,7 +99,9 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
       var listInlineStyles = (_listInlineStyles = {}, _defineProperty(_listInlineStyles, varTransitionSpeed, "".concat(transitionSpeed, "ms")), _defineProperty(_listInlineStyles, varTransitionDelay, "".concat(transitionDelay, "ms")), _defineProperty(_listInlineStyles, varTransitionEasing, transitionEasing), _defineProperty(_listInlineStyles, varMarkerColor, this.state.oldMarkerColor), _defineProperty(_listInlineStyles, varBackgroundColor, getMarkerColor(item.status)), _listInlineStyles);
       return jsx("li", {
-        "data-testid": testId,
+        "data-testid": testId
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: listInlineStyles,
         css: listItemStyles,
         "aria-current": ariaCurrent
@@ -127,12 +132,13 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
         classNames: "fade"
       }, jsx("div", {
         css: titleStyles
-      }, jsx(Text, {
-        fontSize: "size.100",
-        lineHeight: "lineHeight.100",
-        testId: testId && "".concat(testId, "-title"),
-        color: getTextColor(item.status),
-        fontWeight: getFontWeight(item.status)
+      }, jsx("span", {
+        css: textStyles,
+        style: {
+          color: getTextColor(item.status),
+          fontWeight: getFontWeight(item.status)
+        },
+        "data-testid": testId && "".concat(testId, "-title")
       }, this.shouldShowLink() ? render.link({
         item: item
       }) : item.label)))));

package/dist/esm/internal/utils.js

@@ -15,13 +15,13 @@ export var getMarkerColor = function getMarkerColor(status) {
 export var getTextColor = function getTextColor(status) {
   switch (status) {
     case 'unvisited':
-      return 'subtlest';
+      return "var(--ds-text-subtlest, #626F86)";
     case 'current':
-      return 'brand';
+      return "var(--ds-text-brand, #0C66E4)";
     case 'visited':
-      return 'color.text';
+      return "var(--ds-text, #172B4D)";
     case 'disabled':
-      return 'disabled';
+      return "var(--ds-text-disabled, #091E424F)";
     default:
       return;
   }

package/dist/esm/progress-tracker.js

@@ -115,7 +115,9 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
         gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
       }, _defineProperty(_listInlineStyles, varSpacing, spacing[this.props.spacing]), _defineProperty(_listInlineStyles, "maxWidth", 8 * 10 * items.length * 2), _listInlineStyles);
       return jsx("ul", {
-        "data-testid": testId,
+        "data-testid": testId
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: listInlineStyles,
         css: containerStyles,
         "aria-label": label

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

@@ -7,8 +7,8 @@ export declare const varTransitionDelay = "--ds--pt--td";
 export declare const varTransitionEasing = "--ds--pt--te";
 export declare const varMarkerColor = "--ds--pt--mc";
 export declare const varBackgroundColor = "--ds--pt--bg";
-export declare const SEMI_BOLD_FONT_WEIGHT = "semibold";
-export declare const REGULAR_FONT_WEIGHT = "regular";
+export declare const REGULAR_FONT_WEIGHT: "var(--ds-font-weight-regular)";
+export declare const SEMI_BOLD_FONT_WEIGHT: "var(--ds-font-weight-semibold)";
 export declare const HALF_GRID_SIZE: "var(--ds-space-050)";
 export declare const PROGRESS_BAR_HEIGHT: "var(--ds-space-100)";
 export declare const LABEL_TOP_SPACING: "var(--ds-space-300)";

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { FC } from 'react';
-import { Stage } from '../types';
+import { type FC } from 'react';
+import { type Stage } from '../types';
 /**
  * __Progress tracker link__
  */

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { type FC } from 'react';
 /**
  * __Progress marker__
  *

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

@@ -1,5 +1,4 @@
-import { TextColor } from '@atlaskit/ds-explorations/text';
 import type { Status } from '../types';
 export declare const getMarkerColor: (status: Status) => "var(--ds-icon-subtle)" | "var(--ds-icon-brand)" | undefined;
-export declare const getTextColor: (status: Status) => TextColor | undefined;
-export declare const getFontWeight: (status: Status) => "semibold" | "regular" | 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) => "var(--ds-font-weight-regular)" | "var(--ds-font-weight-semibold)" | undefined;

package/dist/types-ts4.5/internal/constants.d.ts

@@ -7,8 +7,8 @@ export declare const varTransitionDelay = "--ds--pt--td";
 export declare const varTransitionEasing = "--ds--pt--te";
 export declare const varMarkerColor = "--ds--pt--mc";
 export declare const varBackgroundColor = "--ds--pt--bg";
-export declare const SEMI_BOLD_FONT_WEIGHT = "semibold";
-export declare const REGULAR_FONT_WEIGHT = "regular";
+export declare const REGULAR_FONT_WEIGHT: "var(--ds-font-weight-regular)";
+export declare const SEMI_BOLD_FONT_WEIGHT: "var(--ds-font-weight-semibold)";
 export declare const HALF_GRID_SIZE: "var(--ds-space-050)";
 export declare const PROGRESS_BAR_HEIGHT: "var(--ds-space-100)";
 export declare const LABEL_TOP_SPACING: "var(--ds-space-300)";

package/dist/types-ts4.5/internal/link.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { FC } from 'react';
-import { Stage } from '../types';
+import { type FC } from 'react';
+import { type Stage } from '../types';
 /**
  * __Progress tracker link__
  */

package/dist/types-ts4.5/internal/marker.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { type FC } from 'react';
 /**
  * __Progress marker__
  *

package/dist/types-ts4.5/internal/utils.d.ts

@@ -1,5 +1,4 @@
-import { TextColor } from '@atlaskit/ds-explorations/text';
 import type { Status } from '../types';
 export declare const getMarkerColor: (status: Status) => "var(--ds-icon-subtle)" | "var(--ds-icon-brand)" | undefined;
-export declare const getTextColor: (status: Status) => TextColor | undefined;
-export declare const getFontWeight: (status: Status) => "semibold" | "regular" | 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) => "var(--ds-font-weight-regular)" | "var(--ds-font-weight-semibold)" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-tracker",
-  "version": "8.6.0",
+  "version": "8.6.2",
   "description": "A progress tracker displays the steps and progress through a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,10 +27,9 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^3.5.0",
-    "@atlaskit/primitives": "^6.1.0",
-    "@atlaskit/theme": "^12.8.0",
-    "@atlaskit/tokens": "^1.48.0",
+    "@atlaskit/primitives": "^7.0.0",
+    "@atlaskit/theme": "^12.9.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "react-transition-group": "^4.4.1"
@@ -44,7 +43,6 @@
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-transition-group": "^2.0.6",
@@ -87,6 +85,5 @@
     "./types": "./src/types.tsx",
     ".": "./src/index.tsx"
   },
-  "homepage": "https://atlassian.design/components/progress-tracker/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "homepage": "https://atlassian.design/components/progress-tracker/"
 }