@atlaskit/lozenge
Version:
A lozenge is a visual indicator used to highlight an item's status for quick recognition.
116 lines (114 loc) • 5.77 kB
JavaScript
/* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./lozenge.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _lozenge = _interopRequireDefault(require("./new/lozenge"));
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); }
/**
* TODO: We should be using our bounded `cssMap` here, but most of
* these styles from the visual refresh are not in the Design System.
*/
var styles = {
container: "_2rkofajl _1reo15vq _18m915vq _1e0c116y _vchhusvi _kqswpfqs _1kz6184x _bozg1b66 _y4ti1b66",
containerSubtle: "_1cwg1n1a",
text: "_1reo15vq _18m915vq _ect4ttxp _1wyb1skh _zg8l4jg8 _k48pwu06 _vwz47vkz _1bto1l2s _1p1dangw _o5721q9c",
customLetterspacing: "_1dyz9vsi",
'bg.bold.default': "_bfhk1fkg",
'bg.bold.inprogress': "_bfhk1ymo",
'bg.bold.moved': "_bfhkxmjf",
'bg.bold.new': "_bfhkshej",
'bg.bold.removed': "_bfhk1366",
'bg.bold.success': "_bfhk3uhp",
'bg.subtle.default': "_bfhksm61",
'bg.subtle.inprogress': "_bfhksm61",
'bg.subtle.moved': "_bfhksm61",
'bg.subtle.new': "_bfhksm61",
'bg.subtle.removed': "_bfhksm61",
'bg.subtle.success': "_bfhksm61",
'outline.subtle.default': "_12ji14je _1qu2nqa1 _12y3t94y",
'outline.subtle.inprogress': "_12jiuisw _1qu2nqa1 _12y3t94y",
'outline.subtle.moved': "_12jih727 _1qu2nqa1 _12y3t94y",
'outline.subtle.new': "_12ji157s _1qu2nqa1 _12y3t94y",
'outline.subtle.removed': "_12jia2c0 _1qu2nqa1 _12y3t94y",
'outline.subtle.success': "_12jin0nx _1qu2nqa1 _12y3t94y",
'text.subtle': "_syazi7uo",
'text.bold': "_syazwwip"
};
var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed'];
var newSemanticColors = ['success', 'discovery', 'warning', 'danger', 'information', 'neutral'];
var appearanceMapping = {
neutral: 'default',
default: 'default',
information: 'inprogress',
inprogress: 'inprogress',
warning: 'moved',
moved: 'moved',
removed: 'removed',
danger: 'removed',
success: 'success',
discovery: 'new',
new: 'new'
};
/**
* __Lozenge__
*
* A lozenge is a visual indicator used to highlight an item's status for quick recognition.
*
* - [Examples](https://atlassian.design/components/lozenge/examples)
* - [Code](https://atlassian.design/components/lozenge/code)
* - [Usage](https://atlassian.design/components/lozenge/usage)
*/
var LegacyLozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
var children = _ref.children,
testId = _ref.testId,
_ref$isBold = _ref.isBold,
isBold = _ref$isBold === void 0 ? false : _ref$isBold,
_ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
_ref$maxWidth = _ref.maxWidth,
maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
style = _ref.style;
var appearanceStyle = isBold ? 'bold' : 'subtle';
var appearanceType = (0, _react.useMemo)(function () {
return appearanceTypes.includes(appearance) || newSemanticColors.includes(appearance) ? appearanceMapping[appearance] : 'default';
}, [appearance]);
var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
return /*#__PURE__*/React.createElement("span", {
style: {
backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
maxWidth: maxWidthIsPc ? maxWidth : '100%'
},
"data-testid": testId,
className: (0, _runtime.ax)([styles.container, styles["bg.".concat(appearanceStyle, ".").concat(appearanceType)], appearanceStyle === 'subtle' && styles["outline.subtle.".concat(appearanceType)], appearanceStyle === 'subtle' && styles.containerSubtle])
}, /*#__PURE__*/React.createElement("span", {
style: {
color: style === null || style === void 0 ? void 0 : style.color,
// to negate paddingInline specified on Box above
maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
},
"data-testid": testId && "".concat(testId, "--text"),
className: (0, _runtime.ax)([styles.text, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && styles.customLetterspacing, styles["text.".concat(appearanceStyle)]])
}, children));
});
LegacyLozenge.displayName = 'Lozenge';
/**
* Wrapper component that switches between old and new Lozenge based on feature flag
*/
var LozengeWrapper = /*#__PURE__*/(0, _react.memo)(function (props) {
if ((0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
return /*#__PURE__*/React.createElement(_lozenge.default, props);
}
return /*#__PURE__*/React.createElement(LegacyLozenge, props);
});
LozengeWrapper.displayName = 'Lozenge';
var _default = exports.default = LozengeWrapper;