@atlaskit/progress-tracker 8.3.0 → 8.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/progress-tracker
 
+## 8.3.2
+
+### Patch Changes
+
+- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+
+## 8.3.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 8.3.0
 
 ### Minor Changes

package/constants/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/constants.js",
   "module:es2019": "../dist/es2019/constants.js",
   "sideEffects": false,
-  "types": "../dist/types/constants.d.ts"
+  "types": "../dist/types/constants.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/constants.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/internal/stage.js

@@ -50,12 +50,15 @@ var containerStyles = (0, _react2.css)({
   position: 'relative'
 });
 var listItemStyles = (0, _react2.css)({
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   overflowWrap: 'break-word'
 });
 var titleStyles = (0, _react2.css)({
   marginTop: _constants2.LABEL_TOP_SPACING,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginRight: 'auto',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: 'auto',
   fontSize: (0, _constants.fontSize)(),
   lineHeight: '16px',

package/dist/cjs/progress-tracker.js

@@ -44,8 +44,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var containerStyles = (0, _react2.css)({
   display: 'grid',
   width: '100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: "var(".concat(_constants2.varSpacing, ")"),
   listStyleType: 'none',
   '&&': {

package/dist/cjs/version.json

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

package/dist/es2019/internal/stage.js

@@ -16,12 +16,15 @@ const containerStyles = css({
   position: 'relative'
 });
 const listItemStyles = css({
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   overflowWrap: 'break-word'
 });
 const titleStyles = css({
   marginTop: LABEL_TOP_SPACING,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginRight: 'auto',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: 'auto',
   fontSize: fontSize(),
   lineHeight: '16px',

package/dist/es2019/progress-tracker.js

@@ -12,8 +12,11 @@ import Stage from './internal/stage';
 const containerStyles = css({
   display: 'grid',
   width: '100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: `var(${varSpacing})`,
   listStyleType: 'none',
   '&&': {

package/dist/es2019/version.json

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

package/dist/esm/internal/stage.js

@@ -30,12 +30,15 @@ var containerStyles = css({
   position: 'relative'
 });
 var listItemStyles = css({
-  margin: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
   overflowWrap: 'break-word'
 });
 var titleStyles = css({
   marginTop: LABEL_TOP_SPACING,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginRight: 'auto',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginLeft: 'auto',
   fontSize: fontSize(),
   lineHeight: '16px',

package/dist/esm/progress-tracker.js

@@ -26,8 +26,11 @@ import Stage from './internal/stage';
 var containerStyles = css({
   display: 'grid',
   width: '100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 auto',
-  padding: 0,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  padding: "var(--ds-scale-0, 0px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   gap: "var(".concat(varSpacing, ")"),
   listStyleType: 'none',
   '&&': {

package/dist/esm/version.json

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

package/dist/types-ts4.0/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const defaultGridSize: 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-ts4.0/index.d.ts

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

package/dist/types-ts4.0/internal/bar.d.ts

@@ -0,0 +1,13 @@
+import { jsx } from '@emotion/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.JSX.Element;
+export default ProgressBar;

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/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-ts4.0/internal/stage.d.ts

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { jsx } from '@emotion/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.JSX.Element;
+}

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/progress-tracker.d.ts

@@ -0,0 +1,58 @@
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
+import type { LinkComponentProps, ProgressTrackerStageRenderProp, Spacing, Stages } from './types';
+export interface ProgressTrackerProps {
+    /**
+     * Ordered list of stage data
+     */
+    items: Stages;
+    /**
+     * Margin spacing type between steps
+     */
+    spacing: Spacing;
+    /**
+     * Render prop to specify custom implementations of components
+     */
+    render: ProgressTrackerStageRenderProp;
+    /**
+     * 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
+     */
+    testId?: string;
+    /**
+     * Text to be used as an aria-label of progress tracker
+     */
+    label?: string;
+}
+interface State {
+    prevStages: Stages;
+}
+export default class ProgressTracker extends PureComponent<ProgressTrackerProps, State> {
+    static defaultProps: {
+        items: never[];
+        spacing: string;
+        render: {
+            link: ({ item }: LinkComponentProps) => jsx.JSX.Element;
+        };
+        animated: boolean;
+        label: string;
+    };
+    state: {
+        prevStages: {
+            percentageComplete: number;
+            id: string;
+            label: string;
+            status: import("./types").Status;
+            noLink?: boolean | undefined;
+            href?: string | undefined;
+            onClick?: (() => void) | undefined;
+        }[];
+    };
+    UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
+    render(): jsx.JSX.Element;
+}
+export {};

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,26 @@
+/// <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: Status;
+    noLink?: boolean;
+    href?: string;
+    onClick?: () => void;
+}
+export declare type Stages = Stage[];
+export interface LinkComponentProps {
+    item: Stage;
+}
+export interface ProgressTrackerStageRenderProp {
+    link: (props: LinkComponentProps) => JSX.Element;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-tracker",
-  "version": "8.3.0",
+  "version": "8.3.2",
   "description": "A progress tracker displays the steps and progress through a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,9 +12,18 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -36,17 +45,17 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.0.1",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/section-message": "^6.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": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.8.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "techstack": {
     "@atlassian/frontend": {
@@ -55,6 +64,7 @@
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
       "design-system": "v1",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "styling": [
         "static",

package/report.api.md

@@ -1,10 +1,13 @@
-## API Report File for "@atlaskit/progress-tracker"
+## API Report File for "@atlaskit/progress-tracker".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
 
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 
 declare interface LinkComponentProps {
@@ -19,7 +22,7 @@ export declare class ProgressTracker extends PureComponent<
     items: never[];
     spacing: string;
     render: {
-      link: ({ item }: LinkComponentProps) => JSX.Element;
+      link: ({ item }: LinkComponentProps) => jsx.JSX.Element;
     };
     animated: boolean;
     label: string;
@@ -36,7 +39,7 @@ export declare class ProgressTracker extends PureComponent<
     }[];
   };
   UNSAFE_componentWillReceiveProps(nextProps: ProgressTrackerProps): void;
-  render(): JSX.Element;
+  render(): jsx.JSX.Element;
 }
 
 export declare interface ProgressTrackerProps {

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }