@grafana/ui
Version:
Grafana Components Library
62 lines (57 loc) • 2.12 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Icon = require('../Icon/Icon.cjs');
"use strict";
const Label = ({ children, description, className, category, ...labelProps }) => {
const styles = ThemeContext.useStyles2(getLabelStyles);
const categories = category == null ? void 0 : category.map((c, i) => {
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.categories, children: [
/* @__PURE__ */ jsxRuntime.jsx("span", { children: c }),
/* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "angle-right", className: styles.chevron })
] }, `${c}/${i}`);
});
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.label, className), children: /* @__PURE__ */ jsxRuntime.jsxs("label", { ...labelProps, children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.labelContent, children: [
categories,
children
] }),
description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.description, children: description })
] }) });
};
const getLabelStyles = (theme) => ({
label: css.css({
label: "Label",
fontSize: theme.typography.size.sm,
fontWeight: theme.typography.fontWeightMedium,
lineHeight: 1.25,
marginBottom: theme.spacing(0.5),
color: theme.colors.text.primary,
maxWidth: "480px"
}),
labelContent: css.css({
display: "flex",
alignItems: "center"
}),
description: css.css({
label: "Label-description",
color: theme.colors.text.secondary,
fontSize: theme.typography.size.sm,
fontWeight: theme.typography.fontWeightRegular,
marginTop: theme.spacing(0.25),
display: "block"
}),
categories: css.css({
label: "Label-categories",
display: "inline-flex",
alignItems: "center"
}),
chevron: css.css({
margin: theme.spacing(0, 0.25)
})
});
exports.Label = Label;
exports.getLabelStyles = getLabelStyles;
//# sourceMappingURL=Label.cjs.map