@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
82 lines (81 loc) • 3.11 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useLabels } from "../hooks/useLabels.js";
import { useClasses } from "./Kpi.styles.js";
import { staticClasses } from "./Kpi.styles.js";
import { HvTypography } from "../Typography/Typography.js";
const DEFAULT_LABELS = {
/** The text at the top of the kpi. */
title: "",
/** The text in the middle of the kpi. */
indicator: void 0,
/** The text to the right of the indicator. */
unit: void 0,
/** The text to the right of the visual comparison. */
comparisonIndicatorInfo: void 0
};
const HvKpi = (props) => {
const {
trendIndicator = null,
visualIndicator = null,
visualComparison = null,
indicatorUnitTextVariant = "title2",
indicatorTextVariant = "title1",
labels: labelsProp,
classes: classesProp,
className,
...others
} = useDefaultProps("HvKpi", props);
const { classes, cx } = useClasses(classesProp);
const labels = useLabels(DEFAULT_LABELS, labelsProp);
const InternalVisualComparison = typeof visualComparison === "string" ? HvTypography : "div";
return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: labels.title }) }),
/* @__PURE__ */ jsxs("div", { className: classes.indicatorsContainer, children: [
visualIndicator && /* @__PURE__ */ jsx(
"div",
{
className: cx(
classes.visualIndicatorContainer,
classes.spacingToTheRight
),
children: visualIndicator
}
),
labels.indicator && /* @__PURE__ */ jsx(
HvTypography,
{
className: cx(classes.spacingToTheRight, classes.indicatorText),
variant: indicatorTextVariant,
children: labels.indicator
}
),
labels.unit && /* @__PURE__ */ jsx(
HvTypography,
{
className: classes.indicatorUnit,
variant: indicatorUnitTextVariant,
children: labels.unit
}
)
] }),
visualComparison && /* @__PURE__ */ jsxs("div", { className: classes.comparisonComposition, children: [
trendIndicator && /* @__PURE__ */ jsx("div", { className: cx(classes.trendLine, classes.spacingToTheRight), children: trendIndicator }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("div", { className: classes.comparisonContainer, children: /* @__PURE__ */ jsx(
InternalVisualComparison,
{
className: cx(classes.comparisons, classes.spacingToTheRight),
variant: "label",
children: visualComparison
}
) }),
/* @__PURE__ */ jsx("div", { className: classes.comparisonContainer, children: /* @__PURE__ */ jsx(HvTypography, { className: classes.comparisons, variant: "caption2", children: labels.comparisonIndicatorInfo }) })
] })
] })
] });
};
export {
HvKpi,
staticClasses as kpiClasses
};