ndla-ui/lib/ResourcesWrapper/ResourcesTopicTitle.js

UI component library for NDLA.

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _common = require('ndla-icons/common');

var _ndlaI18n = require('ndla-i18n');

var _ndlaModal = require('ndla-modal');

var _ndlaModal2 = _interopRequireDefault(_ndlaModal);

var _ndlaUi = require('ndla-ui');

var _ResourcesWrapper = require('./ResourcesWrapper');

var _ResourceToggleFilter = require('../ResourceGroup/ResourceToggleFilter');

var _ResourceToggleFilter2 = _interopRequireDefault(_ResourceToggleFilter);

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

var HelpIcon = function HelpIcon() {
  return _react2.default.createElement(
    'div',
    (0, _ResourcesWrapper.classes)('topic-title-icon'),
    _react2.default.createElement(_common.HelpCircleDual, {
      className: 'c-icon--22 u-margin-left-tiny ' + (0, _ResourcesWrapper.classes)('icon').className
    })
  );
};

var ResourcesTopicTitle = function ResourcesTopicTitle(_ref) {
  var title = _ref.title,
      hasAdditionalResources = _ref.hasAdditionalResources,
      toggleAdditionalResources = _ref.toggleAdditionalResources,
      showAdditionalResources = _ref.showAdditionalResources,
      messages = _ref.messages,
      t = _ref.t;

  // Fix for heading while title not required when ready.
  var heading = void 0;
  if (title) {
    heading = _react2.default.createElement(
      'h1',
      (0, _ResourcesWrapper.classes)('topic-title'),
      title
    );
  } else {
    heading = _react2.default.createElement(
      'h1',
      (0, _ResourcesWrapper.classes)('topic-title'),
      messages.label
    );
  }
  return _react2.default.createElement(
    'header',
    (0, _ResourcesWrapper.classes)('topic-title-wrapper'),
    _react2.default.createElement(
      'div',
      null,
      title && _react2.default.createElement(
        'p',
        (0, _ResourcesWrapper.classes)('topic-title-label'),
        messages.label
      ),
      heading
    ),
    hasAdditionalResources && _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(_ResourceToggleFilter2.default, {
        checked: showAdditionalResources,
        label: messages.additionalFilterLabel,
        onClick: toggleAdditionalResources
      }),
      _react2.default.createElement(
        _ndlaModal2.default,
        {
          narrow: true,
          wrapperFunctionForButton: function wrapperFunctionForButton(activateButton) {
            return _react2.default.createElement(
              _ndlaUi.Tooltip,
              { tooltip: t('resource.dialogTooltip') },
              activateButton
            );
          },
          activateButton: _react2.default.createElement(
            'button',
            { className: 'c-button c-button--stripped', type: 'button' },
            _react2.default.createElement(HelpIcon, null)
          ) },
        function (onClose) {
          return _react2.default.createElement(
            _react.Fragment,
            null,
            _react2.default.createElement(
              _ndlaModal.ModalHeader,
              null,
              _react2.default.createElement(_ndlaModal.ModalCloseButton, {
                title: t('modal.closeModal'),
                onClick: onClose
              })
            ),
            _react2.default.createElement(
              _ndlaModal.ModalBody,
              null,
              _react2.default.createElement(
                'h1',
                null,
                t('resource.dialogHeading')
              ),
              _react2.default.createElement('hr', null),
              _react2.default.createElement(
                'p',
                null,
                t('resource.dialogText1')
              ),
              _react2.default.createElement(
                'p',
                null,
                t('resource.dialogText2')
              )
            )
          );
        }
      )
    )
  );
};

/* eslint-disable no-console */
ResourcesTopicTitle.propTypes = {
  title: _propTypes2.default.string, // Should be required
  toggleAdditionalResources: _propTypes2.default.func.isRequired,
  hasAdditionalResources: _propTypes2.default.bool.isRequired,
  showAdditionalResources: _propTypes2.default.bool.isRequired,
  t: _propTypes2.default.func.isRequired,
  messages: _propTypes2.default.shape({
    label: _propTypes2.default.string.isRequired,
    additionalFilterLabel: _propTypes2.default.string.isRequired
  }).isRequired
};

exports.default = (0, _ndlaI18n.injectT)(ResourcesTopicTitle);