@primer/components/lib/ActionList2/Description.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Description = void 0;

var _react = _interopRequireDefault(require("react"));

var _Box = _interopRequireDefault(require("../Box"));

var _sx = require("../sx");

var _Truncate = _interopRequireDefault(require("../Truncate"));

var _Item = require("./Item");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const Description = ({
  variant = 'inline',
  sx = {},
  ...props
}) => {
  const styles = {
    fontSize: 0,
    lineHeight: '16px',
    flexGrow: 1,
    flexBasis: 0,
    minWidth: 0,
    marginLeft: variant === 'block' ? 0 : 2
  };
  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
  }, ({
    blockDescriptionId,
    inlineDescriptionId,
    disabled
  }) => variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
    as: "span",
    sx: (0, _sx.merge)({ ...styles,
      color: disabled ? 'fg.disabled' : 'fg.muted'
    }, sx),
    id: blockDescriptionId
  }, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
    id: inlineDescriptionId,
    sx: (0, _sx.merge)({ ...styles,
      color: disabled ? 'fg.disabled' : 'fg.muted'
    }, sx),
    title: props.children,
    inline: true,
    maxWidth: "100%"
  }, props.children));
};

exports.Description = Description;
Description.displayName = "Description";