@wix/design-system
Version:
@wix/design-system
41 lines • 2.65 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 { 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, }) => {
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, className) },
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)))),
title && (React.createElement(Box, { dataHook: dataHooks.titleContainer }, isString(title) ? (React.createElement(Heading, { dataHook: dataHooks.title, size: sizesMap.title[size] }, title)) : (title))),
subtitle && (React.createElement(Box, { dataHook: dataHooks.subtitleContainer, marginTop: "SP2" }, isString(subtitle) ? (React.createElement(Heading, { dataHook: dataHooks.subtitle, size: sizesMap.subtitle[size] }, subtitle)) : (subtitle))),
content && (React.createElement(Box, { dataHook: dataHooks.contentContainer, marginTop: "SP4", color: "D10" }, isString(content) ? (React.createElement(Text, { dataHook: dataHooks.content, size: sizesMap.content[size], skin: "standard" }, content)) : (content))),
actions && (React.createElement(Box, { dataHook: dataHooks.actions, marginTop: "SP7", children: actions }))));
};
MarketingPageLayoutContent.displayName = 'MarketingPageLayoutContent';
export default MarketingPageLayoutContent;
//# sourceMappingURL=MarketingPageLayoutContent.js.map