ndla-ui/lib/RelatedArticleList/RelatedArticleList.js

UI component library for NDLA.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RelatedArticle = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactBemHelper = require('react-bem-helper');

var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);

var _ndlaButton = require('ndla-button');

var _ndlaButton2 = _interopRequireDefault(_ndlaButton);

var _SafeLink = require('../common/SafeLink');

var _SafeLink2 = _interopRequireDefault(_SafeLink);

var _SectionHeading = require('../SectionHeading');

var _SectionHeading2 = _interopRequireDefault(_SectionHeading);

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

var classes = new _reactBemHelper2.default({
  name: 'related-articles',
  prefix: 'c-'
});

var RelatedArticle = exports.RelatedArticle = function RelatedArticle(_ref) {
  var title = _ref.title,
      introduction = _ref.introduction,
      icon = _ref.icon,
      modifier = _ref.modifier,
      to = _ref.to,
      linkInfo = _ref.linkInfo;

  var iconWithClass = (0, _react.cloneElement)(icon, { className: 'c-icon--medium' });
  return _react2.default.createElement(
    'article',
    classes('item', modifier),
    _react2.default.createElement(
      'h1',
      classes('title'),
      iconWithClass,
      _react2.default.createElement(
        'span',
        classes('link-wrapper'),
        _react2.default.createElement(
          _SafeLink2.default,
          _extends({
            to: to
          }, classes('link'), {
            target: linkInfo ? '_blank' : null,
            rel: linkInfo ? 'noopener noreferrer' : null }),
          title
        )
      )
    ),
    _react2.default.createElement('p', _extends({}, classes('description'), {
      dangerouslySetInnerHTML: { __html: introduction }
    })),
    linkInfo && _react2.default.createElement(
      'p',
      classes('link-info'),
      linkInfo
    )
  );
};

RelatedArticle.propTypes = {
  icon: _propTypes2.default.node.isRequired,
  title: _propTypes2.default.string.isRequired,
  modifier: _propTypes2.default.string,
  introduction: _propTypes2.default.string.isRequired,
  to: _propTypes2.default.string.isRequired,
  linkInfo: _propTypes2.default.string
};

RelatedArticle.defaultProps = {
  linkInfo: null
};

var RelatedArticleList = function RelatedArticleList(_ref2) {
  var messages = _ref2.messages,
      children = _ref2.children,
      articleCount = _ref2.articleCount,
      dangerouslySetInnerHTML = _ref2.dangerouslySetInnerHTML;

  var clonedChildren = !dangerouslySetInnerHTML ? _react2.default.Children.map(children, function (article, i) {
    return _react2.default.cloneElement(article, {
      modifier: i >= 2 ? article.props.modifier + ' hidden' : article.props.modifier
    });
  }) : null;
  var childrenCount = articleCount || _react2.default.Children.count(children);

  return _react2.default.createElement(
    'section',
    classes(''),
    _react2.default.createElement(
      _SectionHeading2.default,
      { className: classes('component-title').className },
      messages.title
    ),
    _react2.default.createElement(
      'div',
      _extends({}, classes('articles'), {
        dangerouslySetInnerHTML: dangerouslySetInnerHTML }),
      clonedChildren
    ),
    childrenCount > 2 && _react2.default.createElement(
      _ndlaButton2.default,
      _extends({}, classes('button'), {
        'data-showmore': messages.showMore,
        'data-showless': messages.showLess,
        outline: true }),
      messages.showMore
    )
  );
};

RelatedArticleList.propTypes = {
  children: _propTypes2.default.node,
  messages: _propTypes2.default.shape({ title: _propTypes2.default.string.isRequired }),
  dangerouslySetInnerHTML: _propTypes2.default.shape({
    __html: _propTypes2.default.string.isRequired
  }),
  articleCount: _propTypes2.default.number
};
exports.default = RelatedArticleList;