@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
45 lines • 2.37 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cx } from "@emotion/css";
import { Button, CircularProgress, } from "../CoreComponents";
/**
* Maps the BlokButton color schemes to MUI Button color props.
*/
const MuiButtonColorMap = {
primary: "primary",
danger: "error",
warning: "warning",
success: "success",
info: "info",
neutral: "inherit",
ai: "ai",
};
const CircularProgressColorMap = {
primary: "primary",
danger: "error",
warning: "warning",
success: "success",
info: "info",
neutral: "inherit",
ai: "ai", // Use a valid color for CircularProgress
};
/**
* Maps the BlokButton variants to MUI Button variant props.
*/
const MuiButtonVariantMap = {
solid: "contained",
outline: "outlined",
ghost: "text",
link: "link",
toggle: "toggle",
ai: "ai",
navigation: "navigation",
filter: "filter",
};
/**
* BlokButton component that wraps the MUI Button component with additional props and styles.
*/
export const BlokButton = ({ ref, colorScheme = "neutral", variant = "ghost", id, children, isDisabled, isLoading, isActive, className, isFloating, loadingText, size = "medium", startIcon, endIcon, href, target, buttonType = "button", onClick, onMouseDown, onMouseOver, count, onContextMenu, isIconButton = false, ...extraProps }) => {
const childrenToUse = isIconButton ? (children) : (_jsx("span", { className: "blok-button-label", children: children }));
return (_jsxs(Button, { variant: MuiButtonVariantMap[variant], color: MuiButtonColorMap[colorScheme], "data-testid": id, disabled: isDisabled || isLoading, className: cx(isActive && "button-active", isFloating && `shadow-md`, className), size: size, startIcon: startIcon, endIcon: endIcon, href: href, role: href != null ? "link" : "button", disableRipple: true, type: buttonType, onClick: onClick, onMouseDown: onMouseDown, onMouseOver: onMouseOver, onContextMenu: onContextMenu, ref: ref, ...extraProps, ...(href ? { target } : {}), children: [isLoading && (_jsx(CircularProgress, { size: 14, color: CircularProgressColorMap[colorScheme] })), loadingText ? loadingText : childrenToUse, count != null && count !== 0 && count !== "0" && (_jsx("span", { "data-style-name": "operation-count", className: "button-count", children: count }))] }));
};
//# sourceMappingURL=BlokButton.js.map