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

/**
 * Copyright (c) 2017-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 This 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 Dialog from '../Dialog';
import { ContributorShape, LicenseShape } from '../shapes';
import { classLicenses, FigureLicenseByline, FigureLicenseCta } from './FigureLicense';

export var FigureFullscreenDialog = function FigureFullscreenDialog(_ref) {
  var children = _ref.children,
      messages = _ref.messages,
      id = _ref.id,
      authors = _ref.authors,
      origin = _ref.origin,
      title = _ref.title,
      actionButtons = _ref.actionButtons,
      license = _ref.license,
      caption = _ref.caption,
      reuseLabel = _ref.reuseLabel;

  var headingLabelId = 'heading-' + id;
  return React.createElement(
    Dialog,
    {
      id: id,
      labelledby: headingLabelId,
      messages: messages,
      modifier: 'fullscreen' },
    React.createElement(
      'div',
      classLicenses('', 'fullscreen'),
      React.createElement(
        'div',
        classLicenses('content'),
        React.createElement(
          'button',
          _extends({}, classLicenses('image-wrapper'), {
            type: 'button',
            'aria-label': messages.zoomImageButtonLabel }),
          children
        ),
        React.createElement(
          'h1',
          _extends({ id: headingLabelId }, classLicenses('image-title')),
          title
        ),
        caption,
        React.createElement(
          'p',
          null,
          React.createElement(
            'button',
            { className: 'c-figure__captionbtn', type: 'button' },
            React.createElement(
              'span',
              null,
              reuseLabel
            )
          )
        ),
        React.createElement(
          'div',
          classLicenses('hidden-content'),
          React.createElement(
            'div',
            null,
            React.createElement(FigureLicenseByline, { license: license, messages: messages })
          ),
          React.createElement(
            FigureLicenseCta,
            {
              authors: authors,
              title: title,
              origin: origin,
              messages: messages },
            actionButtons
          )
        )
      )
    )
  );
};

FigureFullscreenDialog.propTypes = {
  id: PropTypes.string.isRequired,
  children: PropTypes.node,
  actionButtons: PropTypes.node.isRequired,
  origin: PropTypes.string,
  authors: PropTypes.arrayOf(ContributorShape),
  messages: PropTypes.shape({
    zoomImageButtonLabel: PropTypes.string.isRequired,
    modelPremission: PropTypes.string,
    close: PropTypes.string.isRequired,
    rulesForUse: PropTypes.string.isRequired,
    source: PropTypes.string.isRequired,
    learnAboutLicenses: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired
  }).isRequired,
  title: PropTypes.string.isRequired,
  caption: PropTypes.string.isRequired,
  reuseLabel: PropTypes.string,
  license: LicenseShape.isRequired
};