wix-style-react
Version:
wix-style-react
66 lines • 3.83 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './MarketingPageLayoutContent.st.css';
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. */
class MarketingPageLayoutContent extends React.PureComponent {
render() {
const { dataHook, className, size, overline, title, subtitle, content, actions, } = this.props;
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';
MarketingPageLayoutContent.propTypes = {
/** Applies a data-hook HTML attribute that can be used in tests */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Controls the size of the marketing page layout content */
size: PropTypes.oneOf(['medium', 'large']),
/** Set overline content. Accepts text string or a custom element. */
overline: PropTypes.node,
/** Set the page layout title. Accepts text string or a custom element. */
title: PropTypes.node,
/** Set pages layout subtitle. Accepts text string or a custom element. */
subtitle: PropTypes.node,
/** Sets the main content. Accepts a text paragraph or any custom elements. */
content: PropTypes.node,
/** Adds a container for page actions. Accepts single or multiple components. Most commonly contains `<Button/>` and `<TextButton/>`. */
actions: PropTypes.node,
};
MarketingPageLayoutContent.defaultProps = {
size: 'large',
};
export default MarketingPageLayoutContent;
//# sourceMappingURL=MarketingPageLayoutContent.js.map