wix-style-react/src/MarketingPageLayoutContent/MarketingPageLayoutContent.js

wix-style-react

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, { APPEARANCES } 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]: APPEARANCES.H2,
    [size.large]: APPEARANCES.H1,
  },
  subtitle: {
    [size.medium]: APPEARANCES.H4,
    [size.large]: APPEARANCES.H3,
  },
  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 (
      <div data-hook={dataHook} className={st(classes.root, className)}>
        {overline && (
          <div data-hook={dataHooks.overlineContainer}>
            <Box color="D20">
              {isString(overline) ? (
                <Text
                  dataHook={dataHooks.overline}
                  size={sizesMap.overline[size]}
                  skin="standard"
                  secondary
                >
                  {overline}
                </Text>
              ) : (
                overline
              )}
            </Box>
            <div className={classes.overlineDividerContainer}>
              <Divider />
            </div>
          </div>
        )}
        {title && (
          <Box dataHook={dataHooks.titleContainer}>
            {isString(title) ? (
              <Heading
                dataHook={dataHooks.title}
                appearance={sizesMap.title[size]}
              >
                {title}
              </Heading>
            ) : (
              title
            )}
          </Box>
        )}
        {subtitle && (
          <Box dataHook={dataHooks.subtitleContainer} marginTop="SP2">
            {isString(subtitle) ? (
              <Heading
                dataHook={dataHooks.subtitle}
                appearance={sizesMap.subtitle[size]}
              >
                {subtitle}
              </Heading>
            ) : (
              subtitle
            )}
          </Box>
        )}
        {content && (
          <Box
            dataHook={dataHooks.contentContainer}
            marginTop="SP4"
            color="D10"
          >
            {isString(content) ? (
              <Text
                dataHook={dataHooks.content}
                size={sizesMap.content[size]}
                skin="standard"
              >
                {content}
              </Text>
            ) : (
              content
            )}
          </Box>
        )}
        {actions && (
          <Box
            dataHook={dataHooks.actions}
            marginTop="SP7"
            children={actions}
          />
        )}
      </div>
    );
  }
}

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;