@atlaskit/lozenge 11.10.2 → 11.11.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 (12) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/compiled/package.json +17 -0
  3. package/dist/cjs/compiled/index.compiled.css +54 -0
  4. package/dist/cjs/compiled/index.js +151 -0
  5. package/dist/es2019/compiled/index.compiled.css +54 -0
  6. package/dist/es2019/compiled/index.js +138 -0
  7. package/dist/esm/compiled/index.compiled.css +54 -0
  8. package/dist/esm/compiled/index.js +142 -0
  9. package/dist/types/compiled/index.d.ts +45 -0
  10. package/dist/types-ts4.5/compiled/index.d.ts +45 -0
  11. package/package.json +8 -3
  12. package/theme/package.json +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 11.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#146405](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146405)
8
+ [`a92a52978058c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a92a52978058c) -
9
+ Adds an experimental Compiled CSS-in-JS entrypoint for our Lozenge component. This requires
10
+ specific setup that is not documented fully and is not intended for external consumption.
11
+
3
12
  ## 11.10.2
4
13
 
5
14
  ### Patch Changes
package/compiled/package.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "@atlaskit/lozenge/compiled",
3
+ "main": "../dist/cjs/compiled/index.js",
4
+ "module": "../dist/esm/compiled/index.js",
5
+ "module:es2019": "../dist/es2019/compiled/index.js",
6
+ "sideEffects": [
7
+ "**/*.compiled.css"
8
+ ],
9
+ "types": "../dist/types/compiled/index.d.ts",
10
+ "typesVersions": {
11
+ ">=4.5 <5.4": {
12
+ "*": [
13
+ "../dist/types-ts4.5/compiled/index.d.ts"
14
+ ]
15
+ }
16
+ }
17
+ }
package/dist/cjs/compiled/index.compiled.css ADDED
@@ -0,0 +1,54 @@
1
+ ._18m915vq{overflow-y:hidden}
2
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
3
+ ._19it14mp{border:1px solid #b7b9be}
4
+ ._19it1am1{border:1px solid #94c748}
5
+ ._19it1apr{border:1px solid #c97cf4}
6
+ ._19it1cy7{border:1px solid #669df1}
7
+ ._19itoa5t{border:1px solid #f87168}
8
+ ._19itzi1n{border:1px solid #fca700}
9
+ ._1bto1l2s{text-overflow:ellipsis}
10
+ ._1e0c116y{display:inline-flex}
11
+ ._1kz6184x{block-size:min-content}
12
+ ._1p1dangw{text-transform:uppercase}
13
+ ._1reo15vq{overflow-x:hidden}
14
+ ._1wyb1skh{font-size:11px}
15
+ ._2rko1l7b{border-radius:3px}
16
+ ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
17
+ ._bfhk1366{background-color:#fd9891}
18
+ ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
19
+ ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
20
+ ._bfhk1fkg{background-color:#dddee1}
21
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
22
+ ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
23
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
24
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
25
+ ._bfhk1ymo{background-color:#8fb8f6}
26
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
27
+ ._bfhk3uhp{background-color:#b3df72}
28
+ ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
29
+ ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
30
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
31
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
32
+ ._bfhkshej{background-color:#d8a0f7}
33
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
34
+ ._bfhkxmjf{background-color:#f9c84e}
35
+ ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
36
+ ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
37
+ ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
38
+ ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
39
+ ._kqswpfqs{position:static}
40
+ ._o5721q9c{white-space:nowrap}
41
+ ._syaz15cr{color:var(--ds-text-inverse,#fff)}
42
+ ._syaz17fi{color:var(--ds-text-success,#064)}
43
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
44
+ ._syaz1ick{color:var(--ds-text-danger,#de350b)}
45
+ ._syaz1lpn{color:var(--ds-text-information,#0052cc)}
46
+ ._syaz1mvf{color:var(--ds-text-discovery,#403294)}
47
+ ._syaz1tm6{color:var(--ds-text-warning,#974f0c)}
48
+ ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
49
+ ._syazjjyb{color:var(--ds-text-subtle,#42526e)}
50
+ ._syazwwip{color:#292a2e}
51
+ ._vchhusvi{box-sizing:border-box}
52
+ ._vwz47vkz{line-height:1pc}
53
+ ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
54
+ ._zg8l4jg8{font-style:normal}
package/dist/cjs/compiled/index.js ADDED
@@ -0,0 +1,151 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.29.1 */
2
+ "use strict";
3
+
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+ require("./index.compiled.css");
10
+ var _react = _interopRequireWildcard(require("react"));
11
+ var React = _react;
12
+ var _runtime = require("@compiled/react/runtime");
13
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
+ var _primitives = require("@atlaskit/primitives");
15
+ 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); }
16
+ 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; }
17
+ var stylesOld = {
18
+ container: "_1e0c116y _2rkoglpi _1kz6184x _kqswpfqs _1reo15vq _18m915vq _18zr1b66 _vchhusvi",
19
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
20
+ 'bg.bold.default': "_bfhkcdhy",
21
+ 'bg.bold.inprogress': "_bfhk14wj",
22
+ 'bg.bold.moved': "_bfhk190i",
23
+ 'bg.bold.new': "_bfhk1lri",
24
+ 'bg.bold.removed': "_bfhkybec",
25
+ 'bg.bold.success': "_bfhk8emd",
26
+ 'bg.subtle.default': "_bfhkm7j4",
27
+ 'bg.subtle.inprogress': "_bfhk33gi",
28
+ 'bg.subtle.moved': "_bfhk1tzq",
29
+ 'bg.subtle.new': "_bfhk1nvp",
30
+ 'bg.subtle.removed': "_bfhk1gly",
31
+ 'bg.subtle.success': "_bfhkmv6i",
32
+ 'text.bold.default': "_syaz15cr",
33
+ 'text.bold.inprogress': "_syaz15cr",
34
+ 'text.bold.moved': "_syazal3n",
35
+ 'text.bold.new': "_syaz15cr",
36
+ 'text.bold.removed': "_syaz15cr",
37
+ 'text.bold.success': "_syaz15cr",
38
+ 'text.subtle.default': "_syazjjyb",
39
+ 'text.subtle.inprogress': "_syaz1lpn",
40
+ 'text.subtle.moved': "_syaz1tm6",
41
+ 'text.subtle.new': "_syaz1mvf",
42
+ 'text.subtle.removed': "_syaz1ick",
43
+ 'text.subtle.success': "_syaz17fi"
44
+ };
45
+ var backgroundColorsOld = {
46
+ bold: {
47
+ default: 'color.background.neutral.bold',
48
+ inprogress: 'color.background.information.bold',
49
+ moved: 'color.background.warning.bold',
50
+ new: 'color.background.discovery.bold',
51
+ removed: 'color.background.danger.bold',
52
+ success: 'color.background.success.bold'
53
+ },
54
+ subtle: {
55
+ default: 'color.background.neutral',
56
+ inprogress: 'color.background.information',
57
+ moved: 'color.background.warning',
58
+ new: 'color.background.discovery',
59
+ removed: 'color.background.danger',
60
+ success: 'color.background.success'
61
+ }
62
+ };
63
+ var stylesNew = {
64
+ container: "_1e0c116y _vchhusvi _kqswpfqs _1kz6184x _2rko1l7b _1reo15vq _18m915vq _bozg1b66 _y4ti1b66",
65
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
66
+ 'bg.bold.default': "_bfhk1fkg",
67
+ 'bg.bold.inprogress': "_bfhk1ymo",
68
+ 'bg.bold.moved': "_bfhkxmjf",
69
+ 'bg.bold.new': "_bfhkshej",
70
+ 'bg.bold.removed': "_bfhk1366",
71
+ 'bg.bold.success': "_bfhk3uhp",
72
+ 'bg.subtle.default': "_bfhksm61",
73
+ 'bg.subtle.inprogress': "_bfhksm61",
74
+ 'bg.subtle.moved': "_bfhksm61",
75
+ 'bg.subtle.new': "_bfhksm61",
76
+ 'bg.subtle.removed': "_bfhksm61",
77
+ 'bg.subtle.success': "_bfhksm61",
78
+ 'border.subtle.default': "_19it14mp",
79
+ 'border.subtle.inprogress': "_19it1cy7",
80
+ 'border.subtle.moved': "_19itzi1n",
81
+ 'border.subtle.new': "_19it1apr",
82
+ 'border.subtle.removed': "_19itoa5t",
83
+ 'border.subtle.success': "_19it1am1",
84
+ 'text.subtle': "_syaz1fxt",
85
+ 'text.bold': "_syazwwip"
86
+ };
87
+ var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
88
+ /**
89
+ * __Lozenge__
90
+ *
91
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
92
+ *
93
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
94
+ * - [Code](https://atlassian.design/components/lozenge/code)
95
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
96
+ */
97
+ var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
98
+ var children = _ref.children,
99
+ testId = _ref.testId,
100
+ _ref$isBold = _ref.isBold,
101
+ isBold = _ref$isBold === void 0 ? false : _ref$isBold,
102
+ _ref$appearance = _ref.appearance,
103
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
104
+ _ref$maxWidth = _ref.maxWidth,
105
+ maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
106
+ style = _ref.style;
107
+ var appearanceStyle = isBold ? 'bold' : 'subtle';
108
+ var appearanceType = (0, _react.useMemo)(function () {
109
+ return appearanceTypes.includes(appearance) ? appearance : 'default';
110
+ }, [appearance]);
111
+ var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
112
+ var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
113
+ if ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
114
+ return /*#__PURE__*/React.createElement("span", {
115
+ style: {
116
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
117
+ maxWidth: maxWidthIsPc ? maxWidth : '100%'
118
+ },
119
+ "data-testid": testId,
120
+ className: (0, _runtime.ax)([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && stylesNew["border.subtle.".concat(appearanceType)]])
121
+ }, /*#__PURE__*/React.createElement("span", {
122
+ style: {
123
+ color: style === null || style === void 0 ? void 0 : style.color,
124
+ // to negate paddingInline specified on Box above
125
+ maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
126
+ },
127
+ "data-testid": testId && "".concat(testId, "--text"),
128
+ className: (0, _runtime.ax)([stylesNew.text, stylesNew["text.".concat(appearanceStyle)]])
129
+ }, children));
130
+ }
131
+ return /*#__PURE__*/React.createElement(_primitives.UNSAFE_SurfaceContext.Provider, {
132
+ value: backgroundColorsOld[appearanceStyle][appearanceType]
133
+ }, /*#__PURE__*/React.createElement("span", {
134
+ style: {
135
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
136
+ maxWidth: maxWidthIsPc ? maxWidth : '100%'
137
+ },
138
+ "data-testid": testId,
139
+ className: (0, _runtime.ax)([stylesOld.container, stylesOld["bg.".concat(appearanceStyle, ".").concat(appearanceType)]])
140
+ }, /*#__PURE__*/React.createElement("span", {
141
+ style: {
142
+ color: style === null || style === void 0 ? void 0 : style.color,
143
+ // to negate paddingInline specified on Box above
144
+ maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
145
+ },
146
+ "data-testid": testId && "".concat(testId, "--text"),
147
+ className: (0, _runtime.ax)([stylesOld.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
148
+ }, children)));
149
+ });
150
+ Lozenge.displayName = 'Lozenge';
151
+ var _default = exports.default = Lozenge;
package/dist/es2019/compiled/index.compiled.css ADDED
@@ -0,0 +1,54 @@
1
+ ._18m915vq{overflow-y:hidden}
2
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
3
+ ._19it14mp{border:1px solid #b7b9be}
4
+ ._19it1am1{border:1px solid #94c748}
5
+ ._19it1apr{border:1px solid #c97cf4}
6
+ ._19it1cy7{border:1px solid #669df1}
7
+ ._19itoa5t{border:1px solid #f87168}
8
+ ._19itzi1n{border:1px solid #fca700}
9
+ ._1bto1l2s{text-overflow:ellipsis}
10
+ ._1e0c116y{display:inline-flex}
11
+ ._1kz6184x{block-size:min-content}
12
+ ._1p1dangw{text-transform:uppercase}
13
+ ._1reo15vq{overflow-x:hidden}
14
+ ._1wyb1skh{font-size:11px}
15
+ ._2rko1l7b{border-radius:3px}
16
+ ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
17
+ ._bfhk1366{background-color:#fd9891}
18
+ ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
19
+ ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
20
+ ._bfhk1fkg{background-color:#dddee1}
21
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
22
+ ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
23
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
24
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
25
+ ._bfhk1ymo{background-color:#8fb8f6}
26
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
27
+ ._bfhk3uhp{background-color:#b3df72}
28
+ ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
29
+ ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
30
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
31
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
32
+ ._bfhkshej{background-color:#d8a0f7}
33
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
34
+ ._bfhkxmjf{background-color:#f9c84e}
35
+ ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
36
+ ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
37
+ ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
38
+ ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
39
+ ._kqswpfqs{position:static}
40
+ ._o5721q9c{white-space:nowrap}
41
+ ._syaz15cr{color:var(--ds-text-inverse,#fff)}
42
+ ._syaz17fi{color:var(--ds-text-success,#064)}
43
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
44
+ ._syaz1ick{color:var(--ds-text-danger,#de350b)}
45
+ ._syaz1lpn{color:var(--ds-text-information,#0052cc)}
46
+ ._syaz1mvf{color:var(--ds-text-discovery,#403294)}
47
+ ._syaz1tm6{color:var(--ds-text-warning,#974f0c)}
48
+ ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
49
+ ._syazjjyb{color:var(--ds-text-subtle,#42526e)}
50
+ ._syazwwip{color:#292a2e}
51
+ ._vchhusvi{box-sizing:border-box}
52
+ ._vwz47vkz{line-height:1pc}
53
+ ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
54
+ ._zg8l4jg8{font-style:normal}
package/dist/es2019/compiled/index.js ADDED
@@ -0,0 +1,138 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.29.1 */
2
+ import "./index.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
+ import { memo, useMemo } from 'react';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
7
+ import { UNSAFE_SurfaceContext as SurfaceContext } from '@atlaskit/primitives';
8
+ const stylesOld = {
9
+ container: "_1e0c116y _2rkoglpi _1kz6184x _kqswpfqs _1reo15vq _18m915vq _18zr1b66 _vchhusvi",
10
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
11
+ 'bg.bold.default': "_bfhkcdhy",
12
+ 'bg.bold.inprogress': "_bfhk14wj",
13
+ 'bg.bold.moved': "_bfhk190i",
14
+ 'bg.bold.new': "_bfhk1lri",
15
+ 'bg.bold.removed': "_bfhkybec",
16
+ 'bg.bold.success': "_bfhk8emd",
17
+ 'bg.subtle.default': "_bfhkm7j4",
18
+ 'bg.subtle.inprogress': "_bfhk33gi",
19
+ 'bg.subtle.moved': "_bfhk1tzq",
20
+ 'bg.subtle.new': "_bfhk1nvp",
21
+ 'bg.subtle.removed': "_bfhk1gly",
22
+ 'bg.subtle.success': "_bfhkmv6i",
23
+ 'text.bold.default': "_syaz15cr",
24
+ 'text.bold.inprogress': "_syaz15cr",
25
+ 'text.bold.moved': "_syazal3n",
26
+ 'text.bold.new': "_syaz15cr",
27
+ 'text.bold.removed': "_syaz15cr",
28
+ 'text.bold.success': "_syaz15cr",
29
+ 'text.subtle.default': "_syazjjyb",
30
+ 'text.subtle.inprogress': "_syaz1lpn",
31
+ 'text.subtle.moved': "_syaz1tm6",
32
+ 'text.subtle.new': "_syaz1mvf",
33
+ 'text.subtle.removed': "_syaz1ick",
34
+ 'text.subtle.success': "_syaz17fi"
35
+ };
36
+ const backgroundColorsOld = {
37
+ bold: {
38
+ default: 'color.background.neutral.bold',
39
+ inprogress: 'color.background.information.bold',
40
+ moved: 'color.background.warning.bold',
41
+ new: 'color.background.discovery.bold',
42
+ removed: 'color.background.danger.bold',
43
+ success: 'color.background.success.bold'
44
+ },
45
+ subtle: {
46
+ default: 'color.background.neutral',
47
+ inprogress: 'color.background.information',
48
+ moved: 'color.background.warning',
49
+ new: 'color.background.discovery',
50
+ removed: 'color.background.danger',
51
+ success: 'color.background.success'
52
+ }
53
+ };
54
+ const stylesNew = {
55
+ container: "_1e0c116y _vchhusvi _kqswpfqs _1kz6184x _2rko1l7b _1reo15vq _18m915vq _bozg1b66 _y4ti1b66",
56
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
57
+ 'bg.bold.default': "_bfhk1fkg",
58
+ 'bg.bold.inprogress': "_bfhk1ymo",
59
+ 'bg.bold.moved': "_bfhkxmjf",
60
+ 'bg.bold.new': "_bfhkshej",
61
+ 'bg.bold.removed': "_bfhk1366",
62
+ 'bg.bold.success': "_bfhk3uhp",
63
+ 'bg.subtle.default': "_bfhksm61",
64
+ 'bg.subtle.inprogress': "_bfhksm61",
65
+ 'bg.subtle.moved': "_bfhksm61",
66
+ 'bg.subtle.new': "_bfhksm61",
67
+ 'bg.subtle.removed': "_bfhksm61",
68
+ 'bg.subtle.success': "_bfhksm61",
69
+ 'border.subtle.default': "_19it14mp",
70
+ 'border.subtle.inprogress': "_19it1cy7",
71
+ 'border.subtle.moved': "_19itzi1n",
72
+ 'border.subtle.new': "_19it1apr",
73
+ 'border.subtle.removed': "_19itoa5t",
74
+ 'border.subtle.success': "_19it1am1",
75
+ 'text.subtle': "_syaz1fxt",
76
+ 'text.bold': "_syazwwip"
77
+ };
78
+ const appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
79
+ /**
80
+ * __Lozenge__
81
+ *
82
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
83
+ *
84
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
85
+ * - [Code](https://atlassian.design/components/lozenge/code)
86
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
87
+ */
88
+ const Lozenge = /*#__PURE__*/memo(({
89
+ children,
90
+ testId,
91
+ isBold = false,
92
+ appearance = 'default',
93
+ maxWidth = 200,
94
+ style
95
+ }) => {
96
+ const appearanceStyle = isBold ? 'bold' : 'subtle';
97
+ const appearanceType = useMemo(() => appearanceTypes.includes(appearance) ? appearance : 'default', [appearance]);
98
+ const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
99
+ const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
100
+ if (fg('platform-component-visual-refresh')) {
101
+ return /*#__PURE__*/React.createElement("span", {
102
+ style: {
103
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
104
+ maxWidth: maxWidthIsPc ? maxWidth : '100%'
105
+ },
106
+ "data-testid": testId,
107
+ className: ax([stylesNew.container, stylesNew[`bg.${appearanceStyle}.${appearanceType}`], appearanceStyle === 'subtle' && stylesNew[`border.subtle.${appearanceType}`]])
108
+ }, /*#__PURE__*/React.createElement("span", {
109
+ style: {
110
+ color: style === null || style === void 0 ? void 0 : style.color,
111
+ // to negate paddingInline specified on Box above
112
+ maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
113
+ },
114
+ "data-testid": testId && `${testId}--text`,
115
+ className: ax([stylesNew.text, stylesNew[`text.${appearanceStyle}`]])
116
+ }, children));
117
+ }
118
+ return /*#__PURE__*/React.createElement(SurfaceContext.Provider, {
119
+ value: backgroundColorsOld[appearanceStyle][appearanceType]
120
+ }, /*#__PURE__*/React.createElement("span", {
121
+ style: {
122
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
123
+ maxWidth: maxWidthIsPc ? maxWidth : '100%'
124
+ },
125
+ "data-testid": testId,
126
+ className: ax([stylesOld.container, stylesOld[`bg.${appearanceStyle}.${appearanceType}`]])
127
+ }, /*#__PURE__*/React.createElement("span", {
128
+ style: {
129
+ color: style === null || style === void 0 ? void 0 : style.color,
130
+ // to negate paddingInline specified on Box above
131
+ maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
132
+ },
133
+ "data-testid": testId && `${testId}--text`,
134
+ className: ax([stylesOld.text, stylesOld[`text.${appearanceStyle}.${appearanceType}`]])
135
+ }, children)));
136
+ });
137
+ Lozenge.displayName = 'Lozenge';
138
+ export default Lozenge;
package/dist/esm/compiled/index.compiled.css ADDED
@@ -0,0 +1,54 @@
1
+ ._18m915vq{overflow-y:hidden}
2
+ ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
3
+ ._19it14mp{border:1px solid #b7b9be}
4
+ ._19it1am1{border:1px solid #94c748}
5
+ ._19it1apr{border:1px solid #c97cf4}
6
+ ._19it1cy7{border:1px solid #669df1}
7
+ ._19itoa5t{border:1px solid #f87168}
8
+ ._19itzi1n{border:1px solid #fca700}
9
+ ._1bto1l2s{text-overflow:ellipsis}
10
+ ._1e0c116y{display:inline-flex}
11
+ ._1kz6184x{block-size:min-content}
12
+ ._1p1dangw{text-transform:uppercase}
13
+ ._1reo15vq{overflow-x:hidden}
14
+ ._1wyb1skh{font-size:11px}
15
+ ._2rko1l7b{border-radius:3px}
16
+ ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
17
+ ._bfhk1366{background-color:#fd9891}
18
+ ._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
19
+ ._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
20
+ ._bfhk1fkg{background-color:#dddee1}
21
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
22
+ ._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
23
+ ._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
24
+ ._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
25
+ ._bfhk1ymo{background-color:#8fb8f6}
26
+ ._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
27
+ ._bfhk3uhp{background-color:#b3df72}
28
+ ._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
29
+ ._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
30
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
31
+ ._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
32
+ ._bfhkshej{background-color:#d8a0f7}
33
+ ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
34
+ ._bfhkxmjf{background-color:#f9c84e}
35
+ ._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
36
+ ._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
37
+ ._ect41vq6{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
38
+ ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
39
+ ._kqswpfqs{position:static}
40
+ ._o5721q9c{white-space:nowrap}
41
+ ._syaz15cr{color:var(--ds-text-inverse,#fff)}
42
+ ._syaz17fi{color:var(--ds-text-success,#064)}
43
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
44
+ ._syaz1ick{color:var(--ds-text-danger,#de350b)}
45
+ ._syaz1lpn{color:var(--ds-text-information,#0052cc)}
46
+ ._syaz1mvf{color:var(--ds-text-discovery,#403294)}
47
+ ._syaz1tm6{color:var(--ds-text-warning,#974f0c)}
48
+ ._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
49
+ ._syazjjyb{color:var(--ds-text-subtle,#42526e)}
50
+ ._syazwwip{color:#292a2e}
51
+ ._vchhusvi{box-sizing:border-box}
52
+ ._vwz47vkz{line-height:1pc}
53
+ ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
54
+ ._zg8l4jg8{font-style:normal}
package/dist/esm/compiled/index.js ADDED
@@ -0,0 +1,142 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.29.1 */
2
+ import "./index.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
+ import { memo, useMemo } from 'react';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
7
+ import { UNSAFE_SurfaceContext as SurfaceContext } from '@atlaskit/primitives';
8
+ var stylesOld = {
9
+ container: "_1e0c116y _2rkoglpi _1kz6184x _kqswpfqs _1reo15vq _18m915vq _18zr1b66 _vchhusvi",
10
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
11
+ 'bg.bold.default': "_bfhkcdhy",
12
+ 'bg.bold.inprogress': "_bfhk14wj",
13
+ 'bg.bold.moved': "_bfhk190i",
14
+ 'bg.bold.new': "_bfhk1lri",
15
+ 'bg.bold.removed': "_bfhkybec",
16
+ 'bg.bold.success': "_bfhk8emd",
17
+ 'bg.subtle.default': "_bfhkm7j4",
18
+ 'bg.subtle.inprogress': "_bfhk33gi",
19
+ 'bg.subtle.moved': "_bfhk1tzq",
20
+ 'bg.subtle.new': "_bfhk1nvp",
21
+ 'bg.subtle.removed': "_bfhk1gly",
22
+ 'bg.subtle.success': "_bfhkmv6i",
23
+ 'text.bold.default': "_syaz15cr",
24
+ 'text.bold.inprogress': "_syaz15cr",
25
+ 'text.bold.moved': "_syazal3n",
26
+ 'text.bold.new': "_syaz15cr",
27
+ 'text.bold.removed': "_syaz15cr",
28
+ 'text.bold.success': "_syaz15cr",
29
+ 'text.subtle.default': "_syazjjyb",
30
+ 'text.subtle.inprogress': "_syaz1lpn",
31
+ 'text.subtle.moved': "_syaz1tm6",
32
+ 'text.subtle.new': "_syaz1mvf",
33
+ 'text.subtle.removed': "_syaz1ick",
34
+ 'text.subtle.success': "_syaz17fi"
35
+ };
36
+ var backgroundColorsOld = {
37
+ bold: {
38
+ default: 'color.background.neutral.bold',
39
+ inprogress: 'color.background.information.bold',
40
+ moved: 'color.background.warning.bold',
41
+ new: 'color.background.discovery.bold',
42
+ removed: 'color.background.danger.bold',
43
+ success: 'color.background.success.bold'
44
+ },
45
+ subtle: {
46
+ default: 'color.background.neutral',
47
+ inprogress: 'color.background.information',
48
+ moved: 'color.background.warning',
49
+ new: 'color.background.discovery',
50
+ removed: 'color.background.danger',
51
+ success: 'color.background.success'
52
+ }
53
+ };
54
+ var stylesNew = {
55
+ container: "_1e0c116y _vchhusvi _kqswpfqs _1kz6184x _2rko1l7b _1reo15vq _18m915vq _bozg1b66 _y4ti1b66",
56
+ text: "_ect41vq6 _1wyb1skh _zg8l4jg8 _k48pmoej _vwz47vkz _1reo15vq _18m915vq _1bto1l2s _1p1dangw _o5721q9c",
57
+ 'bg.bold.default': "_bfhk1fkg",
58
+ 'bg.bold.inprogress': "_bfhk1ymo",
59
+ 'bg.bold.moved': "_bfhkxmjf",
60
+ 'bg.bold.new': "_bfhkshej",
61
+ 'bg.bold.removed': "_bfhk1366",
62
+ 'bg.bold.success': "_bfhk3uhp",
63
+ 'bg.subtle.default': "_bfhksm61",
64
+ 'bg.subtle.inprogress': "_bfhksm61",
65
+ 'bg.subtle.moved': "_bfhksm61",
66
+ 'bg.subtle.new': "_bfhksm61",
67
+ 'bg.subtle.removed': "_bfhksm61",
68
+ 'bg.subtle.success': "_bfhksm61",
69
+ 'border.subtle.default': "_19it14mp",
70
+ 'border.subtle.inprogress': "_19it1cy7",
71
+ 'border.subtle.moved': "_19itzi1n",
72
+ 'border.subtle.new': "_19it1apr",
73
+ 'border.subtle.removed': "_19itoa5t",
74
+ 'border.subtle.success': "_19it1am1",
75
+ 'text.subtle': "_syaz1fxt",
76
+ 'text.bold': "_syazwwip"
77
+ };
78
+ var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
79
+ /**
80
+ * __Lozenge__
81
+ *
82
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
83
+ *
84
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
85
+ * - [Code](https://atlassian.design/components/lozenge/code)
86
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
87
+ */
88
+ var Lozenge = /*#__PURE__*/memo(function (_ref) {
89
+ var children = _ref.children,
90
+ testId = _ref.testId,
91
+ _ref$isBold = _ref.isBold,
92
+ isBold = _ref$isBold === void 0 ? false : _ref$isBold,
93
+ _ref$appearance = _ref.appearance,
94
+ appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
95
+ _ref$maxWidth = _ref.maxWidth,
96
+ maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
97
+ style = _ref.style;
98
+ var appearanceStyle = isBold ? 'bold' : 'subtle';
99
+ var appearanceType = useMemo(function () {
100
+ return appearanceTypes.includes(appearance) ? appearance : 'default';
101
+ }, [appearance]);
102
+ var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
103
+ var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
104
+ if (fg('platform-component-visual-refresh')) {
105
+ return /*#__PURE__*/React.createElement("span", {
106
+ style: {
107
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
108
+ maxWidth: maxWidthIsPc ? maxWidth : '100%'
109
+ },
110
+ "data-testid": testId,
111
+ className: ax([stylesNew.container, stylesNew["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && stylesNew["border.subtle.".concat(appearanceType)]])
112
+ }, /*#__PURE__*/React.createElement("span", {
113
+ style: {
114
+ color: style === null || style === void 0 ? void 0 : style.color,
115
+ // to negate paddingInline specified on Box above
116
+ maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
117
+ },
118
+ "data-testid": testId && "".concat(testId, "--text"),
119
+ className: ax([stylesNew.text, stylesNew["text.".concat(appearanceStyle)]])
120
+ }, children));
121
+ }
122
+ return /*#__PURE__*/React.createElement(SurfaceContext.Provider, {
123
+ value: backgroundColorsOld[appearanceStyle][appearanceType]
124
+ }, /*#__PURE__*/React.createElement("span", {
125
+ style: {
126
+ backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
127
+ maxWidth: maxWidthIsPc ? maxWidth : '100%'
128
+ },
129
+ "data-testid": testId,
130
+ className: ax([stylesOld.container, stylesOld["bg.".concat(appearanceStyle, ".").concat(appearanceType)]])
131
+ }, /*#__PURE__*/React.createElement("span", {
132
+ style: {
133
+ color: style === null || style === void 0 ? void 0 : style.color,
134
+ // to negate paddingInline specified on Box above
135
+ maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
136
+ },
137
+ "data-testid": testId && "".concat(testId, "--text"),
138
+ className: ax([stylesOld.text, stylesOld["text.".concat(appearanceStyle, ".").concat(appearanceType)]])
139
+ }, children)));
140
+ });
141
+ Lozenge.displayName = 'Lozenge';
142
+ export default Lozenge;
package/dist/types/compiled/index.d.ts ADDED
@@ -0,0 +1,45 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type CSSProperties, type ReactNode } from 'react';
6
+ export type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
7
+ export interface LozengeProps {
8
+ /**
9
+ * The appearance type.
10
+ */
11
+ appearance?: ThemeAppearance;
12
+ /**
13
+ * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
14
+ */
15
+ children?: ReactNode;
16
+ /**
17
+ * Determines whether to apply the bold style or not.
18
+ */
19
+ isBold?: boolean;
20
+ /**
21
+ * max-width of lozenge container. Default to 200px.
22
+ */
23
+ maxWidth?: number | string;
24
+ /**
25
+ * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
26
+ */
27
+ style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
28
+ /**
29
+ * A `testId` prop is provided for specified elements, which is a unique
30
+ * string that appears as a data attribute `data-testid` in the rendered code,
31
+ * serving as a hook for automated tests
32
+ */
33
+ testId?: string;
34
+ }
35
+ /**
36
+ * __Lozenge__
37
+ *
38
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
39
+ *
40
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
41
+ * - [Code](https://atlassian.design/components/lozenge/code)
42
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
43
+ */
44
+ declare const Lozenge: import("react").MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => JSX.Element>;
45
+ export default Lozenge;
package/dist/types-ts4.5/compiled/index.d.ts ADDED
@@ -0,0 +1,45 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type CSSProperties, type ReactNode } from 'react';
6
+ export type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
7
+ export interface LozengeProps {
8
+ /**
9
+ * The appearance type.
10
+ */
11
+ appearance?: ThemeAppearance;
12
+ /**
13
+ * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
14
+ */
15
+ children?: ReactNode;
16
+ /**
17
+ * Determines whether to apply the bold style or not.
18
+ */
19
+ isBold?: boolean;
20
+ /**
21
+ * max-width of lozenge container. Default to 200px.
22
+ */
23
+ maxWidth?: number | string;
24
+ /**
25
+ * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
26
+ */
27
+ style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
28
+ /**
29
+ * A `testId` prop is provided for specified elements, which is a unique
30
+ * string that appears as a data attribute `data-testid` in the rendered code,
31
+ * serving as a hook for automated tests
32
+ */
33
+ testId?: string;
34
+ }
35
+ /**
36
+ * __Lozenge__
37
+ *
38
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
39
+ *
40
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
41
+ * - [Code](https://atlassian.design/components/lozenge/code)
42
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
43
+ */
44
+ declare const Lozenge: import("react").MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => JSX.Element>;
45
+ export default Lozenge;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "11.10.2",
3
+ "version": "11.11.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/"
@@ -20,11 +20,14 @@
20
20
  ]
21
21
  }
22
22
  },
23
- "sideEffects": false,
23
+ "sideEffects": [
24
+ "**/*.compiled.css"
25
+ ],
24
26
  "atlaskit:src": "src/index.tsx",
25
27
  "af:exports": {
26
28
  ".": "./src/index.tsx",
27
- "./theme": "./src/theme.tsx"
29
+ "./theme": "./src/theme.tsx",
30
+ "./compiled": "./src/compiled/index.tsx"
28
31
  },
29
32
  "atlassian": {
30
33
  "team": "Design System Team",
@@ -36,11 +39,13 @@
36
39
  },
37
40
  "dependencies": {
38
41
  "@atlaskit/codemod-utils": "^4.2.0",
42
+ "@atlaskit/css": "^0.5.0",
39
43
  "@atlaskit/platform-feature-flags": "^0.3.0",
40
44
  "@atlaskit/primitives": "^12.2.0",
41
45
  "@atlaskit/theme": "^13.0.0",
42
46
  "@atlaskit/tokens": "^2.0.0",
43
47
  "@babel/runtime": "^7.0.0",
48
+ "@compiled/react": "^0.17.3",
44
49
  "@emotion/react": "^11.7.1"
45
50
  },
46
51
  "peerDependencies": {
package/theme/package.json CHANGED
@@ -3,7 +3,9 @@
3
3
  "main": "../dist/cjs/theme.js",
4
4
  "module": "../dist/esm/theme.js",
5
5
  "module:es2019": "../dist/es2019/theme.js",
6
- "sideEffects": false,
6
+ "sideEffects": [
7
+ "**/*.compiled.css"
8
+ ],
7
9
  "types": "../dist/types/theme.d.ts",
8
10
  "typesVersions": {
9
11
  ">=4.5 <5.4": {