ndla-ui/es/ResourcesWrapper/ResourcesTopicTitle.js

UI component library for NDLA.

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

import { HelpCircleDual } from 'ndla-icons/common';
import { injectT } from 'ndla-i18n';
import Modal, { ModalBody, ModalHeader, ModalCloseButton } from 'ndla-modal';
import { Tooltip } from 'ndla-ui';

import { classes } from './ResourcesWrapper';

import ResourceToggleFilter from '../ResourceGroup/ResourceToggleFilter';

var HelpIcon = function HelpIcon() {
  return React.createElement(
    'div',
    classes('topic-title-icon'),
    React.createElement(HelpCircleDual, {
      className: 'c-icon--22 u-margin-left-tiny ' + 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 = React.createElement(
      'h1',
      classes('topic-title'),
      title
    );
  } else {
    heading = React.createElement(
      'h1',
      classes('topic-title'),
      messages.label
    );
  }
  return React.createElement(
    'header',
    classes('topic-title-wrapper'),
    React.createElement(
      'div',
      null,
      title && React.createElement(
        'p',
        classes('topic-title-label'),
        messages.label
      ),
      heading
    ),
    hasAdditionalResources && React.createElement(
      'div',
      null,
      React.createElement(ResourceToggleFilter, {
        checked: showAdditionalResources,
        label: messages.additionalFilterLabel,
        onClick: toggleAdditionalResources
      }),
      React.createElement(
        Modal,
        {
          narrow: true,
          wrapperFunctionForButton: function wrapperFunctionForButton(activateButton) {
            return React.createElement(
              Tooltip,
              { tooltip: t('resource.dialogTooltip') },
              activateButton
            );
          },
          activateButton: React.createElement(
            'button',
            { className: 'c-button c-button--stripped', type: 'button' },
            React.createElement(HelpIcon, null)
          ) },
        function (onClose) {
          return React.createElement(
            Fragment,
            null,
            React.createElement(
              ModalHeader,
              null,
              React.createElement(ModalCloseButton, {
                title: t('modal.closeModal'),
                onClick: onClose
              })
            ),
            React.createElement(
              ModalBody,
              null,
              React.createElement(
                'h1',
                null,
                t('resource.dialogHeading')
              ),
              React.createElement('hr', null),
              React.createElement(
                'p',
                null,
                t('resource.dialogText1')
              ),
              React.createElement(
                'p',
                null,
                t('resource.dialogText2')
              )
            )
          );
        }
      )
    )
  );
};

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

export default injectT(ResourcesTopicTitle);