@hhgtech/hhg-components
Version:
Hello Health Group common components
182 lines (172 loc) • 12.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var core = require('@mantine/core');
var innertext = require('innertext');
var index = require('./index-ae1a5588.js');
require('@mantine/dates');
require('./index-1ee4ebb8.js');
require('./index-ad7155cf.js');
require('./index-db44e8cb.js');
require('./useMantineLocale-e946ce4a.js');
var index$1 = require('./index-25f2e7a5.js');
require('./index-86fd931c.js');
require('./index.styles-6dd86c20.js');
require('./translationsContext-d63b6d32.js');
require('@mantine/hooks');
require('./utils-7ba0038a.js');
require('./other-eb0ff2f6.js');
require('./index-9012f1d1.js');
var useScreenSize = require('./useScreenSize-30f50b76.js');
require('@hhgtech/icons/other');
require('@emotion/styled');
require('@mantine/carousel');
require('./miscTheme.js');
require('./Locale-59ccf941.js');
require('classnames');
require('./useUniqueId-6e2f8c19.js');
require('./constantsSite.js');
require('@hhgtech/icons/core');
require('date-fns/locale');
require('./constantsDomainLocales.js');
require('./constantsRiskScreener.js');
require('./constantsIsProduction.js');
require('@mantine/notifications');
require('dayjs');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var innertext__default = /*#__PURE__*/_interopDefault(innertext);
const _Horizontal = (_a) => {
var _b, _c, _d;
var { article, author, authorAvatar, badge = '', hideDescription = false, isBookmarked = false, onBookmark, time, tracking } = _a,
// size = 'lg',
rest = tslib_es6.__rest(_a, ["article", "author", "authorAvatar", "badge", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking"]);
const { isMobile } = useScreenSize.useScreenSize();
console.log({ article });
// const maw = useMemo(() => {
// switch (size) {
// case 'lg':
// return 648
// case 'md':
// return 456
// case 'sm':
// return 264
// default:
// return 648
// }
// }, [size])
return (React__default["default"].createElement(core.Card, Object.assign({ padding: 0, radius: 0,
// maw={maw}
sx: {
display: 'flex',
flexDirection: 'row',
gap: 24,
} }, rest),
React__default["default"].createElement(core.Card.Section, { w: "100%", h: "100%", miw: 264, m: 0, className: "pointer" },
React__default["default"].createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
article.featureImage, alt: article.postName, style: {
width: '100%',
}, loading: "lazy" })),
React__default["default"].createElement(core.Card.Section, null,
React__default["default"].createElement(core.Group, { position: "apart", mt: 16, mb: 4 },
React__default["default"].createElement(index.Anchor, { href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
React__default["default"].createElement(index$1.Text, { size: "p4", color: "blue.6" }, (_c = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _c === void 0 ? void 0 : _c.displayName)),
React__default["default"].createElement(core.Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default["default"].createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
React__default["default"].createElement("path", { d: "M7 17.95L12 15.8L17 17.95V5.3C17 5.23333 16.9667 5.16667 16.9 5.1C16.8333 5.03333 16.7667 5 16.7 5H7.3C7.23333 5 7.16667 5.03333 7.1 5.1C7.03333 5.16667 7 5.23333 7 5.3V17.95ZM6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7ZM7 5H17H12H7Z", fill: "#595959" }))) : (React__default["default"].createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
React__default["default"].createElement("path", { d: "M6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7Z", fill: "#595959" }))))),
React__default["default"].createElement(index$1.Text, { size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold", className: "pointer" }, article.postTitle || article.postName || ''),
!hideDescription && (React__default["default"].createElement(index$1.Text, { size: "p2", mb: 16, lineClamp: 3, className: "pointer" }, innertext__default["default"](article.excerpt ||
article.description ||
((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
''))),
React__default["default"].createElement(core.Flex, { gap: 12, align: 'center' },
React__default["default"].createElement(index.Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
offset: 5,
size: 18,
label: React__default["default"].createElement("img", { loading: "lazy", src: badge, alt: "" }),
} }, "A"),
React__default["default"].createElement(index$1.Text, { size: "n1", c: "gray.6" },
author,
" \u2022 ",
time)))));
};
// MyComponent.styles.ts
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var useStyles = core.createStyles((_theme, {}) => ({
// add all styles as usual
root: {},
image: {},
title: {},
category: {},
description: {},
author: {},
}));
const RATIO = {
DEFAULT: 648 / 440,
NO_DESCRIPTION: 456 / 304,
};
const _Vertical = (_a) => {
var _b, _c, _d;
var { article, author, authorAvatar, badge = '', bannerImageWrapProps, hideDescription = false, isBookmarked = false, onBookmark, time, tracking,
// size = 'lg',
classNames, styles, unstyled, className } = _a, rest = tslib_es6.__rest(_a, ["article", "author", "authorAvatar", "badge", "bannerImageWrapProps", "hideDescription", "isBookmarked", "onBookmark", "time", "tracking", "classNames", "styles", "unstyled", "className"]);
const { isMobile } = useScreenSize.useScreenSize();
const { classes, cx } = useStyles(
// First argument of useStyles is styles params
{},
// Second argument is responsible for styles api integration
{ name: 'ArticleCard', classNames, styles, unstyled });
const type = React.useMemo(() => {
if (hideDescription) {
return RATIO.NO_DESCRIPTION;
}
else {
return RATIO.DEFAULT;
}
}, [hideDescription]);
// const maw = useMemo(() => {
// switch (size) {
// case 'lg':
// return 648
// case 'md':
// return 456
// case 'sm':
// return 264
// default:
// return 648
// }
// }, [size])
return (React__default["default"].createElement(core.Card, Object.assign({ className: cx(classes.root, className), padding: 'lg', radius: 0 }, rest),
React__default["default"].createElement(core.Card.Section, { className: cx(classes.image, 'pointer') },
React__default["default"].createElement(index.AspectRatio, Object.assign({ ratio: type }, bannerImageWrapProps),
React__default["default"].createElement("img", { src: (isMobile ? article.featureImageMobile : article.featureImage) ||
article.featureImage, alt: article.postName, style: { objectFit: 'cover' } }))),
React__default["default"].createElement(core.Card.Section, null,
React__default["default"].createElement(core.Group, { position: "apart", mt: 16, mb: 4 },
React__default["default"].createElement(index.Anchor, { className: classes.category, href: ((_b = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _b === void 0 ? void 0 : _b.permalink) || '#' },
React__default["default"].createElement(index$1.Text, { size: "p4", color: "blue.6" }, (_c = article === null || article === void 0 ? void 0 : article.primaryCategory) === null || _c === void 0 ? void 0 : _c.displayName)),
React__default["default"].createElement(core.Box, { sx: { cursor: 'pointer' }, role: "button", onClick: onBookmark }, !isBookmarked ? (React__default["default"].createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
React__default["default"].createElement("path", { d: "M7 17.95L12 15.8L17 17.95V5.3C17 5.23333 16.9667 5.16667 16.9 5.1C16.8333 5.03333 16.7667 5 16.7 5H7.3C7.23333 5 7.16667 5.03333 7.1 5.1C7.03333 5.16667 7 5.23333 7 5.3V17.95ZM6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7ZM7 5H17H12H7Z", fill: "#595959" }))) : (React__default["default"].createElement("svg", Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, tracking === null || tracking === void 0 ? void 0 : tracking.bookmark),
React__default["default"].createElement("path", { d: "M6.775 19.7C6.475 19.8333 6.18733 19.8123 5.912 19.637C5.63733 19.4623 5.5 19.2083 5.5 18.875V5.3C5.5 4.8 5.675 4.375 6.025 4.025C6.375 3.675 6.8 3.5 7.3 3.5H16.7C17.2 3.5 17.625 3.675 17.975 4.025C18.325 4.375 18.5 4.8 18.5 5.3V18.875C18.5 19.2083 18.3623 19.4623 18.087 19.637C17.8123 19.8123 17.525 19.8333 17.225 19.7L12 17.45L6.775 19.7Z", fill: "#595959" }))))),
React__default["default"].createElement(index$1.Text, { className: cx(classes.title, 'pointer'), size: hideDescription ? 's2' : 's1', mb: 8, weight: "semiBold" }, article.postTitle || article.postName || ''),
!hideDescription && (React__default["default"].createElement(index$1.Text, { className: cx(classes.description, 'pointer'), size: "p2", mb: 16, lineClamp: 3 }, innertext__default["default"](article.excerpt ||
article.description ||
((_d = article.postContent) === null || _d === void 0 ? void 0 : _d.split('\r\n')[0]) ||
''))),
React__default["default"].createElement(core.Flex, { className: classes.author, gap: 12, align: 'center' },
React__default["default"].createElement(index.Avatar, { size: 32, src: authorAvatar, withIndicator: true, indicatorConfig: {
offset: 5,
size: 18,
label: React__default["default"].createElement("img", { loading: "lazy", src: badge, alt: "" }),
} }, "A"),
React__default["default"].createElement(index$1.Text, { size: "n1", c: "gray.6" },
author,
" \u2022 ",
time)))));
};
const ArticleCard = (_a) => {
var { variant = 'vertical' } = _a, rest = tslib_es6.__rest(_a, ["variant"]);
return variant === 'horizontal' ? (React__default["default"].createElement(_Horizontal, Object.assign({}, rest))) : (React__default["default"].createElement(_Vertical, Object.assign({}, rest)));
};
exports.ArticleCard = ArticleCard;