@atlaskit/lozenge 11.7.0 → 11.7.2

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 (7) hide show
  1. package/CHANGELOG.md +545 -325
  2. package/dist/cjs/Lozenge/index.js +53 -32
  3. package/dist/es2019/Lozenge/index.js +52 -30
  4. package/dist/esm/Lozenge/index.js +52 -30
  5. package/dist/types/Lozenge/index.d.ts +4 -2
  6. package/dist/types-ts4.5/Lozenge/index.d.ts +4 -2
  7. package/package.json +7 -7
package/dist/cjs/Lozenge/index.js CHANGED
@@ -1,19 +1,13 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports.default = void 0;
9
- var _react = _interopRequireWildcard(require("react"));
10
- var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
7
+ var _react = require("react");
8
+ var _react2 = require("@emotion/react");
11
9
  var _primitives = require("@atlaskit/primitives");
12
- 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); }
13
- 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 && Object.prototype.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; }
14
- /* eslint-disable @atlassian/tangerine/import/entry-points */
15
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
16
- /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
10
+ /** @jsx jsx */
17
11
 
18
12
  var baseStyles = (0, _primitives.xcss)({
19
13
  display: 'inline-flex',
@@ -22,6 +16,14 @@ var baseStyles = (0, _primitives.xcss)({
22
16
  position: 'static',
23
17
  overflow: 'hidden'
24
18
  });
19
+ var textStyles = (0, _react2.css)({
20
+ font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
21
+ fontWeight: "var(--ds-font-weight-bold, 700)",
22
+ overflow: 'hidden',
23
+ textOverflow: 'ellipsis',
24
+ textTransform: 'uppercase',
25
+ whiteSpace: 'nowrap'
26
+ });
25
27
  /**
26
28
  * __Lozenge__
27
29
  *
@@ -45,7 +47,7 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
45
47
  var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
46
48
  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
47
49
  var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
48
- return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
50
+ return (0, _react2.jsx)(_primitives.Box, {
49
51
  as: "span",
50
52
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
51
53
  style: {
@@ -55,23 +57,18 @@ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
55
57
  paddingInline: "space.050",
56
58
  xcss: baseStyles,
57
59
  testId: testId
58
- }, /*#__PURE__*/_react.default.createElement(_text.default, {
59
- fontSize: "size.050",
60
- fontWeight: "bold",
61
- lineHeight: "lineHeight.100",
62
- textTransform: "uppercase",
63
- color: textColors[appearanceStyle][appearanceType],
64
- shouldTruncate: true,
65
- UNSAFE_style: {
60
+ }, (0, _react2.jsx)("span", {
61
+ css: [textStyles, textColors[appearanceStyle][appearanceType]],
62
+ style: {
66
63
  color: style === null || style === void 0 ? void 0 : style.color,
67
64
  // to negate paddingInline specified on Box above
68
65
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
69
66
  },
70
- testId: testId && "".concat(testId, "--text")
67
+ "data-testid": testId && "".concat(testId, "--text")
71
68
  }, children));
72
69
  });
73
70
  Lozenge.displayName = 'Lozenge';
74
- var _default = exports.default = Lozenge; // Lozenge colors
71
+ var _default = exports.default = Lozenge;
75
72
  var backgroundColors = {
76
73
  bold: {
77
74
  default: 'color.background.neutral.bold',
@@ -92,19 +89,43 @@ var backgroundColors = {
92
89
  };
93
90
  var textColors = {
94
91
  bold: {
95
- default: 'inverse',
96
- inprogress: 'inverse',
97
- moved: 'warning.inverse',
98
- new: 'inverse',
99
- removed: 'inverse',
100
- success: 'inverse'
92
+ default: (0, _react2.css)({
93
+ color: "var(--ds-text-inverse, #FFFFFF)"
94
+ }),
95
+ inprogress: (0, _react2.css)({
96
+ color: "var(--ds-text-inverse, #FFFFFF)"
97
+ }),
98
+ moved: (0, _react2.css)({
99
+ color: "var(--ds-text-warning-inverse, #172B4D)"
100
+ }),
101
+ new: (0, _react2.css)({
102
+ color: "var(--ds-text-inverse, #FFFFFF)"
103
+ }),
104
+ removed: (0, _react2.css)({
105
+ color: "var(--ds-text-inverse, #FFFFFF)"
106
+ }),
107
+ success: (0, _react2.css)({
108
+ color: "var(--ds-text-inverse, #FFFFFF)"
109
+ })
101
110
  },
102
111
  subtle: {
103
- default: 'subtle',
104
- inprogress: 'information',
105
- moved: 'warning',
106
- new: 'discovery',
107
- removed: 'danger',
108
- success: 'success'
112
+ default: (0, _react2.css)({
113
+ color: "var(--ds-text-subtle, #42526E)"
114
+ }),
115
+ inprogress: (0, _react2.css)({
116
+ color: "var(--ds-text-information, #0052CC)"
117
+ }),
118
+ moved: (0, _react2.css)({
119
+ color: "var(--ds-text-warning, #974F0C)"
120
+ }),
121
+ new: (0, _react2.css)({
122
+ color: "var(--ds-text-discovery, #403294)"
123
+ }),
124
+ removed: (0, _react2.css)({
125
+ color: "var(--ds-text-danger, #DE350B)"
126
+ }),
127
+ success: (0, _react2.css)({
128
+ color: "var(--ds-text-success, #006644)"
129
+ })
109
130
  }
110
131
  };
package/dist/es2019/Lozenge/index.js CHANGED
@@ -1,9 +1,6 @@
1
- /* eslint-disable @atlassian/tangerine/import/entry-points */
2
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
- /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
4
-
5
- import React, { memo } from 'react';
6
- import Text from '@atlaskit/ds-explorations/text';
1
+ /** @jsx jsx */
2
+ import { memo } from 'react';
3
+ import { css, jsx } from '@emotion/react';
7
4
  import { Box, xcss } from '@atlaskit/primitives';
8
5
  const baseStyles = xcss({
9
6
  display: 'inline-flex',
@@ -12,6 +9,14 @@ const baseStyles = xcss({
12
9
  position: 'static',
13
10
  overflow: 'hidden'
14
11
  });
12
+ const textStyles = css({
13
+ font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
14
+ fontWeight: "var(--ds-font-weight-bold, 700)",
15
+ overflow: 'hidden',
16
+ textOverflow: 'ellipsis',
17
+ textTransform: 'uppercase',
18
+ whiteSpace: 'nowrap'
19
+ });
15
20
  /**
16
21
  * __Lozenge__
17
22
  *
@@ -33,7 +38,7 @@ const Lozenge = /*#__PURE__*/memo(({
33
38
  const appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
34
39
  const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
35
40
  const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
36
- return /*#__PURE__*/React.createElement(Box, {
41
+ return jsx(Box, {
37
42
  as: "span",
38
43
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
39
44
  style: {
@@ -43,25 +48,18 @@ const Lozenge = /*#__PURE__*/memo(({
43
48
  paddingInline: "space.050",
44
49
  xcss: baseStyles,
45
50
  testId: testId
46
- }, /*#__PURE__*/React.createElement(Text, {
47
- fontSize: "size.050",
48
- fontWeight: "bold",
49
- lineHeight: "lineHeight.100",
50
- textTransform: "uppercase",
51
- color: textColors[appearanceStyle][appearanceType],
52
- shouldTruncate: true,
53
- UNSAFE_style: {
51
+ }, jsx("span", {
52
+ css: [textStyles, textColors[appearanceStyle][appearanceType]],
53
+ style: {
54
54
  color: style === null || style === void 0 ? void 0 : style.color,
55
55
  // to negate paddingInline specified on Box above
56
56
  maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
57
57
  },
58
- testId: testId && `${testId}--text`
58
+ "data-testid": testId && `${testId}--text`
59
59
  }, children));
60
60
  });
61
61
  Lozenge.displayName = 'Lozenge';
62
62
  export default Lozenge;
63
-
64
- // Lozenge colors
65
63
  const backgroundColors = {
66
64
  bold: {
67
65
  default: 'color.background.neutral.bold',
@@ -82,19 +80,43 @@ const backgroundColors = {
82
80
  };
83
81
  const textColors = {
84
82
  bold: {
85
- default: 'inverse',
86
- inprogress: 'inverse',
87
- moved: 'warning.inverse',
88
- new: 'inverse',
89
- removed: 'inverse',
90
- success: 'inverse'
83
+ default: css({
84
+ color: "var(--ds-text-inverse, #FFFFFF)"
85
+ }),
86
+ inprogress: css({
87
+ color: "var(--ds-text-inverse, #FFFFFF)"
88
+ }),
89
+ moved: css({
90
+ color: "var(--ds-text-warning-inverse, #172B4D)"
91
+ }),
92
+ new: css({
93
+ color: "var(--ds-text-inverse, #FFFFFF)"
94
+ }),
95
+ removed: css({
96
+ color: "var(--ds-text-inverse, #FFFFFF)"
97
+ }),
98
+ success: css({
99
+ color: "var(--ds-text-inverse, #FFFFFF)"
100
+ })
91
101
  },
92
102
  subtle: {
93
- default: 'subtle',
94
- inprogress: 'information',
95
- moved: 'warning',
96
- new: 'discovery',
97
- removed: 'danger',
98
- success: 'success'
103
+ default: css({
104
+ color: "var(--ds-text-subtle, #42526E)"
105
+ }),
106
+ inprogress: css({
107
+ color: "var(--ds-text-information, #0052CC)"
108
+ }),
109
+ moved: css({
110
+ color: "var(--ds-text-warning, #974F0C)"
111
+ }),
112
+ new: css({
113
+ color: "var(--ds-text-discovery, #403294)"
114
+ }),
115
+ removed: css({
116
+ color: "var(--ds-text-danger, #DE350B)"
117
+ }),
118
+ success: css({
119
+ color: "var(--ds-text-success, #006644)"
120
+ })
99
121
  }
100
122
  };
package/dist/esm/Lozenge/index.js CHANGED
@@ -1,9 +1,6 @@
1
- /* eslint-disable @atlassian/tangerine/import/entry-points */
2
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
3
- /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
4
-
5
- import React, { memo } from 'react';
6
- import Text from '@atlaskit/ds-explorations/text';
1
+ /** @jsx jsx */
2
+ import { memo } from 'react';
3
+ import { css, jsx } from '@emotion/react';
7
4
  import { Box, xcss } from '@atlaskit/primitives';
8
5
  var baseStyles = xcss({
9
6
  display: 'inline-flex',
@@ -12,6 +9,14 @@ var baseStyles = xcss({
12
9
  position: 'static',
13
10
  overflow: 'hidden'
14
11
  });
12
+ var textStyles = css({
13
+ font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
14
+ fontWeight: "var(--ds-font-weight-bold, 700)",
15
+ overflow: 'hidden',
16
+ textOverflow: 'ellipsis',
17
+ textTransform: 'uppercase',
18
+ whiteSpace: 'nowrap'
19
+ });
15
20
  /**
16
21
  * __Lozenge__
17
22
  *
@@ -35,7 +40,7 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
35
40
  var appearanceType = appearance in backgroundColors[appearanceStyle] ? appearance : 'default';
36
41
  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
37
42
  var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
38
- return /*#__PURE__*/React.createElement(Box, {
43
+ return jsx(Box, {
39
44
  as: "span",
40
45
  backgroundColor: backgroundColors[appearanceStyle][appearanceType],
41
46
  style: {
@@ -45,25 +50,18 @@ var Lozenge = /*#__PURE__*/memo(function (_ref) {
45
50
  paddingInline: "space.050",
46
51
  xcss: baseStyles,
47
52
  testId: testId
48
- }, /*#__PURE__*/React.createElement(Text, {
49
- fontSize: "size.050",
50
- fontWeight: "bold",
51
- lineHeight: "lineHeight.100",
52
- textTransform: "uppercase",
53
- color: textColors[appearanceStyle][appearanceType],
54
- shouldTruncate: true,
55
- UNSAFE_style: {
53
+ }, jsx("span", {
54
+ css: [textStyles, textColors[appearanceStyle][appearanceType]],
55
+ style: {
56
56
  color: style === null || style === void 0 ? void 0 : style.color,
57
57
  // to negate paddingInline specified on Box above
58
58
  maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
59
59
  },
60
- testId: testId && "".concat(testId, "--text")
60
+ "data-testid": testId && "".concat(testId, "--text")
61
61
  }, children));
62
62
  });
63
63
  Lozenge.displayName = 'Lozenge';
64
64
  export default Lozenge;
65
-
66
- // Lozenge colors
67
65
  var backgroundColors = {
68
66
  bold: {
69
67
  default: 'color.background.neutral.bold',
@@ -84,19 +82,43 @@ var backgroundColors = {
84
82
  };
85
83
  var textColors = {
86
84
  bold: {
87
- default: 'inverse',
88
- inprogress: 'inverse',
89
- moved: 'warning.inverse',
90
- new: 'inverse',
91
- removed: 'inverse',
92
- success: 'inverse'
85
+ default: css({
86
+ color: "var(--ds-text-inverse, #FFFFFF)"
87
+ }),
88
+ inprogress: css({
89
+ color: "var(--ds-text-inverse, #FFFFFF)"
90
+ }),
91
+ moved: css({
92
+ color: "var(--ds-text-warning-inverse, #172B4D)"
93
+ }),
94
+ new: css({
95
+ color: "var(--ds-text-inverse, #FFFFFF)"
96
+ }),
97
+ removed: css({
98
+ color: "var(--ds-text-inverse, #FFFFFF)"
99
+ }),
100
+ success: css({
101
+ color: "var(--ds-text-inverse, #FFFFFF)"
102
+ })
93
103
  },
94
104
  subtle: {
95
- default: 'subtle',
96
- inprogress: 'information',
97
- moved: 'warning',
98
- new: 'discovery',
99
- removed: 'danger',
100
- success: 'success'
105
+ default: css({
106
+ color: "var(--ds-text-subtle, #42526E)"
107
+ }),
108
+ inprogress: css({
109
+ color: "var(--ds-text-information, #0052CC)"
110
+ }),
111
+ moved: css({
112
+ color: "var(--ds-text-warning, #974F0C)"
113
+ }),
114
+ new: css({
115
+ color: "var(--ds-text-discovery, #403294)"
116
+ }),
117
+ removed: css({
118
+ color: "var(--ds-text-danger, #DE350B)"
119
+ }),
120
+ success: css({
121
+ color: "var(--ds-text-success, #006644)"
122
+ })
101
123
  }
102
124
  };
package/dist/types/Lozenge/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
- import React, { CSSProperties, ReactNode } from 'react';
1
+ /** @jsx jsx */
2
+ import { type CSSProperties, type ReactNode } from 'react';
3
+ import { jsx } from '@emotion/react';
2
4
  export type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
3
5
  export interface LozengeProps {
4
6
  /**
@@ -37,5 +39,5 @@ export interface LozengeProps {
37
39
  * - [Code](https://atlassian.design/components/lozenge/code)
38
40
  * - [Usage](https://atlassian.design/components/lozenge/usage)
39
41
  */
40
- declare const Lozenge: React.MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => JSX.Element>;
42
+ declare const Lozenge: import("react").MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => jsx.JSX.Element>;
41
43
  export default Lozenge;
package/dist/types-ts4.5/Lozenge/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
- import React, { CSSProperties, ReactNode } from 'react';
1
+ /** @jsx jsx */
2
+ import { type CSSProperties, type ReactNode } from 'react';
3
+ import { jsx } from '@emotion/react';
2
4
  export type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
3
5
  export interface LozengeProps {
4
6
  /**
@@ -37,5 +39,5 @@ export interface LozengeProps {
37
39
  * - [Code](https://atlassian.design/components/lozenge/code)
38
40
  * - [Usage](https://atlassian.design/components/lozenge/usage)
39
41
  */
40
- declare const Lozenge: React.MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => JSX.Element>;
42
+ declare const Lozenge: import("react").MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => jsx.JSX.Element>;
41
43
  export default Lozenge;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.7.0",
3
+ "version": "11.7.2",
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/"
@@ -40,11 +40,11 @@
40
40
  },
41
41
  "dependencies": {
42
42
  "@atlaskit/codemod-utils": "^4.2.0",
43
- "@atlaskit/ds-explorations": "^3.5.0",
44
- "@atlaskit/primitives": "^5.5.0",
45
- "@atlaskit/theme": "^12.7.0",
46
- "@atlaskit/tokens": "^1.43.0",
47
- "@babel/runtime": "^7.0.0"
43
+ "@atlaskit/primitives": "^6.2.0",
44
+ "@atlaskit/theme": "^12.8.0",
45
+ "@atlaskit/tokens": "^1.48.0",
46
+ "@babel/runtime": "^7.0.0",
47
+ "@emotion/react": "^11.7.1"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
@@ -54,10 +54,10 @@
54
54
  "@af/integration-testing": "*",
55
55
  "@af/visual-regression": "*",
56
56
  "@atlaskit/ds-lib": "^2.3.0",
57
+ "@atlaskit/heading": "^2.3.0",
57
58
  "@atlaskit/ssr": "*",
58
59
  "@atlaskit/visual-regression": "*",
59
60
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
60
- "@emotion/react": "^11.7.1",
61
61
  "@testing-library/react": "^12.1.5",
62
62
  "jscodeshift": "^0.13.0",
63
63
  "react-dom": "^16.8.0",