@wix/design-system
Version:
@wix/design-system
20 lines • 1.5 kB
JavaScript
import React from 'react';
import { st, classes } from './Header.st.css.js';
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';
//# sourceMappingURL=Header.js.map