@atlaskit/status 3.1.29 → 3.2.1

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 (8) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/components/analytics.js +1 -1
  3. package/dist/cjs/components/internal/color-palette.js +31 -15
  4. package/dist/es2019/components/analytics.js +1 -1
  5. package/dist/es2019/components/internal/color-palette.js +13 -2
  6. package/dist/esm/components/analytics.js +1 -1
  7. package/dist/esm/components/internal/color-palette.js +31 -15
  8. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/status
2
2
 
3
+ ## 3.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 3.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`d9e33431d0d37`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9e33431d0d37) -
14
+ [ux] EDITOR-5603 update editor status with team 26 lozenge styles
15
+
3
16
  ## 3.1.29
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/components/analytics.js CHANGED
@@ -10,7 +10,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
10
10
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
11
11
  var ELEMENTS_CHANNEL = exports.ELEMENTS_CHANNEL = 'fabric-elements';
12
12
  var packageName = "@atlaskit/status";
13
- var packageVersion = "3.1.28";
13
+ var packageVersion = "3.2.1";
14
14
  var createStatusAnalyticsAndFire = exports.createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
15
15
  return function (payload) {
16
16
  var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {
package/dist/cjs/components/internal/color-palette.js CHANGED
@@ -10,26 +10,42 @@ exports.default = void 0;
10
10
  require("./color-palette.compiled.css");
11
11
  var _runtime = require("@compiled/react/runtime");
12
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+ var _tokens = require("@atlaskit/tokens");
13
14
  var _react = _interopRequireWildcard(require("react"));
14
15
  var _color = _interopRequireDefault(require("./color"));
15
16
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
17
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
17
18
  var paletteLegacy = [['neutral', "var(--ds-background-neutral, #0515240F)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery, #F8EEFE)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon-discovery, #AF59E1)"], ['blue', "var(--ds-background-information, #E9F2FE)", "var(--ds-border-information, #357DE8)", "var(--ds-icon-information, #357DE8)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon-warning, #E06C00)"], ['green', "var(--ds-background-success, #EFFFD6)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon-success, #6A9A23)"]];
18
19
  var paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-pressed, #ADCBFB)", "var(--ds-border-information, #357DE8)", "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-pressed, #BDE97C)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-pressed, #FBD779)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-pressed, #FFB8B2)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-pressed, #E3BDFA)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon, #292A2E)"]];
19
- var getPalette = function getPalette() {
20
+ var paletteTeam26 = [['neutral', "var(--ds-background-neutral, #0515240F)", '#CACBCF', '#63666B', "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-subtler, #CFE1FD)", '#8FB8F6', '#1558BC', "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-subtler, #D3F1A7)", '#B3DF72', '#4C6B1F', "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-subtler, #FCE4A6)", '#FBC828', '#9E4C00', "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-subtler, #FFD5D2)", '#FD9891', '#AE2E24', "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-subtler, #EED7FC)", '#D8A0F7', '#803FA5', "var(--ds-icon, #292A2E)"]];
21
+ var getPalette = function getPalette(colorMode) {
22
+ if ((0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
23
+ var isDark = colorMode === 'dark';
24
+ return paletteTeam26.map(function (_ref) {
25
+ var _ref2 = (0, _slicedToArray2.default)(_ref, 5),
26
+ colorValue = _ref2[0],
27
+ backgroundColor = _ref2[1],
28
+ lightBorderColor = _ref2[2],
29
+ darkBorderColor = _ref2[3],
30
+ iconColor = _ref2[4];
31
+ return [colorValue, backgroundColor, isDark ? darkBorderColor : lightBorderColor, iconColor];
32
+ });
33
+ }
20
34
  return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
21
35
  };
22
36
 
23
37
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
24
38
  var colorPaletteWrapperStyles = null;
25
- var _default = exports.default = function _default(_ref) {
26
- var _ref$cols = _ref.cols,
27
- cols = _ref$cols === void 0 ? 7 : _ref$cols,
28
- onClick = _ref.onClick,
29
- selectedColor = _ref.selectedColor,
30
- className = _ref.className,
31
- onHover = _ref.onHover;
32
- var palette = getPalette();
39
+ var _default = exports.default = function _default(_ref3) {
40
+ var _ref3$cols = _ref3.cols,
41
+ cols = _ref3$cols === void 0 ? 7 : _ref3$cols,
42
+ onClick = _ref3.onClick,
43
+ selectedColor = _ref3.selectedColor,
44
+ className = _ref3.className,
45
+ onHover = _ref3.onHover;
46
+ var _useThemeObserver = (0, _tokens.useThemeObserver)(),
47
+ colorMode = _useThemeObserver.colorMode;
48
+ var palette = getPalette(colorMode);
33
49
  var colorRefs = (0, _react.useRef)([]);
34
50
  (0, _react.useEffect)(function () {
35
51
  colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -68,12 +84,12 @@ var _default = exports.default = function _default(_ref) {
68
84
  style: {
69
85
  maxWidth: cols * 32
70
86
  }
71
- }, palette.map(function (_ref2, i) {
72
- var _ref3 = (0, _slicedToArray2.default)(_ref2, 4),
73
- colorValue = _ref3[0],
74
- backgroundColor = _ref3[1],
75
- borderColor = _ref3[2],
76
- iconColor = _ref3[3];
87
+ }, palette.map(function (_ref4, i) {
88
+ var _ref5 = (0, _slicedToArray2.default)(_ref4, 4),
89
+ colorValue = _ref5[0],
90
+ backgroundColor = _ref5[1],
91
+ borderColor = _ref5[2],
92
+ iconColor = _ref5[3];
77
93
  return /*#__PURE__*/_react.default.createElement(_color.default, {
78
94
  key: colorValue,
79
95
  value: colorValue,
package/dist/es2019/components/analytics.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export const ELEMENTS_CHANNEL = 'fabric-elements';
2
2
  const packageName = "@atlaskit/status";
3
- const packageVersion = "3.1.28";
3
+ const packageVersion = "3.2.1";
4
4
  export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
5
5
  const statusPayload = {
6
6
  ...payload,
package/dist/es2019/components/internal/color-palette.js CHANGED
@@ -1,12 +1,20 @@
1
1
  /* color-palette.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./color-palette.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
+ import { useThemeObserver } from '@atlaskit/tokens';
4
5
  import React, { useEffect, useRef, useCallback } from 'react';
5
6
  import Color from './color';
6
7
  import { fg } from '@atlaskit/platform-feature-flags';
7
8
  const paletteLegacy = [['neutral', "var(--ds-background-neutral, #0515240F)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery, #F8EEFE)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon-discovery, #AF59E1)"], ['blue', "var(--ds-background-information, #E9F2FE)", "var(--ds-border-information, #357DE8)", "var(--ds-icon-information, #357DE8)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon-warning, #E06C00)"], ['green', "var(--ds-background-success, #EFFFD6)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon-success, #6A9A23)"]];
8
9
  const paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-pressed, #ADCBFB)", "var(--ds-border-information, #357DE8)", "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-pressed, #BDE97C)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-pressed, #FBD779)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-pressed, #FFB8B2)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-pressed, #E3BDFA)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon, #292A2E)"]];
9
- const getPalette = () => fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
10
+ const paletteTeam26 = [['neutral', "var(--ds-background-neutral, #0515240F)", '#CACBCF', '#63666B', "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-subtler, #CFE1FD)", '#8FB8F6', '#1558BC', "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-subtler, #D3F1A7)", '#B3DF72', '#4C6B1F', "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-subtler, #FCE4A6)", '#FBC828', '#9E4C00', "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-subtler, #FFD5D2)", '#FD9891', '#AE2E24', "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-subtler, #EED7FC)", '#D8A0F7', '#803FA5', "var(--ds-icon, #292A2E)"]];
11
+ const getPalette = colorMode => {
12
+ if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
13
+ const isDark = colorMode === 'dark';
14
+ return paletteTeam26.map(([colorValue, backgroundColor, lightBorderColor, darkBorderColor, iconColor]) => [colorValue, backgroundColor, isDark ? darkBorderColor : lightBorderColor, iconColor]);
15
+ }
16
+ return fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
17
+ };
10
18
 
11
19
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
12
20
  const colorPaletteWrapperStyles = null;
@@ -17,7 +25,10 @@ export default (({
17
25
  className,
18
26
  onHover
19
27
  }) => {
20
- const palette = getPalette();
28
+ const {
29
+ colorMode
30
+ } = useThemeObserver();
31
+ const palette = getPalette(colorMode);
21
32
  const colorRefs = useRef([]);
22
33
  useEffect(() => {
23
34
  colorRefs.current = colorRefs.current.slice(0, palette.length);
package/dist/esm/components/analytics.js CHANGED
@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
3
3
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
4
  export var ELEMENTS_CHANNEL = 'fabric-elements';
5
5
  var packageName = "@atlaskit/status";
6
- var packageVersion = "3.1.28";
6
+ var packageVersion = "3.2.1";
7
7
  export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
8
8
  return function (payload) {
9
9
  var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {
package/dist/esm/components/internal/color-palette.js CHANGED
@@ -2,25 +2,41 @@
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import "./color-palette.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
+ import { useThemeObserver } from '@atlaskit/tokens';
5
6
  import React, { useEffect, useRef, useCallback } from 'react';
6
7
  import Color from './color';
7
8
  import { fg } from '@atlaskit/platform-feature-flags';
8
9
  var paletteLegacy = [['neutral', "var(--ds-background-neutral, #0515240F)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery, #F8EEFE)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon-discovery, #AF59E1)"], ['blue', "var(--ds-background-information, #E9F2FE)", "var(--ds-border-information, #357DE8)", "var(--ds-icon-information, #357DE8)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon-warning, #E06C00)"], ['green', "var(--ds-background-success, #EFFFD6)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon-success, #6A9A23)"]];
9
10
  var paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-pressed, #ADCBFB)", "var(--ds-border-information, #357DE8)", "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-pressed, #BDE97C)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-pressed, #FBD779)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-pressed, #FFB8B2)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-pressed, #E3BDFA)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon, #292A2E)"]];
10
- var getPalette = function getPalette() {
11
+ var paletteTeam26 = [['neutral', "var(--ds-background-neutral, #0515240F)", '#CACBCF', '#63666B', "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-subtler, #CFE1FD)", '#8FB8F6', '#1558BC', "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-subtler, #D3F1A7)", '#B3DF72', '#4C6B1F', "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-subtler, #FCE4A6)", '#FBC828', '#9E4C00', "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-subtler, #FFD5D2)", '#FD9891', '#AE2E24', "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-subtler, #EED7FC)", '#D8A0F7', '#803FA5', "var(--ds-icon, #292A2E)"]];
12
+ var getPalette = function getPalette(colorMode) {
13
+ if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
14
+ var isDark = colorMode === 'dark';
15
+ return paletteTeam26.map(function (_ref) {
16
+ var _ref2 = _slicedToArray(_ref, 5),
17
+ colorValue = _ref2[0],
18
+ backgroundColor = _ref2[1],
19
+ lightBorderColor = _ref2[2],
20
+ darkBorderColor = _ref2[3],
21
+ iconColor = _ref2[4];
22
+ return [colorValue, backgroundColor, isDark ? darkBorderColor : lightBorderColor, iconColor];
23
+ });
24
+ }
11
25
  return fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
12
26
  };
13
27
 
14
28
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
15
29
  var colorPaletteWrapperStyles = null;
16
- export default (function (_ref) {
17
- var _ref$cols = _ref.cols,
18
- cols = _ref$cols === void 0 ? 7 : _ref$cols,
19
- onClick = _ref.onClick,
20
- selectedColor = _ref.selectedColor,
21
- className = _ref.className,
22
- onHover = _ref.onHover;
23
- var palette = getPalette();
30
+ export default (function (_ref3) {
31
+ var _ref3$cols = _ref3.cols,
32
+ cols = _ref3$cols === void 0 ? 7 : _ref3$cols,
33
+ onClick = _ref3.onClick,
34
+ selectedColor = _ref3.selectedColor,
35
+ className = _ref3.className,
36
+ onHover = _ref3.onHover;
37
+ var _useThemeObserver = useThemeObserver(),
38
+ colorMode = _useThemeObserver.colorMode;
39
+ var palette = getPalette(colorMode);
24
40
  var colorRefs = useRef([]);
25
41
  useEffect(function () {
26
42
  colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -59,12 +75,12 @@ export default (function (_ref) {
59
75
  style: {
60
76
  maxWidth: cols * 32
61
77
  }
62
- }, palette.map(function (_ref2, i) {
63
- var _ref3 = _slicedToArray(_ref2, 4),
64
- colorValue = _ref3[0],
65
- backgroundColor = _ref3[1],
66
- borderColor = _ref3[2],
67
- iconColor = _ref3[3];
78
+ }, palette.map(function (_ref4, i) {
79
+ var _ref5 = _slicedToArray(_ref4, 4),
80
+ colorValue = _ref5[0],
81
+ backgroundColor = _ref5[1],
82
+ borderColor = _ref5[2],
83
+ iconColor = _ref5[3];
68
84
  return /*#__PURE__*/React.createElement(Color, {
69
85
  key: colorValue,
70
86
  value: colorValue,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/status",
3
- "version": "3.1.29",
3
+ "version": "3.2.1",
4
4
  "description": "Fabric Status React Components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -33,8 +33,8 @@
33
33
  "@atlaskit/platform-feature-flags": "^1.1.0",
34
34
  "@atlaskit/primitives": "^18.1.0",
35
35
  "@atlaskit/textfield": "^8.2.0",
36
- "@atlaskit/tmp-editor-statsig": "^48.0.0",
37
- "@atlaskit/tokens": "^11.3.0",
36
+ "@atlaskit/tmp-editor-statsig": "^49.0.0",
37
+ "@atlaskit/tokens": "^11.4.0",
38
38
  "@babel/runtime": "^7.0.0",
39
39
  "@compiled/react": "^0.20.0"
40
40
  },
@@ -80,6 +80,9 @@
80
80
  "platform-feature-flags": {
81
81
  "platform-component-visual-refresh": {
82
82
  "type": "boolean"
83
+ },
84
+ "platform-dst-lozenge-tag-badge-visual-uplifts": {
85
+ "type": "boolean"
83
86
  }
84
87
  }
85
88
  }