@wix/design-system
Version:
@wix/design-system
97 lines • 4.67 kB
JavaScript
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
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';
FloatingHelperContent.propTypes = {
/** Adds text as the title */
title: PropTypes.string,
/** Adds renderable node as the body */
body: PropTypes.node.isRequired,
/** Sets the text of the action button. Needs to be a non-empty string (and onActionClick prop has to be passed) in order for the action button to appear */
actionText: PropTypes.string,
/** @deprecated use actionSkin prop instead */
actionTheme: PropTypes.oneOf([
'standard',
'white',
'premium',
'lightPrimary',
'standardPrimary',
]),
/** Sets the skin of the action button */
actionSkin: PropTypes.oneOf([
'standard',
'white',
'premium',
'lightPrimary',
'standardPrimary',
]),
/** Custom footer node */
footer: PropTypes.node,
/** When both onActionClick & actionText are provided, will make an action button appear and invoke onActionClick() upon click */
onActionClick: PropTypes.func,
/** Adds an image */
image: PropTypes.node,
/** @deprecated Use skin prop instead */
appearance: PropTypes.oneOf(['dark', 'light']),
/** Skin : `dark` or `light`. */
skin: PropTypes.oneOf(['dark', 'light']),
/** Sets the direction of content and image. */
direction: PropTypes.oneOf(['horizontal', 'vertical']),
};
export default FloatingHelperContent;
//# sourceMappingURL=FloatingHelperContent.js.map