@wix/design-system
Version:
@wix/design-system
61 lines • 3.94 kB
JavaScript
import React from 'react';
import { st, classes } from './MarketingPageLayoutContent.st.css.js';
import { dataHooks, size } from './constants';
import { Divider } from '../Divider';
import { Text, SIZES as TEXT_SIZES } from '../Text';
import { Heading, SIZE as HEADING_SIZE } from '../Heading';
import { Box } from '../Box';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import { MarketingPageLayoutContext } from '../MarketingPageLayout/context';
import { isString } from '../utils/StringUtils';
const sizesMap = {
overline: {
[size.medium]: TEXT_SIZES.small,
[size.large]: TEXT_SIZES.medium,
},
title: {
[size.medium]: HEADING_SIZE.LARGE,
[size.large]: HEADING_SIZE.EXTRA_LARGE,
},
subtitle: {
[size.medium]: HEADING_SIZE.SMALL,
[size.large]: HEADING_SIZE.MEDIUM,
},
content: {
[size.medium]: TEXT_SIZES.small,
[size.large]: TEXT_SIZES.medium,
},
};
/** This component is used in the MarketingPageLayout component. It includes all the content of the page. */
const MarketingPageLayoutContent = ({ dataHook, className, size = 'large', overline, title, subtitle, content, actions, }) => {
const { mobile } = React.useContext(WixDesignSystemContext);
const { layout } = React.useContext(MarketingPageLayoutContext);
const imageTop = layout === 'imageTop';
const overlineElement = overline && (React.createElement("div", { "data-hook": dataHooks.overlineContainer },
React.createElement(Box, { color: "D20" }, isString(overline) ? (React.createElement(Text, { dataHook: dataHooks.overline, size: sizesMap.overline[size], skin: "standard", secondary: true }, overline)) : (overline)),
React.createElement("div", { className: classes.overlineDividerContainer },
React.createElement(Divider, null))));
const titleElement = title && (React.createElement(Box, { dataHook: dataHooks.titleContainer, className: classes.titleContainer }, isString(title) ? (React.createElement(Heading, { dataHook: dataHooks.title, size: sizesMap.title[size], className: classes.title }, title)) : (title)));
const subtitleElement = subtitle && (React.createElement(Box, { dataHook: dataHooks.subtitleContainer, className: classes.subtitleContainer, marginTop: imageTop ? undefined : 'SP2' }, isString(subtitle) ? (React.createElement(Heading, { dataHook: dataHooks.subtitle, size: sizesMap.subtitle[size], className: classes.subtitle }, subtitle)) : (subtitle)));
const contentElement = content && (React.createElement(Box, { dataHook: dataHooks.contentContainer, className: classes.contentBox, color: "D10" }, isString(content) ? (React.createElement(Text, { dataHook: dataHooks.content, size: sizesMap.content[size], skin: "standard", className: classes.content }, content)) : (content)));
const actionsElement = actions && (React.createElement(Box, { dataHook: dataHooks.actions, marginTop: !imageTop && mobile ? 'SP4' : undefined, className: classes.actionsContainer, children: actions }));
const rootClassName = st(classes.root, { layout, size, mobile }, className);
if (imageTop) {
return (React.createElement("div", { "data-hook": dataHook, className: rootClassName },
React.createElement("div", { className: classes.textColumn },
overlineElement,
titleElement,
subtitleElement,
actionsElement),
React.createElement("div", { className: classes.contentColumn }, contentElement)));
}
return (React.createElement("div", { "data-hook": dataHook, className: rootClassName },
overlineElement,
titleElement,
subtitleElement,
contentElement,
actionsElement));
};
MarketingPageLayoutContent.displayName = 'MarketingPageLayoutContent';
export { MarketingPageLayoutContent };
//# sourceMappingURL=MarketingPageLayoutContent.js.map