@atlaskit/progress-tracker 8.0.3 → 8.2.0

package/dist/es2019/constants.js

@@ -1,9 +1,11 @@
-import { gridSize } from '@atlaskit/theme/constants';
-export const defaultGridSize = gridSize();
-/** Ideally these are exported by @atlaskit/page */
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+export const defaultGridSize = getGridSize();
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
 
 export const spacing = {
   comfortable: defaultGridSize * 5,
   cosy: defaultGridSize * 2,
-  compact: defaultGridSize * 0.5
+  compact: defaultGridSize / 2
 };

package/dist/es2019/index.js

@@ -1 +1 @@
-export { default as ProgressTracker } from './ProgressTracker';
+export { default as ProgressTracker } from './progress-tracker';

package/dist/es2019/internal/bar.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { B300 } from '@atlaskit/theme/colors';
+import { spacing } from '../constants';
+import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+const progressBarStyles = css({
+  height: PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: `var(--ds-background-brand-bold, ${B300})`,
+  borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
+  borderTopRightRadius: PROGRESS_BAR_HEIGHT,
+  transform: `translate(0, -${LABEL_TOP_SPACING}px)`,
+  transition: `width var(${varTransitionSpeed}) var(${varTransitionEasing})`,
+  transitionDelay: `var(${varTransitionDelay})`
+});
+/**
+ * __Progress bar__
+ *
+ * A progress bar describes the horizontal tracking bar that traverses each individual step.
+ *
+ */
+
+const ProgressBar = ({
+  percentageComplete,
+  testId
+}) => jsx("div", {
+  "data-testid": testId,
+  style: {
+    width: `calc(${percentageComplete}% + ${percentageComplete / 100} * calc(var(${varSpacing}, ${spacing.cosy}px) + ${HALF_GRID_SIZE}px))`
+  },
+  css: progressBarStyles
+});
+
+export default ProgressBar;

package/dist/es2019/internal/constants.js

@@ -0,0 +1,16 @@
+import { defaultGridSize } from '../constants';
+export const TRANSITION_SPEED = 300;
+export const LINEAR_TRANSITION_SPEED = 50;
+export const ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
+export const varSpacing = '--ds--pt--sp';
+export const varTransitionSpeed = '--ds--pt--ts';
+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 = '600';
+export const REGULAR_FONT_WEIGHT = '400';
+export const HALF_GRID_SIZE = defaultGridSize / 2;
+export const PROGRESS_BAR_HEIGHT = defaultGridSize; // Labels sit 20px from bottom of progress bar.
+
+export const LABEL_TOP_SPACING = defaultGridSize + 20;

package/dist/es2019/internal/link.js

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N800 } from '@atlaskit/theme/colors';
+const linkStyles = css({
+  color: `var(--ds-text, ${N800})`,
+  cursor: 'pointer'
+});
+/**
+ * __Progress tracker link__
+ */
+
+const Link = ({
+  href,
+  onClick,
+  label,
+  testId
+}) => jsx("a", {
+  css: linkStyles,
+  href: href,
+  onClick: onClick,
+  "data-testid": testId
+}, label);
+
+export default Link;

package/dist/es2019/internal/marker.js

@@ -0,0 +1,42 @@
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+const progressMarkerStyles = css({
+  width: PROGRESS_BAR_HEIGHT,
+  height: PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: `var(${varBackgroundColor})`,
+  borderRadius: PROGRESS_BAR_HEIGHT,
+  transform: `translate(-50%, -${LABEL_TOP_SPACING}px)`,
+  transition: `opacity var(${varTransitionSpeed}) var(${varTransitionEasing}), background-color var(${varTransitionSpeed}) var(${varTransitionEasing})`,
+  transitionDelay: `var(${varTransitionDelay})`,
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1
+  },
+  '&.fade-enter': {
+    backgroundColor: `var(${varMarkerColor})`
+  },
+  '&.fade-enter.fade-enter-active': {
+    backgroundColor: `var(${varBackgroundColor})`
+  }
+});
+/**
+ * __Progress marker__
+ *
+ * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
+ */
+
+const ProgressMarker = ({
+  testId
+}) => jsx("div", {
+  "data-testid": testId,
+  css: progressMarkerStyles
+});
+
+export default ProgressMarker;

package/dist/es2019/internal/stage.js

@@ -0,0 +1,130 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @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';
+const containerStyles = css({
+  width: '100%',
+  position: 'relative'
+});
+const listItemStyles = css({
+  margin: 0,
+  overflowWrap: 'break-word'
+});
+const 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(${varTransitionSpeed}) cubic-bezier(0.2, 0, 0, 1)`
+  }
+});
+export default class ProgressTrackerStage extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "onEntered", () => {
+      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),
+      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,
+      testId
+    } = this.props;
+    const ariaCurrent = item.status === 'current' ? 'step' : 'false';
+    return jsx("li", {
+      "data-testid": testId,
+      style: {
+        [varTransitionSpeed]: `${transitionSpeed}ms`,
+        [varTransitionDelay]: `${transitionDelay}ms`,
+        [varTransitionEasing]: transitionEasing,
+        [varMarkerColor]: this.state.oldMarkerColor,
+        [varBackgroundColor]: getMarkerColor(item.status)
+      },
+      css: listItemStyles,
+      "aria-current": ariaCurrent
+    }, jsx("div", {
+      css: containerStyles
+    }, jsx(CSSTransition, {
+      appear: true,
+      in: this.state.transitioning,
+      onEntered: this.onEntered,
+      timeout: transitionDelay + transitionSpeed,
+      classNames: "fade"
+    }, jsx(ProgressMarker, {
+      testId: testId && `${testId}-marker`
+    })), jsx(CSSTransition, {
+      appear: true,
+      in: this.state.transitioning,
+      onEntered: this.onEntered,
+      timeout: transitionDelay + transitionSpeed,
+      classNames: "fade"
+    }, jsx(ProgressBar, {
+      testId: testId && `${testId}-bar`,
+      percentageComplete: item.percentageComplete
+    })), jsx(CSSTransition, {
+      appear: true,
+      in: this.state.transitioning,
+      onEntered: this.onEntered,
+      timeout: transitionDelay + transitionSpeed,
+      classNames: "fade"
+    }, jsx("div", {
+      css: titleStyles,
+      "data-testid": testId && `${testId}-title`,
+      style: {
+        color: getTextColor(item.status),
+        fontWeight: getFontWeight(item.status)
+      }
+    }, this.shouldShowLink() ? render.link({
+      item
+    }) : item.label))));
+  }
+
+}

package/dist/es2019/internal/types.js

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

package/dist/es2019/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 const getMarkerColor = status => {
+  switch (status) {
+    case 'unvisited':
+      return `var(--ds-icon-subtle, ${N70})`;
+
+    case 'current':
+    case 'visited':
+    case 'disabled':
+      return `var(--ds-icon-brand, ${B300})`;
+
+    default:
+      return;
+  }
+};
+export const getTextColor = status => {
+  switch (status) {
+    case 'unvisited':
+      return `var(--ds-text-subtlest, ${N300})`;
+
+    case 'current':
+      return `var(--ds-text-brand, ${B300})`;
+
+    case 'visited':
+      return `var(--ds-text, ${N800})`;
+
+    case 'disabled':
+      return `var(--ds-text-disabled, ${N70})`;
+
+    default:
+      return;
+  }
+};
+export const 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/es2019/{ProgressTracker/index.js → progress-tracker.js}

@@ -1,25 +1,31 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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';
-const TRANSITION_SPEED = 300;
-const LINEAR_TRANSITION_SPEED = 50;
-const easeOut = 'cubic-bezier(0.15,1,0.3,1)';
-const 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';
+const containerStyles = css({
+  display: 'grid',
+  width: '100%',
+  margin: '0 auto',
+  padding: 0,
+  gap: `var(${varSpacing})`,
+  listStyleType: 'none',
+  '&&': {
+    marginTop: 40
+  }
+});
 export default class ProgressTracker extends PureComponent {
   constructor(...args) {
     super(...args);
 
-    _defineProperty(this, "createTheme", () => ({
-      spacing: this.props.spacing,
-      columns: this.props.items.length * 2
-    }));
-
     _defineProperty(this, "state", {
-      prevStages: this.props.items.map((stage, index) => ({ ...stage,
+      prevStages: this.props.items.map(stage => ({ ...stage,
         percentageComplete: 0
       }))
     });
@@ -48,38 +54,45 @@ export default class ProgressTracker extends PureComponent {
     const items = this.props.items.map((stage, index) => {
       let transitionSpeed = 0;
       let transitionDelay = 0;
-      const transitionEasing = progressChanges > 1 ? 'linear' : easeOut;
+      const transitionEasing = progressChanges > 1 ? 'linear' : ANIMATION_EASE_OUT;
 
       if (this.props.animated) {
         transitionSpeed = progressChanges > 1 ? LINEAR_TRANSITION_SPEED : TRANSITION_SPEED;
 
         if (stage.percentageComplete < this.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 > this.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: this.props.render,
+      return jsx(Stage, {
         transitionSpeed: transitionSpeed,
         transitionDelay: transitionDelay,
-        transitionEasing: transitionEasing
+        transitionEasing: transitionEasing,
+        key: stage.id,
+        item: stage,
+        render: this.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: {
+        gridTemplateColumns: `repeat(${items.length}, 1fr)`,
+        [varSpacing]: `${spacing[this.props.spacing]}px`,
+        maxWidth: defaultGridSize * 10 * items.length * 2
+      },
+      css: containerStyles,
       "aria-label": label
-    }, items)));
+    }, items);
   }
 
 }
@@ -88,8 +101,10 @@ _defineProperty(ProgressTracker, "defaultProps", {
   items: [],
   spacing: 'cosy',
   render: {
-    link: props => /*#__PURE__*/React.createElement(ProgressTrackerLink, props)
+    link: ({
+      item
+    }) => jsx(Link, item)
   },
   animated: true,
-  label: defaultLabel
+  label: 'Progress'
 });

package/dist/es2019/version.json

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

package/dist/esm/constants.js

@@ -1,9 +1,11 @@
-import { gridSize } from '@atlaskit/theme/constants';
-export var defaultGridSize = gridSize();
-/** Ideally these are exported by @atlaskit/page */
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+export var defaultGridSize = getGridSize();
+/**
+ * Ideally these are exported by @atlaskit/page
+ */
 
 export var spacing = {
   comfortable: defaultGridSize * 5,
   cosy: defaultGridSize * 2,
-  compact: defaultGridSize * 0.5
+  compact: defaultGridSize / 2
 };

package/dist/esm/index.js

@@ -1 +1 @@
-export { default as ProgressTracker } from './ProgressTracker';
+export { default as ProgressTracker } from './progress-tracker';

package/dist/esm/internal/bar.js

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { B300 } from '@atlaskit/theme/colors';
+import { spacing } from '../constants';
+import { HALF_GRID_SIZE, LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varSpacing, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+var progressBarStyles = css({
+  height: PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: "var(--ds-background-brand-bold, ".concat(B300, ")"),
+  borderBottomRightRadius: PROGRESS_BAR_HEIGHT,
+  borderTopRightRadius: PROGRESS_BAR_HEIGHT,
+  transform: "translate(0, -".concat(LABEL_TOP_SPACING, "px)"),
+  transition: "width var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
+  transitionDelay: "var(".concat(varTransitionDelay, ")")
+});
+/**
+ * __Progress bar__
+ *
+ * A progress bar describes the horizontal tracking bar that traverses each individual step.
+ *
+ */
+
+var ProgressBar = function ProgressBar(_ref) {
+  var percentageComplete = _ref.percentageComplete,
+      testId = _ref.testId;
+  return jsx("div", {
+    "data-testid": testId,
+    style: {
+      width: "calc(".concat(percentageComplete, "% + ").concat(percentageComplete / 100, " * calc(var(").concat(varSpacing, ", ").concat(spacing.cosy, "px) + ").concat(HALF_GRID_SIZE, "px))")
+    },
+    css: progressBarStyles
+  });
+};
+
+export default ProgressBar;

package/dist/esm/internal/constants.js

@@ -0,0 +1,16 @@
+import { defaultGridSize } from '../constants';
+export var TRANSITION_SPEED = 300;
+export var LINEAR_TRANSITION_SPEED = 50;
+export var ANIMATION_EASE_OUT = 'cubic-bezier(0.15,1,0.3,1)';
+export var varSpacing = '--ds--pt--sp';
+export var varTransitionSpeed = '--ds--pt--ts';
+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 = '600';
+export var REGULAR_FONT_WEIGHT = '400';
+export var HALF_GRID_SIZE = defaultGridSize / 2;
+export var PROGRESS_BAR_HEIGHT = defaultGridSize; // Labels sit 20px from bottom of progress bar.
+
+export var LABEL_TOP_SPACING = defaultGridSize + 20;

package/dist/esm/internal/link.js

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N800 } from '@atlaskit/theme/colors';
+var linkStyles = css({
+  color: "var(--ds-text, ".concat(N800, ")"),
+  cursor: 'pointer'
+});
+/**
+ * __Progress tracker link__
+ */
+
+var Link = function Link(_ref) {
+  var href = _ref.href,
+      onClick = _ref.onClick,
+      label = _ref.label,
+      testId = _ref.testId;
+  return jsx("a", {
+    css: linkStyles,
+    href: href,
+    onClick: onClick,
+    "data-testid": testId
+  }, label);
+};
+
+export default Link;

package/dist/esm/internal/marker.js

@@ -0,0 +1,43 @@
+/* eslint-disable @repo/internal/styles/no-nested-styles */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { LABEL_TOP_SPACING, PROGRESS_BAR_HEIGHT, varBackgroundColor, varMarkerColor, varTransitionDelay, varTransitionEasing, varTransitionSpeed } from './constants';
+var progressMarkerStyles = css({
+  width: PROGRESS_BAR_HEIGHT,
+  height: PROGRESS_BAR_HEIGHT,
+  position: 'absolute',
+  left: '50%',
+  backgroundColor: "var(".concat(varBackgroundColor, ")"),
+  borderRadius: PROGRESS_BAR_HEIGHT,
+  transform: "translate(-50%, -".concat(LABEL_TOP_SPACING, "px)"),
+  transition: "opacity var(".concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, "), background-color var(").concat(varTransitionSpeed, ") var(").concat(varTransitionEasing, ")"),
+  transitionDelay: "var(".concat(varTransitionDelay, ")"),
+  '&.fade-appear': {
+    opacity: 0.01
+  },
+  '&.fade-appear.fade-appear-active': {
+    opacity: 1
+  },
+  '&.fade-enter': {
+    backgroundColor: "var(".concat(varMarkerColor, ")")
+  },
+  '&.fade-enter.fade-enter-active': {
+    backgroundColor: "var(".concat(varBackgroundColor, ")")
+  }
+});
+/**
+ * __Progress marker__
+ *
+ * Similar to `@atlaskit/progress-indicator`, a small visual circle marker
+ */
+
+var ProgressMarker = function ProgressMarker(_ref) {
+  var testId = _ref.testId;
+  return jsx("div", {
+    "data-testid": testId,
+    css: progressMarkerStyles
+  });
+};
+
+export default ProgressMarker;