ndla-ui/es/Concept/Concept.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; };

/*
 * Copyright (c) 2016-present, NDLA.
 *
 * This source code is licensed under the GPLv3 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { getLicenseByAbbreviation } from 'ndla-licenses';
import LicenseByline from '../LicenseByline';
import { createUniversalPortal } from '../utils/createUniversalPortal';

var classes = new BEMHelper({
  name: 'concept',
  prefix: 'c-'
});
var sourceClasses = new BEMHelper({
  name: 'source-list',
  prefix: 'c-'
});

var Concept = function Concept(_ref) {
  var title = _ref.title,
      authors = _ref.authors,
      source = _ref.source,
      content = _ref.content,
      id = _ref.id,
      messages = _ref.messages,
      license = _ref.license,
      visible = _ref.visible,
      closeCallback = _ref.closeCallback,
      dialogRef = _ref.dialogRef,
      children = _ref.children;

  var licenseRights = getLicenseByAbbreviation(license).rights;
  var visibleClass = visible ? 'visible' : null;
  var closeFunc = closeCallback || null;
  return React.createElement(
    'span',
    _extends({}, classes('item'), { id: id }),
    React.createElement(
      'button',
      _extends({
        type: 'button',
        'aria-label': messages.ariaLabel
      }, classes('link')),
      children
    ),
    createUniversalPortal(React.createElement(
      'div',
      _extends({
        ref: dialogRef,
        'aria-hidden': 'true',
        role: 'dialog',
        'data-concept-id': id,
        'aria-labelledby': id,
        'aria-describedby': id
      }, classes('popup', visibleClass)),
      React.createElement(
        'button',
        _extends({}, classes('close', 'u-close'), {
          type: 'button',
          onClick: closeFunc }),
        messages.close
      ),
      React.createElement(
        'h3',
        classes('title'),
        title
      ),
      React.createElement(
        'p',
        classes('content'),
        content
      ),
      React.createElement(
        'div',
        sourceClasses(),
        licenseRights.length > 0 && React.createElement(LicenseByline, {
          className: 'c-source-list__item',
          licenseRights: licenseRights
        }),
        authors.map(function (author) {
          return React.createElement(
            'span',
            _extends({}, sourceClasses('item'), { key: author }),
            author
          );
        }),
        React.createElement(
          'span',
          _extends({}, sourceClasses('item'), { key: source }),
          source
        )
      )
    ), 'body')
  );
};

Concept.propTypes = {
  id: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  authors: PropTypes.arrayOf(PropTypes.string),
  source: PropTypes.string,
  content: PropTypes.string.isRequired,
  messages: PropTypes.shape({
    ariaLabel: PropTypes.string.isRequired,
    close: PropTypes.string.isRequired
  }),
  license: PropTypes.string,
  children: PropTypes.string,
  visible: PropTypes.bool,
  closeCallback: PropTypes.func,
  dialogRef: PropTypes.func
};

export default Concept;