@ndla/ui 3.0.13 → 3.1.0

package/es/Article/ArticleContent.js

@@ -15,6 +15,7 @@ import React, { useEffect } from 'react';
 import { initArticleScripts, removeEventListenerForResize // @ts-ignore
 } from '@ndla/article-scripts';
 import { initAudioPlayers } from '../AudioPlayer';
+import { initCopyParagraphButtons } from '../CopyParagraphButton';
 import { jsx as ___EmotionJSX } from "@emotion/core";
 
 var ArticleContent = function ArticleContent(_ref) {
@@ -26,6 +27,7 @@ var ArticleContent = function ArticleContent(_ref) {
     removeEventListenerForResize();
     initArticleScripts();
     initAudioPlayers(locale);
+    initCopyParagraphButtons();
     return function () {
       removeEventListenerForResize();
     };

package/es/CopyParagraphButton/CopyParagraphButton.js

@@ -0,0 +1,107 @@
+import _styled from "@emotion/styled-base";
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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)."; }
+
+/**
+ * Copyright (c) 2021-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 React, { useEffect, useState } from 'react';
+import { Link } from '@ndla/icons/common';
+import { useTranslation } from 'react-i18next'; // @ts-ignore
+
+import Tooltip from '@ndla/tooltip';
+import { copyTextToClipboard } from '@ndla/util';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var IconButton = _styled("button", {
+  target: "e18czas70",
+  label: "IconButton"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1eoah0f",
+  styles: "float:left;position:relative;left:-3em;top:0.1em;background:none;border:0;z-index:1;transition:0.2s;opacity:0;& svg{width:30px;height:30px;}"
+} : {
+  name: "1eoah0f",
+  styles: "float:left;position:relative;left:-3em;top:0.1em;background:none;border:0;z-index:1;transition:0.2s;opacity:0;& svg{width:30px;height:30px;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCZ0MiLCJmaWxlIjoiQ29weVBhcmFncmFwaEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBMaW5rIH0gZnJvbSAnQG5kbGEvaWNvbnMvY29tbW9uJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG4vLyBAdHMtaWdub3JlXG5pbXBvcnQgVG9vbHRpcCBmcm9tICdAbmRsYS90b29sdGlwJztcbmltcG9ydCB7IGNvcHlUZXh0VG9DbGlwYm9hcmQgfSBmcm9tICdAbmRsYS91dGlsJztcblxuY29uc3QgSWNvbkJ1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gIGZsb2F0OiBsZWZ0O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGxlZnQ6IC0zZW07XG4gIHRvcDogMC4xZW07XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGJvcmRlcjogMDtcbiAgei1pbmRleDogMTtcbiAgdHJhbnNpdGlvbjogMC4ycztcbiAgb3BhY2l0eTogMDtcblxuICAmIHN2ZyB7XG4gICAgd2lkdGg6IDMwcHg7XG4gICAgaGVpZ2h0OiAzMHB4O1xuICB9XG5gO1xuXG5jb25zdCBDb250YWluZXJEaXYgPSBzdHlsZWQuZGl2YFxuICAmOmhvdmVyIGJ1dHRvbiB7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIG9wYWNpdHk6IDAuNTtcbiAgfVxuXG4gICYgaDIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBsZWZ0OiAtMmVtO1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICB0aXRsZT86IHN0cmluZyB8IG51bGw7XG59XG5cbmNvbnN0IENvcHlQYXJhZ3JhcGhCdXR0b24gPSAoeyB0aXRsZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IFtoYXNDb3BpZWQsIHNldEhhc0NvcGllZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGhhc0NvcGllZCkge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiBzZXRIYXNDb3BpZWQoZmFsc2UpLCAzMDAwKTtcbiAgICB9XG4gIH0sIFtoYXNDb3BpZWRdKTtcblxuICBpZiAoIXRpdGxlKSByZXR1cm4gbnVsbDtcblxuICBjb25zdCBvbkNvcHlDbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQnV0dG9uRWxlbWVudCwgTW91c2VFdmVudD4pOiB2b2lkID0+IHtcbiAgICBzZXRIYXNDb3BpZWQodHJ1ZSk7XG4gICAgY29uc3QgY29weUlkID0gZXZlbnQuY3VycmVudFRhcmdldC5nZXRBdHRyaWJ1dGUoJ2RhdGEtdGl0bGUnKTtcbiAgICBjb25zdCB7IGxvY2F0aW9uIH0gPSB3aW5kb3c7XG4gICAgY29uc3QgbmV3SGFzaCA9IGAjJHtjb3B5SWR9YDtcbiAgICBjb25zdCBwb3J0ID0gbG9jYXRpb24ucG9ydCA/IGA6JHtsb2NhdGlvbi5wb3J0fWAgOiAnJztcbiAgICBjb25zdCB1cmxUb0NvcHkgPSBgJHtsb2NhdGlvbi5wcm90b2NvbH0vLyR7bG9jYXRpb24uaG9zdG5hbWV9JHtwb3J0fSR7bG9jYXRpb24ucGF0aG5hbWV9JHtsb2NhdGlvbi5zZWFyY2h9JHtuZXdIYXNofWA7XG5cbiAgICBjb3B5VGV4dFRvQ2xpcGJvYXJkKHVybFRvQ29weSk7XG4gIH07XG5cbiAgY29uc3Qgc2FuaXRpemVkVGl0bGUgPSBlbmNvZGVVUklDb21wb25lbnQodGl0bGUucmVwbGFjZSgvIC9nLCAnLScpKTtcbiAgY29uc3QgdG9vbHRpcCA9IGhhc0NvcGllZCA/IHQoJ2FydGljbGUuY29weVBhZ2VMaW5rQ29waWVkJykgOiB0KCdhcnRpY2xlLmNvcHlIZWFkZXJMaW5rJyk7XG4gIHJldHVybiAoXG4gICAgPENvbnRhaW5lckRpdiBkYXRhLWhlYWRlci1jb3B5LWNvbnRhaW5lciBkYXRhLXRpdGxlPXt0aXRsZX0+XG4gICAgICA8SWNvbkJ1dHRvbiBvbkNsaWNrPXtvbkNvcHlDbGlja30gZGF0YS10aXRsZT17c2FuaXRpemVkVGl0bGV9PlxuICAgICAgICA8VG9vbHRpcCB0b29sdGlwPXt0b29sdGlwfT5cbiAgICAgICAgICA8TGluayB0aXRsZT17Jyd9IC8+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICAgIDwvSWNvbkJ1dHRvbj5cbiAgICAgIDxoMiBpZD17c2FuaXRpemVkVGl0bGV9IHRhYkluZGV4PXswfT5cbiAgICAgICAge3RpdGxlfVxuICAgICAgPC9oMj5cbiAgICA8L0NvbnRhaW5lckRpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENvcHlQYXJhZ3JhcGhCdXR0b247XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var ContainerDiv = _styled("div", {
+  target: "e18czas71",
+  label: "ContainerDiv"
+})(process.env.NODE_ENV === "production" ? {
+  name: "25spe5",
+  styles: "&:hover button{cursor:pointer;opacity:0.5;}& h2{position:relative;left:-2em;}"
+} : {
+  name: "25spe5",
+  styles: "&:hover button{cursor:pointer;opacity:0.5;}& h2{position:relative;left:-2em;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDK0IiLCJmaWxlIjoiQ29weVBhcmFncmFwaEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBMaW5rIH0gZnJvbSAnQG5kbGEvaWNvbnMvY29tbW9uJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG4vLyBAdHMtaWdub3JlXG5pbXBvcnQgVG9vbHRpcCBmcm9tICdAbmRsYS90b29sdGlwJztcbmltcG9ydCB7IGNvcHlUZXh0VG9DbGlwYm9hcmQgfSBmcm9tICdAbmRsYS91dGlsJztcblxuY29uc3QgSWNvbkJ1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gIGZsb2F0OiBsZWZ0O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGxlZnQ6IC0zZW07XG4gIHRvcDogMC4xZW07XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGJvcmRlcjogMDtcbiAgei1pbmRleDogMTtcbiAgdHJhbnNpdGlvbjogMC4ycztcbiAgb3BhY2l0eTogMDtcblxuICAmIHN2ZyB7XG4gICAgd2lkdGg6IDMwcHg7XG4gICAgaGVpZ2h0OiAzMHB4O1xuICB9XG5gO1xuXG5jb25zdCBDb250YWluZXJEaXYgPSBzdHlsZWQuZGl2YFxuICAmOmhvdmVyIGJ1dHRvbiB7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIG9wYWNpdHk6IDAuNTtcbiAgfVxuXG4gICYgaDIge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBsZWZ0OiAtMmVtO1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICB0aXRsZT86IHN0cmluZyB8IG51bGw7XG59XG5cbmNvbnN0IENvcHlQYXJhZ3JhcGhCdXR0b24gPSAoeyB0aXRsZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IFtoYXNDb3BpZWQsIHNldEhhc0NvcGllZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGhhc0NvcGllZCkge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiBzZXRIYXNDb3BpZWQoZmFsc2UpLCAzMDAwKTtcbiAgICB9XG4gIH0sIFtoYXNDb3BpZWRdKTtcblxuICBpZiAoIXRpdGxlKSByZXR1cm4gbnVsbDtcblxuICBjb25zdCBvbkNvcHlDbGljayA9IChldmVudDogUmVhY3QuTW91c2VFdmVudDxIVE1MQnV0dG9uRWxlbWVudCwgTW91c2VFdmVudD4pOiB2b2lkID0+IHtcbiAgICBzZXRIYXNDb3BpZWQodHJ1ZSk7XG4gICAgY29uc3QgY29weUlkID0gZXZlbnQuY3VycmVudFRhcmdldC5nZXRBdHRyaWJ1dGUoJ2RhdGEtdGl0bGUnKTtcbiAgICBjb25zdCB7IGxvY2F0aW9uIH0gPSB3aW5kb3c7XG4gICAgY29uc3QgbmV3SGFzaCA9IGAjJHtjb3B5SWR9YDtcbiAgICBjb25zdCBwb3J0ID0gbG9jYXRpb24ucG9ydCA/IGA6JHtsb2NhdGlvbi5wb3J0fWAgOiAnJztcbiAgICBjb25zdCB1cmxUb0NvcHkgPSBgJHtsb2NhdGlvbi5wcm90b2NvbH0vLyR7bG9jYXRpb24uaG9zdG5hbWV9JHtwb3J0fSR7bG9jYXRpb24ucGF0aG5hbWV9JHtsb2NhdGlvbi5zZWFyY2h9JHtuZXdIYXNofWA7XG5cbiAgICBjb3B5VGV4dFRvQ2xpcGJvYXJkKHVybFRvQ29weSk7XG4gIH07XG5cbiAgY29uc3Qgc2FuaXRpemVkVGl0bGUgPSBlbmNvZGVVUklDb21wb25lbnQodGl0bGUucmVwbGFjZSgvIC9nLCAnLScpKTtcbiAgY29uc3QgdG9vbHRpcCA9IGhhc0NvcGllZCA/IHQoJ2FydGljbGUuY29weVBhZ2VMaW5rQ29waWVkJykgOiB0KCdhcnRpY2xlLmNvcHlIZWFkZXJMaW5rJyk7XG4gIHJldHVybiAoXG4gICAgPENvbnRhaW5lckRpdiBkYXRhLWhlYWRlci1jb3B5LWNvbnRhaW5lciBkYXRhLXRpdGxlPXt0aXRsZX0+XG4gICAgICA8SWNvbkJ1dHRvbiBvbkNsaWNrPXtvbkNvcHlDbGlja30gZGF0YS10aXRsZT17c2FuaXRpemVkVGl0bGV9PlxuICAgICAgICA8VG9vbHRpcCB0b29sdGlwPXt0b29sdGlwfT5cbiAgICAgICAgICA8TGluayB0aXRsZT17Jyd9IC8+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICAgIDwvSWNvbkJ1dHRvbj5cbiAgICAgIDxoMiBpZD17c2FuaXRpemVkVGl0bGV9IHRhYkluZGV4PXswfT5cbiAgICAgICAge3RpdGxlfVxuICAgICAgPC9oMj5cbiAgICA8L0NvbnRhaW5lckRpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENvcHlQYXJhZ3JhcGhCdXR0b247XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var CopyParagraphButton = function CopyParagraphButton(_ref) {
+  var title = _ref.title;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasCopied = _useState2[0],
+      setHasCopied = _useState2[1];
+
+  useEffect(function () {
+    if (hasCopied) {
+      setTimeout(function () {
+        return setHasCopied(false);
+      }, 3000);
+    }
+  }, [hasCopied]);
+  if (!title) return null;
+
+  var onCopyClick = function onCopyClick(event) {
+    setHasCopied(true);
+    var copyId = event.currentTarget.getAttribute('data-title');
+    var _window = window,
+        location = _window.location;
+    var newHash = "#".concat(copyId);
+    var port = location.port ? ":".concat(location.port) : '';
+    var urlToCopy = "".concat(location.protocol, "//").concat(location.hostname).concat(port).concat(location.pathname).concat(location.search).concat(newHash);
+    copyTextToClipboard(urlToCopy);
+  };
+
+  var sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
+  var tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
+  return ___EmotionJSX(ContainerDiv, {
+    "data-header-copy-container": true,
+    "data-title": title
+  }, ___EmotionJSX(IconButton, {
+    onClick: onCopyClick,
+    "data-title": sanitizedTitle
+  }, ___EmotionJSX(Tooltip, {
+    tooltip: tooltip
+  }, ___EmotionJSX(Link, {
+    title: ''
+  }))), ___EmotionJSX("h2", {
+    id: sanitizedTitle,
+    tabIndex: 0
+  }, title));
+};
+
+export default CopyParagraphButton;

package/es/CopyParagraphButton/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2021-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 CopyParagraphButton from './CopyParagraphButton';
+import initCopyParagraphButtons from './initCopyParagraphButtons';
+export { CopyParagraphButton, initCopyParagraphButtons };
+export default CopyParagraphButton;

package/es/CopyParagraphButton/initCopyParagraphButtons.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2021-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 React from 'react';
+import ReactDOM from 'react-dom';
+import CopyParagraphButton from './CopyParagraphButton';
+import { jsx as ___EmotionJSX } from "@emotion/core";
+
+var forEachElement = function forEachElement(selector, callback) {
+  var nodeList = document.querySelectorAll(selector);
+
+  for (var i = 0; i < nodeList.length; i += 1) {
+    callback(nodeList[i], i);
+  }
+};
+
+var initCopyParagraphButtons = function initCopyParagraphButtons() {
+  forEachElement('[data-header-copy-container]', function (el) {
+    var title = el.getAttribute('data-title');
+    ReactDOM.hydrate(___EmotionJSX(CopyParagraphButton, {
+      title: title
+    }), el);
+  });
+};
+
+export default initCopyParagraphButtons;