@ndla/ui 36.0.2 → 37.0.1

package/lib/AudioPlayer/initAudioPlayers.d.ts

@@ -1,3 +1,4 @@
 import { Locale } from '../types';
+export declare const truncateDescription: (el: HTMLElement, readMoreLabel: string | null) => void;
 declare const initAudioPlayers: (locale: Locale) => void;
 export default initAudioPlayers;

package/lib/AudioPlayer/initAudioPlayers.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.truncateDescription = exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _shave = _interopRequireDefault(require("shave"));
 var _Controls = _interopRequireDefault(require("./Controls"));
 var _SpeechControl = _interopRequireDefault(require("./SpeechControl"));
-var _AudioPlayer = require("./AudioPlayer");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /**
@@ -19,6 +19,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  *
  */
 
+var truncateDescription = function truncateDescription(el, readMoreLabel) {
+  (0, _shave["default"])(el, 90, {
+    character: "... <a href=\"#\" onclick=\"(function(e){e.preventDefault(); const parentNode = e.target.parentNode; parentNode.nextSibling.style.display = 'inline'; parentNode.remove();return false;})(arguments[0]);return false;\">".concat(readMoreLabel, "</a>")
+  });
+};
+exports.truncateDescription = truncateDescription;
 var forEachElement = function forEachElement(selector, callback) {
   var nodeList = document.querySelectorAll(selector);
   for (var i = 0; i < nodeList.length; i += 1) {
@@ -46,7 +52,7 @@ var initAudioPlayers = function initAudioPlayers(locale) {
   });
   forEachElement('[data-audio-player-description]', function (el) {
     var readMoreLabel = el.getAttribute('data-read-more-text');
-    (0, _AudioPlayer.truncateDescription)(el, readMoreLabel);
+    truncateDescription(el, readMoreLabel);
   });
   forEachElement('[data-audio-text-button-id]', function (el) {
     var id = el.getAttribute('data-audio-text-button-id');

package/lib/ContentTypeBadge/ContentTypeBadge.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
 var _contentType = require("@ndla/icons/contentType");
 var _action = require("@ndla/icons/action");
+var _editor = require("@ndla/icons/editor");
 var contentTypes = _interopRequireWildcard(require("../model/ContentType"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,12 +34,7 @@ var ContentTypeBadge = function ContentTypeBadge(_ref) {
     border = _ref$border === void 0 ? true : _ref$border,
     className = _ref.className;
   var modifiers = [type, size];
-  if (background) {
-    modifiers.push('background');
-  }
-  if (border) {
-    modifiers.push('border');
-  }
+  var embedResource = false;
   var icon = null;
   switch (type) {
     case contentTypes.SUBJECT_MATERIAL:
@@ -84,9 +80,34 @@ var ContentTypeBadge = function ContentTypeBadge(_ref) {
     case contentTypes.MULTIDISCIPLINARY_TOPIC:
       icon = (0, _jsxRuntime.jsx)(_contentType.MultidisciplinaryTopic, {});
       break;
+    case contentTypes.resourceTypeMapping.image:
+      icon = (0, _jsxRuntime.jsx)(_editor.Media, {});
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.audio:
+      icon = (0, _jsxRuntime.jsx)(_editor.SquareAudio, {});
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.video:
+      icon = (0, _jsxRuntime.jsx)(_editor.SquareVideo, {});
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.concept:
+      icon = (0, _jsxRuntime.jsx)(_editor.Concept, {});
+      embedResource = true;
+      break;
     default:
       break;
   }
+  if (embedResource) {
+    modifiers.push('embed-resource');
+  }
+  if (background || embedResource) {
+    modifiers.push('background');
+  }
+  if (border) {
+    modifiers.push('border');
+  }
   return (0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, classes('', modifiers, className)), {}, {
     children: icon
   }));

package/lib/Embed/AudioEmbed.d.ts

@@ -7,14 +7,15 @@
  */
 import { AudioMetaData } from '@ndla/types-embed';
 import { Author } from './ImageEmbed';
+import { HeartButtonType } from './types';
 interface Props {
     embed: AudioMetaData;
-    articlePath?: string;
+    heartButton?: HeartButtonType;
 }
 export declare const getFirstNonEmptyLicenseCredits: (authors: {
     creators: Author[];
     rightsholders: Author[];
     processors: Author[];
 }) => Author[];
-declare const AudioEmbed: ({ embed, articlePath }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const AudioEmbed: ({ embed, heartButton: HeartButton }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default AudioEmbed;

package/lib/Embed/AudioEmbed.js

@@ -4,30 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFirstNonEmptyLicenseCredits = exports["default"] = void 0;
-var _licenses = require("@ndla/licenses");
-var _modal = require("@ndla/modal");
-var _react = require("react");
-var _reactI18next = require("react-i18next");
 var _remarkable = require("remarkable");
-var _button = require("@ndla/button");
-var _safelink = require("@ndla/safelink");
 var _AudioPlayer = _interopRequireDefault(require("../AudioPlayer"));
 var _Figure = require("../Figure");
-var _FigureLicenseDialogContent = require("../Figure/FigureLicenseDialogContent");
+var _LicenseByline = require("../LicenseByline");
+var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /**
-                                                                       * Copyright (c) 2023-present, NDLA.
-                                                                       *
-                                                                       * This source code is licensed under the GPLv3 license found in the
-                                                                       * LICENSE file in the root directory of this source tree.
-                                                                       *
-                                                                       */ //@ts-ignore
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+//@ts-ignore
+
 var getFirstNonEmptyLicenseCredits = function getFirstNonEmptyLicenseCredits(authors) {
   var _Object$values$find;
   return (_Object$values$find = Object.values(authors).find(function (i) {
@@ -44,38 +37,29 @@ var renderMarkdown = function renderMarkdown(text) {
     }
   });
 };
+var imageMetaToMockEmbed = function imageMetaToMockEmbed(imageMeta) {
+  var _imageMeta$data$image, _imageMeta$data$image2, _imageMeta$data$image3, _imageMeta$data$image4;
+  return {
+    resource: 'image',
+    status: 'success',
+    // Make sure the seq is unused. It's rarely used, but it's nice to ensure uniqueness.
+    seq: imageMeta.seq + 0.1,
+    // We check that this exists where the function is used.
+    data: imageMeta.data.imageMeta,
+    embedData: {
+      resource: 'image',
+      resourceId: ((_imageMeta$data$image = imageMeta.data.imageMeta) === null || _imageMeta$data$image === void 0 ? void 0 : (_imageMeta$data$image2 = _imageMeta$data$image.id) === null || _imageMeta$data$image2 === void 0 ? void 0 : _imageMeta$data$image2.toString()) || '',
+      alt: (_imageMeta$data$image3 = (_imageMeta$data$image4 = imageMeta.data.imageMeta) === null || _imageMeta$data$image4 === void 0 ? void 0 : _imageMeta$data$image4.alttext.alttext) !== null && _imageMeta$data$image3 !== void 0 ? _imageMeta$data$image3 : ''
+    }
+  };
+};
 var AudioEmbed = function AudioEmbed(_ref) {
-  var _data$podcastMeta$int, _data$podcastMeta, _data$podcastMeta2;
+  var _data$manuscript, _data$podcastMeta, _data$podcastMeta$int, _data$podcastMeta2;
   var embed = _ref.embed,
-    articlePath = _ref.articlePath;
-  var _useTranslation = (0, _reactI18next.useTranslation)(),
-    t = _useTranslation.t,
-    i18n = _useTranslation.i18n;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+    HeartButton = _ref.heartButton;
   if (embed.status === 'error') {
-    return (0, _jsxRuntime.jsxs)(_Figure.Figure, {
-      children: [(0, _jsxRuntime.jsxs)("svg", {
-        fill: "#8A8888",
-        height: "50",
-        viewBox: "0 0 24 12",
-        width: "100%",
-        xmlns: "http://www.w3.org/2000/svg",
-        style: {
-          backgroundColor: '#EFF0F2'
-        },
-        children: [(0, _jsxRuntime.jsx)("path", {
-          d: "M0 0h24v24H0V0z",
-          fill: "none"
-        }), (0, _jsxRuntime.jsx)("path", {
-          transform: "scale(0.3) translate(28, 8.5)",
-          d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-        })]
-      }), (0, _jsxRuntime.jsx)("figcaption", {
-        children: t('audio.error.caption')
-      })]
+    return (0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder["default"], {
+      type: embed.embedData.type === 'standard' ? 'audio' : 'podcast'
     });
   }
   var data = embed.data,
@@ -92,166 +76,43 @@ var AudioEmbed = function AudioEmbed(_ref) {
     title: data.series.title.title,
     url: "/podkast/".concat(data.series.id)
   } : undefined;
-  var textVersion = data.manuscript && renderMarkdown(data.manuscript.manuscript);
-  var description = renderMarkdown((_data$podcastMeta$int = (_data$podcastMeta = data.podcastMeta) === null || _data$podcastMeta === void 0 ? void 0 : _data$podcastMeta.introduction) !== null && _data$podcastMeta$int !== void 0 ? _data$podcastMeta$int : '');
-  var coverPhoto = (_data$podcastMeta2 = data.podcastMeta) === null || _data$podcastMeta2 === void 0 ? void 0 : _data$podcastMeta2.coverPhoto;
+  var textVersion = (_data$manuscript = data.manuscript) !== null && _data$manuscript !== void 0 && _data$manuscript.manuscript.length ? renderMarkdown(data.manuscript.manuscript) : undefined;
+  var coverPhoto = (_data$podcastMeta = data.podcastMeta) === null || _data$podcastMeta === void 0 ? void 0 : _data$podcastMeta.coverPhoto;
   var img = coverPhoto && {
     url: coverPhoto.url,
     alt: coverPhoto.altText
   };
-  var authors = (0, _licenses.getLicenseCredits)(data.copyright);
-  var license = (0, _licenses.getLicenseByAbbreviation)(data.copyright.license.license, i18n.language);
-  var contributors = (0, _licenses.getGroupedContributorDescriptionList)(data.copyright, i18n.language).map(function (item) {
-    return {
-      name: item.description,
-      type: item.label
-    };
-  });
   var figureId = "figure-".concat(seq, "-").concat(data.id);
-  var copyString = data.audioType === 'podcast' ? (0, _licenses.figureApa7CopyString)(data.title.title, undefined, data.audioFile.url, articlePath, data.copyright, data.copyright.license.license, '', function (id) {
-    return t(id);
-  }, i18n.language) : undefined;
-  var captionAuthors = getFirstNonEmptyLicenseCredits(authors);
   return (0, _jsxRuntime.jsxs)(_Figure.Figure, {
     id: figureId,
     type: "full",
     children: [(0, _jsxRuntime.jsx)(_AudioPlayer["default"], {
-      description: description,
+      description: (_data$podcastMeta$int = (_data$podcastMeta2 = data.podcastMeta) === null || _data$podcastMeta2 === void 0 ? void 0 : _data$podcastMeta2.introduction) !== null && _data$podcastMeta$int !== void 0 ? _data$podcastMeta$int : '',
       img: img,
       src: data.audioFile.url,
       textVersion: textVersion,
       title: data.title.title,
       subtitle: subtitle
-    }), (0, _jsxRuntime.jsx)(_Figure.FigureCaption, {
-      id: "",
-      figureId: "",
-      modalButton: (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-        variant: "outline",
-        shape: "pill",
-        size: "small",
-        onClick: function onClick() {
-          return setIsOpen(true);
-        },
-        children: t('audio.reuse')
-      }),
-      licenseRights: license.rights,
-      authors: captionAuthors,
-      locale: i18n.language
-    }), (0, _jsxRuntime.jsx)(_modal.ModalV2, {
-      controlled: true,
-      isOpen: isOpen,
-      onClose: function onClose() {
-        return setIsOpen(false);
-      },
-      labelledBy: "license-dialog-rules-heading",
-      children: function children(close) {
-        return (0, _jsxRuntime.jsx)(_FigureLicenseDialogContent.FigureLicenseDialogContent, {
-          onClose: close,
-          title: data.title.title,
-          license: license,
-          authors: contributors,
-          origin: data.copyright.origin,
-          locale: i18n.language,
-          type: "audio",
-          children: data.copyright.license.license !== 'COPYRIGHT' && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [copyString && (0, _jsxRuntime.jsx)(_button.CopyButton, {
-              variant: "outline",
-              copyNode: t('license.hasCopiedTitle'),
-              onClick: function onClick() {
-                return navigator.clipboard.writeText(copyString);
-              },
-              children: t('license.copyTitle')
-            }), (0, _jsxRuntime.jsx)(_safelink.SafeLinkButton, {
-              download: true,
-              to: data.audioFile.url,
-              variant: "outline",
-              children: t('audio.download')
-            })]
-          })
-        });
-      }
-    }), data.imageMeta && (0, _jsxRuntime.jsx)(ImageLicense, {
-      title: data.imageMeta.title.title,
-      imageUrl: data.imageMeta.imageUrl,
+    }), (0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
+      error: false,
+      type: embedData.type === 'standard' ? 'audio' : 'podcast',
+      topRounded: false,
+      bottomRounded: !data.imageMeta,
+      copyright: embed.data.copyright,
+      children: HeartButton && (0, _jsxRuntime.jsx)(HeartButton, {
+        embed: embed
+      })
+    }), data.imageMeta && (0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
+      error: false,
+      first: false,
+      type: "image",
+      topRounded: false,
+      bottomRounded: true,
       copyright: data.imageMeta.copyright,
-      articlePath: articlePath
-    })]
-  });
-};
-var ImageLicense = function ImageLicense(_ref2) {
-  var articlePath = _ref2.articlePath,
-    title = _ref2.title,
-    imageUrl = _ref2.imageUrl,
-    copyright = _ref2.copyright;
-  var _useTranslation2 = (0, _reactI18next.useTranslation)(),
-    t = _useTranslation2.t,
-    i18n = _useTranslation2.i18n;
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
-  var copyString = (0, _licenses.figureApa7CopyString)(title, undefined, imageUrl, articlePath, copyright, copyright.license.license, undefined, function (id) {
-    return t(id);
-  }, i18n.language);
-  var license = (0, _licenses.getLicenseByAbbreviation)(copyright.license.license, i18n.language);
-  var authors = (0, _licenses.getLicenseCredits)(copyright);
-  var contributors = (0, _licenses.getGroupedContributorDescriptionList)(copyright, i18n.language).map(function (item) {
-    return {
-      name: item.description,
-      type: item.label
-    };
-  });
-  var captionAuthors = getFirstNonEmptyLicenseCredits(authors);
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(_Figure.FigureCaption, {
-      figureId: "",
-      id: "",
-      licenseRights: license.rights,
-      modalButton: (0, _jsxRuntime.jsx)(_button.ButtonV2, {
-        variant: "outline",
-        shape: "pill",
-        size: "small",
-        onClick: function onClick() {
-          return setIsOpen(true);
-        },
-        children: t('image.reuse')
-      }),
-      authors: captionAuthors,
-      locale: i18n.language,
-      children: (0, _jsxRuntime.jsx)(_modal.ModalV2, {
-        controlled: true,
-        isOpen: isOpen,
-        onClose: function onClose() {
-          return setIsOpen(false);
-        },
-        children: function children(close) {
-          return (0, _jsxRuntime.jsx)(_FigureLicenseDialogContent.FigureLicenseDialogContent, {
-            onClose: close,
-            title: title,
-            license: license,
-            authors: contributors,
-            origin: copyright.origin,
-            locale: i18n.language,
-            type: "image",
-            children: copyright.license.license !== 'COPYRIGHTED' && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [copyString && (0, _jsxRuntime.jsx)(_button.CopyButton, {
-                variant: "outline",
-                copyNode: t('license.hasCopiedTitle'),
-                onClick: function onClick() {
-                  return navigator.clipboard.writeText(copyString);
-                },
-                children: t('license.copyTitle')
-              }), (0, _jsxRuntime.jsx)(_safelink.SafeLinkButton, {
-                download: true,
-                to: imageUrl,
-                variant: "outline",
-                children: t('image.download')
-              })]
-            })
-          });
-        }
+      children: HeartButton && (0, _jsxRuntime.jsx)(HeartButton, {
+        embed: imageMetaToMockEmbed(embed)
       })
-    })
+    })]
   });
 };
 var _default = AudioEmbed;

package/lib/Embed/BrightcoveEmbed.d.ts

@@ -6,11 +6,13 @@
  *
  */
 import { BrightcoveMetaData } from '@ndla/types-embed';
+import { HeartButtonType } from './types';
 interface Props {
     embed: BrightcoveMetaData;
     isConcept?: boolean;
+    heartButton?: HeartButtonType;
 }
 export declare const makeIframeString: (url: string, width: string | number, height: string | number, title?: string) => string;
 export declare const isNumeric: (value: any) => boolean;
-declare const BrightcoveEmbed: ({ embed, isConcept }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const BrightcoveEmbed: ({ embed, isConcept, heartButton: HeartButton }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default BrightcoveEmbed;