@atlaskit/progress-tracker 8.0.3 → 8.2.0

package/dist/esm/{ProgressTrackerStage/index.js → internal/stage.js}

@@ -1,73 +1,53 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 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); 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); }; }
 
 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, { PureComponent } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import * as colors from '@atlaskit/theme/colors';
-import { ProgressTrackerListItem, ProgressTrackerStageBar, ProgressTrackerStageContainer, ProgressTrackerStageMarker, ProgressTrackerStageTitle } from './styled';
-var semibold = '600';
-var regular = '400';
-
-var getMarkerColor = function getMarkerColor(status) {
-  switch (status) {
-    case 'unvisited':
-      return colors.N70;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return colors.B300;
-
-    default:
-      return;
-  }
-};
-
-var getTextColor = function getTextColor(status) {
-  switch (status) {
-    case 'unvisited':
-      return colors.N300;
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 
-    case 'current':
-      return colors.B300;
-
-    case 'visited':
-      return colors.N800;
-
-    case 'disabled':
-      return colors.N70;
-
-    default:
-      return;
-  }
-};
-
-var getFontWeight = function getFontWeight(status) {
-  switch (status) {
-    case 'unvisited':
-      return regular;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return semibold;
-
-    default:
-      return;
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/core';
+import { CSSTransition } from 'react-transition-group';
+import { fontSize } from '@atlaskit/theme/constants';
+import ProgressBar from './bar';
+import { LABEL_TOP_SPACING, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+import ProgressMarker from './marker';
+import { getFontWeight, getMarkerColor, getTextColor } from './utils';
+var containerStyles = css({
+  width: '100%',
+  position: 'relative'
+});
+var listItemStyles = css({
+  margin: 0,
+  overflowWrap: 'break-word'
+});
+var titleStyles = css({
+  marginTop: LABEL_TOP_SPACING,
+  marginRight: 'auto',
+  marginLeft: 'auto',
+  fontSize: fontSize(),
+  lineHeight: '16px',
+  textAlign: 'center',
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1,
+    transition: "opacity var(".concat(varTransitionSpeed, ") cubic-bezier(0.2, 0, 0, 1)")
   }
-};
+});
 
 var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   _inherits(ProgressTrackerStage, _PureComponent);
@@ -80,6 +60,15 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
     _classCallCheck(this, ProgressTrackerStage);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "onEntered", function () {
+      _this.setState({
+        transitioning: false,
+        oldMarkerColor: getMarkerColor(_this.props.item.status),
+        oldPercentageComplete: _this.props.item.percentageComplete
+      });
+    });
+
     _this.state = {
       transitioning: false,
       oldMarkerColor: getMarkerColor(_this.props.item.status),
@@ -110,61 +99,53 @@ var ProgressTrackerStage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _ref;
 
       var _this$props = this.props,
           item = _this$props.item,
           render = _this$props.render,
           transitionDelay = _this$props.transitionDelay,
           transitionSpeed = _this$props.transitionSpeed,
-          transitionEasing = _this$props.transitionEasing;
-
-      var onEntered = function onEntered() {
-        _this2.setState({
-          transitioning: false,
-          oldMarkerColor: getMarkerColor(item.status),
-          oldPercentageComplete: item.percentageComplete
-        });
-      };
-
+          transitionEasing = _this$props.transitionEasing,
+          testId = _this$props.testId;
       var ariaCurrent = item.status === 'current' ? 'step' : 'false';
-      return /*#__PURE__*/React.createElement(ProgressTrackerListItem, {
+      return jsx("li", {
+        "data-testid": testId,
+        style: (_ref = {}, _defineProperty(_ref, varTransitionSpeed, "".concat(transitionSpeed, "ms")), _defineProperty(_ref, varTransitionDelay, "".concat(transitionDelay, "ms")), _defineProperty(_ref, varTransitionEasing, transitionEasing), _defineProperty(_ref, varMarkerColor, this.state.oldMarkerColor), _defineProperty(_ref, varBackgroundColor, getMarkerColor(item.status)), _ref),
+        css: listItemStyles,
         "aria-current": ariaCurrent
-      }, /*#__PURE__*/React.createElement(ProgressTrackerStageContainer, null, /*#__PURE__*/React.createElement(CSSTransition, {
+      }, jsx("div", {
+        css: containerStyles
+      }, jsx(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
-        onEntered: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/React.createElement(ProgressTrackerStageMarker, {
-        oldMarkerColor: this.state.oldMarkerColor,
-        color: getMarkerColor(item.status),
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay,
-        transitionEasing: transitionEasing
-      })), /*#__PURE__*/React.createElement(CSSTransition, {
+      }, jsx(ProgressMarker, {
+        testId: testId && "".concat(testId, "-marker")
+      })), jsx(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
-        onEntered: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/React.createElement(ProgressTrackerStageBar, {
-        oldPercentageComplete: this.state.oldPercentageComplete,
-        percentageComplete: item.percentageComplete,
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay,
-        transitionEasing: transitionEasing
-      })), /*#__PURE__*/React.createElement(CSSTransition, {
+      }, jsx(ProgressBar, {
+        testId: testId && "".concat(testId, "-bar"),
+        percentageComplete: item.percentageComplete
+      })), jsx(CSSTransition, {
         appear: true,
         in: this.state.transitioning,
-        onEntered: onEntered,
+        onEntered: this.onEntered,
         timeout: transitionDelay + transitionSpeed,
         classNames: "fade"
-      }, /*#__PURE__*/React.createElement(ProgressTrackerStageTitle, {
-        color: getTextColor(item.status),
-        fontweight: getFontWeight(item.status),
-        transitionSpeed: transitionSpeed,
-        transitionDelay: transitionDelay
+      }, jsx("div", {
+        css: titleStyles,
+        "data-testid": testId && "".concat(testId, "-title"),
+        style: {
+          color: getTextColor(item.status),
+          fontWeight: getFontWeight(item.status)
+        }
       }, this.shouldShowLink() ? render.link({
         item: item
       }) : item.label))));

package/dist/esm/internal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/internal/utils.js

@@ -0,0 +1,48 @@
+import { B300, N300, N70, N800 } from '@atlaskit/theme/colors';
+import { REGULAR_FONT_WEIGHT, SEMI_BOLD_FONT_WEIGHT } from './constants';
+export var getMarkerColor = function getMarkerColor(status) {
+  switch (status) {
+    case 'unvisited':
+      return "var(--ds-icon-subtle, ".concat(N70, ")");
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return "var(--ds-icon-brand, ".concat(B300, ")");
+
+    default:
+      return;
+  }
+};
+export var getTextColor = function getTextColor(status) {
+  switch (status) {
+    case 'unvisited':
+      return "var(--ds-text-subtlest, ".concat(N300, ")");
+
+    case 'current':
+      return "var(--ds-text-brand, ".concat(B300, ")");
+
+    case 'visited':
+      return "var(--ds-text, ".concat(N800, ")");
+
+    case 'disabled':
+      return "var(--ds-text-disabled, ".concat(N70, ")");
+
+    default:
+      return;
+  }
+};
+export var getFontWeight = function getFontWeight(status) {
+  switch (status) {
+    case 'unvisited':
+      return REGULAR_FONT_WEIGHT;
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return SEMI_BOLD_FONT_WEIGHT;
+
+    default:
+      return undefined;
+  }
+};

package/dist/esm/{ProgressTracker/index.js → progress-tracker.js}

@@ -6,24 +6,34 @@ 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); }; }
 
 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, { PureComponent } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { Grid } from '@atlaskit/page';
-import ProgressTrackerLink from '../ProgressTrackerLink';
-import ProgressTrackerStage from '../ProgressTrackerStage';
-import { ProgressTrackerContainer } from './styled';
-var TRANSITION_SPEED = 300;
-var LINEAR_TRANSITION_SPEED = 50;
-var easeOut = 'cubic-bezier(0.15,1,0.3,1)';
-var defaultLabel = 'Progress';
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/core';
+import { defaultGridSize, spacing } from './constants';
+import { ANIMATION_EASE_OUT, LINEAR_TRANSITION_SPEED, TRANSITION_SPEED, varSpacing } from './internal/constants';
+import Link from './internal/link';
+import Stage from './internal/stage';
+var containerStyles = css({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: 0,
+  gap: "var(".concat(varSpacing, ")"),
+  listStyleType: 'none',
+  '&&': {
+    marginTop: 40
+  }
+});
 
 var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   _inherits(ProgressTracker, _PureComponent);
@@ -41,15 +51,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "createTheme", function () {
-      return {
-        spacing: _this.props.spacing,
-        columns: _this.props.items.length * 2
-      };
-    });
-
     _defineProperty(_assertThisInitialized(_this), "state", {
-      prevStages: _this.props.items.map(function (stage, index) {
+      prevStages: _this.props.items.map(function (stage) {
         return _objectSpread(_objectSpread({}, stage), {}, {
           percentageComplete: 0
         });
@@ -78,7 +81,8 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this3 = this,
+          _ref;
 
       var _this$props = this.props,
           testId = _this$props.testId,
@@ -97,38 +101,43 @@ var ProgressTracker = /*#__PURE__*/function (_PureComponent) {
       var items = this.props.items.map(function (stage, index) {
         var transitionSpeed = 0;
         var transitionDelay = 0;
-        var transitionEasing = progressChanges > 1 ? 'linear' : easeOut;
+        var transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
 
         if (_this3.props.animated) {
           transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
 
           if (stage.percentageComplete < _this3.state.prevStages[index].percentageComplete) {
-            /** load each transition sequentially in reverse */
+            /**
+             * load each transition sequentially in reverse
+             */
             transitionDelay = (stepsBack - 1) * transitionSpeed;
             stepsBack -= 1;
           } else if (stage.percentageComplete > _this3.state.prevStages[index].percentageComplete) {
-            /** load each transition sequentially */
+            /**
+             * load each transition sequentially
+             */
             transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
             stepsForward -= 1;
           }
         }
 
-        return /*#__PURE__*/React.createElement(ProgressTrackerStage, {
-          key: stage.id,
-          item: stage,
-          render: _this3.props.render,
+        return jsx(Stage, {
           transitionSpeed: transitionSpeed,
           transitionDelay: transitionDelay,
-          transitionEasing: transitionEasing
+          transitionEasing: transitionEasing,
+          key: stage.id,
+          item: stage,
+          render: _this3.props.render
         });
       });
-      return /*#__PURE__*/React.createElement(ThemeProvider, {
-        theme: this.createTheme()
-      }, /*#__PURE__*/React.createElement(Grid, {
-        testId: testId
-      }, /*#__PURE__*/React.createElement(ProgressTrackerContainer, {
+      return jsx("ul", {
+        "data-testid": testId,
+        style: (_ref = {
+          gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
+        }, _defineProperty(_ref, varSpacing, "".concat(spacing[this.props.spacing], "px")), _defineProperty(_ref, "maxWidth", defaultGridSize * 10 * items.length * 2), _ref),
+        css: containerStyles,
         "aria-label": label
-      }, items)));
+      }, items);
     }
   }]);
 
@@ -139,12 +148,13 @@ _defineProperty(ProgressTracker, "defaultProps", {
   items: [],
   spacing: 'cosy',
   render: {
-    link: function link(props) {
-      return /*#__PURE__*/React.createElement(ProgressTrackerLink, props);
+    link: function link(_ref2) {
+      var item = _ref2.item;
+      return jsx(Link, item);
     }
   },
   animated: true,
-  label: defaultLabel
+  label: 'Progress'
 });
 
 export { ProgressTracker as default };

package/dist/esm/version.json

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

package/dist/types/constants.d.ts

@@ -1,3 +1,10 @@
 export declare const defaultGridSize: number;
-/** Ideally these are exported by @atlaskit/page */
-export declare const spacing: Record<string, number>;
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
+export declare const spacing: {
+    readonly comfortable: number;
+    readonly cosy: number;
+    readonly compact: number;
+};
+export declare type Spacing = keyof typeof spacing;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export { default as ProgressTracker } from './ProgressTracker';
-export type { ProgressTrackerProps } from './ProgressTracker';
+export { default as ProgressTracker } from './progress-tracker';
+export type { ProgressTrackerProps } from './progress-tracker';
 export type { Stages, Stage } from './types';

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface StageBarProps {
+    testId?: string;
+    percentageComplete: number;
+}
+/**
+ * __Progress bar__
+ *
+ * A progress bar describes the horizontal tracking bar that traverses each individual step.
+ *
+ */
+declare const ProgressBar: ({ percentageComplete, testId }: StageBarProps) => JSX.Element;
+export default ProgressBar;

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

@@ -0,0 +1,14 @@
+export declare const TRANSITION_SPEED = 300;
+export declare const LINEAR_TRANSITION_SPEED = 50;
+export declare const ANIMATION_EASE_OUT = "cubic-bezier(0.15,1,0.3,1)";
+export declare const varSpacing = "--ds--pt--sp";
+export declare const varTransitionSpeed = "--ds--pt--ts";
+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 = "600";
+export declare const REGULAR_FONT_WEIGHT = "400";
+export declare const HALF_GRID_SIZE: number;
+export declare const PROGRESS_BAR_HEIGHT: number;
+export declare const LABEL_TOP_SPACING: number;

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

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

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

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { FC } from 'react';
+/**
+ * __Progress marker__
+ *
+ * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
+ */
+declare const ProgressMarker: FC<{
+    testId?: string;
+}>;
+export default ProgressMarker;

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

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import type { ProgressTrackerStageProps } from './types';
+interface State {
+    transitioning: boolean;
+    oldMarkerColor?: string;
+    oldPercentageComplete: number;
+}
+export type { ProgressTrackerStageProps };
+export default class ProgressTrackerStage extends PureComponent<ProgressTrackerStageProps, State> {
+    constructor(props: ProgressTrackerStageProps);
+    UNSAFE_componentWillMount(): void;
+    UNSAFE_componentWillReceiveProps(): void;
+    shouldShowLink(): boolean;
+    onEntered: () => void;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,27 @@
+import type { ProgressTrackerStageRenderProp, Stage } from '../types';
+export interface ProgressTrackerStageProps {
+    /**
+     * stage data passed to each `ProgressTrackerStage` component
+     */
+    item: Stage;
+    /**
+     * render prop to specify how to render components
+     */
+    render: ProgressTrackerStageRenderProp;
+    /**
+     * An internal hook applied to key elements for automated testing
+     */
+    testId?: string;
+    /**
+     * delay before transitioning in ms
+     */
+    transitionDelay: number;
+    /**
+     * speed at which to transition in ms
+     */
+    transitionSpeed: number;
+    /**
+     * interface of easing for transition
+     */
+    transitionEasing: string;
+}

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

@@ -0,0 +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 getFontWeight: (status: Status) => "600" | "400" | undefined;

package/dist/types/{ProgressTracker/index.d.ts → progress-tracker.d.ts}

@@ -1,17 +1,30 @@
+/** @jsx jsx */
 import { PureComponent } from 'react';
-import { LinkComponentProps, ProgressTrackerStageRenderProp, Spacing, Stages } from '../types';
+import type { LinkComponentProps, ProgressTrackerStageRenderProp, Spacing, Stages } from './types';
 export interface ProgressTrackerProps {
-    /** Ordered list of stage data */
+    /**
+     * Ordered list of stage data
+     */
     items: Stages;
-    /** Margin spacing type between steps */
+    /**
+     * Margin spacing type between steps
+     */
     spacing: Spacing;
-    /** Render prop to specify custom implementations of components */
+    /**
+     * Render prop to specify custom implementations of components
+     */
     render: ProgressTrackerStageRenderProp;
-    /** Turns off transition animations if set to false */
+    /**
+     * Turns off transition animations if set to false
+     */
     animated: boolean;
-    /** A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests */
+    /**
+     * A `testId` prop is provided for specified elements, which 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;
-    /** Text to be used as an aria-label of progress tracker */
+    /**
+     * Text to be used as an aria-label of progress tracker
+     */
     label?: string;
 }
 interface State {
@@ -22,21 +35,17 @@ export default class ProgressTracker extends PureComponent<ProgressTrackerProps,
         items: never[];
         spacing: string;
         render: {
-            link: (props: LinkComponentProps) => JSX.Element;
+            link: ({ item }: LinkComponentProps) => JSX.Element;
         };
         animated: boolean;
         label: string;
     };
-    createTheme: () => {
-        spacing: Spacing;
-        columns: number;
-    };
     state: {
         prevStages: {
             percentageComplete: number;
             id: string;
             label: string;
-            status: import("../types").StatusType;
+            status: import("./types").Status;
             noLink?: boolean | undefined;
             href?: string | undefined;
             onClick?: (() => void) | undefined;

package/dist/types/types.d.ts

@@ -1,11 +1,18 @@
-export declare type StatusType = 'unvisited' | 'visited' | 'current' | 'disabled';
-/** Ideally these are exported by @atlaskit/page */
-export declare type Spacing = 'comfortable' | 'cosy' | 'compact';
+/// <reference types="react" />
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
+export type { Spacing } from './constants';
+export declare type Status = 'unvisited' | 'visited' | 'current' | 'disabled';
+/**
+ * @deprecated
+ */
+export declare type StatusType = Status;
 export interface Stage {
     id: string;
     label: string;
     percentageComplete: number;
-    status: StatusType;
+    status: Status;
     noLink?: boolean;
     href?: string;
     onClick?: () => void;