@ndla/ui 8.2.5 → 9.0.0

package/lib/Notion/NotionVisualElement.d.ts

@@ -1,11 +1,8 @@
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree. *
- */
+import { ReactNode } from 'react';
 import { Copyright } from '../types';
 export declare type NotionVisualElementType = {
+    element?: ReactNode;
+    type?: 'video' | 'image' | 'h5p';
     resource?: string;
     title?: string;
     url?: string;
@@ -17,6 +14,8 @@ export declare type NotionVisualElementType = {
 };
 interface Props {
     visualElement: NotionVisualElementType;
+    id: string;
+    figureId: string;
 }
-declare const NotionVisualElement: ({ visualElement }: Props) => JSX.Element;
+declare const NotionVisualElement: ({ visualElement, id, figureId }: Props) => JSX.Element;
 export default NotionVisualElement;

package/lib/Notion/NotionVisualElement.js

@@ -5,34 +5,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@emotion/core");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _FigureNotion = _interopRequireDefault(require("./FigureNotion"));
 
-var _core = require("@emotion/core");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree. *
- */
-var supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external'];
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "fifnyn-StyledIframe",
+  styles: "min-height:400px;;label:StyledIframe;"
+} : {
+  name: "fifnyn-StyledIframe",
+  styles: "min-height:400px;;label:StyledIframe;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvblZpc3VhbEVsZW1lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVXIiwiZmlsZSI6Ik5vdGlvblZpc3VhbEVsZW1lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjItcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLiAqXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IENvcHlyaWdodCB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBGaWd1cmVOb3Rpb24gZnJvbSAnLi9GaWd1cmVOb3Rpb24nO1xuXG5jb25zdCBTdHlsZWRJZnJhbWUgPSBzdHlsZWQuaWZyYW1lPHsgdHlwZTogc3RyaW5nIH0+YFxuICAkeyhwcm9wcykgPT5cbiAgICBwcm9wcy50eXBlID09PSAndmlkZW8nXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBtaW4taGVpZ2h0OiA0MDBweDtcbiAgICAgICAgYFxuICAgICAgOiAnJ31cbmA7XG5cbmV4cG9ydCB0eXBlIE5vdGlvblZpc3VhbEVsZW1lbnRUeXBlID0ge1xuICBlbGVtZW50PzogUmVhY3ROb2RlO1xuICB0eXBlPzogJ3ZpZGVvJyB8ICdpbWFnZScgfCAnaDVwJztcbiAgcmVzb3VyY2U/OiBzdHJpbmc7XG4gIHRpdGxlPzogc3RyaW5nO1xuICB1cmw/OiBzdHJpbmc7XG4gIGNvcHlyaWdodD86IFBhcnRpYWw8Q29weXJpZ2h0PjtcbiAgaW1hZ2U/OiB7XG4gICAgc3JjOiBzdHJpbmc7XG4gICAgYWx0Pzogc3RyaW5nO1xuICB9O1xufTtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdmlzdWFsRWxlbWVudDogTm90aW9uVmlzdWFsRWxlbWVudFR5cGU7XG4gIGlkOiBzdHJpbmc7XG4gIGZpZ3VyZUlkOiBzdHJpbmc7XG59XG5jb25zdCBzdXBwb3J0ZWRFbWJlZFR5cGVzID0gWydicmlnaHRjb3ZlJywgJ2g1cCcsICdpZnJhbWUnLCAnZXh0ZXJuYWwnLCAnaW1hZ2UnXTtcblxuY29uc3QgZ2V0VHlwZSA9IChyZXNvdXJjZTogc3RyaW5nKSA9PiB7XG4gIGlmIChyZXNvdXJjZSA9PT0gJ2JyaWdodGNvdmUnKSB7XG4gICAgcmV0dXJuICd2aWRlbyc7XG4gIH1cbiAgaWYgKHJlc291cmNlID09PSAnaW1hZ2UnKSB7XG4gICAgcmV0dXJuICdpbWFnZSc7XG4gIH1cbiAgcmV0dXJuICdoNXAnO1xufTtcblxuY29uc3QgTm90aW9uVmlzdWFsRWxlbWVudCA9ICh7IHZpc3VhbEVsZW1lbnQsIGlkLCBmaWd1cmVJZCB9OiBQcm9wcykgPT4ge1xuICBpZiAoIXZpc3VhbEVsZW1lbnQucmVzb3VyY2UgfHwgIXN1cHBvcnRlZEVtYmVkVHlwZXMuaW5jbHVkZXModmlzdWFsRWxlbWVudC5yZXNvdXJjZSkpIHtcbiAgICByZXR1cm4gPHA+RW1iZWQgdHlwZSBpcyBub3Qgc3VwcG9ydGVkITwvcD47XG4gIH1cblxuICBjb25zdCB0eXBlID0gZ2V0VHlwZSh2aXN1YWxFbGVtZW50LnJlc291cmNlKTtcblxuICByZXR1cm4gKFxuICAgIDxGaWd1cmVOb3Rpb25cbiAgICAgIHJlc2l6ZUlmcmFtZVxuICAgICAgaWQ9e2lkfVxuICAgICAgZmlndXJlSWQ9e2ZpZ3VyZUlkfVxuICAgICAgdGl0bGU9e3Zpc3VhbEVsZW1lbnQudGl0bGUgPz8gJyd9XG4gICAgICBjb3B5cmlnaHQ9e3Zpc3VhbEVsZW1lbnQuY29weXJpZ2h0fVxuICAgICAgbGljZW5zZVN0cmluZz17dmlzdWFsRWxlbWVudC5jb3B5cmlnaHQ/LmxpY2Vuc2U/LmxpY2Vuc2UgPz8gJyd9XG4gICAgICB0eXBlPXt0eXBlfT5cbiAgICAgIHt2aXN1YWxFbGVtZW50LmltYWdlPy5zcmMgPyAoXG4gICAgICAgIDxpbWcgc3JjPXt2aXN1YWxFbGVtZW50LmltYWdlPy5zcmN9IGFsdD17dmlzdWFsRWxlbWVudC5pbWFnZS5hbHR9IC8+XG4gICAgICApIDogKFxuICAgICAgICA8U3R5bGVkSWZyYW1lIHR5cGU9e3R5cGV9IHNyYz17dmlzdWFsRWxlbWVudC51cmx9IHRpdGxlPXt2aXN1YWxFbGVtZW50LnRpdGxlfSAvPlxuICAgICAgKX1cbiAgICA8L0ZpZ3VyZU5vdGlvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE5vdGlvblZpc3VhbEVsZW1lbnQ7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var StyledIframe = (0, _styledBase["default"])("iframe", {
+  target: "e1hql2mu0",
+  label: "StyledIframe"
+})(function (props) {
+  return props.type === 'video' ? _ref : '';
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk5vdGlvblZpc3VhbEVsZW1lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlvRCIsImZpbGUiOiJOb3Rpb25WaXN1YWxFbGVtZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIyLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS4gKlxuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBDb3B5cmlnaHQgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgRmlndXJlTm90aW9uIGZyb20gJy4vRmlndXJlTm90aW9uJztcblxuY29uc3QgU3R5bGVkSWZyYW1lID0gc3R5bGVkLmlmcmFtZTx7IHR5cGU6IHN0cmluZyB9PmBcbiAgJHsocHJvcHMpID0+XG4gICAgcHJvcHMudHlwZSA9PT0gJ3ZpZGVvJ1xuICAgICAgPyBjc3NgXG4gICAgICAgICAgbWluLWhlaWdodDogNDAwcHg7XG4gICAgICAgIGBcbiAgICAgIDogJyd9XG5gO1xuXG5leHBvcnQgdHlwZSBOb3Rpb25WaXN1YWxFbGVtZW50VHlwZSA9IHtcbiAgZWxlbWVudD86IFJlYWN0Tm9kZTtcbiAgdHlwZT86ICd2aWRlbycgfCAnaW1hZ2UnIHwgJ2g1cCc7XG4gIHJlc291cmNlPzogc3RyaW5nO1xuICB0aXRsZT86IHN0cmluZztcbiAgdXJsPzogc3RyaW5nO1xuICBjb3B5cmlnaHQ/OiBQYXJ0aWFsPENvcHlyaWdodD47XG4gIGltYWdlPzoge1xuICAgIHNyYzogc3RyaW5nO1xuICAgIGFsdD86IHN0cmluZztcbiAgfTtcbn07XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHZpc3VhbEVsZW1lbnQ6IE5vdGlvblZpc3VhbEVsZW1lbnRUeXBlO1xuICBpZDogc3RyaW5nO1xuICBmaWd1cmVJZDogc3RyaW5nO1xufVxuY29uc3Qgc3VwcG9ydGVkRW1iZWRUeXBlcyA9IFsnYnJpZ2h0Y292ZScsICdoNXAnLCAnaWZyYW1lJywgJ2V4dGVybmFsJywgJ2ltYWdlJ107XG5cbmNvbnN0IGdldFR5cGUgPSAocmVzb3VyY2U6IHN0cmluZykgPT4ge1xuICBpZiAocmVzb3VyY2UgPT09ICdicmlnaHRjb3ZlJykge1xuICAgIHJldHVybiAndmlkZW8nO1xuICB9XG4gIGlmIChyZXNvdXJjZSA9PT0gJ2ltYWdlJykge1xuICAgIHJldHVybiAnaW1hZ2UnO1xuICB9XG4gIHJldHVybiAnaDVwJztcbn07XG5cbmNvbnN0IE5vdGlvblZpc3VhbEVsZW1lbnQgPSAoeyB2aXN1YWxFbGVtZW50LCBpZCwgZmlndXJlSWQgfTogUHJvcHMpID0+IHtcbiAgaWYgKCF2aXN1YWxFbGVtZW50LnJlc291cmNlIHx8ICFzdXBwb3J0ZWRFbWJlZFR5cGVzLmluY2x1ZGVzKHZpc3VhbEVsZW1lbnQucmVzb3VyY2UpKSB7XG4gICAgcmV0dXJuIDxwPkVtYmVkIHR5cGUgaXMgbm90IHN1cHBvcnRlZCE8L3A+O1xuICB9XG5cbiAgY29uc3QgdHlwZSA9IGdldFR5cGUodmlzdWFsRWxlbWVudC5yZXNvdXJjZSk7XG5cbiAgcmV0dXJuIChcbiAgICA8RmlndXJlTm90aW9uXG4gICAgICByZXNpemVJZnJhbWVcbiAgICAgIGlkPXtpZH1cbiAgICAgIGZpZ3VyZUlkPXtmaWd1cmVJZH1cbiAgICAgIHRpdGxlPXt2aXN1YWxFbGVtZW50LnRpdGxlID8/ICcnfVxuICAgICAgY29weXJpZ2h0PXt2aXN1YWxFbGVtZW50LmNvcHlyaWdodH1cbiAgICAgIGxpY2Vuc2VTdHJpbmc9e3Zpc3VhbEVsZW1lbnQuY29weXJpZ2h0Py5saWNlbnNlPy5saWNlbnNlID8/ICcnfVxuICAgICAgdHlwZT17dHlwZX0+XG4gICAgICB7dmlzdWFsRWxlbWVudC5pbWFnZT8uc3JjID8gKFxuICAgICAgICA8aW1nIHNyYz17dmlzdWFsRWxlbWVudC5pbWFnZT8uc3JjfSBhbHQ9e3Zpc3VhbEVsZW1lbnQuaW1hZ2UuYWx0fSAvPlxuICAgICAgKSA6IChcbiAgICAgICAgPFN0eWxlZElmcmFtZSB0eXBlPXt0eXBlfSBzcmM9e3Zpc3VhbEVsZW1lbnQudXJsfSB0aXRsZT17dmlzdWFsRWxlbWVudC50aXRsZX0gLz5cbiAgICAgICl9XG4gICAgPC9GaWd1cmVOb3Rpb24+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBOb3Rpb25WaXN1YWxFbGVtZW50O1xuIl19 */");
+var supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external', 'image'];
+
+var getType = function getType(resource) {
+  if (resource === 'brightcove') {
+    return 'video';
+  }
+
+  if (resource === 'image') {
+    return 'image';
+  }
+
+  return 'h5p';
+};
 
-var NotionVisualElement = function NotionVisualElement(_ref) {
-  var _visualElement$title, _visualElement$copyri, _visualElement$copyri2, _visualElement$copyri3;
+var NotionVisualElement = function NotionVisualElement(_ref2) {
+  var _visualElement$title, _visualElement$copyri, _visualElement$copyri2, _visualElement$copyri3, _visualElement$image, _visualElement$image2;
 
-  var visualElement = _ref.visualElement;
-  var id = '1';
-  var figureId = 'figure-1';
+  var visualElement = _ref2.visualElement,
+      id = _ref2.id,
+      figureId = _ref2.figureId;
 
   if (!visualElement.resource || !supportedEmbedTypes.includes(visualElement.resource)) {
     return (0, _core.jsx)("p", null, "Embed type is not supported!");
   }
 
-  var type = visualElement.resource === 'brightcove' ? 'video' : 'h5p';
+  var type = getType(visualElement.resource);
   return (0, _core.jsx)(_FigureNotion["default"], {
     resizeIframe: true,
     id: id,
@@ -41,9 +67,13 @@ var NotionVisualElement = function NotionVisualElement(_ref) {
     copyright: visualElement.copyright,
     licenseString: (_visualElement$copyri = (_visualElement$copyri2 = visualElement.copyright) === null || _visualElement$copyri2 === void 0 ? void 0 : (_visualElement$copyri3 = _visualElement$copyri2.license) === null || _visualElement$copyri3 === void 0 ? void 0 : _visualElement$copyri3.license) !== null && _visualElement$copyri !== void 0 ? _visualElement$copyri : '',
     type: type
-  }, (0, _core.jsx)("iframe", {
-    title: visualElement.title,
-    src: visualElement.url
+  }, ((_visualElement$image = visualElement.image) === null || _visualElement$image === void 0 ? void 0 : _visualElement$image.src) ? (0, _core.jsx)("img", {
+    src: (_visualElement$image2 = visualElement.image) === null || _visualElement$image2 === void 0 ? void 0 : _visualElement$image2.src,
+    alt: visualElement.image.alt
+  }) : (0, _core.jsx)(StyledIframe, {
+    type: type,
+    src: visualElement.url,
+    title: visualElement.title
   }));
 };