ndla-ui/es/Subject/SubjectNewContent.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, { Fragment } from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { ChevronRight } from 'ndla-icons/common';
import { ContentTypeBadge, SafeLink } from 'ndla-ui';

import { SubjectSectionTitle } from './Subject';

var classes = BEMHelper('c-subject-new-content');

var SubjectNewContent = function SubjectNewContent(_ref) {
  var heading = _ref.heading,
      content = _ref.content;
  return React.createElement(
    'section',
    classes(),
    React.createElement(
      SubjectSectionTitle,
      { className: classes('heading').className },
      heading
    ),
    React.createElement(
      'nav',
      classes('content'),
      React.createElement(
        'ul',
        classes('list'),
        content.map(function (item) {
          return React.createElement(
            'li',
            _extends({}, classes('item'), { key: item.url }),
            React.createElement(
              'div',
              classes('left-wrapper'),
              React.createElement(ContentTypeBadge, {
                type: item.contentType,
                size: 'x-small',
                background: true,
                outline: true
              }),
              React.createElement(
                'div',
                classes('content-link'),
                React.createElement(
                  'div',
                  classes('date'),
                  item.formattedDate
                ),
                React.createElement(
                  SafeLink,
                  _extends({ to: item.url }, classes('link')),
                  item.name
                ),
                React.createElement(
                  'div',
                  classes('topic-name'),
                  item.topicName.map(function (topic, index) {
                    return React.createElement(
                      Fragment,
                      { key: topic },
                      index > 0 && React.createElement(ChevronRight, null),
                      topic
                    );
                  })
                )
              )
            )
          );
        })
      )
    )
  );
};

SubjectNewContent.propTypes = {
  heading: PropTypes.string.isRequired,
  content: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    topicName: PropTypes.arrayOf(PropTypes.string).isRequired,
    formattedDate: PropTypes.string.isRequired,
    contentType: PropTypes.string.isRequired
  })).isRequired
};

export default SubjectNewContent;