@payfit/unity-components
Version:
127 lines (126 loc) • 3.76 kB
JavaScript
import { Icon as e } from "../../icon/Icon.js";
import { Text as t } from "../../text/Text.js";
import { Badge as n } from "../../badge/Badge.js";
import { AppProfileAvatar as r, InteractiveAppProfileAvatar as i } from "./AppProfileAvatar.js";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { useIntl as c } from "react-intl";
//#region src/components/app-profile-menu-button/parts/AppProfileMenuHeader.tsx
var l = a({
slots: {
summary: "uy:flex uy:w-full uy:items-center",
avatar: "uy:flex uy:items-center",
details: "uy:min-w-0 uy:flex-grow uy:flex-col uy:text-left uy:leading-[1.25]",
disclosure: "uy:p-100",
iconWrapper: "uy:flex uy:items-center uy:p-25",
icon: ""
},
variants: {
hideResponsiveDetails: {
true: {
avatar: "uy:mr-0 uy:lg:mr-150",
details: "uy:sr-only uy:lg:not-sr-only uy:lg:flex",
disclosure: "uy:ml-50 uy:lg:ml-150"
},
false: {
avatar: "uy:mr-150",
details: "uy:flex"
}
},
triggerVariant: {
small: { icon: [
"uy:block uy:origin-center uy:transition-transform",
"uy:duration-150 uy:ease-linear",
"uy:group-aria-[expanded=true]:rotate-180"
] },
large: {}
}
}
}), u = ({ asMenuHeader: a = !1, avatar: u, avatarPair: d, avatarSize: f, avatarVariant: p, badgeLabel: m, description: h, labelId: g, menuTriggerDescription: _, title: v, triggerDescriptionId: y, triggerVariant: b, uploadAvatarCallback: x, uploadAvatarDescription: S, uploadAvatarLabel: C }) => {
let w = c(), T = _ ?? w.formatMessage({
id: "unity:component:app-menu:footer:profile-button:description",
defaultMessage: "Press this button to open the profile menu."
}), { summary: E, avatar: D, details: O, disclosure: k, iconWrapper: A, icon: j } = l({
hideResponsiveDetails: !a && b === "small",
triggerVariant: b
});
return /* @__PURE__ */ s("div", {
className: E(),
"data-unity-slot": "profile-summary",
children: [
/* @__PURE__ */ o("div", {
className: D(),
"data-unity-slot": "avatar",
children: x ? /* @__PURE__ */ o(i, {
avatar: u,
avatarPair: d,
avatarSize: f,
avatarVariant: p,
labelId: g,
title: v,
uploadAvatarCallback: x,
uploadAvatarDescription: S,
uploadAvatarLabel: C
}) : /* @__PURE__ */ o(r, {
avatar: u,
avatarPair: d,
avatarSize: f,
avatarVariant: p,
isPairAvatarVisible: !0,
labelId: g,
title: v
})
}),
/* @__PURE__ */ s("div", {
className: O(),
"data-unity-slot": "profile-details",
children: [
/* @__PURE__ */ o(t, {
asElement: "span",
className: "uy:w-full",
color: "content.neutral",
"data-dd-privacy": "mask",
id: a ? void 0 : g,
isTruncated: !0,
variant: f === "md" ? "bodySmallStrong" : "bodyStrong",
children: v
}),
/* @__PURE__ */ o(t, {
asElement: "span",
className: "uy:w-full",
color: "content.neutral.low",
"data-dd-privacy": "allow",
isTruncated: !0,
variant: "bodySmall",
children: h
}),
!a && /* @__PURE__ */ o("span", {
id: y,
className: "uy:sr-only",
children: T
})
]
}),
/* @__PURE__ */ o("div", {
className: k(),
"data-unity-slot": "disclosure",
children: a ? m && /* @__PURE__ */ o(n, {
className: "uy:capitalize",
variant: "neutral",
children: m
}) : /* @__PURE__ */ o("div", {
className: A(),
children: /* @__PURE__ */ o(e, {
className: j(),
src: b === "small" ? "CaretDownOutlined" : "CaretUpDownOutlined",
alt: T,
size: 20,
color: "content.neutral.low"
})
})
})
]
});
};
//#endregion
export { u as AppProfileMenuHeader };