@atlaskit/progress-tracker 8.10.2 → 8.11.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/progress-tracker
 
+## 8.11.0
+
+### Minor Changes
+
+- [#170799](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170799)
+  [`5c6ea433574d2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c6ea433574d2) -
+  We are testing changes behind a feature gate. Progress tracker steps have been updated to use
+  automatic router link configuration (from App provider). If this change is successful it will be
+  available in a later release.
+
+## 8.10.3
+
+### Patch Changes
+
+- [#168892](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168892)
+  [`5eb2a70adb262`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5eb2a70adb262) -
+  Remove react-router-dom from devDependencies as it is incompatible with React 18.
+
 ## 8.10.2
 
 ### Patch Changes

package/dist/cjs/internal/link-new.compiled.css

@@ -0,0 +1,10 @@
+._11c81kw7{font:inherit}
+._1hmsglyw{text-decoration-line:none}
+._4bfu18uv{text-decoration-color:initial}
+._ajmmnqa1{text-decoration-style:solid}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

package/dist/cjs/internal/link-new.js

@@ -0,0 +1,34 @@
+/* link-new.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./link-new.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
+var styles = {
+  root: "_4bfu18uv _1hmsglyw _ajmmnqa1 _syaz1fxt _11c81kw7 _9oik18uv _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+};
+
+/**
+ * __Progress tracker link__
+ */
+var Link = function Link(_ref) {
+  var href = _ref.href,
+    onClick = _ref.onClick,
+    label = _ref.label,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_anchor.default, {
+    xcss: styles.root
+    // TODO: We should not be rendering empty hrefs on anchors. This should be plain text or a button/pressable if `onClick` is provided.
+    ,
+    href: href || '',
+    onClick: onClick,
+    testId: testId
+  }, label);
+};
+var _default = exports.default = Link;

package/dist/cjs/internal/stage.js

@@ -94,7 +94,9 @@ var ProgressTrackerStage = exports.default = /*#__PURE__*/function (_PureCompone
   }, {
     key: "shouldShowLink",
     value: function shouldShowLink() {
-      return this.props.item.status === 'visited' && !this.props.item.noLink;
+      return this.props.item.status === 'visited' &&
+      // TODO: `noLink` is unnecessary as we should just be detecting if the `href` is set...
+      !this.props.item.noLink;
     }
   }, {
     key: "render",

package/dist/cjs/progress-tracker.js

@@ -8,9 +8,11 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _constants2 = require("./internal/constants");
 var _link = _interopRequireDefault(require("./internal/link"));
+var _linkNew = _interopRequireDefault(require("./internal/link-new"));
 var _stage = _interopRequireDefault(require("./internal/stage"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @atlaskit/design-system/no-nested-styles */ /**
@@ -47,11 +49,13 @@ var ProgressTracker = function ProgressTracker(_ref) {
     spacing = _ref$spacing === void 0 ? 'cosy' : _ref$spacing,
     _ref$render = _ref.render,
     render = _ref$render === void 0 ? {
-      // Anchor content is coming from another location
-      // eslint-disable-next-line jsx-a11y/anchor-has-content
       link: function link(_ref2) {
         var item = _ref2.item;
-        return (0, _react2.jsx)(_link.default, item);
+        return (
+          // Anchor content is coming from another location
+          // eslint-disable-next-line jsx-a11y/anchor-has-content
+          (0, _platformFeatureFlags.fg)('platform_progress_tracker_link_migration') ? (0, _react2.jsx)(_linkNew.default, item) : (0, _react2.jsx)(_link.default, item)
+        );
       }
     } : _ref$render,
     _ref$animated = _ref.animated,

package/dist/es2019/internal/link-new.compiled.css

@@ -0,0 +1,10 @@
+._11c81kw7{font:inherit}
+._1hmsglyw{text-decoration-line:none}
+._4bfu18uv{text-decoration-color:initial}
+._ajmmnqa1{text-decoration-style:solid}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

package/dist/es2019/internal/link-new.js

@@ -0,0 +1,28 @@
+/* link-new.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./link-new.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Anchor from '@atlaskit/primitives/anchor';
+const styles = {
+  root: "_4bfu18uv _1hmsglyw _ajmmnqa1 _syaz1fxt _11c81kw7 _9oik18uv _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+};
+
+/**
+ * __Progress tracker link__
+ */
+const Link = ({
+  href,
+  onClick,
+  label,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Anchor, {
+    xcss: styles.root
+    // TODO: We should not be rendering empty hrefs on anchors. This should be plain text or a button/pressable if `onClick` is provided.
+    ,
+    href: href || '',
+    onClick: onClick,
+    testId: testId
+  }, label);
+};
+export default Link;

package/dist/es2019/internal/stage.js

@@ -72,7 +72,9 @@ export default class ProgressTrackerStage extends PureComponent {
     });
   }
   shouldShowLink() {
-    return this.props.item.status === 'visited' && !this.props.item.noLink;
+    return this.props.item.status === 'visited' &&
+    // TODO: `noLink` is unnecessary as we should just be detecting if the `href` is set...
+    !this.props.item.noLink;
   }
   render() {
     const {

package/dist/es2019/progress-tracker.js

@@ -7,9 +7,11 @@ import { useEffect, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { spacing as spacingOptions } from './constants';
 import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
 import Link from './internal/link';
+import LinkNew from './internal/link-new';
 import Stage from './internal/stage';
 const containerStyles = css({
   display: 'grid',
@@ -37,11 +39,12 @@ const ProgressTracker = ({
   items = [],
   spacing = 'cosy',
   render = {
-    // Anchor content is coming from another location
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
     link: ({
       item
-    }) => jsx(Link, item)
+    }) =>
+    // Anchor content is coming from another location
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    fg('platform_progress_tracker_link_migration') ? jsx(LinkNew, item) : jsx(Link, item)
   },
   animated = true,
   testId,

package/dist/esm/internal/link-new.compiled.css

@@ -0,0 +1,10 @@
+._11c81kw7{font:inherit}
+._1hmsglyw{text-decoration-line:none}
+._4bfu18uv{text-decoration-color:initial}
+._ajmmnqa1{text-decoration-style:solid}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

package/dist/esm/internal/link-new.js

@@ -0,0 +1,27 @@
+/* link-new.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./link-new.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Anchor from '@atlaskit/primitives/anchor';
+var styles = {
+  root: "_4bfu18uv _1hmsglyw _ajmmnqa1 _syaz1fxt _11c81kw7 _9oik18uv _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+};
+
+/**
+ * __Progress tracker link__
+ */
+var Link = function Link(_ref) {
+  var href = _ref.href,
+    onClick = _ref.onClick,
+    label = _ref.label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Anchor, {
+    xcss: styles.root
+    // TODO: We should not be rendering empty hrefs on anchors. This should be plain text or a button/pressable if `onClick` is provided.
+    ,
+    href: href || '',
+    onClick: onClick,
+    testId: testId
+  }, label);
+};
+export default Link;

package/dist/esm/internal/stage.js

@@ -91,7 +91,9 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "shouldShowLink",
     value: function shouldShowLink() {
-      return this.props.item.status === 'visited' && !this.props.item.noLink;
+      return this.props.item.status === 'visited' &&
+      // TODO: `noLink` is unnecessary as we should just be detecting if the `href` is set...
+      !this.props.item.noLink;
     }
   }, {
     key: "render",

package/dist/esm/progress-tracker.js

@@ -10,9 +10,11 @@ import { useEffect, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { spacing as spacingOptions } from './constants';
 import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
 import Link from './internal/link';
+import LinkNew from './internal/link-new';
 import Stage from './internal/stage';
 var containerStyles = css({
   display: 'grid',
@@ -44,11 +46,13 @@ var ProgressTracker = function ProgressTracker(_ref) {
     spacing = _ref$spacing === void 0 ? 'cosy' : _ref$spacing,
     _ref$render = _ref.render,
     render = _ref$render === void 0 ? {
-      // Anchor content is coming from another location
-      // eslint-disable-next-line jsx-a11y/anchor-has-content
       link: function link(_ref2) {
         var item = _ref2.item;
-        return jsx(Link, item);
+        return (
+          // Anchor content is coming from another location
+          // eslint-disable-next-line jsx-a11y/anchor-has-content
+          fg('platform_progress_tracker_link_migration') ? jsx(LinkNew, item) : jsx(Link, item)
+        );
       }
     } : _ref$render,
     _ref$animated = _ref.animated,

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

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import { type Stage } from '../types';
+/**
+ * __Progress tracker link__
+ */
+declare const Link: FC<Stage & {
+    testId?: string;
+}>;
+export default Link;

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

@@ -1,4 +1,4 @@
 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) => "var(--ds-text)" | "var(--ds-text-subtlest)" | "var(--ds-text-brand)" | "var(--ds-text-disabled)" | undefined;
+export declare const getMarkerColor: (status: Status) => "var(--ds-icon-brand)" | "var(--ds-icon-subtle)" | undefined;
+export declare const getTextColor: (status: Status) => "var(--ds-text)" | "var(--ds-text-disabled)" | "var(--ds-text-brand)" | "var(--ds-text-subtlest)" | undefined;
 export declare const getFontWeight: (status: Status) => "var(--ds-font-weight-regular)" | "var(--ds-font-weight-bold)" | undefined;

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

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import { type Stage } from '../types';
+/**
+ * __Progress tracker link__
+ */
+declare const Link: FC<Stage & {
+    testId?: string;
+}>;
+export default Link;

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

@@ -1,4 +1,4 @@
 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) => "var(--ds-text)" | "var(--ds-text-subtlest)" | "var(--ds-text-brand)" | "var(--ds-text-disabled)" | undefined;
+export declare const getMarkerColor: (status: Status) => "var(--ds-icon-brand)" | "var(--ds-icon-subtle)" | undefined;
+export declare const getTextColor: (status: Status) => "var(--ds-text)" | "var(--ds-text-disabled)" | "var(--ds-text-brand)" | "var(--ds-text-subtlest)" | undefined;
 export declare const getFontWeight: (status: Status) => "var(--ds-font-weight-regular)" | "var(--ds-font-weight-bold)" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/progress-tracker",
-	"version": "8.10.2",
+	"version": "8.11.0",
 	"description": "A progress tracker displays the steps and progress through a journey.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,14 +21,15 @@
 		"runReact18": true,
 		"website": {
 			"name": "Progress tracker",
-			"category": "Components"
+			"category": "Status indicators"
 		}
 	},
 	"dependencies": {
+		"@atlaskit/css": "^0.6.2",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-transition-group": "^4.4.1"
@@ -39,7 +40,7 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
@@ -47,7 +48,6 @@
 		"@types/react-transition-group": "^2.0.6",
 		"jest-in-case": "^1.0.2",
 		"react-dom": "^16.8.0",
-		"react-router-dom": "^4.2.2",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {
@@ -87,6 +87,10 @@
 	"platform-feature-flags": {
 		"platform_design_system_team_transition_group_r18": {
 			"type": "boolean"
+		},
+		"platform_progress_tracker_link_migration": {
+			"type": "boolean",
+			"showOnWebsiteForTransitiveDependencies": true
 		}
 	}
 }