wix-style-react
Version:
64 lines (57 loc) • 2.03 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';
/** Page Section */
var PageSection = function PageSection(_ref) {
var dataHook = _ref.dataHook,
showDivider = _ref.showDivider,
title = _ref.title,
subtitle = _ref.subtitle,
actionsBar = _ref.actionsBar,
className = _ref.className;
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, {
showDivider: showDivider
}, className),
"data-hook": dataHook
}, /*#__PURE__*/React.createElement("div", {
className: classes.content
}, /*#__PURE__*/React.createElement("div", {
className: classes.titleColumn
}, title && /*#__PURE__*/React.createElement(Heading, {
appearance: "H2",
dataHook: dataHooks.pageSectionTitle,
ellipsis: true
}, title), subtitle && /*#__PURE__*/React.createElement(Text, {
secondary: true,
weight: "thin",
ellipsis: true,
dataHook: dataHooks.pageSectionSubtitle
}, subtitle)), actionsBar && /*#__PURE__*/React.createElement("div", {
className: classes.actionsBar,
"data-hook": dataHooks.pageSectionActionsBar
}, actionsBar)), showDivider && /*#__PURE__*/React.createElement(Divider, {
className: classes.divider
}));
};
PageSection.displayName = 'PageSection';
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
};
PageSection.defaultProps = {};
export default PageSection;