@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
124 lines (123 loc) • 5.31 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useState } from "react";
import classNames from "classnames";
import { faCircleCheck } from "@fortawesome/free-solid-svg-icons/faCircleCheck";
import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons/faCircleExclamation";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
import Icon from "../Icon/Icon.js";
import useLocale from "../../hooks/useLocale.js";
import SlideDown from "../SlideDown/SlideDown.js";
import accessibleOnClick from "../../utils/accessibleOnClick.js";
const statusBarStateClass = {
default: "bfc-theme-bg",
neutral: "bfc-neutral-bg",
brand: "bfc-brand-bg",
chill: "bfc-chill-bg",
attn: "bfc-attn-bg",
success: "bfc-success-bg",
warning: "bfc-warning-bg",
alert: "bfc-alert-bg"
};
const messageStateClass = {
default: "bfc-theme-fade-bg",
neutral: "bfc-neutral-fade-bg",
brand: "bfc-brand-fade-bg",
chill: "bfc-chill-fade-bg",
attn: "bfc-attn-fade-bg",
success: "bfc-success-fade-bg",
warning: "bfc-warning-fade-bg",
alert: "bfc-alert-fade-bg"
};
const expandableStateClass = {
default: "bfc-theme-fade-bg",
neutral: "bfc-neutral-fade-bg",
brand: "bfc-brand-fade-bg",
chill: "bfc-chill-fade-bg",
attn: "bfc-attn-fade-bg",
success: "bfc-success-fade-bg",
warning: "bfc-warning-fade-bg",
alert: "bfc-alert-fade-bg"
};
/**
* Display a highlighted message
*/ const Message = /*#__PURE__*/ forwardRef(({ children, className, header, state = "default", icon, noIcon, statusBar = false, noPadding, onClose, expandable = false, isOpen, onHeaderClick, ...props }, ref)=>{
const [active, setActive] = useState(isOpen ?? false);
const controlled = isOpen !== undefined && onHeaderClick !== undefined;
const locale = useLocale();
const handleClick = ()=>{
if (onHeaderClick) onHeaderClick();
setActive(!active);
};
if (!icon && !noIcon) {
icon = state === "success" ? faCircleCheck : state === "warning" ? faCircleExclamation : state === "alert" ? faTriangleExclamation : faCircleInfo;
}
const expandMode = (expandable || controlled) && header;
return /*#__PURE__*/ _jsxs("div", {
className: classNames("bf-message bf-break-word", className, {
[statusBarStateClass[state] ?? statusBarStateClass.default]: !expandMode && statusBar,
[messageStateClass[state] ?? messageStateClass.default]: !expandMode && !statusBar,
"bf-message-only-header": header && !children,
"bf-message-statusbar": statusBar,
"bf-message-expandable": expandable || controlled,
"bf-message-expandable-active": controlled ? isOpen : active
}),
ref: ref,
...props,
children: [
onClose && /*#__PURE__*/ _jsx("button", {
type: "button",
"aria-label": locale.closeMessage,
className: "bf-message-close",
onClick: onClose,
children: /*#__PURE__*/ _jsx(Icon, {
icon: faXmark
})
}),
header && !statusBar && /*#__PURE__*/ _jsxs("header", {
className: classNames("bf-message-header", {
[expandableStateClass[state] ?? expandableStateClass.default]: expandMode
}),
...expandMode && accessibleOnClick(props, ()=>handleClick()),
children: [
expandMode && /*#__PURE__*/ _jsx("div", {
className: "bf-message-expandable-icon",
children: /*#__PURE__*/ _jsx(Icon, {
icon: faAngleRight,
fixedWidth: true
})
}),
icon && /*#__PURE__*/ _jsx(Icon, {
icon: icon,
fixedWidth: true,
className: "bf-message-icon"
}),
header
]
}),
statusBar && !noIcon && icon && /*#__PURE__*/ _jsx(Icon, {
icon: icon,
fixedWidth: true,
className: "bf-message-icon"
}),
expandMode ? /*#__PURE__*/ _jsx(SlideDown, {
open: controlled ? isOpen : active,
"data-testid": "bf-message-expandable-content",
children: /*#__PURE__*/ _jsx("div", {
className: classNames("bf-message-expandable-content", {
"bf-success": state === "success",
"bf-warning": state === "warning",
"bf-alert": state === "alert",
"bf-nopadding": noPadding
}),
children: children
})
}) : children
]
});
});
Message.displayName = "Message";
export default Message;