ndla-ui/es/Figure/Figure.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; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

/**
 * Copyright (c) 2016-present, NDLA.
 *
 * This source code is licensed under the GPLv3 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

// N.B These component is used to render static markup serverside
// Any interactivty is added by scripts located in the ndla-article-scripts package

import React from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { ZoomOutMap, Link as LinkIcon } from 'ndla-icons/common';
import LicenseByline from '../LicenseByline';
import SafeLink from '../common/SafeLink';

var classes = new BEMHelper({
  name: 'figure',
  prefix: 'c-'
});

export var FigureCaption = function FigureCaption(_ref) {
  var figureId = _ref.figureId,
      id = _ref.id,
      children = _ref.children,
      caption = _ref.caption,
      authors = _ref.authors,
      reuseLabel = _ref.reuseLabel,
      licenseRights = _ref.licenseRights,
      link = _ref.link;
  return React.createElement(
    'figcaption',
    classes('caption'),
    caption ? React.createElement(
      'div',
      classes('info'),
      caption
    ) : null,
    React.createElement(
      'footer',
      classes('byline'),
      React.createElement(
        'div',
        classes('byline-licenselist'),
        React.createElement(
          LicenseByline,
          { licenseRights: licenseRights },
          React.createElement(
            'span',
            classes('byline-authors'),
            authors.map(function (author) {
              return author.name;
            }).join(', ')
          ),
          React.createElement(
            'button',
            _extends({
              type: 'button',
              'data-dialog-trigger-id': id,
              'data-dialog-source-id': figureId
            }, classes('captionbtn')),
            React.createElement(
              'span',
              null,
              reuseLabel
            )
          ),
          children
        ),
        link && React.createElement(
          'div',
          classes('link-wrapper'),
          React.createElement(
            SafeLink,
            _extends({
              to: link.url
            }, classes('link'), {
              target: link.external ? '_blank' : null,
              rel: link.external ? 'noopener noreferrer' : null }),
            React.createElement(
              'span',
              classes('link-text'),
              link.text
            ),
            React.createElement(LinkIcon, null)
          ),
          link.description && React.createElement(
            'p',
            classes('link-description'),
            link.description
          )
        )
      )
    )
  );
};

FigureCaption.propTypes = {
  figureId: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  caption: PropTypes.string,
  reuseLabel: PropTypes.string.isRequired,
  licenseRights: PropTypes.arrayOf(PropTypes.string).isRequired,
  children: PropTypes.node,
  authors: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired
  })),
  link: PropTypes.shape({
    url: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    description: PropTypes.string,
    external: PropTypes.bool
  })
};

FigureCaption.defaultProps = {
  link: null
};

var Figure = function Figure(_ref2) {
  var children = _ref2.children,
      type = _ref2.type,
      resizeIframe = _ref2.resizeIframe,
      noFigcaption = _ref2.noFigcaption,
      rest = _objectWithoutProperties(_ref2, ['children', 'type', 'resizeIframe', 'noFigcaption']);

  var typeClass = 'u-float-' + type;

  var modifiers = [];

  if (resizeIframe) {
    modifiers.push('resize');
  }

  if (type === 'full-column') {
    modifiers.push('full-column');
  }

  return React.createElement(
    'figure',
    _extends({}, classes('', modifiers, typeClass), rest),
    noFigcaption ? React.createElement(
      'div',
      classes('fullscreen-btn'),
      React.createElement(ZoomOutMap, null)
    ) : null,
    children
  );
};

export { Figure };
Figure.propTypes = {
  id: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  type: PropTypes.oneOf(['full', 'full-column', 'left', 'small-left', 'right', 'small-right', 'xsmall-right', 'xsmall-left']),
  resizeIframe: PropTypes.bool,
  noFigcaption: PropTypes.bool
};

Figure.defaultProps = {
  type: 'full',
  resizeIframe: false,
  noFigcaption: false
};

export default Figure;