@shopgate/engage/product/components/ProductProperties/GroupedProperties.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import { Accordion } from '@shopgate/pwa-ui-material';
import { i18n } from '@shopgate/engage/core/helpers';
import Lists from "./Lists";
import ListsHTML from "./ListsHTML";
import Wrapper from "./Wrapper";
import { accordion } from "./style";

/**
 * Renders the properties as groups.
 * @param {Object} props The component props.
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const GroupedProperties = ({
  groups
}) => groups.map(group => /*#__PURE__*/_jsx("div", {
  className: accordion,
  children: /*#__PURE__*/_jsx(Accordion, {
    renderLabel: () => group.label || i18n.text(`product.displayGroups.${group.key}`),
    testId: `product-properties-group-${!group.label ? group.key : `${group.key}-${group.label}`}`,
    children: /*#__PURE__*/_jsx(Wrapper, {
      dense: true,
      groupName: group.label || group.key,
      htmlOnly: group.htmlOnly,
      children: group.htmlOnly ? /*#__PURE__*/_jsx(ListsHTML, {
        properties: group.properties
      }) : /*#__PURE__*/_jsx(Lists, {
        properties: group.properties
      })
    })
  })
}, group.key));
export default GroupedProperties;