ndla-ui/es/RelatedArticleList/RelatedArticleList.js

UI component library for NDLA.

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; };

import React, { cloneElement } from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import Button from 'ndla-button';
import SafeLink from '../common/SafeLink';
import SectionHeading from '../SectionHeading';

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

export var 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 = cloneElement(icon, { className: 'c-icon--medium' });
  return React.createElement(
    'article',
    classes('item', modifier),
    React.createElement(
      'h1',
      classes('title'),
      iconWithClass,
      React.createElement(
        'span',
        classes('link-wrapper'),
        React.createElement(
          SafeLink,
          _extends({
            to: to
          }, classes('link'), {
            target: linkInfo ? '_blank' : null,
            rel: linkInfo ? 'noopener noreferrer' : null }),
          title
        )
      )
    ),
    React.createElement('p', _extends({}, classes('description'), {
      dangerouslySetInnerHTML: { __html: introduction }
    })),
    linkInfo && React.createElement(
      'p',
      classes('link-info'),
      linkInfo
    )
  );
};

RelatedArticle.propTypes = {
  icon: PropTypes.node.isRequired,
  title: PropTypes.string.isRequired,
  modifier: PropTypes.string,
  introduction: PropTypes.string.isRequired,
  to: PropTypes.string.isRequired,
  linkInfo: PropTypes.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 ? React.Children.map(children, function (article, i) {
    return React.cloneElement(article, {
      modifier: i >= 2 ? article.props.modifier + ' hidden' : article.props.modifier
    });
  }) : null;
  var childrenCount = articleCount || React.Children.count(children);

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

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