@wix/design-system
Version:
@wix/design-system
59 lines • 3.01 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './MarketingPageLayout.st.css.js';
import { dataHooks } from './constants';
import { Layout, Cell } from '../Layout';
import Divider from '../Divider';
/** Marketing Page Layout */
class MarketingPageLayout extends React.PureComponent {
render() {
const { dataHook, className, horizontalSize, verticalSize, removeImageHorizontalPadding, removeImageVerticalPadding, content, image, footer, height, fullHeightImage, } = this.props;
return (React.createElement(Layout, { dataHook: dataHook, className: st(classes.root, {
horizontalSize,
verticalSize,
removeImageHorizontalPadding,
removeImageVerticalPadding,
}, className), height: height, gap: 0 },
content && (React.createElement(Cell, { span: 6, vertical: true },
React.createElement("div", { "data-hook": dataHooks.contentContainer, className: classes.contentContainer }, content))),
image && (React.createElement(Cell, { span: 6, className: classes.imageCell },
React.createElement("div", { "data-hook": dataHooks.imageContainer, className: st(classes.imageContainer, {
full: fullHeightImage,
}) }, image))),
footer && (React.createElement(Cell, { span: 12 },
React.createElement(Divider, null),
React.createElement("div", { "data-hook": dataHooks.footerContainer, className: classes.footerContainer }, footer)))));
}
}
MarketingPageLayout.displayName = 'MarketingPageLayout';
MarketingPageLayout.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className: PropTypes.string,
/** Controls horizontal padding size. */
horizontalSize: PropTypes.oneOf(['medium', 'large']),
/** Controls vertical padding size. */
verticalSize: PropTypes.oneOf(['medium', 'large']),
/** Specifies whether to remove image side paddings. */
removeImageHorizontalPadding: PropTypes.bool,
/** Specifies whether to remove image vertical paddings. */
removeImageVerticalPadding: PropTypes.bool,
/** Defines page content. In the majority of cases should use `<MarketingPageLayoutContent/>` component as a content. */
content: PropTypes.node,
/** Accepts link to an image source or a custom media element. */
image: PropTypes.node,
/** Accepts content to be displayed at the bottom of a page. */
footer: PropTypes.node,
};
MarketingPageLayout.defaultProps = {
horizontalSize: 'large',
verticalSize: 'large',
removeImageHorizontalPadding: false,
removeImageVerticalPadding: false,
fullheightImage: false,
};
export default MarketingPageLayout;
//# sourceMappingURL=MarketingPageLayout.js.map