@atlaskit/progress-indicator 9.0.4 → 9.1.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/progress-indicator
 
+## 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
+
+- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+
 ## 9.0.4
 
 ### Patch Changes

package/codemods/{9.0.0-import-rename.ts → 9.0.0-import-rename.tsx}

@@ -7,7 +7,7 @@ function hasImportDeclaration(
 ) {
   return !!source
     .find(j.ImportDeclaration)
-    .filter(path => path.node.source.value === importPath).length;
+    .filter((path) => path.node.source.value === importPath).length;
 }
 
 function hasNameImport(
@@ -19,7 +19,7 @@ function hasNameImport(
     .find(j.ImportDeclaration)
     .find(j.ImportSpecifier)
     .find(j.Identifier)
-    .filter(identifier => identifier!.value!.name === importName).length;
+    .filter((identifier) => identifier!.value!.name === importName).length;
 }
 
 function hasVariableAlreadyDeclared(
@@ -31,7 +31,7 @@ function hasVariableAlreadyDeclared(
     .find(j.VariableDeclaration)
     .find(j.VariableDeclarator)
     .find(j.Identifier)
-    .filter(identifier => identifier!.value!.name === variableName).length;
+    .filter((identifier) => identifier!.value!.name === variableName).length;
 }
 
 export default function transformer(
@@ -46,7 +46,7 @@ export default function transformer(
       source
         .find(j.ImportDeclaration)
         .find(j.Identifier)
-        .filter(identifier => identifier.value.name === 'ProgressDots')
+        .filter((identifier) => identifier.value.name === 'ProgressDots')
         .replaceWith(j.identifier('ProgressIndicator'));
 
       if (hasVariableAlreadyDeclared(j, source, 'ProgressIndicator')) {
@@ -54,7 +54,7 @@ export default function transformer(
           .find(j.ImportDeclaration)
           .find(j.ImportSpecifier)
           .filter(
-            specifier => specifier!.node!.local!.name === 'ProgressIndicator',
+            (specifier) => specifier!.node!.local!.name === 'ProgressIndicator',
           )
           .find(j.Identifier)
           .replaceWith(
@@ -67,22 +67,22 @@ export default function transformer(
         source
           .find(j.VariableDeclarator)
           .find(j.Identifier)
-          .filter(identifier => identifier.value.name === 'ProgressDots')
+          .filter((identifier) => identifier.value.name === 'ProgressDots')
           .replaceWith(j.identifier('AKProgressIndicator'));
 
         source
           .find(j.JSXIdentifier)
-          .filter(identifier => identifier.value.name === 'ProgressDots')
+          .filter((identifier) => identifier.value.name === 'ProgressDots')
           .replaceWith(j.identifier('AKProgressIndicator'));
       } else {
         source
           .find(j.VariableDeclarator)
           .find(j.Identifier)
-          .filter(identifier => identifier.value.name === 'ProgressDots')
+          .filter((identifier) => identifier.value.name === 'ProgressDots')
           .replaceWith(j.identifier('ProgressIndicator'));
         source
           .find(j.JSXIdentifier)
-          .filter(identifier => identifier.value.name === 'ProgressDots')
+          .filter((identifier) => identifier.value.name === 'ProgressDots')
           .replaceWith(j.identifier('ProgressIndicator'));
       }
     }

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");
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var colorMap = {
+  default: (0, _components.themed)({
+    light: _colors.N50,
+    dark: _colors.DN70
+  }),
+  help: (0, _components.themed)({
+    light: _colors.P75,
+    dark: _colors.DN70
+  }),
+  inverted: (0, _components.themed)({
+    light: 'rgba(255, 255, 255, 0.4)',
+    dark: _colors.DN300A
+  }),
+  primary: (0, _components.themed)({
+    light: _colors.B75,
+    dark: _colors.DN70
+  })
+};
+var selectedColorMap = {
+  default: (0, _components.themed)({
+    light: _colors.N900,
+    dark: _colors.DN600
+  }),
+  help: (0, _components.themed)({
+    light: _colors.P400,
+    dark: _colors.P300
+  }),
+  inverted: (0, _components.themed)({
+    light: _colors.N0,
+    dark: _colors.DN30
+  }),
+  primary: (0, _components.themed)({
+    light: _colors.B400,
+    dark: _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.varDotsMargin = exports.varDotsSize = 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,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonIndicator = exports.PresentationalIndicator = 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) {
+  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.1.2";
+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.4",
+	"version": "9.1.2",
 	"sideEffects": false
 }

package/dist/es2019/components/appearances.js

@@ -0,0 +1,40 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import { B100, B400, B75, DN30, DN300A, DN600, DN70, N0, N50, N900, P300, P400, P75 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+const colorMap = {
+  default: themed({
+    light: N50,
+    dark: DN70
+  }),
+  help: themed({
+    light: P75,
+    dark: DN70
+  }),
+  inverted: themed({
+    light: 'rgba(255, 255, 255, 0.4)',
+    dark: DN300A
+  }),
+  primary: themed({
+    light: B75,
+    dark: DN70
+  })
+};
+const selectedColorMap = {
+  default: themed({
+    light: N900,
+    dark: DN600
+  }),
+  help: themed({
+    light: P400,
+    dark: P300
+  }),
+  inverted: themed({
+    light: N0,
+    dark: DN30
+  }),
+  primary: themed({
+    light: B400,
+    dark: 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,50 @@
+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 => 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]
+  })));
+};