@payfit/unity-components
Version:
71 lines (70 loc) • 2.47 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { IconButton as t } from "../icon-button/IconButton.js";
import { ToastTitle as n } from "./parts/ToastTitle.js";
import { Children as r, Fragment as i, isValidElement as a } from "react";
import { uyTv as o } from "@payfit/unity-themes";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { useIntl as l } from "react-intl";
//#region src/components/toast/UnityToast.tsx
var u = o({
slots: {
base: "uy:sm:w-[416px] uy:border uy:border-solid uy:theme-legacy:rounded-150 uy:theme-rebrand:rounded-125 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-300 uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral",
contentWrapper: "uy:flex uy:grow uy:ml-125 uy:flex-col",
divider: "uy:theme-legacy:border-l-[1px] uy:theme-legacy:border-solid uy:theme-legacy:border-border-neutral uy:theme-legacy:self-stretch uy:theme-rebrand:hidden"
},
variants: { variant: {
success: "",
error: ""
} }
}), d = (e) => {
let t = a(e) && e.type === i ? e.props.children : e;
if (r.toArray(t).filter((e) => a(e) && e.type === n).length !== 1) throw Error("UnityToast must have one ToastTitle component");
}, f = ({ children: n, onClose: r, variant: i, ...a }) => {
let o = l();
d(n);
let { base: f, contentWrapper: p, divider: m } = u({ variant: i });
return /* @__PURE__ */ c("div", {
"data-dd-privacy": "mask",
...a,
tabIndex: -1,
role: i === "error" ? "alert" : "status",
"aria-atomic": "true",
"aria-live": i === "error" ? "assertive" : "polite",
className: f(),
children: [
/* @__PURE__ */ c("div", {
className: "uy:flex uy:flex-row uy:grow",
children: [/* @__PURE__ */ s(e, {
src: i === "success" ? "CheckCircleFilled" : "WarningCircleFilled",
color: i === "success" ? "content.success" : "content.danger",
className: "uy:mt-100",
alt: o.formatMessage({
id: "unity:component:toast:icon:status",
defaultMessage: "Status"
})
}), /* @__PURE__ */ s("div", {
className: p(),
children: n
})]
}),
/* @__PURE__ */ s("div", {
role: "presentation",
className: m()
}),
/* @__PURE__ */ s(t, {
icon: "CloseOutlined",
iconRole: "presentation",
label: o.formatMessage({
id: "unity:component:common:close:label",
defaultMessage: "Close"
}),
variant: "ghost",
color: "neutral",
onClick: r
})
]
});
};
f.displayName = "UnityToast";
//#endregion
export { f as UnityToast };