wix-style-react
Version:
wix-style-react
72 lines • 3.6 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './FloatingHelperContent.st.css';
import { floatingHelperAppearance } from '../constants';
import { dataHooks, actionButtonTheme } from './constants';
import Text from '../../Text';
import Button from '../../Button';
import { SKINS as ButtonSkin, PRIORITY as ButtonPriority, } from '../../Button/constants';
const themeToButtonProps = {
[actionButtonTheme.white]: {
skin: ButtonSkin.light,
priority: ButtonPriority.secondary,
},
[actionButtonTheme.standard]: {
skin: ButtonSkin.standard,
priority: ButtonPriority.secondary,
},
[actionButtonTheme.premium]: {
skin: ButtonSkin.premium,
priority: ButtonPriority.primary,
},
[actionButtonTheme.standardPrimary]: {
skin: ButtonSkin.standard,
priority: ButtonPriority.primary,
},
[actionButtonTheme.lightPrimary]: {
skin: ButtonSkin.light,
priority: ButtonPriority.primary,
},
};
/** FloatingHelperContent */
const FloatingHelperContent = ({ title, body, actionText, onActionClick, actionTheme = 'white', image, appearance = 'dark', footer, direction = 'horizontal', }) => {
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: appearance === floatingHelperAppearance.dark }, title))),
body && (React.createElement("div", null,
React.createElement(Text, { dataHook: dataHooks.body, light: appearance === floatingHelperAppearance.dark }, body))),
actionText && onActionClick && actionText.length > 0 && (React.createElement("div", { className: classes.action },
React.createElement(Button, { ...themeToButtonProps[actionTheme], 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,
/** Sets the theme of the action button */
actionTheme: 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,
/** Appearance : `dark` or `light`. */
appearance: PropTypes.oneOf(['dark', 'light']),
/** Sets the direction of content and image. */
direction: PropTypes.oneOf(['horizontal', 'vertical']),
};
export default FloatingHelperContent;
//# sourceMappingURL=FloatingHelperContent.js.map