@shopify/polaris/dist/esm/components/DescriptionList/DescriptionList.js

Shopify’s product component library

import React$1 from 'react';
import { classNames } from '../../utilities/css.js';
import styles from './DescriptionList.scss.js';

function DescriptionList({
  items,
  spacing = 'loose'
}) {
  // There's no good key to give React so using the index is a last resport.
  // we can't use the term/description value as it may be a react component
  // which can't be stringified
  var terms = items.reduce((allTerms, {
    term,
    description
  }, index) => [...allTerms, /*#__PURE__*/React$1.createElement("dt", {
    key: "dt".concat(index),
    className: styles.Term
  }, term), /*#__PURE__*/React$1.createElement("dd", {
    key: "dd".concat(index),
    className: styles.Description
  }, description)], []);
  var className = classNames(styles.DescriptionList, spacing === 'tight' && styles.spacingTight);
  return /*#__PURE__*/React$1.createElement("dl", {
    className: className
  }, terms);
}

export { DescriptionList };