@atlaskit/lozenge 11.2.4 → 11.3.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 (9) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/Lozenge/index.js +35 -30
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/Lozenge/index.js +31 -28
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/Lozenge/index.js +31 -28
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +8 -3
  9. package/report.api.md +15 -36
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 11.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`f97c945d57f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f97c945d57f) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
8
+
9
+ ### Patch Changes
10
+
11
+ - [`7c6009de2f1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c6009de2f1) - [ux] Updates the visual appearance to match the legacy light mode palette.
12
+ - [`e35fc41dc33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e35fc41dc33) - Internal change to use updated primtive spacing prop values. No expected behaviour change.
13
+ - Updated dependencies
14
+
15
+ ## 11.2.5
16
+
17
+ ### Patch Changes
18
+
19
+ - [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
20
+
3
21
  ## 11.2.4
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/Lozenge/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
3
5
  var _typeof = require("@babel/runtime/helpers/typeof");
4
6
 
5
7
  Object.defineProperty(exports, "__esModule", {
@@ -9,14 +11,16 @@ exports.default = void 0;
9
11
 
10
12
  var _react = _interopRequireWildcard(require("react"));
11
13
 
12
- var _dsExplorations = require("@atlaskit/ds-explorations");
14
+ var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
13
15
 
14
- var _colors = require("@atlaskit/theme/colors");
16
+ var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
15
17
 
16
18
  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); }
17
19
 
18
20
  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; }
19
21
 
22
+ /* eslint-disable @atlassian/tangerine/import/entry-points */
23
+
20
24
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
21
25
 
22
26
  /**
@@ -42,12 +46,12 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
42
46
  var appearanceStyle = isBold ? 'bold' : 'subtle';
43
47
  var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
44
48
  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
45
- return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
49
+ return /*#__PURE__*/_react.default.createElement(_box.default, {
46
50
  as: "span",
47
51
  display: "inlineFlex",
48
52
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
49
53
  borderRadius: "normal",
50
- paddingInline: "sp-50",
54
+ paddingInline: "scale.050",
51
55
  position: "static",
52
56
  testId: testId,
53
57
  UNSAFE_style: {
@@ -55,7 +59,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
55
59
  verticalAlign: 'baseline',
56
60
  maxWidth: '100%'
57
61
  }
58
- }, /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Text, {
62
+ }, /*#__PURE__*/_react.default.createElement(_text.default, {
59
63
  as: "span",
60
64
  fontSize: "11px",
61
65
  fontWeight: "700",
@@ -66,7 +70,8 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
66
70
  UNSAFE_style: {
67
71
  color: style.color,
68
72
  width: '100%',
69
- maxWidth: "calc(".concat(maxWidthValue, " - ").concat(_dsExplorations.UNSAFE_SPACING_SCALE['sp-100'], "px)") // to negate paddingInline specified on Box above
73
+ // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
74
+ maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-scale-100, 8px)", ")") // to negate paddingInline specified on Box above
70
75
 
71
76
  },
72
77
  testId: testId && "".concat(testId, "--text")
@@ -78,37 +83,37 @@ var _default = Lozenge; // Lozenge colors
78
83
  exports.default = _default;
79
84
  var backgroundColors = {
80
85
  bold: {
81
- default: ['neutral.bold', _colors.N500],
82
- inprogress: ['information.bold', _colors.B400],
83
- moved: ['warning.bold', _colors.Y500],
84
- new: ['discovery.bold', _colors.P400],
85
- removed: ['danger.bold', _colors.R400],
86
- success: ['success.bold', _colors.G400]
86
+ default: 'neutral.bold',
87
+ inprogress: 'information.bold',
88
+ moved: 'warning.bold',
89
+ new: 'discovery.bold',
90
+ removed: 'danger.bold',
91
+ success: 'success.bold'
87
92
  },
88
93
  subtle: {
89
- default: ['neutral', _colors.N40],
90
- inprogress: ['information', _colors.B50],
91
- moved: ['warning', _colors.Y75],
92
- new: ['discovery', _colors.P50],
93
- removed: ['danger', _colors.R50],
94
- success: ['success', _colors.G50]
94
+ default: 'neutral',
95
+ inprogress: 'information',
96
+ moved: 'warning',
97
+ new: 'discovery',
98
+ removed: 'danger',
99
+ success: 'success'
95
100
  }
96
101
  };
97
102
  var textColors = {
98
103
  bold: {
99
- default: ['inverse', _colors.N0],
100
- inprogress: ['inverse', _colors.N0],
101
- moved: ['warning.inverse', _colors.N800],
102
- new: ['inverse', _colors.N0],
103
- removed: ['inverse', _colors.N0],
104
- success: ['inverse', _colors.N0]
104
+ default: 'inverse',
105
+ inprogress: 'inverse',
106
+ moved: 'warning.inverse',
107
+ new: 'inverse',
108
+ removed: 'inverse',
109
+ success: 'inverse'
105
110
  },
106
111
  subtle: {
107
- default: ['color.text', _colors.N500],
108
- inprogress: ['information', _colors.B500],
109
- moved: ['warning', _colors.N800],
110
- new: ['discovery', _colors.P500],
111
- removed: ['danger', _colors.R500],
112
- success: ['success', _colors.G500]
112
+ default: 'subtle',
113
+ inprogress: 'information',
114
+ moved: 'warning',
115
+ new: 'discovery',
116
+ removed: 'danger',
117
+ success: 'success'
113
118
  }
114
119
  };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.2.4",
3
+ "version": "11.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/Lozenge/index.js CHANGED
@@ -1,7 +1,9 @@
1
+ /* eslint-disable @atlassian/tangerine/import/entry-points */
2
+
1
3
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
2
4
  import React, { memo } from 'react';
3
- import { UNSAFE_Box as Box, UNSAFE_SPACING_SCALE as SPACING_SCALE, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
4
- import { B400, B50, B500, G400, G50, G500, N0, N40, N500, N800, P400, P50, P500, R400, R50, R500, Y500, Y75 } from '@atlaskit/theme/colors';
5
+ import Box from '@atlaskit/ds-explorations/box';
6
+ import Text from '@atlaskit/ds-explorations/text';
5
7
 
6
8
  /**
7
9
  * __Lozenge__
@@ -28,7 +30,7 @@ const Lozenge = /*#__PURE__*/memo(({
28
30
  display: "inlineFlex",
29
31
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
30
32
  borderRadius: "normal",
31
- paddingInline: "sp-50",
33
+ paddingInline: "scale.050",
32
34
  position: "static",
33
35
  testId: testId,
34
36
  UNSAFE_style: {
@@ -47,7 +49,8 @@ const Lozenge = /*#__PURE__*/memo(({
47
49
  UNSAFE_style: {
48
50
  color: style.color,
49
51
  width: '100%',
50
- maxWidth: `calc(${maxWidthValue} - ${SPACING_SCALE['sp-100']}px)` // to negate paddingInline specified on Box above
52
+ // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
53
+ maxWidth: `calc(${maxWidthValue} - ${"var(--ds-scale-100, 8px)"})` // to negate paddingInline specified on Box above
51
54
 
52
55
  },
53
56
  testId: testId && `${testId}--text`
@@ -58,37 +61,37 @@ export default Lozenge; // Lozenge colors
58
61
 
59
62
  const backgroundColors = {
60
63
  bold: {
61
- default: ['neutral.bold', N500],
62
- inprogress: ['information.bold', B400],
63
- moved: ['warning.bold', Y500],
64
- new: ['discovery.bold', P400],
65
- removed: ['danger.bold', R400],
66
- success: ['success.bold', G400]
64
+ default: 'neutral.bold',
65
+ inprogress: 'information.bold',
66
+ moved: 'warning.bold',
67
+ new: 'discovery.bold',
68
+ removed: 'danger.bold',
69
+ success: 'success.bold'
67
70
  },
68
71
  subtle: {
69
- default: ['neutral', N40],
70
- inprogress: ['information', B50],
71
- moved: ['warning', Y75],
72
- new: ['discovery', P50],
73
- removed: ['danger', R50],
74
- success: ['success', G50]
72
+ default: 'neutral',
73
+ inprogress: 'information',
74
+ moved: 'warning',
75
+ new: 'discovery',
76
+ removed: 'danger',
77
+ success: 'success'
75
78
  }
76
79
  };
77
80
  const textColors = {
78
81
  bold: {
79
- default: ['inverse', N0],
80
- inprogress: ['inverse', N0],
81
- moved: ['warning.inverse', N800],
82
- new: ['inverse', N0],
83
- removed: ['inverse', N0],
84
- success: ['inverse', N0]
82
+ default: 'inverse',
83
+ inprogress: 'inverse',
84
+ moved: 'warning.inverse',
85
+ new: 'inverse',
86
+ removed: 'inverse',
87
+ success: 'inverse'
85
88
  },
86
89
  subtle: {
87
- default: ['color.text', N500],
88
- inprogress: ['information', B500],
89
- moved: ['warning', N800],
90
- new: ['discovery', P500],
91
- removed: ['danger', R500],
92
- success: ['success', G500]
90
+ default: 'subtle',
91
+ inprogress: 'information',
92
+ moved: 'warning',
93
+ new: 'discovery',
94
+ removed: 'danger',
95
+ success: 'success'
93
96
  }
94
97
  };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.2.4",
3
+ "version": "11.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/Lozenge/index.js CHANGED
@@ -1,7 +1,9 @@
1
+ /* eslint-disable @atlassian/tangerine/import/entry-points */
2
+
1
3
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
2
4
  import React, { memo } from 'react';
3
- import { UNSAFE_Box as Box, UNSAFE_SPACING_SCALE as SPACING_SCALE, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
4
- import { B400, B50, B500, G400, G50, G500, N0, N40, N500, N800, P400, P50, P500, R400, R50, R500, Y500, Y75 } from '@atlaskit/theme/colors';
5
+ import Box from '@atlaskit/ds-explorations/box';
6
+ import Text from '@atlaskit/ds-explorations/text';
5
7
 
6
8
  /**
7
9
  * __Lozenge__
@@ -31,7 +33,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
31
33
  display: "inlineFlex",
32
34
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
33
35
  borderRadius: "normal",
34
- paddingInline: "sp-50",
36
+ paddingInline: "scale.050",
35
37
  position: "static",
36
38
  testId: testId,
37
39
  UNSAFE_style: {
@@ -50,7 +52,8 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
50
52
  UNSAFE_style: {
51
53
  color: style.color,
52
54
  width: '100%',
53
- maxWidth: "calc(".concat(maxWidthValue, " - ").concat(SPACING_SCALE['sp-100'], "px)") // to negate paddingInline specified on Box above
55
+ // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
56
+ maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-scale-100, 8px)", ")") // to negate paddingInline specified on Box above
54
57
 
55
58
  },
56
59
  testId: testId && "".concat(testId, "--text")
@@ -61,37 +64,37 @@ export default Lozenge; // Lozenge colors
61
64
 
62
65
  var backgroundColors = {
63
66
  bold: {
64
- default: ['neutral.bold', N500],
65
- inprogress: ['information.bold', B400],
66
- moved: ['warning.bold', Y500],
67
- new: ['discovery.bold', P400],
68
- removed: ['danger.bold', R400],
69
- success: ['success.bold', G400]
67
+ default: 'neutral.bold',
68
+ inprogress: 'information.bold',
69
+ moved: 'warning.bold',
70
+ new: 'discovery.bold',
71
+ removed: 'danger.bold',
72
+ success: 'success.bold'
70
73
  },
71
74
  subtle: {
72
- default: ['neutral', N40],
73
- inprogress: ['information', B50],
74
- moved: ['warning', Y75],
75
- new: ['discovery', P50],
76
- removed: ['danger', R50],
77
- success: ['success', G50]
75
+ default: 'neutral',
76
+ inprogress: 'information',
77
+ moved: 'warning',
78
+ new: 'discovery',
79
+ removed: 'danger',
80
+ success: 'success'
78
81
  }
79
82
  };
80
83
  var textColors = {
81
84
  bold: {
82
- default: ['inverse', N0],
83
- inprogress: ['inverse', N0],
84
- moved: ['warning.inverse', N800],
85
- new: ['inverse', N0],
86
- removed: ['inverse', N0],
87
- success: ['inverse', N0]
85
+ default: 'inverse',
86
+ inprogress: 'inverse',
87
+ moved: 'warning.inverse',
88
+ new: 'inverse',
89
+ removed: 'inverse',
90
+ success: 'inverse'
88
91
  },
89
92
  subtle: {
90
- default: ['color.text', N500],
91
- inprogress: ['information', B500],
92
- moved: ['warning', N800],
93
- new: ['discovery', P500],
94
- removed: ['danger', R500],
95
- success: ['success', G500]
93
+ default: 'subtle',
94
+ inprogress: 'information',
95
+ moved: 'warning',
96
+ new: 'discovery',
97
+ removed: 'danger',
98
+ success: 'success'
96
99
  }
97
100
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.2.4",
3
+ "version": "11.3.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.2.4",
3
+ "version": "11.3.0",
4
4
  "description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
15
15
  "typesVersions": {
16
16
  ">=4.0 <4.5": {
17
17
  "*": [
18
- "dist/types-ts4.0/*"
18
+ "dist/types-ts4.0/*",
19
+ "dist/types-ts4.0/index.d.ts"
19
20
  ]
20
21
  }
21
22
  },
22
23
  "sideEffects": false,
23
24
  "atlaskit:src": "src/index.tsx",
24
25
  "atlassian": {
26
+ "disableProductCI": true,
25
27
  "team": "Design System Team",
26
28
  "deprecatedAutoEntryPoints": true,
27
29
  "releaseModel": "scheduled",
@@ -32,8 +34,9 @@
32
34
  },
33
35
  "dependencies": {
34
36
  "@atlaskit/codemod-utils": "^4.1.0",
35
- "@atlaskit/ds-explorations": "^0.1.2",
37
+ "@atlaskit/ds-explorations": "^1.0.0",
36
38
  "@atlaskit/theme": "^12.2.0",
39
+ "@atlaskit/tokens": "^0.10.20",
37
40
  "@babel/runtime": "^7.0.0"
38
41
  },
39
42
  "peerDependencies": {
@@ -48,6 +51,7 @@
48
51
  "@atlaskit/visual-regression": "*",
49
52
  "@atlaskit/webdriver-runner": "*",
50
53
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
54
+ "@emotion/react": "^11.7.1",
51
55
  "@testing-library/react": "^12.1.5",
52
56
  "jscodeshift": "^0.13.0",
53
57
  "react-dom": "^16.8.0",
@@ -70,6 +74,7 @@
70
74
  "lite-mode"
71
75
  ],
72
76
  "analytics": "analytics-next",
77
+ "design-tokens": "spacing",
73
78
  "theming": "tokens",
74
79
  "deprecation": "no-deprecated-imports"
75
80
  }
package/report.api.md CHANGED
@@ -1,63 +1,42 @@
1
- ## API Report File for "@atlaskit/lozenge".
1
+ ## API Report File for "@atlaskit/lozenge"
2
2
 
3
- > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
3
+ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
+
5
+ <!--
6
+ Generated API Report version: 2.0
7
+ -->
4
8
 
5
9
  [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
6
10
 
7
11
  ```ts
8
12
  import { CSSProperties } from 'react';
13
+ import { jsx } from '@emotion/react';
9
14
  import { MemoExoticComponent } from 'react';
10
15
  import { ReactNode } from 'react';
11
16
 
12
- /**
13
- * __Lozenge__
14
- *
15
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
16
- *
17
- * - [Examples](https://atlassian.design/components/lozenge/examples)
18
- * - [Code](https://atlassian.design/components/lozenge/code)
19
- * - [Usage](https://atlassian.design/components/lozenge/usage)
20
- */
21
- declare const Lozenge: MemoExoticComponent<({
17
+ // @public
18
+ const Lozenge: MemoExoticComponent<({
22
19
  children,
23
20
  testId,
24
21
  isBold,
25
22
  appearance,
26
23
  maxWidth,
27
24
  style,
28
- }: LozengeProps) => JSX.Element>;
25
+ }: LozengeProps) => jsx.JSX.Element>;
29
26
  export default Lozenge;
30
27
 
31
- declare interface LozengeProps {
32
- /**
33
- * The appearance type.
34
- */
28
+ // @public (undocumented)
29
+ interface LozengeProps {
35
30
  appearance?: ThemeAppearance;
36
- /**
37
- * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
38
- */
39
31
  children?: ReactNode;
40
- /**
41
- * Determines whether to apply the bold style or not.
42
- */
43
32
  isBold?: boolean;
44
- /**
45
- * max-width of lozenge container. Default to 200px.
46
- */
47
33
  maxWidth?: number | string;
48
- /**
49
- * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
50
- */
51
34
  style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
52
- /**
53
- * A `testId` prop is provided for specified elements, which is a unique
54
- * string that appears as a data attribute `data-testid` in the rendered code,
55
- * serving as a hook for automated tests
56
- */
57
35
  testId?: string;
58
36
  }
59
37
 
60
- export declare type ThemeAppearance =
38
+ // @public (undocumented)
39
+ export type ThemeAppearance =
61
40
  | 'default'
62
41
  | 'inprogress'
63
42
  | 'moved'
@@ -65,5 +44,5 @@ export declare type ThemeAppearance =
65
44
  | 'removed'
66
45
  | 'success';
67
46
 
68
- export {};
47
+ // (No @packageDocumentation comment for this package)
69
48
  ```