@hhgtech/hhg-components
Version:
Hello Health Group common components
228 lines (224 loc) • 11.7 kB
JavaScript
import { _ as __rest } from './tslib.es6-00ab44b2.js';
import React__default, { forwardRef } from 'react';
import { createStyles, getStylesRef, useMantineTheme, Button as Button$1 } from '@mantine/core';
import { A as ANIMATION_DURATION } from './shared-b07d1eb2.js';
import { 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;
const { other } = _theme;
const { template } = other;
const { size, variant, skipHover, withColorHover, isError, isSuccess, color, gradient, children, theme: themeProp, customStylesType, } = _params;
const isMb = template === 'mb' || themeProp === 'marryBaby';
const finalColor = color || (themeProp && isMb ? 'mb' : _theme.primaryColor);
const isHexColor = finalColor.startsWith('#');
const hexColor50 = isHexColor
? _theme.fn.lighten(color, 0.9)
: ((_b = (_a = _theme.colors) === null || _a === void 0 ? void 0 : _a[finalColor]) === null || _b === void 0 ? void 0 : _b[0]) || '';
const hexColor = isHexColor
? finalColor
: (_d = (_c = _theme.colors) === null || _c === void 0 ? void 0 : _c[finalColor]) === null || _d === void 0 ? void 0 : _d[_theme.fn.primaryShade()];
const hoverHexColor = isHexColor
? _theme.fn.darken(color, 0.05)
: (_f = (_e = _theme.colors) === null || _e === void 0 ? void 0 : _e[finalColor]) === null || _f === void 0 ? void 0 : _f[_theme.fn.primaryShade() + 1];
const isLeadgen = customStylesType === CustomStylesType.LEADGEN;
return {
root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ transition: `all ${ANIMATION_DURATION} ease-in-out` }, (gradient && Object.assign({ border: 0, position: 'relative' }, (variant === 'secondary' && {
'&:before': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: '#fff',
borderRadius: 'inherit',
},
})))), { '&:focus': {
outline: 'none',
} }), (isLeadgen && {
borderRadius: 12,
})), (!children && {
paddingLeft: '10px',
paddingRight: '10px',
'.mantine-Button-icon': {
margin: 0,
},
})), (() => {
switch (size) {
case 'xl':
return Object.assign({ height: 56, fontWeight: isLeadgen ? FontWeight.halfBold : FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
letterSpacing: '-0.3px',
}));
case 'lg':
return Object.assign({ height: 48, fontWeight: isLeadgen ? FontWeight.halfBold : FontWeight.semiBold, fontSize: isLeadgen ? '15px' : isMb ? '14px' : '16px', lineHeight: '24px' }, (isLeadgen && {
letterSpacing: '-0.3px',
}));
case 'md':
return Object.assign({ height: 40, fontWeight: isLeadgen ? FontWeight.halfBold : FontWeight.semiBold, fontSize: isLeadgen ? '13px' : '14px', lineHeight: isLeadgen ? '20px' : '22px' }, (isLeadgen && {
letterSpacing: '-0.3px',
}));
case 'sm':
return Object.assign(Object.assign({ height: 32, fontWeight: isLeadgen ? FontWeight.halfBold : FontWeight.semiBold, fontSize: isLeadgen ? '11px' : isMb ? '12px' : '14px', lineHeight: isLeadgen ? '16px' : '22px' }, (isLeadgen && {
letterSpacing: '-0.2px',
})), { paddingLeft: '16px', paddingRight: '16px' });
case 'xs':
return Object.assign({ height: 24, fontWeight: isLeadgen ? FontWeight.halfBold : FontWeight.semiBold, fontSize: isLeadgen ? '11px' : '12px', lineHeight: isLeadgen ? '16px' : '18px', paddingLeft: '8px', paddingRight: '8px' }, (isLeadgen && {
letterSpacing: '-0.2px',
}));
}
})()), (() => {
switch (variant) {
case 'primary': {
return Object.assign(Object.assign({ color: _theme.white }, (gradient
? {
backgroundImage: gradient,
backgroundColor: 'initial',
}
: { backgroundColor: hexColor })), (!skipHover && {
'&:hover': {
backgroundColor: gradient ? 'initial' : hoverHexColor,
},
}));
}
case 'secondary':
return Object.assign(Object.assign(Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid ${hexColor}` }, (gradient && {
backgroundImage: gradient,
borderColor: 'transparent',
})), (!skipHover &&
!gradient && {
'&:hover': {
backgroundColor: hexColor50,
border: `1px solid ${hexColor}`,
},
})), (withColorHover &&
!gradient && {
'&:hover': {
backgroundColor: hexColor,
border: `1px solid ${hexColor}`,
color: '#fff',
},
}));
case 'white':
return {
color: hexColor,
backgroundColor: 'transparent',
border: `1px solid transparent`,
'&:hover': {
backgroundColor: 'transparent',
borderColor: `transparent`,
},
};
case 'tertiary':
return {
color: _theme.colors.gray[8],
backgroundColor: _theme.white,
border: `1px solid ${_theme.colors.neutral[2]}`,
'&:hover': Object.assign({}, (!skipHover
? {
backgroundColor: _theme.colors.neutral[0],
border: `1px solid ${_theme.colors.neutral[0]}`,
}
: {
backgroundColor: _theme.white,
border: `1px solid ${_theme.colors.neutral[2]}`,
})),
};
case 'light': {
return {
color: hexColor,
backgroundColor: hexColor50,
border: `1px solid transparent`,
'&:hover': Object.assign({}, (!skipHover
? {
backgroundColor: _theme.white,
border: `1px solid ${hexColor50}`,
}
: {
backgroundColor: hexColor50,
border: `1px solid transparent`,
})),
};
}
case 'ghost':
return Object.assign({ color: hexColor, backgroundColor: 'transparent', border: `1px solid transparent` }, (!skipHover && {
'&:hover': {
backgroundColor: hexColor50,
border: `1px solid transparent`,
},
}));
}
})()), { '&[data-disabled]': {
backgroundColor: _theme.colors.gray[1],
color: _theme.colors.gray[4],
} }), (isError
? Object.assign({ color: _theme.colors.red[6], backgroundColor: _theme.white, border: `1px solid ${_theme.colors.red[6]}` }, (!skipHover && {
'&:hover': {
backgroundColor: _theme.colors.red[0],
border: `1px solid ${_theme.colors.red[6]}`,
},
})) : {})), (isSuccess
? Object.assign({ color: _theme.colors.green[8], backgroundColor: _theme.colors.green[0] }, (!skipHover && {
'&:hover': {
backgroundColor: _theme.colors.green[0],
},
})) : {})),
inner: Object.assign({ ref: getStylesRef('inner') }, (gradient && {
position: 'relative',
})),
leftIcon: {
marginRight: 8,
},
rightIcon: {},
label: Object.assign({}, (gradient &&
variant === 'secondary' && {
background: gradient,
'-webkit-background-clip': 'text',
'-webkit-text-fill-color': 'transparent',
})),
};
});
const MAPPED_VARIANT = {
primary: 'filled',
secondary: 'outline',
tertiary: 'default',
light: 'light',
ghost: 'subtle',
error: 'outline',
white: 'white',
success: 'subtle',
};
function filterObject(obj) {
const ret = {};
Object.keys(obj)
.filter((key) => obj[key] !== undefined)
.forEach((key) => (ret[key] = obj[key]));
return ret;
}
const Button = forwardRef((props, ref) => {
var _a, _b;
const theme = useMantineTheme();
const _c = Object.assign(Object.assign({}, (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.defaultProps), filterObject(props)), { variant, size, color, gradient, skipHover, withColorHover, className, dataEventCategory, dataEventAction, dataEventLabel, children, theme: themeProp, component, styles, classNames } = _c, rest = __rest(_c, ["variant", "size", "color", "gradient", "skipHover", "withColorHover", "className", "dataEventCategory", "dataEventAction", "dataEventLabel", "children", "theme", "component", "styles", "classNames"]);
const isError = variant === 'error';
const variantStyle = useTemplateVariant();
const { classes, cx } = useStyles({
variant,
size,
color,
gradient,
skipHover,
withColorHover,
isError,
isSuccess: variant === 'success',
children,
theme: themeProp,
customStylesType: variantStyle,
}, { name: 'ButtonMantine', styles, classNames });
return (React__default.createElement(Button$1, Object.assign({ component: component, className: cx(className, variant), classNames: {
root: classes.root,
inner: classes.inner,
leftIcon: classes.leftIcon,
rightIcon: classes.rightIcon,
label: classes.label,
}, variant: MAPPED_VARIANT[variant], "data-variant": variant, "data-event-category": dataEventCategory, "data-event-action": dataEventAction, "data-event-label": dataEventLabel, ref: ref, loaderProps: rest.disabled ? { color: 'currentColor' } : undefined }, rest), children));
});
export { Button as B };