ndla-ui/es/Subject/SubjectHeader.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 { breakpoints } from 'ndla-util';

import OneColumn from '../Layout/OneColumn';

var classes = BEMHelper('c-subject-header');

var SubjectHeader = function SubjectHeader(_ref) {
  var images = _ref.images,
      heading = _ref.heading;
  return React.createElement(
    'header',
    classes(),
    images && images.map(function (image) {
      return image.types.map(function (type) {
        return React.createElement('div', _extends({
          key: '' + image.url + type
        }, classes('background', type), {
          style: { backgroundImage: 'url(' + image.url + ')' }
        }));
      });
    }),
    React.createElement(
      OneColumn,
      { noPadding: true },
      React.createElement(
        'h1',
        classes('heading'),
        heading
      )
    )
  );
};

SubjectHeader.propTypes = {
  images: PropTypes.arrayOf(PropTypes.shape({
    url: PropTypes.string.isRequired,
    types: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(breakpoints))).isRequired
  })),
  heading: PropTypes.string.isRequired
};

SubjectHeader.defaultProps = {
  images: null
};

export default SubjectHeader;