@shopgate/engage/product/components/ProductName/ProductName.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import classNames from 'classnames';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { ConditionalWrapper, SurroundPortals } from '@shopgate/engage/components';
import ProductNameContent from "./ProductNameContent";
import { jsx as _jsx } from "react/jsx-runtime";
const styles = {
  wrapper: css({
    [responsiveMediaQuery('>xs', {
      webOnly: true
    })]: {
      wordBreak: 'keep-all !important',
      hyphens: 'none !important'
    }
  }).toString()
};

/**
 * @param {Object} props The component props
 * @returns {JSX.Element}
 */
const ProductName = ({
  name,
  className,
  testId,
  ellipsis,
  portalName,
  portalProps,
  itemProp,
  rows,
  style
}) => /*#__PURE__*/_jsx(ConditionalWrapper, {
  condition: !!portalName,
  wrapper: children => /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: portalName,
    portalProps: portalProps,
    children: children
  }),
  children: /*#__PURE__*/_jsx("div", {
    className: classNames(styles.wrapper, className, 'engage__product__product-name'),
    style: style,
    itemProp: itemProp,
    "data-test-id": testId,
    "aria-label": `${name}.`,
    children: /*#__PURE__*/_jsx(ProductNameContent, {
      name: name,
      ellipsis: ellipsis,
      rows: rows
    })
  })
});
ProductName.defaultProps = {
  name: null,
  className: null,
  ellipsis: true,
  itemProp: null,
  portalName: null,
  portalProps: null,
  style: null,
  rows: null,
  testId: null
};
export default ProductName;