UNPKG

@hhgtech/hhg-components

Version:
81 lines (74 loc) 4.89 kB
'use strict'; var tslib_es6 = require('./tslib.es6-5033cbef.js'); var React = require('react'); var core = require('@mantine/core'); var text = require('./text-af5ab4c9.js'); function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; } var React__default = /*#__PURE__*/_interopDefault(React); var useStyles = core.createStyles((theme, _params) => { var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k; const TextConfig = text.GlobalTextStyle[_params === null || _params === void 0 ? void 0 : _params.customStylesType] || text.GlobalTextStyle[text.CustomStylesType.NONE]; const getFontSize = (_a = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _a === void 0 ? void 0 : _a[0]; const getLineHeight = (_b = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _b === void 0 ? void 0 : _b[0]; const getLetterSpacing = (_e = (_d = (_c = TextConfig.letterSpacing) === null || _c === void 0 ? void 0 : _c[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : 0; const getFontSizeMbDown = (_f = TextConfig.fontSize[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _f === void 0 ? void 0 : _f[1]; const getLineHeightMbDown = (_g = TextConfig.lineHeight[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _g === void 0 ? void 0 : _g[1]; const getLetterSpacingMbDown = (_k = (_j = (_h = TextConfig.letterSpacing) === null || _h === void 0 ? void 0 : _h[_params === null || _params === void 0 ? void 0 : _params.size]) === null || _j === void 0 ? void 0 : _j[1]) !== null && _k !== void 0 ? _k : 0; return { root: Object.assign({}, ((_params === null || _params === void 0 ? void 0 : _params.size) && { fontWeight: (_params === null || _params === void 0 ? void 0 : _params.as) === 'label' ? text.FontWeight.semiBold : TextConfig.fontWeight[_params.weight] || TextConfig.fontWeightBySize[_params === null || _params === void 0 ? void 0 : _params.size] || text.FontWeight.regular, fontSize: `${getFontSize}`, lineHeight: `${getLineHeight}`, letterSpacing: getLetterSpacing, [theme.fn.smallerThan('sm')]: { fontSize: `${getFontSizeMbDown}`, lineHeight: `${getLineHeightMbDown}`, letterSpacing: getLetterSpacingMbDown, }, })), }; }); const Text = (_a) => { var _b; var { size, color, weight, as = 'p', styles, className, dataEventCategory, dataEventAction, dataEventLabel, variant } = _a, rest = tslib_es6.__rest(_a, ["size", "color", "weight", "as", "styles", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "variant"]); const theme = core.useMantineTheme(); const { classes, cx } = useStyles({ size, weight: weight === 'caption' ? 'bold' : weight, as, customStylesType: theme.other.customStyleType || text.CustomStylesType.NONE, }, { name: 'Text', styles, }); const colorValue = typeof theme.colors[color] === 'string' ? theme.colors[color] : color; return (React__default["default"].createElement(core.Text, Object.assign({ className: cx(classes.root, className), color: colorValue || (as === 'label' ? theme.colors.gray[6] : ((_b = theme === null || theme === void 0 ? void 0 : theme.other) === null || _b === void 0 ? void 0 : _b.template) === 'mb' ? theme.colors.delftGray[7] : undefined) || (variant === 'primary' ? theme.colors.gray[9] : variant === 'secondary' ? theme.colors.gray[7] : variant === 'tertiary' ? theme.colors.gray[4] : variant === 'disabled' ? theme.colors.gray[3] : variant === 'error' ? theme.colors.red[6] : variant === 'green' ? theme.colors.green[6] : undefined), component: as, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, classNames: { root: Object.assign(Object.assign({}, (rest.wordWrap ? { 'word-wrap': rest.wordWrap } : undefined)), (rest.isUppercase || weight === 'caption' ? { 'text-transform': 'uppercase' } : undefined)), } }, rest))); }; exports.Text = Text;