@wix/design-system
Version:
@wix/design-system
60 lines • 3.29 kB
JavaScript
import React, { useEffect } from 'react';
import { st, classes } from './FloatingHelperContent.st.css.js';
import { floatingHelperSkin } from '../constants';
import { dataHooks, actionButtonSkin } from './constants';
import Text from '../../Text';
import Button from '../../Button';
import { SKINS as ButtonSkin, PRIORITY as ButtonPriority, } from '../../Button/constants';
import deprecationLog from '../../utils/deprecationLog';
const skinToButtonProps = {
[actionButtonSkin.white]: {
skin: ButtonSkin.light,
priority: ButtonPriority.secondary,
},
[actionButtonSkin.standard]: {
skin: ButtonSkin.standard,
priority: ButtonPriority.secondary,
},
[actionButtonSkin.premium]: {
skin: ButtonSkin.premium,
priority: ButtonPriority.primary,
},
[actionButtonSkin.standardPrimary]: {
skin: ButtonSkin.standard,
priority: ButtonPriority.primary,
},
[actionButtonSkin.lightPrimary]: {
skin: ButtonSkin.light,
priority: ButtonPriority.primary,
},
};
/** FloatingHelperContent */
const FloatingHelperContent = ({ title, body, actionText, onActionClick, actionTheme = 'white', // TODO: add default to actionSkin prop once actionTheme is removed
image, appearance = 'dark', // TODO: add default to skin prop once appearance is removed
footer, direction = 'horizontal', ...props }) => {
const skin = props.skin || appearance;
const actionSkin = props.actionSkin || actionTheme;
useEffect(() => {
if (appearance) {
deprecationLog('<FloatingHelperContent/> - prop "appearance" is deprecated and will be removed in next major release, please use "skin" property instead.');
}
}, [appearance]);
useEffect(() => {
if (actionTheme) {
deprecationLog('<FloatingHelperContent/> - prop "actionTheme" is deprecated and will be removed in next major release, please use "actionSkin" property instead.');
}
}, [actionTheme]);
return (React.createElement("div", { className: st(classes.root, { hasBody: !!body, direction }), "data-direction": direction },
React.createElement("div", null,
title && (React.createElement("div", { className: classes.title },
React.createElement(Text, { dataHook: dataHooks.title, weight: "bold", light: skin === floatingHelperSkin.dark }, title))),
body && (React.createElement("div", null,
React.createElement(Text, { dataHook: dataHooks.body, light: skin === floatingHelperSkin.dark }, body))),
actionText && onActionClick && actionText.length > 0 && (React.createElement("div", { className: classes.action },
React.createElement(Button, { ...skinToButtonProps[actionSkin], dataHook: dataHooks.actionButton, onClick: onActionClick, size: "small" }, actionText))),
footer && (React.createElement("div", { "data-hook": dataHooks.footer, className: classes.footer }, footer))),
image && direction && (React.createElement("div", { "data-hook": dataHooks.image, className: st(classes.image, { direction }) }, image))));
};
FloatingHelperContent.displayName = 'FloatingHelperContent';
export default FloatingHelperContent;
//# sourceMappingURL=FloatingHelperContent.js.map