ndla-ui/es/Frontpage/FrontpageHeader.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 from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { Cross } from 'ndla-icons/action';
import { SearchField, OneColumn, Logo, SafeLink } from 'ndla-ui';
import Modal, { ModalHeader } from 'ndla-modal';
import Button from 'ndla-button';
import { uuid } from 'ndla-util';
import { injectT } from 'ndla-i18n';

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

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

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

export default injectT(FrontpageHeader);