@atlaskit/progress-tracker 8.5.11 → 8.6.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/progress-tracker
 
+## 8.6.1
+
+### Patch Changes
+
+-   [#98707](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98707)
+    [`7cce9cbf2f08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7cce9cbf2f08) -
+    Internal changes to how text is rendered. There is no expected visual change.
+
+## 8.6.0
+
+### Minor Changes
+
+-   [#99069](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99069)
+    [`609d5a37c656`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/609d5a37c656) -
+    Add support for React 18.
+
 ## 8.5.11
 
 ### Patch Changes

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);
@@ -132,12 +135,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/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);
@@ -112,12 +115,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/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);
@@ -127,12 +130,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/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/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/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.5.11",
+  "version": "8.6.1",
   "description": "A progress tracker displays the steps and progress through a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -17,6 +17,7 @@
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "continuous",
+    "runReact18": true,
     "productPushConsumption": [
       "jira"
     ],
@@ -26,16 +27,15 @@
     }
   },
   "dependencies": {
-    "@atlaskit/ds-explorations": "^3.5.0",
-    "@atlaskit/primitives": "^6.0.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/primitives": "^6.2.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.48.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "react-transition-group": "^4.4.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",