@shopgate/engage/product/components/Description/index.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { SurroundPortals, PlaceholderParagraph, HtmlSanitizer, I18n } from '@shopgate/engage/components';
import { PRODUCT_DESCRIPTION } from '@shopgate/engage/product';
import classNames from 'classnames';
import { container, title, placeholder, content } from "./style";
import connect from "./connector";

/**
 * The product description.
 * @param {Object} props The component props.
 * @param {string} props.html html describing the product
 * @param {Function} props.navigate where to navigate on click
 * @returns {JSX.Element}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Description({
  html,
  navigate,
  ...props
}) {
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: PRODUCT_DESCRIPTION,
    portalProps: {
      html,
      navigate,
      ...props
    },
    children: html !== '' && /*#__PURE__*/_jsxs("div", {
      className: `${container} engage__product__description`,
      children: [/*#__PURE__*/_jsx("div", {
        className: classNames(title, 'theme__description_heading'),
        children: /*#__PURE__*/_jsx(I18n.Text, {
          string: "product.description_heading"
        })
      }), /*#__PURE__*/_jsx(PlaceholderParagraph, {
        className: placeholder,
        ready: !!html,
        children: /*#__PURE__*/_jsx("div", {
          className: content,
          "data-test-id": "description",
          children: /*#__PURE__*/_jsx(HtmlSanitizer, {
            settings: {
              html,
              handleClick: navigate
            },
            children: html
          })
        })
      })]
    })
  });
}
Description.defaultProps = {
  html: null,
  navigate: () => {}
};
export default connect(Description);