@atlaskit/progress-indicator 9.0.5 → 9.2.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @atlaskit/progress-indicator
 
+## 9.2.0
+
+### Minor Changes
+
+- [`303e4bf4aa5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/303e4bf4aa5) - [ux] Instrumented progress-indicator with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+- Updated dependencies
+
+## 9.1.2
+
+### Patch Changes
+
+- [`2b2290121eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2290121eb) - Raised the minimum version carat range of focus ring to latest.
+
+## 9.1.1
+
+### Patch Changes
+
+- [`7d89d624097`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d89d624097) - Fix for focus being incorrectly retained when indicators were not interactive.
+
+## 9.1.0
+
+### Minor Changes
+
+- [`947ba5b11f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/947ba5b11f0) - The component has undergone an internal refactor. The following changes need to be called out:
+
+  - `styled-components` has been removed from the package in favour of `@emotion/core`.
+  - The component now supports a `testId` prop in line with other Design System components. This can be used for automated testing.
+  - Focus ring colors have been normalised to be the same across all appearance types of the component.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.0.5
 
 ### Patch Changes

package/dist/cjs/components/appearances.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBgColor = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
+var colorMap = {
+  default: (0, _components.themed)({
+    light: "var(--ds-background-neutral, ".concat(_colors.N50, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
+  }),
+  help: (0, _components.themed)({
+    light: "var(--ds-background-neutral, ".concat(_colors.P75, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
+  }),
+  inverted: (0, _components.themed)({
+    light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
+    dark: "var(--ds-icon-subtle, ".concat(_colors.DN300A, ")")
+  }),
+  primary: (0, _components.themed)({
+    light: "var(--ds-background-neutral, ".concat(_colors.B75, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
+  })
+};
+var selectedColorMap = {
+  default: (0, _components.themed)({
+    light: "var(--ds-icon, ".concat(_colors.N900, ")"),
+    dark: "var(--ds-icon, ".concat(_colors.DN600, ")")
+  }),
+  help: (0, _components.themed)({
+    light: "var(--ds-icon-discovery, ".concat(_colors.P400, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(_colors.P300, ")")
+  }),
+  inverted: (0, _components.themed)({
+    light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-icon-inverse, ".concat(_colors.DN30, ")")
+  }),
+  primary: (0, _components.themed)({
+    light: "var(--ds-icon-brand, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-icon-brand, ".concat(_colors.B100, ")")
+  })
+};
+
+var getBgColor = function getBgColor(appearance, isSelected) {
+  return isSelected ? selectedColorMap[appearance] : colorMap[appearance];
+};
+
+exports.getBgColor = getBgColor;

package/dist/cjs/components/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.varDotsSize = exports.varDotsMargin = exports.spacingDivision = exports.sizes = void 0;
+var sizes = {
+  small: 4,
+  default: 8,
+  large: 12
+};
+exports.sizes = sizes;
+var spacingDivision = {
+  comfortable: 1,
+  cozy: 2,
+  compact: 4
+};
+exports.spacingDivision = spacingDivision;
+var varDotsSize = '--ds-dots-size';
+exports.varDotsSize = varDotsSize;
+var varDotsMargin = '--ds-dots-margin';
+exports.varDotsMargin = varDotsMargin;

package/dist/cjs/components/indicator.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PresentationalIndicator = exports.ButtonIndicator = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _core = require("@emotion/core");
+
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
+var _constants = require("./constants");
+
+/** @jsx jsx */
+var commonStyles = (0, _core.css)({
+  width: "var(".concat(_constants.varDotsSize, ")"),
+  height: "var(".concat(_constants.varDotsSize, ")"),
+  position: 'relative',
+  borderRadius: '50%',
+  '&::before': {
+    display: 'block',
+    width: "calc(var(".concat(_constants.varDotsSize, ") + var(").concat(_constants.varDotsMargin, "))"),
+    height: "calc(var(".concat(_constants.varDotsSize, ") + var(").concat(_constants.varDotsMargin, "))"),
+    position: 'absolute',
+    top: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)"),
+    left: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)"),
+    content: '""'
+  }
+});
+var buttonStyles = (0, _core.css)({
+  padding: 0,
+  border: 0,
+  cursor: 'pointer',
+  outline: 0
+});
+/**
+ * __Presentational indicator__
+ *
+ * A presentational indicator with no interactivity
+ */
+
+var PresentationalIndicator = function PresentationalIndicator(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+) {
+  return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
+    css: commonStyles,
+    role: "presentation"
+  }));
+};
+/**
+ * __Button indicator__
+ *
+ * An interactive indicator.
+ */
+
+
+exports.PresentationalIndicator = PresentationalIndicator;
+
+var ButtonIndicator = function ButtonIndicator(props) {
+  return (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("button", (0, _extends2.default)({}, props, {
+    role: "tab",
+    type: "button",
+    css: [commonStyles, buttonStyles]
+  })));
+};
+
+exports.ButtonIndicator = ButtonIndicator;

package/dist/cjs/components/progress-dots.js

@@ -0,0 +1,164 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
+var _components = require("@atlaskit/theme/components");
+
+var _appearances = require("./appearances");
+
+var _constants = require("./constants");
+
+var _indicator = require("./indicator");
+
+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; }
+
+/** @jsx jsx */
+var packageName = "@atlaskit/progress-indicator";
+var packageVersion = "9.2.0";
+var containerStyles = (0, _core.css)({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: "var(".concat(_constants.varDotsMargin, ")")
+});
+/**
+ * __ProgressDots__
+ *
+ * A progress indicator shows the user where they are along the steps of a journey.
+ */
+
+var ProgressDots = function ProgressDots(_ref) {
+  var _ref2;
+
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      _ref$ariaControls = _ref.ariaControls,
+      ariaControls = _ref$ariaControls === void 0 ? 'panel' : _ref$ariaControls,
+      _ref$ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref$ariaLabel === void 0 ? 'tab' : _ref$ariaLabel,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      _ref$spacing = _ref.spacing,
+      gutter = _ref$spacing === void 0 ? 'comfortable' : _ref$spacing,
+      selectedIndex = _ref.selectedIndex,
+      testId = _ref.testId,
+      values = _ref.values,
+      onSelect = _ref.onSelect;
+  var tablistRef = (0, _react.useRef)(null);
+  var onSelectWithAnalytics = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: onSelect || _noop.default,
+    action: 'selected',
+    componentName: 'progressIndicator',
+    packageName: packageName,
+    packageVersion: packageVersion
+  });
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    var indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
+
+    if (!indicators.includes(event.target)) {
+      return;
+    } // bail if not valid arrow key
+
+
+    var isLeft = event.key === 'ArrowLeft';
+    var isRight = event.key === 'ArrowRight';
+
+    if (!isLeft && !isRight) {
+      return;
+    } // bail if at either end of the values
+
+
+    var isAlpha = isLeft && selectedIndex === 0;
+    var isOmega = isRight && selectedIndex === values.length - 1;
+
+    if (isAlpha || isOmega) {
+      return;
+    }
+
+    var index = isLeft ? selectedIndex - 1 : selectedIndex + 1; // call the consumer's select method and focus the applicable indicator
+
+    if (onSelect) {
+      onSelectWithAnalytics({
+        event: event,
+        index: index
+      });
+    }
+
+    if (typeof indicators[index].focus === 'function') {
+      indicators[index].focus();
+    }
+  }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
+  (0, _react.useEffect)(function () {
+    if (onSelect) {
+      document.addEventListener('keydown', handleKeyDown, false);
+    }
+
+    return function () {
+      if (onSelect) {
+        document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [onSelect, handleKeyDown]);
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _core.jsx)("div", {
+    "data-testid": testId,
+    css: containerStyles,
+    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, "".concat(_constants.sizes[size] / _constants.spacingDivision[gutter], "px")), _ref2),
+    ref: function ref(r) {
+      tablistRef.current = r;
+    },
+    role: "tablist"
+  }, values.map(function (_, index) {
+    var isSelected = selectedIndex === index;
+    var tabId = "".concat(ariaLabel).concat(index);
+    var panelId = "".concat(ariaControls).concat(index);
+    var backgroundColor = (0, _appearances.getBgColor)(appearance, isSelected)({
+      theme: theme
+    });
+    return onSelect ? (0, _core.jsx)(_indicator.ButtonIndicator, {
+      key: index,
+      style: {
+        backgroundColor: backgroundColor
+      },
+      "aria-controls": panelId,
+      "aria-label": tabId,
+      "aria-selected": isSelected,
+      id: tabId,
+      onClick: function onClick(event) {
+        return onSelectWithAnalytics({
+          event: event,
+          index: index
+        });
+      },
+      tabIndex: isSelected ? 0 : -1,
+      "data-testid": testId && "".concat(testId, "-ind-").concat(index)
+    }) : (0, _core.jsx)(_indicator.PresentationalIndicator, {
+      "data-testid": testId && "".concat(testId, "-ind-").concat(index),
+      key: index,
+      style: {
+        backgroundColor: backgroundColor
+      }
+    });
+  }));
+};
+
+var _default = ProgressDots;
+exports.default = _default;

package/dist/cjs/components/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/index.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ProgressIndicator", {
   enumerable: true,
   get: function get() {
-    return _Dots.default;
+    return _progressDots.default;
   }
 });
 
-var _Dots = _interopRequireDefault(require("./components/Dots"));
+var _progressDots = _interopRequireDefault(require("./components/progress-dots"));

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.0.5",
+	"version": "9.2.0",
 	"sideEffects": false
 }

package/dist/es2019/components/appearances.js

@@ -0,0 +1,40 @@
+import { B100, B400, B75, DN30, DN300A, DN600, DN70, N0, N50, N900, P300, P400, P75 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
+const colorMap = {
+  default: themed({
+    light: `var(--ds-background-neutral, ${N50})`,
+    dark: `var(--ds-background-neutral, ${DN70})`
+  }),
+  help: themed({
+    light: `var(--ds-background-neutral, ${P75})`,
+    dark: `var(--ds-background-neutral, ${DN70})`
+  }),
+  inverted: themed({
+    light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
+    dark: `var(--ds-icon-subtle, ${DN300A})`
+  }),
+  primary: themed({
+    light: `var(--ds-background-neutral, ${B75})`,
+    dark: `var(--ds-background-neutral, ${DN70})`
+  })
+};
+const selectedColorMap = {
+  default: themed({
+    light: `var(--ds-icon, ${N900})`,
+    dark: `var(--ds-icon, ${DN600})`
+  }),
+  help: themed({
+    light: `var(--ds-icon-discovery, ${P400})`,
+    dark: `var(--ds-icon-discovery, ${P300})`
+  }),
+  inverted: themed({
+    light: `var(--ds-icon-inverse, ${N0})`,
+    dark: `var(--ds-icon-inverse, ${DN30})`
+  }),
+  primary: themed({
+    light: `var(--ds-icon-brand, ${B400})`,
+    dark: `var(--ds-icon-brand, ${B100})`
+  })
+};
+export const getBgColor = (appearance, isSelected) => isSelected ? selectedColorMap[appearance] : colorMap[appearance];

package/dist/es2019/components/constants.js

@@ -0,0 +1,12 @@
+export const sizes = {
+  small: 4,
+  default: 8,
+  large: 12
+};
+export const spacingDivision = {
+  comfortable: 1,
+  cozy: 2,
+  compact: 4
+};
+export const varDotsSize = '--ds-dots-size';
+export const varDotsMargin = '--ds-dots-margin';

package/dist/es2019/components/indicator.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import FocusRing from '@atlaskit/focus-ring';
+import { varDotsMargin, varDotsSize } from './constants';
+const commonStyles = css({
+  width: `var(${varDotsSize})`,
+  height: `var(${varDotsSize})`,
+  position: 'relative',
+  borderRadius: '50%',
+  '&::before': {
+    display: 'block',
+    width: `calc(var(${varDotsSize}) + var(${varDotsMargin}))`,
+    height: `calc(var(${varDotsSize}) + var(${varDotsMargin}))`,
+    position: 'absolute',
+    top: `calc(-1 * var(${varDotsMargin}) / 2)`,
+    left: `calc(-1 * var(${varDotsMargin}) / 2)`,
+    content: '""'
+  }
+});
+const buttonStyles = css({
+  padding: 0,
+  border: 0,
+  cursor: 'pointer',
+  outline: 0
+});
+/**
+ * __Presentational indicator__
+ *
+ * A presentational indicator with no interactivity
+ */
+
+export const PresentationalIndicator = (props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+) => jsx("div", _extends({}, props, {
+  css: commonStyles,
+  role: "presentation"
+}));
+/**
+ * __Button indicator__
+ *
+ * An interactive indicator.
+ */
+
+export const ButtonIndicator = props => {
+  return jsx(FocusRing, null, jsx("button", _extends({}, props, {
+    role: "tab",
+    type: "button",
+    css: [commonStyles, buttonStyles]
+  })));
+};

package/dist/es2019/components/progress-dots.js

@@ -0,0 +1,135 @@
+/** @jsx jsx */
+import React, { useCallback, useEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import noop from '@atlaskit/ds-lib/noop';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { getBgColor } from './appearances';
+import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
+import { ButtonIndicator, PresentationalIndicator } from './indicator';
+const packageName = "@atlaskit/progress-indicator";
+const packageVersion = "9.2.0";
+const containerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: `var(${varDotsMargin})`
+});
+/**
+ * __ProgressDots__
+ *
+ * A progress indicator shows the user where they are along the steps of a journey.
+ */
+
+const ProgressDots = ({
+  appearance = 'default',
+  ariaControls = 'panel',
+  ariaLabel = 'tab',
+  size = 'default',
+  // NOTE: `spacing` is a reserved HTML attribute and will be added to the
+  // element, replaced with `gutter`.
+  spacing: gutter = 'comfortable',
+  selectedIndex,
+  testId,
+  values,
+  onSelect
+}) => {
+  const tablistRef = useRef(null);
+  const onSelectWithAnalytics = usePlatformLeafEventHandler({
+    fn: onSelect || noop,
+    action: 'selected',
+    componentName: 'progressIndicator',
+    packageName,
+    packageVersion
+  });
+  const handleKeyDown = useCallback(event => {
+    const indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
+
+    if (!indicators.includes(event.target)) {
+      return;
+    } // bail if not valid arrow key
+
+
+    const isLeft = event.key === 'ArrowLeft';
+    const isRight = event.key === 'ArrowRight';
+
+    if (!isLeft && !isRight) {
+      return;
+    } // bail if at either end of the values
+
+
+    const isAlpha = isLeft && selectedIndex === 0;
+    const isOmega = isRight && selectedIndex === values.length - 1;
+
+    if (isAlpha || isOmega) {
+      return;
+    }
+
+    const index = isLeft ? selectedIndex - 1 : selectedIndex + 1; // call the consumer's select method and focus the applicable indicator
+
+    if (onSelect) {
+      onSelectWithAnalytics({
+        event: event,
+        index
+      });
+    }
+
+    if (typeof indicators[index].focus === 'function') {
+      indicators[index].focus();
+    }
+  }, [onSelectWithAnalytics, selectedIndex, values, onSelect]);
+  useEffect(() => {
+    if (onSelect) {
+      document.addEventListener('keydown', handleKeyDown, false);
+    }
+
+    return () => {
+      if (onSelect) {
+        document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [onSelect, handleKeyDown]);
+  const theme = useGlobalTheme();
+  return jsx("div", {
+    "data-testid": testId,
+    css: containerStyles,
+    style: {
+      [varDotsSize]: `${sizes[size]}px`,
+      [varDotsMargin]: `${sizes[size] / spacingDivision[gutter]}px`
+    },
+    ref: r => {
+      tablistRef.current = r;
+    },
+    role: "tablist"
+  }, values.map((_, index) => {
+    const isSelected = selectedIndex === index;
+    const tabId = `${ariaLabel}${index}`;
+    const panelId = `${ariaControls}${index}`;
+    const backgroundColor = getBgColor(appearance, isSelected)({
+      theme
+    });
+    return onSelect ? jsx(ButtonIndicator, {
+      key: index,
+      style: {
+        backgroundColor
+      },
+      "aria-controls": panelId,
+      "aria-label": tabId,
+      "aria-selected": isSelected,
+      id: tabId,
+      onClick: event => onSelectWithAnalytics({
+        event,
+        index
+      }),
+      tabIndex: isSelected ? 0 : -1,
+      "data-testid": testId && `${testId}-ind-${index}`
+    }) : jsx(PresentationalIndicator, {
+      "data-testid": testId && `${testId}-ind-${index}`,
+      key: index,
+      style: {
+        backgroundColor
+      }
+    });
+  }));
+};
+
+export default ProgressDots;

package/dist/es2019/components/types.js

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

package/dist/es2019/index.js

@@ -2,4 +2,4 @@
 // having a single named export will avoid consumers having to update their
 // imports when there's a feature release.
 // eslint-disable-next-line import/prefer-default-export
-export { default as ProgressIndicator } from './components/Dots';
+export { default as ProgressIndicator } from './components/progress-dots';

package/dist/es2019/types.js

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

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.0.5",
+	"version": "9.2.0",
 	"sideEffects": false
 }