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

Shopgate's ENGAGE library.

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import classNames from 'classnames';
import kebabCase from 'lodash/kebabCase';
import { SurroundPortals } from "../../../components";
import { PORTAL_PRODUCT_BADGES } from "../../../components/constants";
import { jsx as _jsx } from "react/jsx-runtime";
const styles = {
  root: css({
    position: 'absolute',
    paddingLeft: 10,
    left: 0,
    top: 10,
    zIndex: 5,
    transform: 'translate3d(0, 0, 0)',
    display: 'flex',
    pointerEvents: 'none',
    width: '100%',
    ' > *:empty': {
      display: 'none'
    }
  }).toString()
};

/**
 * The ProductBadges component
 * @param {Object} props The component props
 * @returns {JSX.Element}
 */
const ProductBadges = ({
  children,
  location,
  productId,
  portalProps,
  className
}) => {
  const props = useMemo(() => ({
    ...portalProps,
    location,
    productId
  }), [location, portalProps, productId]);
  const locationClass = useMemo(() => {
    if (!location) {
      return '';
    }
    return `product_badges__${kebabCase(location)}`;
  }, [location]);
  return /*#__PURE__*/_jsx("div", {
    className: classNames(styles.root, className, 'product_badges', locationClass),
    children: /*#__PURE__*/_jsx(SurroundPortals, {
      portalName: PORTAL_PRODUCT_BADGES,
      portalProps: props,
      children: children
    })
  });
};
ProductBadges.defaultProps = {
  portalProps: null,
  children: PropTypes.node,
  className: ''
};
export default ProductBadges;