@atlaskit/lozenge
Version:
A lozenge is a visual indicator used to highlight an item's status for quick recognition.
68 lines (66 loc) • 2.28 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.IconRenderer = void 0;
var _react = _interopRequireDefault(require("react"));
// Map lozenge colors to appropriate icon colors
var getIconColor = function getIconColor(color) {
// For semantic colors, use corresponding semantic icon colors
switch (color) {
case 'success':
return "var(--ds-icon-success, #6A9A23)";
case 'warning':
return "var(--ds-icon-warning, #E06C00)";
case 'danger':
return "var(--ds-icon-danger, #C9372C)";
case 'information':
return "var(--ds-icon-information, #357DE8)";
case 'neutral':
return "var(--ds-icon-subtlest, #6B6E76)";
case 'discovery':
return "var(--ds-icon-discovery, #AF59E1)";
// For accent colors, use corresponding accent icon colors
case 'accent-red':
return "var(--ds-icon-accent-red, #C9372C)";
case 'accent-orange':
return "var(--ds-icon-accent-orange, #E06C00)";
case 'accent-yellow':
return "var(--ds-icon-accent-yellow, #B38600)";
case 'accent-lime':
return "var(--ds-icon-accent-lime, #6A9A23)";
case 'accent-green':
return "var(--ds-icon-accent-green, #22A06B)";
case 'accent-teal':
return "var(--ds-icon-accent-teal, #2898BD)";
case 'accent-blue':
return "var(--ds-icon-accent-blue, #357DE8)";
case 'accent-purple':
return "var(--ds-icon-accent-purple, #AF59E1)";
case 'accent-magenta':
return "var(--ds-icon-accent-magenta, #CD519D)";
case 'accent-gray':
return "var(--ds-icon-accent-gray, #7D818A)";
default:
return "var(--ds-icon-subtlest, #6B6E76)";
}
};
/**
* Icon renderer for lozenge components
* Handles proper sizing and color theming for icons
*/
var IconRenderer = exports.IconRenderer = function IconRenderer(_ref) {
var Icon = _ref.icon,
color = _ref.color,
testId = _ref.testId,
size = _ref.size;
var iconColor = getIconColor(color);
return /*#__PURE__*/_react.default.createElement(Icon, {
color: iconColor,
label: "",
size: size,
testId: testId
});
};
var _default = exports.default = IconRenderer;