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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';

import { st, classes } from './MarketingPageLayout.st.css';
import { dataHooks } from './constants';

import { Layout, Cell } from '../Layout';
import Divider from '../Divider';

/** Marketing Page Layout */
class MarketingPageLayout extends React.PureComponent {
  render() {
    const {
      dataHook,
      className,
      horizontalSize,
      verticalSize,
      removeImageHorizontalPadding,
      removeImageVerticalPadding,
      content,
      image,
      footer,
    } = this.props;

    return (
      <div
        data-hook={dataHook}
        className={st(
          classes.root,
          {
            horizontalSize,
            verticalSize,
            removeImageHorizontalPadding,
            removeImageVerticalPadding,
          },
          className,
        )}
      >
        <Layout gap={0}>
          {content && (
            <Cell span={6}>
              <div
                data-hook={dataHooks.contentContainer}
                className={classes.contentContainer}
              >
                {content}
              </div>
            </Cell>
          )}
          {image && (
            <Cell span={6}>
              <div
                data-hook={dataHooks.imageContainer}
                className={classes.imageContainer}
              >
                {image}
              </div>
            </Cell>
          )}
          {footer && (
            <Cell span={12}>
              <Divider />
              <div
                data-hook={dataHooks.footerContainer}
                className={classes.footerContainer}
              >
                {footer}
              </div>
            </Cell>
          )}
        </Layout>
      </div>
    );
  }
}

MarketingPageLayout.displayName = 'MarketingPageLayout';

MarketingPageLayout.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: PropTypes.string,

  /** Specifies a CSS class name to be appended to the component’s root element. */
  className: PropTypes.string,

  /** Controls horizontal padding size. */
  horizontalSize: PropTypes.oneOf(['medium', 'large']),

  /** Controls vertical padding size. */
  verticalSize: PropTypes.oneOf(['medium', 'large']),

  /** Specifies whether to remove image side paddings. */
  removeImageHorizontalPadding: PropTypes.bool,

  /** Specifies whether to remove image vertical paddings. */
  removeImageVerticalPadding: PropTypes.bool,

  /** Defines page content. In the majority of cases should use `<MarketingPageLayoutContent/>` component as a content. */
  content: PropTypes.node,

  /** Accepts link to an image source or a custom media element. */
  image: PropTypes.node,

  /** Accepts content to be displayed at the bottom of a page. */
  footer: PropTypes.node,
};

MarketingPageLayout.defaultProps = {
  horizontalSize: 'large',
  verticalSize: 'large',
  removeImageHorizontalPadding: false,
  removeImageVerticalPadding: false,
};

export default MarketingPageLayout;