@wix/design-system
Version:
@wix/design-system
40 lines • 2.48 kB
JavaScript
import React from 'react';
import { st, classes } from './MarketingPageLayout.st.css.js';
import { dataHooks } from './constants';
import { Layout, Cell } from '../Layout';
import { Divider } from '../Divider';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import { MarketingPageLayoutContext } from './context';
/** Marketing Page Layout */
function MarketingPageLayout({ dataHook, className, horizontalSize = 'large', verticalSize = 'large', layout = 'imageSideEnd', removeImageHorizontalPadding = false, removeImageVerticalPadding = false, content, image, footer, height, fullHeightImage = false, }) {
const { mobile } = React.useContext(WixDesignSystemContext);
const imageTop = layout === 'imageTop';
const sectionSpan = mobile || imageTop ? 12 : 6;
const ContentCell = content && (React.createElement(Cell, { span: sectionSpan, vertical: true },
React.createElement("div", { "data-hook": dataHooks.contentContainer, className: classes.contentContainer }, content)));
const ImageCell = image && (React.createElement("div", { className: classes.imageCell },
React.createElement("div", { "data-hook": dataHooks.imageContainer, className: st(classes.imageContainer, {
full: fullHeightImage,
}) }, image)));
return (React.createElement(MarketingPageLayoutContext.Provider, { value: { layout } },
React.createElement(Layout, { dataHook: dataHook, className: st(classes.root, {
horizontalSize,
verticalSize,
layout,
removeImageHorizontalPadding,
removeImageVerticalPadding,
mobile,
}, className), height: height, gap: 0 },
mobile || imageTop ? (React.createElement(React.Fragment, null,
ImageCell,
ContentCell)) : (React.createElement(React.Fragment, null,
ContentCell,
ImageCell)),
footer && (React.createElement("div", { className: classes.footerCell },
React.createElement("div", { className: classes.footerDividerContainer },
React.createElement(Divider, null)),
React.createElement("div", { "data-hook": dataHooks.footerContainer, className: classes.footerContainer }, footer))))));
}
MarketingPageLayout.displayName = 'MarketingPageLayout';
export { MarketingPageLayout };
//# sourceMappingURL=MarketingPageLayout.js.map