@metropolle/design-system 1.2026.0-1.15.1516 → 1.2026.0-1.17.117
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/react/index.js
CHANGED
|
@@ -1516,6 +1516,7 @@ function StatItem({ label, verified }) {
|
|
|
1516
1516
|
function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, socialLinks, showRotatingInfo = false, photoSlot, className = '', onSocialClick, }) {
|
|
1517
1517
|
const [showVerifiedPopup, setShowVerifiedPopup] = require$$0.useState(false);
|
|
1518
1518
|
const [showSocialPopup, setShowSocialPopup] = require$$0.useState(false);
|
|
1519
|
+
const [showPhotoModal, setShowPhotoModal] = require$$0.useState(false);
|
|
1519
1520
|
const [currentInfoIndex, setCurrentInfoIndex] = require$$0.useState(0);
|
|
1520
1521
|
const [isDarkTheme, setIsDarkTheme] = require$$0.useState(true);
|
|
1521
1522
|
const verifiedRef = require$$0.useRef(null);
|
|
@@ -1544,7 +1545,7 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
|
|
|
1544
1545
|
`Member since ${new Date(user.created_at).getFullYear()}`,
|
|
1545
1546
|
...(user.verified >= 1 ? ['Email Verified'] : []),
|
|
1546
1547
|
...(user.verified >= 2 ? ['Identity Verified'] : []),
|
|
1547
|
-
...(user.verified >= 3 ? ['
|
|
1548
|
+
...(user.verified >= 3 ? ['Area Verified'] : []),
|
|
1548
1549
|
];
|
|
1549
1550
|
// Rotate info text
|
|
1550
1551
|
require$$0.useEffect(() => {
|
|
@@ -1570,7 +1571,8 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
|
|
|
1570
1571
|
}, []);
|
|
1571
1572
|
// Get display values
|
|
1572
1573
|
const displayName = user.full_name || user.username || 'User';
|
|
1573
|
-
|
|
1574
|
+
// Always show profession_name (full name like "Developer") instead of code (like "DEV")
|
|
1575
|
+
const profession = user.profession_name || '';
|
|
1574
1576
|
const getLocation = () => {
|
|
1575
1577
|
if (!user.city_code && !user.state_code && !user.country_code)
|
|
1576
1578
|
return null;
|
|
@@ -1582,10 +1584,13 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
|
|
|
1582
1584
|
};
|
|
1583
1585
|
const memberSince = new Date(user.created_at).getFullYear().toString();
|
|
1584
1586
|
const photoUrl = user.photo_url_medium || user.photo_url_full || getPlaceholderAvatar(isDarkTheme);
|
|
1585
|
-
|
|
1587
|
+
// Full size photo for modal (prioritize full, then medium)
|
|
1588
|
+
const photoUrlFull = user.photo_url_full || user.photo_url_medium;
|
|
1589
|
+
const hasRealPhoto = !!(user.photo_url_medium || user.photo_url_full);
|
|
1590
|
+
return (jsxRuntimeExports.jsxs("article", { className: `mds-profile-card ${className}`, style: { '--mds-profile-card-photo-width': `${computedPhotoWidth}px` }, children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__grain" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo", children: photoSlot ? (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-slot", children: photoSlot })) : (jsxRuntimeExports.jsx("img", { src: photoUrl, alt: displayName, className: `mds-profile-card__avatar ${hasRealPhoto ? 'mds-profile-card__avatar--clickable' : ''}`, onClick: hasRealPhoto ? () => setShowPhotoModal(true) : undefined, role: hasRealPhoto ? 'button' : undefined, tabIndex: hasRealPhoto ? 0 : undefined, onKeyDown: hasRealPhoto ? (e) => e.key === 'Enter' && setShowPhotoModal(true) : undefined })) }), showPhotoModal && photoUrlFull && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__photo-modal", onClick: () => setShowPhotoModal(false), role: "dialog", "aria-modal": "true", "aria-label": "Enlarged photo - click anywhere to close", children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-backdrop" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-content", children: jsxRuntimeExports.jsx("img", { src: photoUrlFull, alt: displayName, className: "mds-profile-card__photo-modal-image" }) })] })), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__content", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__identity", children: [jsxRuntimeExports.jsx("h1", { className: "mds-profile-card__name", children: displayName.toUpperCase() }), variant === 'full' && profession && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__profession", children: profession.toUpperCase() })), variant === 'compact' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username" }))] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__details", children: [variant === 'full' && getLocation() && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__location", children: getLocation() })), variant === 'full' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username-detail" })), variant === 'compact' && user.email && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__email", children: user.email })), variant === 'compact' && (jsxRuntimeExports.jsxs("span", { className: "mds-profile-card__member", children: ["Member since ", memberSince] }))] }), variant === 'compact' && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verification", children: [jsxRuntimeExports.jsxs("button", { className: "mds-profile-card__verified-badge", title: `Verification Level ${user.verified}`, onClick: (e) => {
|
|
1586
1591
|
e.stopPropagation();
|
|
1587
1592
|
setShowVerifiedPopup(!showVerifiedPopup);
|
|
1588
|
-
}, children: [Icons.shield, jsxRuntimeExports.jsxs("span", { children: ["Level ", user.verified] })] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__dots", children: [jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 1 ? 'active' : ''}`, title: "Email Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 2 ? 'active' : ''}`, title: "Identity Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 3 ? 'active' : ''}`, title: "
|
|
1593
|
+
}, children: [Icons.shield, jsxRuntimeExports.jsxs("span", { children: ["Level ", user.verified] })] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__dots", children: [jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 1 ? 'active' : ''}`, title: "Email Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 2 ? 'active' : ''}`, title: "Identity Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 3 ? 'active' : ''}`, title: "Area Verified" })] })] })), showSocial && (jsxRuntimeExports.jsxs("div", { ref: socialRef, className: "mds-profile-card__social", children: [jsxRuntimeExports.jsx("button", { className: "mds-profile-card__social-trigger", onClick: (e) => {
|
|
1589
1594
|
e.stopPropagation();
|
|
1590
1595
|
setShowSocialPopup(!showSocialPopup);
|
|
1591
1596
|
setShowVerifiedPopup(false);
|
|
@@ -1594,7 +1599,7 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
|
|
|
1594
1599
|
e.stopPropagation();
|
|
1595
1600
|
setShowVerifiedPopup(!showVerifiedPopup);
|
|
1596
1601
|
setShowSocialPopup(false);
|
|
1597
|
-
}, title: "Verification Status", children: Icons.shield }), showVerifiedPopup && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-popup", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-header", children: ["Verification Level ", user.verified] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-stats", children: [jsxRuntimeExports.jsx(StatItem, { label: "Email", verified: user.verified >= 1 }), jsxRuntimeExports.jsx(StatItem, { label: "Identity", verified: user.verified >= 2 }), jsxRuntimeExports.jsx(StatItem, { label: "
|
|
1602
|
+
}, title: "Verification Status", children: Icons.shield }), showVerifiedPopup && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-popup", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-header", children: ["Verification Level ", user.verified] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-stats", children: [jsxRuntimeExports.jsx(StatItem, { label: "Email", verified: user.verified >= 1 }), jsxRuntimeExports.jsx(StatItem, { label: "Identity", verified: user.verified >= 2 }), jsxRuntimeExports.jsx(StatItem, { label: "Area", verified: user.verified >= 3 })] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-date", children: ["Since ", memberSince] })] }))] }), showRotatingInfo && (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__info-dots", children: infoTexts.map((_, index) => (jsxRuntimeExports.jsx("span", { className: `mds-profile-card__info-dot ${index === currentInfoIndex ? 'active' : ''}` }, index))) }))] }))] })] }));
|
|
1598
1603
|
}
|
|
1599
1604
|
|
|
1600
1605
|
const variantElementMap = {
|