@hhgtech/hhg-components
Version:
Hello Health Group common components
77 lines (73 loc) • 4.92 kB
JavaScript
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default, { forwardRef } from 'react';
import { createStyles, useMantineTheme, Text as Text$1 } from '@mantine/core';
import { a as GlobalTextStyle, C as CustomStylesType, F as FontWeight, u as useTemplateVariant } from './index-17c85f76.js';
var useStyles = createStyles((theme, _params) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
const TextConfig = GlobalTextStyle[_params === null || _params === void 0 ? void 0 : _params.customStylesType] ||
GlobalTextStyle[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'
? FontWeight.semiBold
: TextConfig.fontWeight[_params.weight] ||
TextConfig.fontWeightBySize[_params === null || _params === void 0 ? void 0 : _params.size] ||
FontWeight.regular,
fontSize: `${getFontSize}`,
lineHeight: `${getLineHeight}`,
letterSpacing: getLetterSpacing,
[theme.fn.smallerThan('sm')]: {
fontSize: `${getFontSizeMbDown}`,
lineHeight: `${getLineHeightMbDown}`,
letterSpacing: getLetterSpacingMbDown,
},
})),
};
});
const Text = forwardRef((_a, ref) => {
var _b;
var { size, color, weight, as = 'p', styles, className, dataEventCategory, dataEventAction, dataEventLabel, variant } = _a, rest = __rest(_a, ["size", "color", "weight", "as", "styles", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "variant"]);
const theme = useMantineTheme();
const variantStyle = useTemplateVariant();
const { classes, cx } = useStyles({
size,
weight: weight === 'caption' ? 'bold' : weight,
as,
customStylesType: variantStyle,
}, {
name: 'Text',
styles,
});
const colorValue = typeof theme.colors[color] === 'string' ? theme.colors[color] : color;
return (React__default.createElement(Text$1, Object.assign({ "data-size": size, 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 === 'success'
? theme.colors.green[6]
: undefined) ||
theme.colors.gray[7], 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)),
}, ref: ref }, rest)));
});
export { Text as T };