ndla-ui
Version:
UI component library for NDLA.
194 lines (165 loc) • 7.43 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Figure = exports.FigureCaption = undefined;
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) 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
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactBemHelper = require('react-bem-helper');
var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);
var _common = require('ndla-icons/common');
var _LicenseByline = require('../LicenseByline');
var _LicenseByline2 = _interopRequireDefault(_LicenseByline);
var _SafeLink = require('../common/SafeLink');
var _SafeLink2 = _interopRequireDefault(_SafeLink);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
var classes = new _reactBemHelper2.default({
name: 'figure',
prefix: 'c-'
});
var FigureCaption = exports.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 _react2.default.createElement(
'figcaption',
classes('caption'),
caption ? _react2.default.createElement(
'div',
classes('info'),
caption
) : null,
_react2.default.createElement(
'footer',
classes('byline'),
_react2.default.createElement(
'div',
classes('byline-licenselist'),
_react2.default.createElement(
_LicenseByline2.default,
{ licenseRights: licenseRights },
_react2.default.createElement(
'span',
classes('byline-authors'),
authors.map(function (author) {
return author.name;
}).join(', ')
),
_react2.default.createElement(
'button',
_extends({
type: 'button',
'data-dialog-trigger-id': id,
'data-dialog-source-id': figureId
}, classes('captionbtn')),
_react2.default.createElement(
'span',
null,
reuseLabel
)
),
children
),
link && _react2.default.createElement(
'div',
classes('link-wrapper'),
_react2.default.createElement(
_SafeLink2.default,
_extends({
to: link.url
}, classes('link'), {
target: link.external ? '_blank' : null,
rel: link.external ? 'noopener noreferrer' : null }),
_react2.default.createElement(
'span',
classes('link-text'),
link.text
),
_react2.default.createElement(_common.Link, null)
),
link.description && _react2.default.createElement(
'p',
classes('link-description'),
link.description
)
)
)
)
);
};
FigureCaption.propTypes = {
figureId: _propTypes2.default.string.isRequired,
id: _propTypes2.default.string.isRequired,
caption: _propTypes2.default.string,
reuseLabel: _propTypes2.default.string.isRequired,
licenseRights: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
children: _propTypes2.default.node,
authors: _propTypes2.default.arrayOf(_propTypes2.default.shape({
name: _propTypes2.default.string.isRequired
})),
link: _propTypes2.default.shape({
url: _propTypes2.default.string.isRequired,
text: _propTypes2.default.string.isRequired,
description: _propTypes2.default.string,
external: _propTypes2.default.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 _react2.default.createElement(
'figure',
_extends({}, classes('', modifiers, typeClass), rest),
noFigcaption ? _react2.default.createElement(
'div',
classes('fullscreen-btn'),
_react2.default.createElement(_common.ZoomOutMap, null)
) : null,
children
);
};
exports.Figure = Figure;
Figure.propTypes = {
id: _propTypes2.default.string.isRequired,
children: _propTypes2.default.node.isRequired,
type: _propTypes2.default.oneOf(['full', 'full-column', 'left', 'small-left', 'right', 'small-right', 'xsmall-right', 'xsmall-left']),
resizeIframe: _propTypes2.default.bool,
noFigcaption: _propTypes2.default.bool
};
Figure.defaultProps = {
type: 'full',
resizeIframe: false,
noFigcaption: false
};
exports.default = Figure;