ndla-ui/es/ContentCard/ContentCard.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 BEMHelper from 'react-bem-helper';
import PropTypes from 'prop-types';
import { Play } from 'ndla-icons/common';

import SafeLink from '../common/SafeLink';

import BackgroundImage from '../BackgroundImage';

var classes = BEMHelper('c-content-card');

var ContentCard = function ContentCard(_ref) {
  var heading = _ref.heading,
      images = _ref.images,
      description = _ref.description,
      type = _ref.type,
      isFilm = _ref.isFilm,
      toLinkProps = _ref.toLinkProps;
  return React.createElement(
    'article',
    classes(),
    React.createElement(
      SafeLink,
      _extends({}, toLinkProps(), classes('link')),
      React.createElement(
        'header',
        null,
        React.createElement(
          'div',
          classes('image-wrapper'),
          React.createElement(BackgroundImage, { images: images }),
          isFilm && React.createElement(
            'div',
            classes('play-background'),
            React.createElement(Play, null)
          ),
          React.createElement(
            'p',
            classes('type'),
            type
          )
        ),
        React.createElement(
          'h1',
          classes('heading'),
          heading
        )
      ),
      React.createElement(
        'p',
        classes('description'),
        description
      )
    )
  );
};

ContentCard.propTypes = {
  heading: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  images: BackgroundImage.propTypes.images,
  isFilm: PropTypes.bool,
  toLinkProps: PropTypes.func.isRequired
};

ContentCard.defaultProps = {
  isFilm: false
};

export default ContentCard;