wix-style-react
Version:
wix-style-react
33 lines • 1.97 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Heading from '../Heading';
import Text from '../Text';
import Divider from '../Divider';
import { st, classes } from './PageSection.st.css';
import { dataHooks } from './constants';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
/** Page Section */
const PageSection = ({ dataHook, showDivider, title, subtitle, actionsBar, className, } = {}) => (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { className: st(classes.root, { showDivider }, className), "data-hook": dataHook },
React.createElement("div", { className: classes.content },
React.createElement("div", { className: classes.titleColumn },
title && (React.createElement(Heading, { size: newColorsBranding ? 'small' : 'large', as: "h2", dataHook: dataHooks.pageSectionTitle, ellipsis: true }, title)),
subtitle && (React.createElement(Text, { secondary: true, weight: "thin", ellipsis: true, dataHook: dataHooks.pageSectionSubtitle }, subtitle))),
actionsBar && (React.createElement("div", { className: classes.actionsBar, "data-hook": dataHooks.pageSectionActionsBar }, actionsBar))),
showDivider && React.createElement(Divider, { className: classes.divider })))));
PageSection.displayName = 'Page.Section';
PageSection.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** The main title content */
title: PropTypes.node,
/** The subtitle content */
subtitle: PropTypes.node,
/** A placeholder for a component that can contain actions.*/
actionsBar: PropTypes.node,
/** Renders a divider */
showDivider: PropTypes.bool,
};
export default PageSection;
//# sourceMappingURL=PageSection.js.map