@atlaskit/progress-indicator 11.0.7 → 11.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/indicator.compiled.css +18 -0
  3. package/dist/cjs/components/indicator.js +49 -70
  4. package/dist/cjs/components/progress-dots.js +29 -22
  5. package/dist/es2019/components/indicator.compiled.css +18 -0
  6. package/dist/es2019/components/indicator.js +47 -69
  7. package/dist/es2019/components/progress-dots.js +29 -17
  8. package/dist/esm/components/indicator.compiled.css +18 -0
  9. package/dist/esm/components/indicator.js +43 -67
  10. package/dist/esm/components/progress-dots.js +29 -21
  11. package/dist/types/components/indicator.d.ts +6 -2
  12. package/dist/types/components/progress-dots.d.ts +0 -4
  13. package/dist/types-ts4.5/components/indicator.d.ts +6 -2
  14. package/dist/types-ts4.5/components/progress-dots.d.ts +0 -4
  15. package/package.json +8 -7
  16. package/dist/cjs/components/constants.js +0 -26
  17. package/dist/es2019/components/constants.js +0 -20
  18. package/dist/esm/components/constants.js +0 -20
  19. package/dist/types/components/constants.d.ts +0 -27
  20. package/dist/types-ts4.5/components/constants.d.ts +0 -30
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/progress-indicator
2
2
 
3
+ ## 11.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#98760](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98760)
8
+ [`4ed94e5c74659`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ed94e5c74659) -
9
+ Compiled migration for progress indicator
10
+
3
11
  ## 11.0.7
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/indicator.compiled.css ADDED
@@ -0,0 +1,18 @@
1
+
2
+ ._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
3
+ ._19itt9ly{border:var(--ds-border-width,1px) solid var(--ds-border-bold,#758195)}
4
+ ._1yt4ze3t{padding:var(--ds-space-0,0)}
5
+ ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}._12ji1r31{outline-color:currentColor}
6
+ ._12y3idpf{outline-width:0}
7
+ ._1bsbg7kr{width:var(--ds-dots-size)}
8
+ ._1cs8stnw:before{position:absolute}
9
+ ._1kt9b3bt:before{content:""}
10
+ ._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
11
+ ._1qu2glyw{outline-style:none}
12
+ ._4t3ig7kr{height:var(--ds-dots-size)}
13
+ ._80omtlke{cursor:pointer}
14
+ ._cfu11ule:before{display:block}
15
+ ._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
16
+ ._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
17
+ ._kqswh2mm{position:relative}
18
+ ._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}
package/dist/cjs/components/indicator.js CHANGED
@@ -1,78 +1,49 @@
1
+ /* indicator.tsx generated by @compiled/babel-plugin v0.33.0 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.PresentationalIndicator = exports.ButtonIndicator = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _primitives = require("@atlaskit/primitives");
10
+ require("./indicator.compiled.css");
11
+ var React = _interopRequireWildcard(require("react"));
12
+ var _runtime = require("@compiled/react/runtime");
13
+ var _react2 = require("@compiled/react");
14
+ var _compiled = require("@atlaskit/primitives/compiled");
10
15
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
11
- var _constants = require("./constants");
12
- // TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
13
- var colorMap = {
14
- default: (0, _primitives.xcss)({
15
- backgroundColor: 'elevation.surface',
16
- border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
17
- }),
18
- help: (0, _primitives.xcss)({
19
- backgroundColor: 'elevation.surface',
20
- border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
21
- }),
22
- inverted: (0, _primitives.xcss)({
23
- // @ts-ignore
24
- backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
25
- border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-inverse, #FFFFFF)")
26
- }),
27
- primary: (0, _primitives.xcss)({
28
- backgroundColor: 'elevation.surface',
29
- border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
30
- })
16
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
+ var commonStyles = {
19
+ common: "_2rko14q2 _1bsbg7kr _4t3ig7kr _kqswh2mm _cfu11ule _1mp41th6 _kfgt1th6 _1cs8stnw _1kt9b3bt _iajm1yh4 _z5wt1yh4"
31
20
  };
32
- var selectedColorMap = {
33
- default: (0, _primitives.xcss)({
34
- // @ts-expect-error
35
- backgroundColor: "var(--ds-icon, #44546F)"
36
- }),
37
- help: (0, _primitives.xcss)({
38
- // @ts-expect-error
39
- backgroundColor: "var(--ds-icon-discovery, #8270DB)"
40
- }),
41
- inverted: (0, _primitives.xcss)({
42
- // @ts-expect-error
43
- backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
44
- }),
45
- primary: (0, _primitives.xcss)({
46
- // @ts-expect-error
47
- backgroundColor: "var(--ds-icon-brand, #0C66E4)"
48
- })
21
+ var colorBorderMap = {
22
+ default: "_19itt9ly",
23
+ help: "_19itt9ly",
24
+ inverted: "_19it1ps9",
25
+ primary: "_19itt9ly"
49
26
  };
50
- var commonStyles = (0, _primitives.xcss)({
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
52
- width: "var(".concat(_constants.varDotsSize, ")"),
53
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
54
- height: "var(".concat(_constants.varDotsSize, ")"),
55
- position: 'relative',
56
- borderRadius: 'border.radius.circle',
57
- '::before': {
58
- display: 'block',
59
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
60
- width: "calc(var(".concat(_constants.varDotsSize, ") + var(").concat(_constants.varDotsMargin, "))"),
61
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
62
- height: "calc(var(".concat(_constants.varDotsSize, ") + var(").concat(_constants.varDotsMargin, "))"),
63
- position: 'absolute',
64
- content: '""',
65
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
66
- insetBlockStart: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)"),
67
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
68
- insetInlineStart: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)")
27
+ var buttonStyle = {
28
+ root: "_1yt4ze3t _12ji1r31 _1qu2glyw _12y3idpf _80omtlke"
29
+ };
30
+ var backgroundColor = function backgroundColor(isSelected) {
31
+ if (!isSelected) {
32
+ return {
33
+ default: "var(--ds-surface, #FFFFFF)",
34
+ help: "var(--ds-surface, #FFFFFF)",
35
+ inverted: "var(--ds-background-neutral-subtle, #00000000)",
36
+ primary: "var(--ds-surface, #FFFFFF)"
37
+ };
69
38
  }
70
- });
71
- var buttonStyles = (0, _primitives.xcss)({
72
- padding: 'space.0',
73
- cursor: 'pointer',
74
- outline: 0
75
- });
39
+ return {
40
+ default: "var(--ds-icon, #44546F)",
41
+ help: "var(--ds-icon-discovery, #8270DB)",
42
+ inverted: "var(--ds-icon-inverse, #FFFFFF)",
43
+ primary: "var(--ds-icon-brand, #0C66E4)"
44
+ };
45
+ };
46
+
76
47
  /**
77
48
  * __Presentational indicator__
78
49
  *
@@ -82,9 +53,14 @@ var PresentationalIndicator = exports.PresentationalIndicator = function Present
82
53
  var appearance = _ref.appearance,
83
54
  isSelected = _ref.isSelected,
84
55
  testId = _ref.testId;
85
- return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
86
- testId: testId,
87
- xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
56
+ return /*#__PURE__*/React.createElement(_compiled.Box, {
57
+ testId: testId
58
+ // here we set it dynamic because that backgroundColor and xcss don't support the colors we need here eg. token('color.icon')
59
+ ,
60
+ style: {
61
+ backgroundColor: backgroundColor(isSelected)[appearance]
62
+ },
63
+ xcss: (0, _react2.cx)(commonStyles.common, colorBorderMap[appearance])
88
64
  });
89
65
  };
90
66
  /**
@@ -99,14 +75,17 @@ var ButtonIndicator = exports.ButtonIndicator = function ButtonIndicator(_ref2)
99
75
  isSelected = _ref2.isSelected,
100
76
  onClick = _ref2.onClick,
101
77
  testId = _ref2.testId;
102
- return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
78
+ return /*#__PURE__*/React.createElement(_compiled.Pressable, {
103
79
  role: "tab",
104
- xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
80
+ style: {
81
+ backgroundColor: backgroundColor(isSelected)[appearance]
82
+ },
83
+ xcss: (0, _react2.cx)(commonStyles.common, buttonStyle.root, colorBorderMap[appearance]),
105
84
  "aria-controls": panelId,
106
85
  "aria-selected": isSelected,
107
86
  id: tabId,
108
87
  onClick: onClick,
109
88
  tabIndex: isSelected ? -1 : undefined,
110
89
  testId: testId
111
- }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, tabId));
90
+ }, /*#__PURE__*/React.createElement(_visuallyHidden.default, null, tabId));
112
91
  };
package/dist/cjs/components/progress-dots.js CHANGED
@@ -7,26 +7,36 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
10
  var _react = _interopRequireWildcard(require("react"));
12
- var _react2 = require("@emotion/react");
13
11
  var _bindEventListener = require("bind-event-listener");
14
12
  var _analyticsNext = require("@atlaskit/analytics-next");
15
13
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
16
- var _primitives = require("@atlaskit/primitives");
17
- var _constants = require("./constants");
14
+ var _compiled = require("@atlaskit/primitives/compiled");
18
15
  var _indicator = require("./indicator");
19
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
- /**
22
- * @jsxRuntime classic
23
- * @jsx jsx
24
- */
25
-
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
27
-
28
18
  var packageName = "@atlaskit/progress-indicator";
29
- var packageVersion = "11.0.7";
19
+ var packageVersion = "11.1.0";
20
+ var progressIndicatorGapMap = {
21
+ comfortable: {
22
+ default: 'space.100',
23
+ large: 'space.150'
24
+ },
25
+ cozy: {
26
+ default: 'space.075',
27
+ large: 'space.100'
28
+ },
29
+ compact: {
30
+ default: 'space.050',
31
+ large: 'space.075'
32
+ }
33
+ };
34
+ var sizes = {
35
+ default: 8,
36
+ large: 12
37
+ };
38
+ var varDotsSize = '--ds-dots-size';
39
+ var varDotsMargin = '--ds-dots-margin';
30
40
 
31
41
  /**
32
42
  * __ProgressDots__
@@ -34,7 +44,6 @@ var packageVersion = "11.0.7";
34
44
  * A progress indicator shows the user where they are along the steps of a journey.
35
45
  */
36
46
  var ProgressDots = function ProgressDots(_ref) {
37
- var _ref2;
38
47
  var _ref$appearance = _ref.appearance,
39
48
  appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
40
49
  _ref$ariaControls = _ref.ariaControls,
@@ -57,9 +66,7 @@ var ProgressDots = function ProgressDots(_ref) {
57
66
  packageName: packageName,
58
67
  packageVersion: packageVersion
59
68
  });
60
- var _progressIndicatorGap = (0, _slicedToArray2.default)(_constants.progressIndicatorGapMap[gutter][size], 2),
61
- inlineGapValue = _progressIndicatorGap[0],
62
- rawGapValue = _progressIndicatorGap[1];
69
+ var gap = progressIndicatorGapMap[gutter][size];
63
70
  var handleKeyDown = (0, _react.useCallback)(function (event) {
64
71
  var indicators = Array.from(tablistRef.current.children);
65
72
 
@@ -106,22 +113,22 @@ var ProgressDots = function ProgressDots(_ref) {
106
113
  }
107
114
  });
108
115
  }, [onSelect, handleKeyDown]);
109
- return (0, _react2.jsx)(_primitives.Box, {
110
- style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, rawGapValue), _ref2),
116
+ return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
117
+ style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, varDotsSize, "".concat(sizes[size], "px")), varDotsMargin, gap),
111
118
  role: onSelect && 'tablist'
112
- }, (0, _react2.jsx)(_primitives.Inline, {
119
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
113
120
  testId: testId,
114
121
  ref: function ref(r) {
115
122
  tablistRef.current = r;
116
123
  },
117
124
  alignInline: "center",
118
- space: inlineGapValue
125
+ space: gap
119
126
  }, values.map(function (_, index) {
120
127
  var isSelected = selectedIndex === index;
121
128
  var tabId = "".concat(ariaLabel).concat(index);
122
129
  var panelId = "".concat(ariaControls).concat(index);
123
130
  var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
124
- return onSelect ? (0, _react2.jsx)(_indicator.ButtonIndicator, {
131
+ return onSelect ? /*#__PURE__*/_react.default.createElement(_indicator.ButtonIndicator, {
125
132
  key: index,
126
133
  testId: indicatorTestId,
127
134
  appearance: appearance,
@@ -134,7 +141,7 @@ var ProgressDots = function ProgressDots(_ref) {
134
141
  index: index
135
142
  });
136
143
  }
137
- }) : (0, _react2.jsx)(_indicator.PresentationalIndicator, {
144
+ }) : /*#__PURE__*/_react.default.createElement(_indicator.PresentationalIndicator, {
138
145
  key: index,
139
146
  testId: indicatorTestId,
140
147
  appearance: appearance,
package/dist/es2019/components/indicator.compiled.css ADDED
@@ -0,0 +1,18 @@
1
+
2
+ ._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
3
+ ._19itt9ly{border:var(--ds-border-width,1px) solid var(--ds-border-bold,#758195)}
4
+ ._1yt4ze3t{padding:var(--ds-space-0,0)}
5
+ ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}._12ji1r31{outline-color:currentColor}
6
+ ._12y3idpf{outline-width:0}
7
+ ._1bsbg7kr{width:var(--ds-dots-size)}
8
+ ._1cs8stnw:before{position:absolute}
9
+ ._1kt9b3bt:before{content:""}
10
+ ._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
11
+ ._1qu2glyw{outline-style:none}
12
+ ._4t3ig7kr{height:var(--ds-dots-size)}
13
+ ._80omtlke{cursor:pointer}
14
+ ._cfu11ule:before{display:block}
15
+ ._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
16
+ ._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
17
+ ._kqswh2mm{position:relative}
18
+ ._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}
package/dist/es2019/components/indicator.js CHANGED
@@ -1,71 +1,39 @@
1
- import React from 'react';
2
- import { Box, Pressable, xcss } from '@atlaskit/primitives';
1
+ /* indicator.tsx generated by @compiled/babel-plugin v0.33.0 */
2
+ import "./indicator.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
+ import { cx } from '@compiled/react';
6
+ import { Box, Pressable } from '@atlaskit/primitives/compiled';
3
7
  import VisuallyHidden from '@atlaskit/visually-hidden';
4
- import { varDotsMargin, varDotsSize } from './constants';
5
- // TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
6
- const colorMap = {
7
- default: xcss({
8
- backgroundColor: 'elevation.surface',
9
- border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-bold, #758195)"}`
10
- }),
11
- help: xcss({
12
- backgroundColor: 'elevation.surface',
13
- border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-bold, #758195)"}`
14
- }),
15
- inverted: xcss({
16
- // @ts-ignore
17
- backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
18
- border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-inverse, #FFFFFF)"}`
19
- }),
20
- primary: xcss({
21
- backgroundColor: 'elevation.surface',
22
- border: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border-bold, #758195)"}`
23
- })
8
+ const commonStyles = {
9
+ common: "_2rko14q2 _1bsbg7kr _4t3ig7kr _kqswh2mm _cfu11ule _1mp41th6 _kfgt1th6 _1cs8stnw _1kt9b3bt _iajm1yh4 _z5wt1yh4"
24
10
  };
25
- const selectedColorMap = {
26
- default: xcss({
27
- // @ts-expect-error
28
- backgroundColor: "var(--ds-icon, #44546F)"
29
- }),
30
- help: xcss({
31
- // @ts-expect-error
32
- backgroundColor: "var(--ds-icon-discovery, #8270DB)"
33
- }),
34
- inverted: xcss({
35
- // @ts-expect-error
36
- backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
37
- }),
38
- primary: xcss({
39
- // @ts-expect-error
40
- backgroundColor: "var(--ds-icon-brand, #0C66E4)"
41
- })
11
+ const colorBorderMap = {
12
+ default: "_19itt9ly",
13
+ help: "_19itt9ly",
14
+ inverted: "_19it1ps9",
15
+ primary: "_19itt9ly"
42
16
  };
43
- const commonStyles = xcss({
44
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
45
- width: `var(${varDotsSize})`,
46
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
47
- height: `var(${varDotsSize})`,
48
- position: 'relative',
49
- borderRadius: 'border.radius.circle',
50
- '::before': {
51
- display: 'block',
52
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
53
- width: `calc(var(${varDotsSize}) + var(${varDotsMargin}))`,
54
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
55
- height: `calc(var(${varDotsSize}) + var(${varDotsMargin}))`,
56
- position: 'absolute',
57
- content: '""',
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
59
- insetBlockStart: `calc(-1 * var(${varDotsMargin}) / 2)`,
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
61
- insetInlineStart: `calc(-1 * var(${varDotsMargin}) / 2)`
17
+ const buttonStyle = {
18
+ root: "_1yt4ze3t _12ji1r31 _1qu2glyw _12y3idpf _80omtlke"
19
+ };
20
+ const backgroundColor = isSelected => {
21
+ if (!isSelected) {
22
+ return {
23
+ default: "var(--ds-surface, #FFFFFF)",
24
+ help: "var(--ds-surface, #FFFFFF)",
25
+ inverted: "var(--ds-background-neutral-subtle, #00000000)",
26
+ primary: "var(--ds-surface, #FFFFFF)"
27
+ };
62
28
  }
63
- });
64
- const buttonStyles = xcss({
65
- padding: 'space.0',
66
- cursor: 'pointer',
67
- outline: 0
68
- });
29
+ return {
30
+ default: "var(--ds-icon, #44546F)",
31
+ help: "var(--ds-icon-discovery, #8270DB)",
32
+ inverted: "var(--ds-icon-inverse, #FFFFFF)",
33
+ primary: "var(--ds-icon-brand, #0C66E4)"
34
+ };
35
+ };
36
+
69
37
  /**
70
38
  * __Presentational indicator__
71
39
  *
@@ -75,10 +43,17 @@ export const PresentationalIndicator = ({
75
43
  appearance,
76
44
  isSelected,
77
45
  testId
78
- }) => /*#__PURE__*/React.createElement(Box, {
79
- testId: testId,
80
- xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
81
- });
46
+ }) => {
47
+ return /*#__PURE__*/React.createElement(Box, {
48
+ testId: testId
49
+ // here we set it dynamic because that backgroundColor and xcss don't support the colors we need here eg. token('color.icon')
50
+ ,
51
+ style: {
52
+ backgroundColor: backgroundColor(isSelected)[appearance]
53
+ },
54
+ xcss: cx(commonStyles.common, colorBorderMap[appearance])
55
+ });
56
+ };
82
57
  /**
83
58
  * __Button indicator__
84
59
  *
@@ -94,7 +69,10 @@ export const ButtonIndicator = ({
94
69
  }) => {
95
70
  return /*#__PURE__*/React.createElement(Pressable, {
96
71
  role: "tab",
97
- xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
72
+ style: {
73
+ backgroundColor: backgroundColor(isSelected)[appearance]
74
+ },
75
+ xcss: cx(commonStyles.common, buttonStyle.root, colorBorderMap[appearance]),
98
76
  "aria-controls": panelId,
99
77
  "aria-selected": isSelected,
100
78
  id: tabId,
package/dist/es2019/components/progress-dots.js CHANGED
@@ -1,19 +1,31 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import React, { useCallback, useEffect, useRef } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
9
2
  import { bind } from 'bind-event-listener';
10
3
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
11
4
  import noop from '@atlaskit/ds-lib/noop';
12
- import { Box, Inline } from '@atlaskit/primitives';
13
- import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
5
+ import { Box, Inline } from '@atlaskit/primitives/compiled';
14
6
  import { ButtonIndicator, PresentationalIndicator } from './indicator';
15
7
  const packageName = "@atlaskit/progress-indicator";
16
- const packageVersion = "11.0.7";
8
+ const packageVersion = "11.1.0";
9
+ const progressIndicatorGapMap = {
10
+ comfortable: {
11
+ default: 'space.100',
12
+ large: 'space.150'
13
+ },
14
+ cozy: {
15
+ default: 'space.075',
16
+ large: 'space.100'
17
+ },
18
+ compact: {
19
+ default: 'space.050',
20
+ large: 'space.075'
21
+ }
22
+ };
23
+ const sizes = {
24
+ default: 8,
25
+ large: 12
26
+ };
27
+ const varDotsSize = '--ds-dots-size';
28
+ const varDotsMargin = '--ds-dots-margin';
17
29
 
18
30
  /**
19
31
  * __ProgressDots__
@@ -41,7 +53,7 @@ const ProgressDots = ({
41
53
  packageName,
42
54
  packageVersion
43
55
  });
44
- const [inlineGapValue, rawGapValue] = progressIndicatorGapMap[gutter][size];
56
+ const gap = progressIndicatorGapMap[gutter][size];
45
57
  const handleKeyDown = useCallback(event => {
46
58
  const indicators = Array.from(tablistRef.current.children);
47
59
 
@@ -88,28 +100,28 @@ const ProgressDots = ({
88
100
  }
89
101
  });
90
102
  }, [onSelect, handleKeyDown]);
91
- return jsx(Box, {
103
+ return /*#__PURE__*/React.createElement(Box, {
92
104
  style: {
93
105
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
94
106
  [varDotsSize]: `${sizes[size]}px`,
95
107
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
96
- [varDotsMargin]: rawGapValue
108
+ [varDotsMargin]: gap
97
109
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
98
110
  },
99
111
  role: onSelect && 'tablist'
100
- }, jsx(Inline, {
112
+ }, /*#__PURE__*/React.createElement(Inline, {
101
113
  testId: testId,
102
114
  ref: r => {
103
115
  tablistRef.current = r;
104
116
  },
105
117
  alignInline: "center",
106
- space: inlineGapValue
118
+ space: gap
107
119
  }, values.map((_, index) => {
108
120
  const isSelected = selectedIndex === index;
109
121
  const tabId = `${ariaLabel}${index}`;
110
122
  const panelId = `${ariaControls}${index}`;
111
123
  const indicatorTestId = testId && `${testId}-ind-${index}`;
112
- return onSelect ? jsx(ButtonIndicator, {
124
+ return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
113
125
  key: index,
114
126
  testId: indicatorTestId,
115
127
  appearance: appearance,
@@ -120,7 +132,7 @@ const ProgressDots = ({
120
132
  event,
121
133
  index
122
134
  })
123
- }) : jsx(PresentationalIndicator, {
135
+ }) : /*#__PURE__*/React.createElement(PresentationalIndicator, {
124
136
  key: index,
125
137
  testId: indicatorTestId,
126
138
  appearance: appearance,
package/dist/esm/components/indicator.compiled.css ADDED
@@ -0,0 +1,18 @@
1
+
2
+ ._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
3
+ ._19itt9ly{border:var(--ds-border-width,1px) solid var(--ds-border-bold,#758195)}
4
+ ._1yt4ze3t{padding:var(--ds-space-0,0)}
5
+ ._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}._12ji1r31{outline-color:currentColor}
6
+ ._12y3idpf{outline-width:0}
7
+ ._1bsbg7kr{width:var(--ds-dots-size)}
8
+ ._1cs8stnw:before{position:absolute}
9
+ ._1kt9b3bt:before{content:""}
10
+ ._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
11
+ ._1qu2glyw{outline-style:none}
12
+ ._4t3ig7kr{height:var(--ds-dots-size)}
13
+ ._80omtlke{cursor:pointer}
14
+ ._cfu11ule:before{display:block}
15
+ ._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
16
+ ._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
17
+ ._kqswh2mm{position:relative}
18
+ ._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}
package/dist/esm/components/indicator.js CHANGED
@@ -1,71 +1,39 @@
1
- import React from 'react';
2
- import { Box, Pressable, xcss } from '@atlaskit/primitives';
1
+ /* indicator.tsx generated by @compiled/babel-plugin v0.33.0 */
2
+ import "./indicator.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
+ import { cx } from '@compiled/react';
6
+ import { Box, Pressable } from '@atlaskit/primitives/compiled';
3
7
  import VisuallyHidden from '@atlaskit/visually-hidden';
4
- import { varDotsMargin, varDotsSize } from './constants';
5
- // TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
6
- var colorMap = {
7
- default: xcss({
8
- backgroundColor: 'elevation.surface',
9
- border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
10
- }),
11
- help: xcss({
12
- backgroundColor: 'elevation.surface',
13
- border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
14
- }),
15
- inverted: xcss({
16
- // @ts-ignore
17
- backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
18
- border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-inverse, #FFFFFF)")
19
- }),
20
- primary: xcss({
21
- backgroundColor: 'elevation.surface',
22
- border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-bold, #758195)")
23
- })
8
+ var commonStyles = {
9
+ common: "_2rko14q2 _1bsbg7kr _4t3ig7kr _kqswh2mm _cfu11ule _1mp41th6 _kfgt1th6 _1cs8stnw _1kt9b3bt _iajm1yh4 _z5wt1yh4"
24
10
  };
25
- var selectedColorMap = {
26
- default: xcss({
27
- // @ts-expect-error
28
- backgroundColor: "var(--ds-icon, #44546F)"
29
- }),
30
- help: xcss({
31
- // @ts-expect-error
32
- backgroundColor: "var(--ds-icon-discovery, #8270DB)"
33
- }),
34
- inverted: xcss({
35
- // @ts-expect-error
36
- backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
37
- }),
38
- primary: xcss({
39
- // @ts-expect-error
40
- backgroundColor: "var(--ds-icon-brand, #0C66E4)"
41
- })
11
+ var colorBorderMap = {
12
+ default: "_19itt9ly",
13
+ help: "_19itt9ly",
14
+ inverted: "_19it1ps9",
15
+ primary: "_19itt9ly"
42
16
  };
43
- var commonStyles = xcss({
44
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
45
- width: "var(".concat(varDotsSize, ")"),
46
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
47
- height: "var(".concat(varDotsSize, ")"),
48
- position: 'relative',
49
- borderRadius: 'border.radius.circle',
50
- '::before': {
51
- display: 'block',
52
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
53
- width: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
54
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
55
- height: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
56
- position: 'absolute',
57
- content: '""',
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
59
- insetBlockStart: "calc(-1 * var(".concat(varDotsMargin, ") / 2)"),
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
61
- insetInlineStart: "calc(-1 * var(".concat(varDotsMargin, ") / 2)")
17
+ var buttonStyle = {
18
+ root: "_1yt4ze3t _12ji1r31 _1qu2glyw _12y3idpf _80omtlke"
19
+ };
20
+ var backgroundColor = function backgroundColor(isSelected) {
21
+ if (!isSelected) {
22
+ return {
23
+ default: "var(--ds-surface, #FFFFFF)",
24
+ help: "var(--ds-surface, #FFFFFF)",
25
+ inverted: "var(--ds-background-neutral-subtle, #00000000)",
26
+ primary: "var(--ds-surface, #FFFFFF)"
27
+ };
62
28
  }
63
- });
64
- var buttonStyles = xcss({
65
- padding: 'space.0',
66
- cursor: 'pointer',
67
- outline: 0
68
- });
29
+ return {
30
+ default: "var(--ds-icon, #44546F)",
31
+ help: "var(--ds-icon-discovery, #8270DB)",
32
+ inverted: "var(--ds-icon-inverse, #FFFFFF)",
33
+ primary: "var(--ds-icon-brand, #0C66E4)"
34
+ };
35
+ };
36
+
69
37
  /**
70
38
  * __Presentational indicator__
71
39
  *
@@ -76,8 +44,13 @@ export var PresentationalIndicator = function PresentationalIndicator(_ref) {
76
44
  isSelected = _ref.isSelected,
77
45
  testId = _ref.testId;
78
46
  return /*#__PURE__*/React.createElement(Box, {
79
- testId: testId,
80
- xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
47
+ testId: testId
48
+ // here we set it dynamic because that backgroundColor and xcss don't support the colors we need here eg. token('color.icon')
49
+ ,
50
+ style: {
51
+ backgroundColor: backgroundColor(isSelected)[appearance]
52
+ },
53
+ xcss: cx(commonStyles.common, colorBorderMap[appearance])
81
54
  });
82
55
  };
83
56
  /**
@@ -94,7 +67,10 @@ export var ButtonIndicator = function ButtonIndicator(_ref2) {
94
67
  testId = _ref2.testId;
95
68
  return /*#__PURE__*/React.createElement(Pressable, {
96
69
  role: "tab",
97
- xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
70
+ style: {
71
+ backgroundColor: backgroundColor(isSelected)[appearance]
72
+ },
73
+ xcss: cx(commonStyles.common, buttonStyle.root, colorBorderMap[appearance]),
98
74
  "aria-controls": panelId,
99
75
  "aria-selected": isSelected,
100
76
  id: tabId,
package/dist/esm/components/progress-dots.js CHANGED
@@ -1,21 +1,32 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- /**
4
- * @jsxRuntime classic
5
- * @jsx jsx
6
- */
7
2
  import React, { useCallback, useEffect, useRef } from 'react';
8
-
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
- import { jsx } from '@emotion/react';
11
3
  import { bind } from 'bind-event-listener';
12
4
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
13
5
  import noop from '@atlaskit/ds-lib/noop';
14
- import { Box, Inline } from '@atlaskit/primitives';
15
- import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
6
+ import { Box, Inline } from '@atlaskit/primitives/compiled';
16
7
  import { ButtonIndicator, PresentationalIndicator } from './indicator';
17
8
  var packageName = "@atlaskit/progress-indicator";
18
- var packageVersion = "11.0.7";
9
+ var packageVersion = "11.1.0";
10
+ var progressIndicatorGapMap = {
11
+ comfortable: {
12
+ default: 'space.100',
13
+ large: 'space.150'
14
+ },
15
+ cozy: {
16
+ default: 'space.075',
17
+ large: 'space.100'
18
+ },
19
+ compact: {
20
+ default: 'space.050',
21
+ large: 'space.075'
22
+ }
23
+ };
24
+ var sizes = {
25
+ default: 8,
26
+ large: 12
27
+ };
28
+ var varDotsSize = '--ds-dots-size';
29
+ var varDotsMargin = '--ds-dots-margin';
19
30
 
20
31
  /**
21
32
  * __ProgressDots__
@@ -23,7 +34,6 @@ var packageVersion = "11.0.7";
23
34
  * A progress indicator shows the user where they are along the steps of a journey.
24
35
  */
25
36
  var ProgressDots = function ProgressDots(_ref) {
26
- var _ref2;
27
37
  var _ref$appearance = _ref.appearance,
28
38
  appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
29
39
  _ref$ariaControls = _ref.ariaControls,
@@ -46,9 +56,7 @@ var ProgressDots = function ProgressDots(_ref) {
46
56
  packageName: packageName,
47
57
  packageVersion: packageVersion
48
58
  });
49
- var _progressIndicatorGap = _slicedToArray(progressIndicatorGapMap[gutter][size], 2),
50
- inlineGapValue = _progressIndicatorGap[0],
51
- rawGapValue = _progressIndicatorGap[1];
59
+ var gap = progressIndicatorGapMap[gutter][size];
52
60
  var handleKeyDown = useCallback(function (event) {
53
61
  var indicators = Array.from(tablistRef.current.children);
54
62
 
@@ -95,22 +103,22 @@ var ProgressDots = function ProgressDots(_ref) {
95
103
  }
96
104
  });
97
105
  }, [onSelect, handleKeyDown]);
98
- return jsx(Box, {
99
- style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, rawGapValue), _ref2),
106
+ return /*#__PURE__*/React.createElement(Box, {
107
+ style: _defineProperty(_defineProperty({}, varDotsSize, "".concat(sizes[size], "px")), varDotsMargin, gap),
100
108
  role: onSelect && 'tablist'
101
- }, jsx(Inline, {
109
+ }, /*#__PURE__*/React.createElement(Inline, {
102
110
  testId: testId,
103
111
  ref: function ref(r) {
104
112
  tablistRef.current = r;
105
113
  },
106
114
  alignInline: "center",
107
- space: inlineGapValue
115
+ space: gap
108
116
  }, values.map(function (_, index) {
109
117
  var isSelected = selectedIndex === index;
110
118
  var tabId = "".concat(ariaLabel).concat(index);
111
119
  var panelId = "".concat(ariaControls).concat(index);
112
120
  var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
113
- return onSelect ? jsx(ButtonIndicator, {
121
+ return onSelect ? /*#__PURE__*/React.createElement(ButtonIndicator, {
114
122
  key: index,
115
123
  testId: indicatorTestId,
116
124
  appearance: appearance,
@@ -123,7 +131,7 @@ var ProgressDots = function ProgressDots(_ref) {
123
131
  index: index
124
132
  });
125
133
  }
126
- }) : jsx(PresentationalIndicator, {
134
+ }) : /*#__PURE__*/React.createElement(PresentationalIndicator, {
127
135
  key: index,
128
136
  testId: indicatorTestId,
129
137
  appearance: appearance,
package/dist/types/components/indicator.d.ts CHANGED
@@ -1,5 +1,9 @@
1
- import React from 'react';
2
- import { type DotsAppearance } from './types';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ /// <reference types="react" />
6
+ type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
3
7
  type CommonProps = {
4
8
  appearance: DotsAppearance;
5
9
  isSelected: boolean;
package/dist/types/components/progress-dots.d.ts CHANGED
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC } from 'react';
6
2
  import type { ProgressDotsProps } from '../types';
7
3
  /**
package/dist/types-ts4.5/components/indicator.d.ts CHANGED
@@ -1,5 +1,9 @@
1
- import React from 'react';
2
- import { type DotsAppearance } from './types';
1
+ /// <reference types="react" />
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
6
+ type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
3
7
  type CommonProps = {
4
8
  appearance: DotsAppearance;
5
9
  isSelected: boolean;
package/dist/types-ts4.5/components/progress-dots.d.ts CHANGED
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import { type FC } from 'react';
6
2
  import type { ProgressDotsProps } from '../types';
7
3
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/progress-indicator",
3
- "version": "11.0.7",
3
+ "version": "11.1.0",
4
4
  "description": "A progress indicator shows the user where they are along the steps of a journey.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -21,17 +21,17 @@
21
21
  "runReact18": true,
22
22
  "website": {
23
23
  "name": "Progress indicator",
24
- "category": "Components"
24
+ "category": "Status indicators"
25
25
  }
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/analytics-next": "^10.1.0",
29
- "@atlaskit/ds-lib": "^3.2.0",
30
- "@atlaskit/primitives": "^13.2.0",
31
- "@atlaskit/tokens": "^2.2.0",
28
+ "@atlaskit/analytics-next": "^10.2.0",
29
+ "@atlaskit/ds-lib": "^3.3.0",
30
+ "@atlaskit/primitives": "^13.3.0",
31
+ "@atlaskit/tokens": "^2.5.0",
32
32
  "@atlaskit/visually-hidden": "^1.5.0",
33
33
  "@babel/runtime": "^7.0.0",
34
- "@emotion/react": "^11.7.1",
34
+ "@compiled/react": "^0.18.1",
35
35
  "bind-event-listener": "^3.0.0"
36
36
  },
37
37
  "peerDependencies": {
@@ -39,6 +39,7 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@af/accessibility-testing": "*",
42
+ "@af/integration-testing": "*",
42
43
  "@af/visual-regression": "*",
43
44
  "@atlaskit/ssr": "*",
44
45
  "@atlaskit/visual-regression": "*",
package/dist/cjs/components/constants.js DELETED
@@ -1,26 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.varDotsSize = exports.varDotsMargin = exports.sizes = exports.progressIndicatorGapMap = void 0;
7
- var progressIndicatorGapMap = exports.progressIndicatorGapMap = {
8
- comfortable: {
9
- default: ['space.100', "var(--ds-space-100, 8px)"],
10
- large: ['space.150', "var(--ds-space-150, 12px)"]
11
- },
12
- cozy: {
13
- default: ['space.075', "var(--ds-space-075, 6px)"],
14
- large: ['space.100', "var(--ds-space-100, 8px)"]
15
- },
16
- compact: {
17
- default: ['space.050', "var(--ds-space-050, 4px)"],
18
- large: ['space.075', "var(--ds-space-075, 6px)"]
19
- }
20
- };
21
- var sizes = exports.sizes = {
22
- default: 8,
23
- large: 12
24
- };
25
- var varDotsSize = exports.varDotsSize = '--ds-dots-size';
26
- var varDotsMargin = exports.varDotsMargin = '--ds-dots-margin';
package/dist/es2019/components/constants.js DELETED
@@ -1,20 +0,0 @@
1
- export const progressIndicatorGapMap = {
2
- comfortable: {
3
- default: ['space.100', "var(--ds-space-100, 8px)"],
4
- large: ['space.150', "var(--ds-space-150, 12px)"]
5
- },
6
- cozy: {
7
- default: ['space.075', "var(--ds-space-075, 6px)"],
8
- large: ['space.100', "var(--ds-space-100, 8px)"]
9
- },
10
- compact: {
11
- default: ['space.050', "var(--ds-space-050, 4px)"],
12
- large: ['space.075', "var(--ds-space-075, 6px)"]
13
- }
14
- };
15
- export const sizes = {
16
- default: 8,
17
- large: 12
18
- };
19
- export const varDotsSize = '--ds-dots-size';
20
- export const varDotsMargin = '--ds-dots-margin';
package/dist/esm/components/constants.js DELETED
@@ -1,20 +0,0 @@
1
- export var progressIndicatorGapMap = {
2
- comfortable: {
3
- default: ['space.100', "var(--ds-space-100, 8px)"],
4
- large: ['space.150', "var(--ds-space-150, 12px)"]
5
- },
6
- cozy: {
7
- default: ['space.075', "var(--ds-space-075, 6px)"],
8
- large: ['space.100', "var(--ds-space-100, 8px)"]
9
- },
10
- compact: {
11
- default: ['space.050', "var(--ds-space-050, 4px)"],
12
- large: ['space.075', "var(--ds-space-075, 6px)"]
13
- }
14
- };
15
- export var sizes = {
16
- default: 8,
17
- large: 12
18
- };
19
- export var varDotsSize = '--ds-dots-size';
20
- export var varDotsMargin = '--ds-dots-margin';
package/dist/types/components/constants.d.ts DELETED
@@ -1,27 +0,0 @@
1
- import type { InlineProps } from '@atlaskit/primitives';
2
- import { token } from '@atlaskit/tokens';
3
- type TokenValue = ReturnType<typeof token>;
4
- type ScaleValue = InlineProps['space'];
5
- type SpacingTuple = [ScaleValue, TokenValue];
6
- type SpacingPropsToTokensMap = {
7
- comfortable: {
8
- default: SpacingTuple;
9
- large: SpacingTuple;
10
- };
11
- cozy: {
12
- default: SpacingTuple;
13
- large: SpacingTuple;
14
- };
15
- compact: {
16
- default: SpacingTuple;
17
- large: SpacingTuple;
18
- };
19
- };
20
- export declare const progressIndicatorGapMap: SpacingPropsToTokensMap;
21
- export declare const sizes: {
22
- default: number;
23
- large: number;
24
- };
25
- export declare const varDotsSize = "--ds-dots-size";
26
- export declare const varDotsMargin = "--ds-dots-margin";
27
- export {};
package/dist/types-ts4.5/components/constants.d.ts DELETED
@@ -1,30 +0,0 @@
1
- import type { InlineProps } from '@atlaskit/primitives';
2
- import { token } from '@atlaskit/tokens';
3
- type TokenValue = ReturnType<typeof token>;
4
- type ScaleValue = InlineProps['space'];
5
- type SpacingTuple = [
6
- ScaleValue,
7
- TokenValue
8
- ];
9
- type SpacingPropsToTokensMap = {
10
- comfortable: {
11
- default: SpacingTuple;
12
- large: SpacingTuple;
13
- };
14
- cozy: {
15
- default: SpacingTuple;
16
- large: SpacingTuple;
17
- };
18
- compact: {
19
- default: SpacingTuple;
20
- large: SpacingTuple;
21
- };
22
- };
23
- export declare const progressIndicatorGapMap: SpacingPropsToTokensMap;
24
- export declare const sizes: {
25
- default: number;
26
- large: number;
27
- };
28
- export declare const varDotsSize = "--ds-dots-size";
29
- export declare const varDotsMargin = "--ds-dots-margin";
30
- export {};