@prokodo/ui
Version:
UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.
86 lines (85 loc) • 2.89 kB
JavaScript
var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { create } from "../../helpers/bem.js";
import styles from "./Headline.base.module.scss.js";
import { HeadlineEffectsLoader } from "./Headline.effects.client.js";
import { POSSIBLE_HIGHLIGHTS } from "./Headline.variants.js";
import { RichText } from "../rich-text/RichText.js";
import { AnimatedText } from "../animatedText/AnimatedText.js";
const bem = create(styles, "Headline");
const Headline = /* @__PURE__ */ __name(({
id,
animated,
animationProps = {},
type = "h3",
size = "md",
highlight,
schema = {},
className,
align,
isRichtext = false,
variant = "inherit",
children,
...remainingProps
}) => {
const isHighlighted = Boolean(highlight) && POSSIBLE_HIGHLIGHTS.includes(variant);
const modifier = {
[variant]: !!variant,
"is-highlighted": isHighlighted,
highlighted: isHighlighted,
[`${variant}--highlighted`]: isHighlighted,
[size]: typeof size === "string" && !!size,
[`${align}`]: !!align
};
const bemClass = bem(void 0, modifier, className);
const customStyle = typeof size === "number" ? { fontSize: `${size}em` } : {};
const ariaLabel = typeof children === "string" ? children : void 0;
const baseProps = {
id,
"aria-label": ariaLabel,
className: bemClass,
style: customStyle,
...schema
};
const animateText = /* @__PURE__ */ __name((text) => {
if (animated === false || animated === void 0) {
return text;
}
return /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: text });
}, "animateText");
const renderHTag = /* @__PURE__ */ __name(({ children: headingChildren }) => {
const HTag = type;
const headingLevel = parseInt(type.charAt(1), 10);
return /* @__PURE__ */ jsxs(Fragment, { children: [
isHighlighted && /* @__PURE__ */ jsx(HeadlineEffectsLoader, {}),
/* @__PURE__ */ jsx(HTag, { ...baseProps, "aria-level": headingLevel, children: animateText(headingChildren) })
] });
}, "renderHTag");
if (isRichtext) {
return /* @__PURE__ */ jsxs(Fragment, { children: [
isHighlighted && /* @__PURE__ */ jsx(HeadlineEffectsLoader, {}),
/* @__PURE__ */ jsx(
RichText,
{
animated,
animationProps,
className: bem("headline", void 0, className),
id,
itemProp: void 0,
linkComponent: void 0,
schema,
variant,
...remainingProps,
overrideParagraph: /* @__PURE__ */ __name((textContent) => renderHTag({ children: textContent }), "overrideParagraph"),
children
}
)
] });
}
return renderHTag({ children });
}, "Headline");
Headline.displayName = "Headline";
export {
Headline
};