@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
80 lines (79 loc) • 1.96 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
import { fixedForwardRef } from "../types/generic.js";
import { useClasses } from "./Typography.styles.js";
import { staticClasses } from "./Typography.styles.js";
import { mapVariant } from "./utils.js";
const HvTypographyMap = {
display: "h1",
title1: "h1",
title2: "h2",
title3: "h3",
title4: "h4",
body: "p",
label: "span",
captionLabel: "div",
caption1: "div",
caption2: "div",
// LEGACY
"5xlTitle": "h1",
"4xlTitle": "h1",
"3xlTitle": "h1",
xxlTitle: "h1",
xlTitle: "h1",
lTitle: "h2",
mTitle: "h3",
sTitle: "h4",
xsTitle: "h5",
xxsTitle: "h6",
sectionTitle: "p",
highlightText: "p",
normalText: "p",
placeholderText: "p",
link: "p",
disabledText: "p",
selectedNavText: "p",
vizText: "p",
vizTextDisabled: "p",
xsInlineLink: "p"
};
const HvTypography = fixedForwardRef(function HvTypography2(props, ref) {
const {
className,
component: ComponentProp,
classes: classesProp,
variant: variantProp = "body",
link = false,
noWrap = false,
paragraph = false,
disabled = false,
...others
} = useDefaultProps("HvTypography", props);
const { classes, css, cx } = useClasses(classesProp);
const { activeTheme } = useTheme();
const variant = mapVariant(variantProp, activeTheme?.base);
const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
return /* @__PURE__ */ jsx(
Component,
{
ref,
className: cx(
css({ ...activeTheme?.typography[variant] }),
classes.root,
classes[variant],
{
[classes.isLink]: link,
[classes.noWrap]: noWrap,
[classes.disabled]: disabled
},
className
),
disabled,
...others
}
);
});
export {
HvTypography,
staticClasses as typographyClasses
};