@atlaskit/progress-indicator 9.0.4 → 9.1.2

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.1.2";
+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.4",
+	"version": "9.1.2",
 	"sideEffects": false
 }

package/dist/esm/components/appearances.js

@@ -0,0 +1,42 @@
+/* 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';
+var 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
+  })
+};
+var 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 var getBgColor = function getBgColor(appearance, isSelected) {
+  return isSelected ? selectedColorMap[appearance] : colorMap[appearance];
+};

package/dist/esm/components/constants.js

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

package/dist/esm/components/indicator.js

@@ -0,0 +1,52 @@
+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';
+var commonStyles = css({
+  width: "var(".concat(varDotsSize, ")"),
+  height: "var(".concat(varDotsSize, ")"),
+  position: 'relative',
+  borderRadius: '50%',
+  '&::before': {
+    display: 'block',
+    width: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
+    height: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
+    position: 'absolute',
+    top: "calc(-1 * var(".concat(varDotsMargin, ") / 2)"),
+    left: "calc(-1 * var(".concat(varDotsMargin, ") / 2)"),
+    content: '""'
+  }
+});
+var buttonStyles = css({
+  padding: 0,
+  border: 0,
+  cursor: 'pointer',
+  outline: 0
+});
+/**
+ * __Presentational indicator__
+ *
+ * A presentational indicator with no interactivity
+ */
+
+export var PresentationalIndicator = function PresentationalIndicator(props) {
+  return jsx("div", _extends({}, props, {
+    css: commonStyles,
+    role: "presentation"
+  }));
+};
+/**
+ * __Button indicator__
+ *
+ * An interactive indicator.
+ */
+
+export var ButtonIndicator = function ButtonIndicator(props) {
+  return jsx(FocusRing, null, jsx("button", _extends({}, props, {
+    role: "tab",
+    type: "button",
+    css: [commonStyles, buttonStyles]
+  })));
+};

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

@@ -0,0 +1,140 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @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';
+var packageName = "@atlaskit/progress-indicator";
+var packageVersion = "9.1.2";
+var containerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: "var(".concat(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 = useRef(null);
+  var onSelectWithAnalytics = usePlatformLeafEventHandler({
+    fn: onSelect || noop,
+    action: 'selected',
+    componentName: 'progressIndicator',
+    packageName: packageName,
+    packageVersion: packageVersion
+  });
+  var handleKeyDown = 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]);
+  useEffect(function () {
+    if (onSelect) {
+      document.addEventListener('keydown', handleKeyDown, false);
+    }
+
+    return function () {
+      if (onSelect) {
+        document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [onSelect, handleKeyDown]);
+  var theme = useGlobalTheme();
+  return jsx("div", {
+    "data-testid": testId,
+    css: containerStyles,
+    style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, "".concat(sizes[size] / 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 = getBgColor(appearance, isSelected)({
+      theme: theme
+    });
+    return onSelect ? jsx(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)
+    }) : jsx(PresentationalIndicator, {
+      "data-testid": testId && "".concat(testId, "-ind-").concat(index),
+      key: index,
+      style: {
+        backgroundColor: backgroundColor
+      }
+    });
+  }));
+};
+
+export default ProgressDots;

package/dist/esm/components/types.js

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

package/dist/esm/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/esm/types.js

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

package/dist/esm/version.json

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

package/dist/types/components/appearances.d.ts

@@ -0,0 +1,2 @@
+import type { DotsAppearance } from './types';
+export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => import("@atlaskit/theme").ThemedValue<string>;

package/dist/types/components/constants.d.ts

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

package/dist/types/components/indicator.d.ts

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import type { HTMLAttributes } from 'react';
+/**
+ * __Presentational indicator__
+ *
+ * A presentational indicator with no interactivity
+ */
+export declare const PresentationalIndicator: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+/**
+ * __Button indicator__
+ *
+ * An interactive indicator.
+ */
+export declare const ButtonIndicator: (props: HTMLAttributes<HTMLButtonElement>) => JSX.Element;

package/dist/types/components/progress-dots.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import type { ProgressDotsProps } from '../types';
+/**
+ * __ProgressDots__
+ *
+ * A progress indicator shows the user where they are along the steps of a journey.
+ */
+declare const ProgressDots: FC<ProgressDotsProps>;
+export default ProgressDots;

package/dist/types/components/types.d.ts

@@ -0,0 +1,3 @@
+export declare type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
+export declare type Spacing = 'comfortable' | 'cozy' | 'compact';
+export declare type Size = 'small' | 'default' | 'large';

package/dist/types/index.d.ts

@@ -1 +1,2 @@
-export { default as ProgressIndicator } from './components/Dots';
+export { default as ProgressIndicator } from './components/progress-dots';
+export type { ProgressDotsProps } from './types';

package/dist/types/types.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { DotsAppearance, Size, Spacing } from './components/types';
+export interface ProgressDotsProps {
+    /**
+     * The color of the indicators
+     */
+    appearance?: DotsAppearance;
+    /**
+     * The aria-controls text applied to each indicator, appended by the index
+     */
+    ariaControls?: string;
+    /**
+     * The aria-label text applied to each indicator, appended by the index
+     */
+    ariaLabel?: string;
+    /**
+     * Function called when an indicator is selected
+     */
+    onSelect?: (eventData: {
+        event: React.MouseEvent<HTMLButtonElement>;
+        index: number;
+    }, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Which indicator is currently selected
+     */
+    selectedIndex: number;
+    /**
+     * Corresponds to the width & height of each indicator
+     */
+    size?: Size;
+    /**
+     * How much of a gutter is desired between indicators
+     */
+    spacing?: Spacing;
+    /**
+     * A hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * An array of values mapped over to create the indicators
+     */
+    values: any[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-indicator",
-  "version": "9.0.4",
+  "version": "9.1.2",
   "description": "A progress indicator shows the user where they are along the steps of 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": {
@@ -25,30 +24,49 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/theme": "^11.0.0",
-    "@babel/runtime": "^7.0.0"
+    "@atlaskit/ds-lib": "^1.3.0",
+    "@atlaskit/focus-ring": "^0.2.4",
+    "@atlaskit/theme": "^12.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "styled-components": "^3.2.6"
+    "react": "^16.8.0"
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@types/jscodeshift": "^0.6.3",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^8.0.1",
+    "@types/jscodeshift": "^0.11.0",
     "enzyme": "^3.10.0",
-    "jscodeshift": "^0.7.0",
+    "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
+    "styled-components": "^3.2.6",
     "typescript": "3.9.6"
   },
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "ui-components": "lite-mode",
+      "design-system": "v1",
+      "styling": "emotion",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
     }
   },
-  "homepage": "https://atlassian.design/components/progress-indicator/"
+  "af:exports": {
+    "./types": "./src/types.tsx",
+    ".": "./src/index.tsx"
+  },
+  "homepage": "https://atlassian.design/components/progress-indicator/",
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/types/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/progress-indicator/types",
+  "main": "../dist/cjs/types.js",
+  "module": "../dist/esm/types.js",
+  "module:es2019": "../dist/es2019/types.js",
+  "types": "../dist/types/types.d.ts"
+}