@atlaskit/lozenge
Version:
A lozenge is a visual indicator used to highlight an item's status for quick recognition.
107 lines (106 loc) • 4.68 kB
JavaScript
/* lozenge.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./lozenge.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { memo, useMemo } from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
import NewLozenge from './new/lozenge';
/**
* 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__*/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 = 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: 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: ax([styles.text, 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__*/memo(function (props) {
if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
return /*#__PURE__*/React.createElement(NewLozenge, props);
}
return /*#__PURE__*/React.createElement(LegacyLozenge, props);
});
LozengeWrapper.displayName = 'Lozenge';
export default LozengeWrapper;