ndla-ui/lib/Frontpage/FrontpageHeader.js

UI component library for NDLA.

'use strict';

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

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactBemHelper = require('react-bem-helper');

var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);

var _action = require('ndla-icons/action');

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

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

var _ndlaModal2 = _interopRequireDefault(_ndlaModal);

var _ndlaButton = require('ndla-button');

var _ndlaButton2 = _interopRequireDefault(_ndlaButton);

var _ndlaUtil = require('ndla-util');

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

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

var classes = (0, _reactBemHelper2.default)('c-frontpage-header');
var classesMenu = new _reactBemHelper2.default({
  name: 'topic-menu',
  prefix: 'c-'
});

var FrontpageHeader = function FrontpageHeader(_ref) {
  var searchFieldValue = _ref.searchFieldValue,
      onSearchFieldChange = _ref.onSearchFieldChange,
      onSearch = _ref.onSearch,
      searchFieldPlaceholder = _ref.searchFieldPlaceholder,
      links = _ref.links,
      logoTo = _ref.logoTo,
      messages = _ref.messages,
      locale = _ref.locale,
      menuSubject = _ref.menuSubject,
      hideSearch = _ref.hideSearch,
      hideMenu = _ref.hideMenu,
      t = _ref.t;
  return _react2.default.createElement(
    'header',
    classes(),
    _react2.default.createElement('div', classes('inner-background')),
    _react2.default.createElement(
      'div',
      classes('wrapper'),
      _react2.default.createElement(
        _ndlaUi.OneColumn,
        { wide: true, noPadding: true },
        _react2.default.createElement(
          'nav',
          classes('navigation'),
          _react2.default.createElement(
            'ul',
            null,
            links.map(function (link) {
              return _react2.default.createElement(
                'li',
                { key: link.to },
                _react2.default.createElement(
                  _ndlaUi.SafeLink,
                  { to: link.to },
                  link.text
                )
              );
            })
          )
        )
      ),
      _react2.default.createElement(
        _ndlaUi.OneColumn,
        { wide: true, noPadding: true },
        _react2.default.createElement(
          'div',
          classes('content'),
          !hideMenu && _react2.default.createElement(
            _ndlaModal2.default,
            {
              size: 'fullscreen',
              animation: 'subtle',
              backgroundColor: 'gray-dark',
              activateButton: _react2.default.createElement(
                _ndlaButton2.default,
                { className: 'c-frontpage-header__menu-button' },
                'Meny'
              ) },
            function (closeMenu) {
              return _react2.default.createElement(
                'nav',
                null,
                _react2.default.createElement(
                  _ndlaModal.ModalHeader,
                  { modifier: ['white', 'menu'] },
                  _react2.default.createElement(
                    'div',
                    classesMenu('masthead-left'),
                    _react2.default.createElement(
                      'button',
                      _extends({
                        type: 'button'
                      }, classesMenu('close-button'), {
                        onClick: closeMenu }),
                      _react2.default.createElement(_action.Cross, null),
                      _react2.default.createElement(
                        'span',
                        null,
                        'Lukk'
                      )
                    )
                  ),
                  _react2.default.createElement(
                    'div',
                    classesMenu('masthead-right'),
                    _react2.default.createElement(_ndlaUi.Logo, {
                      to: logoTo,
                      label: t('logo.altText'),
                      cssModifier: 'always-show',
                      locale: locale
                    })
                  )
                ),
                _react2.default.createElement(
                  'div',
                  classesMenu('content', 'fill-page'),
                  menuSubject,
                  _react2.default.createElement(
                    'div',
                    classes('main-menu-content'),
                    _react2.default.createElement(
                      'ul',
                      classesMenu('content-type-results'),
                      links.map(function (link) {
                        return _react2.default.createElement(
                          'li',
                          { key: (0, _ndlaUtil.uuid)() },
                          _react2.default.createElement(
                            _ndlaUi.SafeLink,
                            { to: link.to },
                            link.text
                          )
                        );
                      })
                    )
                  )
                )
              );
            }
          ),
          _react2.default.createElement(_ndlaUi.Logo, {
            to: logoTo,
            large: true,
            color: 'currentColor',
            label: t('logo.altText'),
            cssModifier: 'white',
            locale: locale
          }),
          !hideSearch && _react2.default.createElement(_ndlaUi.SearchField, {
            value: searchFieldValue,
            onChange: onSearchFieldChange,
            placeholder: searchFieldPlaceholder,
            messages: messages,
            onSearch: onSearch
          })
        )
      )
    )
  );
};

FrontpageHeader.propTypes = {
  hideSearch: _propTypes2.default.bool, // TODO: Search is temporary hidden as default.
  hideMenu: _propTypes2.default.bool, // TODO: Menu is temporary hidden as default.
  searchFieldValue: _propTypes2.default.string.isRequired,
  onSearchFieldChange: _propTypes2.default.func.isRequired,
  onSearch: _propTypes2.default.func,
  searchFieldPlaceholder: _propTypes2.default.string.isRequired,
  logoTo: _propTypes2.default.string,
  locale: _propTypes2.default.string,
  messages: _propTypes2.default.shape({
    searchFieldTitle: _propTypes2.default.string.isRequired,
    menuButton: _propTypes2.default.string.isRequired
  }).isRequired,
  menuSubject: _propTypes2.default.node.isRequired,
  links: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    to: _propTypes2.default.string.isRequired,
    text: _propTypes2.default.string.isRequired
  })).isRequired,
  t: _propTypes2.default.func.isRequired
};

FrontpageHeader.defaultProps = {
  hideSearch: true,
  hideMenu: true
};

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