@hhgtech/hhg-components
Version:
Hello Health Group common components
94 lines (83 loc) • 10.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var other = require('@hhgtech/icons/other');
var index$2 = require('./index-db44e8cb.js');
var index = require('./index-25f2e7a5.js');
var index$1 = require('./index-b0c1d50a.js');
var miscTheme = require('./miscTheme.js');
require('./constantsDomainLocales.js');
require('./Locale-59ccf941.js');
require('./constantsIsProduction.js');
require('./tslib.es6-92cccef3.js');
require('@mantine/core');
require('./other-eb0ff2f6.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styles = {"expertName":"PiqKaXk","anchor":"HgbW6-m","card":"_6lkfLYy","author":"j7c-onH","pointer":"wwI1--d"};
const CardAuthor = ({ avatarImg, authorName, authorLink, uploadTime, size, }) => {
return (React__default["default"].createElement("div", { className: styles.author },
React__default["default"].createElement("div", { className: "author" },
React__default["default"].createElement("div", { className: "avatar", "data-size": size }, avatarImg),
React__default["default"].createElement("div", { className: "poster", "data-is-disabled-url": !!!authorLink },
React__default["default"].createElement(index.Text, { size: size === 'lg' ? 'p3' : 'p4' },
React__default["default"].createElement("a", { href: authorLink },
React__default["default"].createElement("span", { className: "name" }, authorName),
"\u2022",
' '),
React__default["default"].createElement("span", null, uploadTime))))));
};
const CardExpert = ({ isMobile, avatarImg, name, link, size = 'lg', specialty, }) => {
return (React__default["default"].createElement("div", { className: styles.author },
React__default["default"].createElement("div", { className: "author" },
React__default["default"].createElement("div", { className: "expert-avatar", "data-size": size }, avatarImg),
React__default["default"].createElement("div", { className: "expert", "data-is-disabled-url": !!!link }, isMobile ? (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(index$1.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name),
React__default["default"].createElement(index.Text, { color: miscTheme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(index$1.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name))))) : (React__default["default"].createElement("a", { href: link }, size === 'lg' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(index$1.Heading, { tag: "h6", className: "expert__name", color: miscTheme.theme.colors.gray600 }, name),
React__default["default"].createElement(index.Text, { color: miscTheme.theme.colors.gray500, size: "p3", className: "specialty" }, specialty))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement("h6", { color: miscTheme.theme.colors.gray600, className: `${styles.expertName} expert__name` }, name),
React__default["default"].createElement(index.Text, { color: miscTheme.theme.colors.gray500, size: "p4", className: "specialty" }, specialty)))))))));
};
const AffiliateIcon = React.memo(() => {
return (React__default["default"].createElement("div", { className: "shoppable" },
React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
React__default["default"].createElement("rect", { width: "24", height: "24", rx: "12", fill: "#1B3250" }),
React__default["default"].createElement("path", { d: "M16.6667 8.00033H15.3333C15.3333 6.16033 13.84 4.66699 12 4.66699C10.16 4.66699 8.66667 6.16033 8.66667 8.00033H7.33333C6.6 8.00033 6 8.60033 6 9.33366V17.3337C6 18.067 6.6 18.667 7.33333 18.667H16.6667C17.4 18.667 18 18.067 18 17.3337V9.33366C18 8.60033 17.4 8.00033 16.6667 8.00033ZM12 6.00033C13.1067 6.00033 14 6.89366 14 8.00033H10C10 6.89366 10.8933 6.00033 12 6.00033ZM12 12.667C10.4467 12.667 9.14 11.607 8.77333 10.167C8.66 9.74699 8.98667 9.33366 9.42 9.33366C9.73333 9.33366 9.98667 9.56033 10.0733 9.86699C10.3067 10.7137 11.08 11.3337 12 11.3337C12.92 11.3337 13.6933 10.7137 13.9267 9.86699C14.0133 9.56033 14.2667 9.33366 14.58 9.33366C15.0133 9.33366 15.3333 9.74699 15.2267 10.167C14.86 11.607 13.5533 12.667 12 12.667Z", fill: "white" }))));
});
const ArticleCard = ({ articleLink, authorLink, authorName, avatarImg, banner, categoryLink, categoryName, className, dataEventActionForBanner, dataEventActionForBookmark, dataEventActionForCategory, dataEventActionForTitle, dataEventCategoryForBanner, dataEventCategoryForBookmark, dataEventCategoryForCategory, dataEventCategoryForTitle, dataEventLabelForBanner, dataEventLabelForBookmark, dataEventLabelForCategory, dataEventLabelForTitle, direction = 'horizontal', hasAffiliate, isBookmark = false, isBookmarkDisplayed = true, isMobile = true, onBookmark, onClickCategoryName, section = 'normal', size = 'md', specialty, style, styleBanner, styleLabel, styleTitle, text, title, type = 'author', uploadTime, articleLinkTarget, isPremium, headingAs, }) => {
const handleClick = (e) => {
e.stopPropagation();
onBookmark === null || onBookmark === void 0 ? void 0 : onBookmark();
};
const headingTag = size === 'lg' && type === 'expert'
? 'h4'
: size === 'lg' && section === 'home'
? isMobile
? 'h4'
: 'h3'
: size === 'lg'
? 'h4'
: 'h5';
const descriptionTag = size === 'lg' ? 'p3' : 'p4';
const categoryLabelTag = !isMobile && section === 'home' && size === 'lg' && type === 'author'
? 'c1'
: 'c2';
return (React__default["default"].createElement("article", { className: `${styles.card} ${className || ''}`, "data-size": size, style: style, "data-direction": direction, "data-is-expert": type === 'expert' || undefined },
React__default["default"].createElement("div", { className: "banner", style: styleBanner },
React__default["default"].createElement("a", { className: styles.anchor, "data-event-category": dataEventCategoryForBanner, "data-event-action": dataEventActionForBanner, "data-event-label": dataEventLabelForBanner, href: articleLink || '#', target: articleLinkTarget }, banner),
isPremium && (React__default["default"].createElement("img", { loading: "lazy", className: "premium", src: index$2.CommonGAssets.getAssetPath('premium-crown.svg') })),
hasAffiliate && React__default["default"].createElement(AffiliateIcon, null)),
React__default["default"].createElement("div", { className: "content" },
React__default["default"].createElement("div", { className: "inner-content" },
React__default["default"].createElement(index.Text, { style: styleLabel, className: "label", size: categoryLabelTag, weight: "caption" },
React__default["default"].createElement("a", { className: styles.anchor, "data-event-category": dataEventCategoryForCategory, "data-event-action": dataEventActionForCategory, "data-event-label": dataEventLabelForCategory, href: categoryLink || '#', onClick: onClickCategoryName }, categoryName),
isBookmarkDisplayed && (React__default["default"].createElement("a", { className: "bookmark", onClick: handleClick }, !isBookmark ? (React__default["default"].createElement(other.Bookmark, { size: 18, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark })) : (React__default["default"].createElement(other.Bookmark, { size: 18, isActive: true, "data-event-category": dataEventCategoryForBookmark, "data-event-action": dataEventActionForBookmark, "data-event-label": dataEventLabelForBookmark, activeColor: "#2ED69E" }))))),
React__default["default"].createElement(index$1.Heading, { tag: headingTag, style: styleTitle, className: "title", as: headingAs || (size === 'lg' ? 'h2' : 'h3') },
React__default["default"].createElement("a", { className: styles.anchor, "data-event-category": dataEventCategoryForTitle, "data-event-action": dataEventActionForTitle, "data-event-label": dataEventLabelForTitle, href: articleLink || '#', target: articleLinkTarget }, title)),
text && (React__default["default"].createElement("a", { href: articleLink || '#', target: articleLinkTarget },
React__default["default"].createElement(index.Text, { size: descriptionTag, className: "text" }, text)))),
React__default["default"].createElement("div", { className: "footer" }, type === 'author' ? (React__default["default"].createElement(CardAuthor, { size: size, avatarImg: avatarImg, authorName: authorName, authorLink: authorLink, uploadTime: uploadTime, handleClick: handleClick, isBookmarked: isBookmark, dataEventCategoryForBookmark: dataEventCategoryForBookmark, dataEventActionForBookmark: dataEventActionForBookmark, dataEventLabelForBookmark: dataEventLabelForBookmark })) : (React__default["default"].createElement(CardExpert, { size: size, isMobile: isMobile, avatarImg: avatarImg, specialty: specialty, name: authorName, link: authorLink, handleClick: handleClick, isBookmarked: isBookmark, dataEventCategoryForBookmark: dataEventCategoryForBookmark, dataEventActionForBookmark: dataEventActionForBookmark, dataEventLabelForBookmark: dataEventLabelForBookmark }))))));
};
exports.ArticleCard = ArticleCard;