@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
58 lines (56 loc) • 2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ExtensionLabel = void 0;
var _react = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _colors = require("@atlaskit/theme/colors");
/** @jsx jsx */
var labelStyles = (0, _react.css)({
opacity: 0,
display: 'inline-flex',
width: 'max-content',
justifyContent: 'left',
position: 'absolute',
// Unfortunately, these need to be these exact numbers - otherwise there will be a gap/noticeable overlap
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: '-18px',
'&.inline-extension': {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: '-17px',
marginLeft: "var(--ds-space-150, 12px)"
},
'&.hovered': {
background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(_colors.N300, ")"),
color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
opacity: 1
},
borderRadius: "var(--ds-border-radius, 3px)",
lineHeight: 1
});
var textStyles = (0, _react.css)({
fontSize: '14px',
fontWeight: 'normal',
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
});
var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
var text = _ref.text,
extensionName = _ref.extensionName,
isNodeHovered = _ref.isNodeHovered,
customContainerStyles = _ref.customContainerStyles;
var classNames = (0, _classnames.default)('extension-title', 'extension-label', {
'inline-extension': extensionName === 'inlineExtension',
hovered: isNodeHovered
});
return (0, _react.jsx)("div", {
style: customContainerStyles
}, (0, _react.jsx)("span", {
"data-testid": "new-lozenge",
css: labelStyles,
className: classNames
}, (0, _react.jsx)("span", {
css: textStyles
}, text)));
};