wix-style-react
Version:
wix-style-react
33 lines • 1.95 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Header.st.css';
import ModalHeading from './ModalHeading';
import { dataHooks } from '../../constants';
import Text from '../../../Text';
import Divider from '../../../Divider';
import { useBaseModalLayoutContext } from '../../BaseModalLayoutContext';
import { ariaLabels } from '../../../common/accessibility/ariaLabels';
export const Header = ({ dataHook, className, showHeaderDivider = false, titleSize, titleTag, }) => {
const { headerClassName, title, subtitle } = useBaseModalLayoutContext();
return (((title || subtitle) && (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, headerClassName, className) },
React.createElement("div", { className: classes.innerContent },
typeof title === 'string' ? (React.createElement(Header.Title, { titleSize: titleSize, titleTag: titleTag }, title)) : (title),
subtitle && (React.createElement(Text, { className: classes.subtitle, secondary: true, dataHook: dataHooks.headerSubtitle, id: ariaLabels.describedBy }, subtitle))),
showHeaderDivider && React.createElement(Divider, null)))) ||
null);
};
Header.Title = ({ titleSize, titleTag, children }) => (React.createElement(ModalHeading, { size: titleSize, as: titleTag, children: children, className: classes.title, dataHook: dataHooks.headerTitle, id: ariaLabels.labelledBy }));
Header.displayName = 'BaseModalLayout.Header';
Header.propTypes = {
/** additional css classes */
className: PropTypes.string,
/** data hook for testing */
dataHook: PropTypes.string,
/** The modal's title */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** The modal's subtitle */
subtitle: PropTypes.string,
/** Shows a divider at the bottom of the Header*/
showHeaderDivider: PropTypes.bool,
};
//# sourceMappingURL=Header.js.map