@atlaskit/progress-tracker 8.0.4 → 8.1.0

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,17 @@
-export declare type StatusType = 'unvisited' | 'visited' | 'current' | 'disabled';
-/** Ideally these are exported by @atlaskit/page */
-export declare type Spacing = 'comfortable' | 'cosy' | 'compact';
+/**
+ * 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-tracker",
-  "version": "8.0.4",
+  "version": "8.1.0",
   "description": "A progress tracker displays the steps and progress through a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -13,10 +13,9 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
@@ -24,14 +23,13 @@
     }
   },
   "dependencies": {
-    "@atlaskit/page": "^12.0.0",
     "@atlaskit/theme": "^12.0.0",
     "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9",
     "react-transition-group": "^4.4.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
@@ -52,8 +50,19 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "design-system": "v1",
+      "styling": "emotion",
+      "analytics": "analytics-next",
+      "deprecation": "no-deprecated-imports"
     }
   },
+  "af:exports": {
+    "./constants": "./src/constants.tsx",
+    "./types": "./src/types.tsx",
+    ".": "./src/index.tsx"
+  },
   "homepage": "https://atlassian.design/components/progress-tracker/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/dist/cjs/ProgressTracker/styled.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ProgressTrackerContainer = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
-var ProgressTrackerContainer = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n\n  && {\n    margin-top: 40px;\n  }\n\n  list-style-type: none;\n  padding: 0px;\n"])));
-
-exports.ProgressTrackerContainer = ProgressTrackerContainer;
-var _default = ProgressTrackerContainer;
-exports.default = _default;

package/dist/cjs/ProgressTrackerLink/index.js

@@ -1,60 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styled = require("./styled");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
-var ProgressTrackerLink = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ProgressTrackerLink, _PureComponent);
-
-  var _super = _createSuper(ProgressTrackerLink);
-
-  function ProgressTrackerLink() {
-    (0, _classCallCheck2.default)(this, ProgressTrackerLink);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(ProgressTrackerLink, [{
-    key: "render",
-    value: function render() {
-      var _this$props$item = this.props.item,
-          href = _this$props$item.href,
-          onClick = _this$props$item.onClick,
-          label = _this$props$item.label;
-      return /*#__PURE__*/_react.default.createElement(_styled.Link, {
-        href: href,
-        onClick: onClick
-      }, label);
-    }
-  }]);
-  return ProgressTrackerLink;
-}(_react.PureComponent);
-
-exports.default = ProgressTrackerLink;

package/dist/cjs/ProgressTrackerLink/styled.js

@@ -1,22 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Link = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _templateObject;
-
-var Link = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  color: ", ";\n"])), _colors.N800);
-
-exports.Link = Link;
-var _default = Link;
-exports.default = _default;

package/dist/cjs/ProgressTrackerStage/styled.js

@@ -1,133 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressTrackerListItem = exports.ProgressTrackerStageTitle = exports.ProgressTrackerStageBar = exports.ProgressTrackerStageMarker = exports.ProgressTrackerStageContainer = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _constants2 = require("../constants");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-var halfGridSize = (0, _constants.gridSize)() / 2;
-var progressBarHeight = (0, _constants.gridSize)();
-var labelTopSpacing = (0, _constants.gridSize)() + 20; // Labels sit 20px from bottom of progress bar.
-
-var ProgressTrackerStageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n"])));
-
-exports.ProgressTrackerStageContainer = ProgressTrackerStageContainer;
-
-var ProgressTrackerStageMarker = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -", "px);\n  background-color: ", ";\n  height: ", "px;\n  width: ", "px;\n  border-radius: ", "px;\n\n  &.fade-appear {\n    opacity: 0.01;\n  }\n\n  &.fade-appear.fade-appear-active {\n    opacity: 1;\n    transition: opacity ", "ms\n      ", ";\n    transition-delay: ", "ms;\n  }\n\n  &.fade-enter {\n    background-color: ", ";\n  }\n\n  &.fade-enter.fade-enter-active {\n    background-color: ", ";\n    transition: background-color ", "ms\n      ", ";\n    transition-delay: ", "ms;\n  }\n"])), labelTopSpacing, function (props) {
-  return props.color;
-}, progressBarHeight, progressBarHeight, progressBarHeight, function (props) {
-  return props.transitionSpeed;
-}, function (props) {
-  return props.transitionEasing;
-}, function (props) {
-  return props.transitionDelay;
-}, function (props) {
-  return props.oldMarkerColor;
-}, function (props) {
-  return props.color;
-}, function (props) {
-  return props.transitionSpeed;
-}, function (props) {
-  return props.transitionEasing;
-}, function (props) {
-  return props.transitionDelay;
-});
-
-exports.ProgressTrackerStageMarker = ProgressTrackerStageMarker;
-
-var ProgressTrackerStageBar = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 50%;\n  transform: translate(0, -", "px);\n  background-color: ", ";\n  height: ", "px;\n  width: calc(\n    ", "% +\n      ", " / 100 *\n      ", "px\n  ); /* account for spacing and radius of marker */\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n\n  &.fade-appear {\n    width: calc(\n      ", "% +\n        ", " / 100 *\n        ", "px\n    ); /* account for spacing and radius of marker */\n  }\n\n  &.fade-appear.fade-appear-active {\n    width: calc(\n      ", "% +\n        ", " / 100 *\n        ", "px\n    ); /* account for spacing and radius of marker */\n    transition: width ", "ms\n      ", ";\n    transition-delay: ", "ms;\n  }\n\n  &.fade-enter {\n    width: calc(\n      ", "% +\n        ", " / 100 *\n        ", "px\n    ); /* account for spacing and radius of marker */\n  }\n\n  &.fade-enter.fade-enter-active {\n    width: calc(\n      ", "% +\n        ", " / 100 *\n        ", "px\n    ); /* account for spacing and radius of marker */\n    transition: width ", "ms\n      ", ";\n    transition-delay: ", "ms;\n  }\n"])), labelTopSpacing, _colors.B300, progressBarHeight, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return halfGridSize + _constants2.spacing[props.theme.spacing];
-}, _constants.gridSize, _constants.gridSize, function (props) {
-  return props.oldPercentageComplete;
-}, function (props) {
-  return props.oldPercentageComplete;
-}, function (props) {
-  return halfGridSize + _constants2.spacing[props.theme.spacing];
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return halfGridSize + _constants2.spacing[props.theme.spacing];
-}, function (props) {
-  return props.transitionSpeed;
-}, function (props) {
-  return props.transitionEasing;
-}, function (props) {
-  return props.transitionDelay;
-}, function (props) {
-  return props.oldPercentageComplete;
-}, function (props) {
-  return props.oldPercentageComplete;
-}, function (props) {
-  return halfGridSize + _constants2.spacing[props.theme.spacing];
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return props.percentageComplete;
-}, function (props) {
-  return halfGridSize + _constants2.spacing[props.theme.spacing];
-}, function (props) {
-  return props.transitionSpeed;
-}, function (props) {
-  return props.transitionEasing;
-}, function (props) {
-  return props.transitionDelay;
-});
-
-exports.ProgressTrackerStageBar = ProgressTrackerStageBar;
-
-var ProgressTrackerStageTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: ", ";\n  line-height: 16px;\n  color: ", ";\n  text-align: center;\n  font-size: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: ", "px;\n\n  &.fade-appear {\n    opacity: 0.01;\n  }\n\n  &.fade-appear.fade-appear-active {\n    opacity: 1;\n    transition: opacity ", "ms\n      cubic-bezier(0.2, 0, 0, 1);\n  }\n"])), function (props) {
-  return props.fontweight;
-}, function (props) {
-  return props.color;
-}, _constants.fontSize, labelTopSpacing, function (props) {
-  return props.transitionSpeed;
-});
-
-exports.ProgressTrackerStageTitle = ProgressTrackerStageTitle;
-
-// Copied styles of GridColumn from @atlaskit/page
-var availableColumns = function availableColumns(props) {
-  return props.theme.columns;
-};
-
-var columns = function columns(props) {
-  return Math.min(availableColumns(props), 2);
-};
-
-var gridSpacing = function gridSpacing(props) {
-  return _constants2.spacing[props.theme.spacing];
-};
-
-var getMaxWidthColumnRatio = function getMaxWidthColumnRatio(props) {
-  if (columns(props) >= availableColumns(props)) {
-    return '100%';
-  }
-
-  return "99.9999% / ".concat(availableColumns(props), " * ").concat(columns(props));
-};
-
-var ProgressTrackerListItem = _styledComponents.default.li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  flex-shrink: 0;\n  margin: 0 ", "px;\n  word-wrap: break-word;\n\n  max-width: calc(", " - ", "px);\n  min-width: calc(99.9999% / ", " - ", "px);\n"])), function (props) {
-  return _constants2.spacing[props.theme.spacing] / 2;
-}, getMaxWidthColumnRatio, gridSpacing, availableColumns, gridSpacing);
-
-exports.ProgressTrackerListItem = ProgressTrackerListItem;

package/dist/es2019/ProgressTracker/styled.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-export const ProgressTrackerContainer = styled.ul`
-  display: flex;
-  width: 100%;
-
-  && {
-    margin-top: 40px;
-  }
-
-  list-style-type: none;
-  padding: 0px;
-`;
-export default ProgressTrackerContainer;

package/dist/es2019/ProgressTrackerLink/index.js

@@ -1,16 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Link } from './styled';
-export default class ProgressTrackerLink extends PureComponent {
-  render() {
-    const {
-      href,
-      onClick,
-      label
-    } = this.props.item;
-    return /*#__PURE__*/React.createElement(Link, {
-      href: href,
-      onClick: onClick
-    }, label);
-  }
-
-}

package/dist/es2019/ProgressTrackerLink/styled.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import { N800 } from '@atlaskit/theme/colors';
-export const Link = styled.a`
-  cursor: pointer;
-  color: ${N800};
-`;
-export default Link;

package/dist/es2019/ProgressTrackerStage/index.js

@@ -1,143 +0,0 @@
-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';
-const semibold = '600';
-const regular = '400';
-
-const getMarkerColor = status => {
-  switch (status) {
-    case 'unvisited':
-      return colors.N70;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return colors.B300;
-
-    default:
-      return;
-  }
-};
-
-const getTextColor = status => {
-  switch (status) {
-    case 'unvisited':
-      return colors.N300;
-
-    case 'current':
-      return colors.B300;
-
-    case 'visited':
-      return colors.N800;
-
-    case 'disabled':
-      return colors.N70;
-
-    default:
-      return;
-  }
-};
-
-const getFontWeight = status => {
-  switch (status) {
-    case 'unvisited':
-      return regular;
-
-    case 'current':
-    case 'visited':
-    case 'disabled':
-      return semibold;
-
-    default:
-      return;
-  }
-};
-
-export default class ProgressTrackerStage extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      transitioning: false,
-      oldMarkerColor: getMarkerColor(this.props.item.status),
-      oldPercentageComplete: 0
-    };
-  }
-
-  UNSAFE_componentWillMount() {
-    this.setState({ ...this.state,
-      transitioning: true
-    });
-  }
-
-  UNSAFE_componentWillReceiveProps() {
-    this.setState({ ...this.state,
-      transitioning: true
-    });
-  }
-
-  shouldShowLink() {
-    return this.props.item.status === 'visited' && !this.props.item.noLink;
-  }
-
-  render() {
-    const {
-      item,
-      render,
-      transitionDelay,
-      transitionSpeed,
-      transitionEasing
-    } = this.props;
-
-    const onEntered = () => {
-      this.setState({
-        transitioning: false,
-        oldMarkerColor: getMarkerColor(item.status),
-        oldPercentageComplete: item.percentageComplete
-      });
-    };
-
-    const ariaCurrent = item.status === 'current' ? 'step' : 'false';
-    return /*#__PURE__*/React.createElement(ProgressTrackerListItem, {
-      "aria-current": ariaCurrent
-    }, /*#__PURE__*/React.createElement(ProgressTrackerStageContainer, null, /*#__PURE__*/React.createElement(CSSTransition, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: 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, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: 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, {
-      appear: true,
-      in: this.state.transitioning,
-      onEntered: onEntered,
-      timeout: transitionDelay + transitionSpeed,
-      classNames: "fade"
-    }, /*#__PURE__*/React.createElement(ProgressTrackerStageTitle, {
-      color: getTextColor(item.status),
-      fontweight: getFontWeight(item.status),
-      transitionSpeed: transitionSpeed,
-      transitionDelay: transitionDelay
-    }, this.shouldShowLink() ? render.link({
-      item
-    }) : item.label))));
-  }
-
-}