nudge-components-library
Version:
A library of nudge UI components
33 lines (30 loc) • 2.5 kB
JavaScript
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useContext } from 'react';
import '../../styles/tokens.css.js';
import '../../styles/globals.css.js';
import { ThemeContext } from '../../theme/ThemeContext.js';
import styles from './Badge.module.css.js';
function Badge({ badgeLabel, label, count, icon, nudgeText, id, ariaLabel = badgeLabel || "", disabled = false, nudgeVisible = true, nudgePosition = "bottom", renderNudge, }) {
const theme = useContext(ThemeContext);
const badgeContent = (jsxs("div", { className: styles.badgeContent, style: theme.badge?.container, children: [icon && (jsx("span", { className: styles.icon, style: theme.badge?.icon, children: icon })), label && jsx("span", { style: theme.badge?.label, children: label }), typeof count === "number" && (jsx("span", { className: styles.count, style: theme.badge?.count, children: count }))] }));
const nudgeId = id ? `${id}-nudge` : undefined;
const nudgeElement = nudgeVisible ? (renderNudge ? (jsx("div", { id: nudgeId, style: theme.badge?.nudgeText, children: renderNudge({ label, count }) })) : (nudgeText && (jsx("div", { id: nudgeId, style: theme.badge?.nudgeText, children: jsx("span", { children: nudgeText }) })))) : null;
const isHorizontal = nudgeVisible && (nudgePosition === "left" || nudgePosition === "right");
const baseWrapperStyle = {
...theme.badge?.wrapper,
flexDirection: isHorizontal ? "row" : "column",
};
const wrapperStyle = disabled
? { ...baseWrapperStyle, ...theme.badge?.disabled }
: baseWrapperStyle;
let content;
if (isHorizontal) {
content = (jsxs("div", { className: styles.badgeContainer, children: [nudgePosition === "left" && (jsx("div", { style: theme.badge?.nudgeLeft, children: nudgeElement })), badgeContent, nudgePosition === "right" && (jsx("div", { style: theme.badge?.nudgeRight, children: nudgeElement }))] }));
}
else {
content = (jsxs(Fragment, { children: [nudgeVisible && nudgePosition === "top" && (jsx("div", { style: theme.badge?.nudgeTop, children: nudgeElement })), badgeContent, nudgeVisible && nudgePosition === "bottom" && (jsx("div", { style: theme.badge?.nudgeBottom, children: nudgeElement }))] }));
}
return (jsxs("div", { style: wrapperStyle, id: id, "aria-label": ariaLabel, children: [badgeLabel && jsx("div", { style: theme.badge?.badgeLabel, children: badgeLabel }), content] }));
}
export { Badge };
//# sourceMappingURL=Badge.js.map