@helpscout/hsds-react/components/ArticleCard/ArticleCard.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.ArticleCard = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Text = _interopRequireDefault(require("../Text"));

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

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = _interopRequireDefault(require("lodash.isstring"));

var _ArticleCard = require("./ArticleCard.css");

var _jsxRuntime = require("react/jsx-runtime");

var ArticleCard = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(ArticleCard, _React$PureComponent);

  function ArticleCard() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;

    _this.renderTitle = function () {
      var _this$props = _this.props,
          title = _this$props.title,
          titleLimit = _this$props.titleLimit,
          titleSize = _this$props.titleSize;
      return !!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleCard.TitleUI, {
        className: "c-ArticleCard__title",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
          size: titleSize,
          weight: "500",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
            limit: titleLimit,
            type: "end",
            children: title
          })
        })
      });
    };

    _this.renderContent = function () {
      var content = _this.props.content;
      return !!content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleCard.ContentUI, {
        className: "c-ArticleCard__content",
        children: _this.renderContentMarkup()
      });
    };

    _this.renderFooter = function () {
      var footer = _this.props.footer;
      return !!footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleCard.FooterUI, {
        className: "c-ArticleCard__footer",
        children: footer
      });
    };

    _this.renderMetaHeader = function () {
      var metaHeader = _this.props.metaHeader;
      return !!metaHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleCard.MetaHeaderUI, {
        className: "c-ArticleCard__metaHeader",
        children: metaHeader
      });
    };

    return _this;
  }

  var _proto = ArticleCard.prototype;

  _proto.renderContentMarkup = function renderContentMarkup() {
    var _this$props2 = this.props,
        content = _this$props2.content,
        contentLimit = _this$props2.contentLimit,
        contentSize = _this$props2.contentSize;

    if ((0, _lodash.default)(content)) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
        block: true,
        className: "c-ArticleCard__contentText",
        size: contentSize,
        shade: "muted",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
          limit: contentLimit,
          type: "end",
          children: content
        })
      });
    }

    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "c-ArticleCard__contentMarkup",
      children: content
    });
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        className = _this$props3.className,
        content = _this$props3.content,
        contentLimit = _this$props3.contentLimit,
        contentSize = _this$props3.contentSize,
        dataCy = _this$props3['data-cy'],
        footer = _this$props3.footer,
        isHovered = _this$props3.isHovered,
        metaHeader = _this$props3.metaHeader,
        title = _this$props3.title,
        titleLimit = _this$props3.titleLimit,
        titleSize = _this$props3.titleSize,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["className", "content", "contentLimit", "contentSize", "data-cy", "footer", "isHovered", "metaHeader", "title", "titleLimit", "titleSize"]);
    var componentClassName = (0, _classnames.default)('c-ArticleCard', isHovered && 'is-hovered', className);
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ArticleCard.ArticleCardUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      children: [this.renderMetaHeader(), this.renderTitle(), this.renderContent(), this.renderFooter()]
    }));
  };

  return ArticleCard;
}(_react.default.PureComponent);

exports.ArticleCard = ArticleCard;
ArticleCard.defaultProps = {
  contentLimit: 160,
  contentSize: 13,
  'data-cy': 'ArticleCard',
  isHovered: false,
  titleLimit: 120,
  titleSize: 13
};
ArticleCard.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Content of the card. Will be truncated based on the contentLimit prop if content is a string. */
  content: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.string]),

  /** The amount of characters to keep before truncation on the content string. */
  contentLimit: _propTypes.default.number,

  /** The `Text` font-size for the content. */
  contentSize: _propTypes.default.number,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Element that will be displayed below the content */
  footer: _propTypes.default.any,

  /** Renders hovered styles. */
  isHovered: _propTypes.default.bool,

  /** Element that will be displayed above the title */
  metaHeader: _propTypes.default.any,

  /** Title of the card. Will be truncated based on the titleLimit prop */
  title: _propTypes.default.string,

  /** The amount of characters to keep before truncation on the title string. */
  titleLimit: _propTypes.default.number,

  /** The `Text` font-size for the title. */
  titleSize: _propTypes.default.number
};
var _default = ArticleCard;
exports.default = _default;