@ndla/ui 3.0.15 → 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;

package/es/index.js

@@ -46,4 +46,5 @@ export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
 export { SubjectAbout, SubjectArchive, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFilter, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner } from './Subject';
-export { default as ContentCard } from './ContentCard';
+export { default as ContentCard } from './ContentCard';
+export { default as CopyParagraphButton } from './CopyParagraphButton';

package/es/locale/messages-en.js

@@ -298,6 +298,7 @@ var messages = _objectSpread(_objectSpread({
     multipleAuthorsLabelAriaConjunction: 'and',
     copyPageLink: 'Copy page-link',
     copyPageLinkCopied: 'Link copied',
+    copyHeaderLink: 'Copy link to header',
     conjunction: 'and',
     supplierLabel: 'Rightsholder: {{name}}',
     multipleSuppliersLabel: 'Rightsholders: {{names}}',

package/es/locale/messages-nb.js

@@ -298,6 +298,7 @@ var messages = _objectSpread(_objectSpread({
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til siden',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskriften',
     conjunction: 'og',
     supplierLabel: 'Rettighetshaver: {{name}}',
     multipleSuppliersLabel: 'Rettighetshavere: {{names}}',

package/es/locale/messages-nn.js

@@ -298,6 +298,7 @@ var messages = _objectSpread(_objectSpread({
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til sida',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskrifta',
     conjunction: 'og',
     supplierLabel: 'Rettshavar: {{name}}',
     multipleSuppliersLabel: 'Rettshavarar: {{names}}',

package/lib/Article/ArticleContent.js

@@ -13,6 +13,8 @@ var _articleScripts = require("@ndla/article-scripts");
 
 var _AudioPlayer = require("../AudioPlayer");
 
+var _CopyParagraphButton = require("../CopyParagraphButton");
+
 var _core = require("@emotion/core");
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -34,6 +36,7 @@ var ArticleContent = function ArticleContent(_ref) {
     (0, _articleScripts.removeEventListenerForResize)();
     (0, _articleScripts.initArticleScripts)();
     (0, _AudioPlayer.initAudioPlayers)(locale);
+    (0, _CopyParagraphButton.initCopyParagraphButtons)();
     return function () {
       (0, _articleScripts.removeEventListenerForResize)();
     };

package/lib/CopyParagraphButton/CopyParagraphButton.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+interface Props {
+    title?: string | null;
+}
+declare const CopyParagraphButton: ({ title }: Props) => JSX.Element | null;
+export default CopyParagraphButton;

package/lib/CopyParagraphButton/CopyParagraphButton.js

@@ -0,0 +1,119 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _common = require("@ndla/icons/common");
+
+var _reactI18next = require("react-i18next");
+
+var _tooltip = _interopRequireDefault(require("@ndla/tooltip"));
+
+var _util = require("@ndla/util");
+
+var _core = require("@emotion/core");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { 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)."; }
+
+var IconButton = (0, _styledBase["default"])("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 = (0, _styledBase["default"])("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 = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasCopied = _useState2[0],
+      setHasCopied = _useState2[1];
+
+  (0, _react.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);
+    (0, _util.copyTextToClipboard)(urlToCopy);
+  };
+
+  var sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
+  var tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
+  return (0, _core.jsx)(ContainerDiv, {
+    "data-header-copy-container": true,
+    "data-title": title
+  }, (0, _core.jsx)(IconButton, {
+    onClick: onCopyClick,
+    "data-title": sanitizedTitle
+  }, (0, _core.jsx)(_tooltip["default"], {
+    tooltip: tooltip
+  }, (0, _core.jsx)(_common.Link, {
+    title: ''
+  }))), (0, _core.jsx)("h2", {
+    id: sanitizedTitle,
+    tabIndex: 0
+  }, title));
+};
+
+var _default = CopyParagraphButton;
+exports["default"] = _default;

package/lib/CopyParagraphButton/index.d.ts

@@ -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/lib/CopyParagraphButton/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CopyParagraphButton", {
+  enumerable: true,
+  get: function get() {
+    return _CopyParagraphButton["default"];
+  }
+});
+Object.defineProperty(exports, "initCopyParagraphButtons", {
+  enumerable: true,
+  get: function get() {
+    return _initCopyParagraphButtons["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
+
+var _initCopyParagraphButtons = _interopRequireDefault(require("./initCopyParagraphButtons"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * 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.
+ *
+ */
+var _default = _CopyParagraphButton["default"];
+exports["default"] = _default;

package/lib/CopyParagraphButton/initCopyParagraphButtons.d.ts

@@ -0,0 +1,2 @@
+declare const initCopyParagraphButtons: () => void;
+export default initCopyParagraphButtons;

package/lib/CopyParagraphButton/initCopyParagraphButtons.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
+
+var _core = require("@emotion/core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * 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.
+ *
+ */
+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["default"].hydrate((0, _core.jsx)(_CopyParagraphButton["default"], {
+      title: title
+    }), el);
+  });
+};
+
+var _default = initCopyParagraphButtons;
+exports["default"] = _default;

package/lib/index.d.ts

@@ -46,3 +46,4 @@ export { default as ResourceGroup } from './ResourceGroup';
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
 export { SubjectAbout, SubjectArchive, SubjectCarousel, SubjectChildContent, SubjectContent, SubjectFilter, SubjectFlexChild, SubjectFlexWrapper, SubjectHeader, SubjectLinks, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectShortcuts, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
 export { default as ContentCard } from './ContentCard';
+export { default as CopyParagraphButton } from './CopyParagraphButton';

package/lib/index.js

@@ -103,7 +103,8 @@ var _exportNames = {
   SubjectSocialSection: true,
   SubjectTopics: true,
   SubjectBanner: true,
-  ContentCard: true
+  ContentCard: true,
+  CopyParagraphButton: true
 };
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
@@ -693,6 +694,12 @@ Object.defineProperty(exports, "ContentCard", {
     return _ContentCard["default"];
   }
 });
+Object.defineProperty(exports, "CopyParagraphButton", {
+  enumerable: true,
+  get: function get() {
+    return _CopyParagraphButton["default"];
+  }
+});
 
 var _indexJavascript = require("./index-javascript");
 
@@ -781,6 +788,8 @@ var _Subject = require("./Subject");
 
 var _ContentCard = _interopRequireDefault(require("./ContentCard"));
 
+var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

package/lib/locale/messages-en.d.ts

@@ -342,6 +342,7 @@ declare const messages: {
         multipleAuthorsLabelAriaConjunction: string;
         copyPageLink: string;
         copyPageLinkCopied: string;
+        copyHeaderLink: string;
         conjunction: string;
         supplierLabel: string;
         multipleSuppliersLabel: string;

package/lib/locale/messages-en.js

@@ -303,6 +303,7 @@ var messages = _objectSpread(_objectSpread({
     multipleAuthorsLabelAriaConjunction: 'and',
     copyPageLink: 'Copy page-link',
     copyPageLinkCopied: 'Link copied',
+    copyHeaderLink: 'Copy link to header',
     conjunction: 'and',
     supplierLabel: 'Rightsholder: {{name}}',
     multipleSuppliersLabel: 'Rightsholders: {{names}}',

package/lib/locale/messages-nb.d.ts

@@ -342,6 +342,7 @@ declare const messages: {
         multipleAuthorsLabelAriaConjunction: string;
         copyPageLink: string;
         copyPageLinkCopied: string;
+        copyHeaderLink: string;
         conjunction: string;
         supplierLabel: string;
         multipleSuppliersLabel: string;

package/lib/locale/messages-nb.js

@@ -303,6 +303,7 @@ var messages = _objectSpread(_objectSpread({
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til siden',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskriften',
     conjunction: 'og',
     supplierLabel: 'Rettighetshaver: {{name}}',
     multipleSuppliersLabel: 'Rettighetshavere: {{names}}',

package/lib/locale/messages-nn.d.ts

@@ -342,6 +342,7 @@ declare const messages: {
         multipleAuthorsLabelAriaConjunction: string;
         copyPageLink: string;
         copyPageLinkCopied: string;
+        copyHeaderLink: string;
         conjunction: string;
         supplierLabel: string;
         multipleSuppliersLabel: string;

package/lib/locale/messages-nn.js

@@ -303,6 +303,7 @@ var messages = _objectSpread(_objectSpread({
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til sida',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskrifta',
     conjunction: 'og',
     supplierLabel: 'Rettshavar: {{name}}',
     multipleSuppliersLabel: 'Rettshavarar: {{names}}',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.0.15",
+  "version": "3.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -41,7 +41,7 @@
     "@ndla/safelink": "^1.0.5",
     "@ndla/switch": "^0.0.32",
     "@ndla/tabs": "^1.0.8",
-    "@ndla/tooltip": "^0.2.46",
+    "@ndla/tooltip": "^0.2.47",
     "@ndla/util": "^2.0.0",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "be7f7415403f3714176b50d57f658bc88e76ecbf"
+  "gitHead": "fa15cb6ceb74c400580f44372988b0d9d98e2f3d"
 }

package/src/Article/ArticleContent.tsx

@@ -13,6 +13,7 @@ import {
   // @ts-ignore
 } from '@ndla/article-scripts';
 import { initAudioPlayers } from '../AudioPlayer';
+import { initCopyParagraphButtons } from '../CopyParagraphButton';
 import { Locale } from '../types';
 
 type Props = {
@@ -24,6 +25,7 @@ const ArticleContent = ({ content, locale, ...rest }: Props) => {
     removeEventListenerForResize();
     initArticleScripts();
     initAudioPlayers(locale);
+    initCopyParagraphButtons();
     return () => {
       removeEventListenerForResize();
     };

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { Link } from '@ndla/icons/common';
+import { useTranslation } from 'react-i18next';
+// @ts-ignore
+import Tooltip from '@ndla/tooltip';
+import { copyTextToClipboard } from '@ndla/util';
+
+const IconButton = styled.button`
+  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;
+  }
+`;
+
+const ContainerDiv = styled.div`
+  &:hover button {
+    cursor: pointer;
+    opacity: 0.5;
+  }
+
+  & h2 {
+    position: relative;
+    left: -2em;
+  }
+`;
+
+interface Props {
+  title?: string | null;
+}
+
+const CopyParagraphButton = ({ title }: Props) => {
+  const { t } = useTranslation();
+  const [hasCopied, setHasCopied] = useState(false);
+  useEffect(() => {
+    if (hasCopied) {
+      setTimeout(() => setHasCopied(false), 3000);
+    }
+  }, [hasCopied]);
+
+  if (!title) return null;
+
+  const onCopyClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+    setHasCopied(true);
+    const copyId = event.currentTarget.getAttribute('data-title');
+    const { location } = window;
+    const newHash = `#${copyId}`;
+    const port = location.port ? `:${location.port}` : '';
+    const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
+
+    copyTextToClipboard(urlToCopy);
+  };
+
+  const sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
+  const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
+  return (
+    <ContainerDiv data-header-copy-container data-title={title}>
+      <IconButton onClick={onCopyClick} data-title={sanitizedTitle}>
+        <Tooltip tooltip={tooltip}>
+          <Link title={''} />
+        </Tooltip>
+      </IconButton>
+      <h2 id={sanitizedTitle} tabIndex={0}>
+        {title}
+      </h2>
+    </ContainerDiv>
+  );
+};
+
+export default CopyParagraphButton;

package/src/CopyParagraphButton/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * 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/src/CopyParagraphButton/initCopyParagraphButtons.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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';
+
+const forEachElement = (selector: string, callback: Function) => {
+  const nodeList = document.querySelectorAll(selector);
+  for (let i = 0; i < nodeList.length; i += 1) {
+    callback(nodeList[i], i);
+  }
+};
+
+const initCopyParagraphButtons = () => {
+  forEachElement('[data-header-copy-container]', (el: HTMLElement) => {
+    const title = el.getAttribute('data-title');
+    ReactDOM.hydrate(<CopyParagraphButton title={title} />, el);
+  });
+};
+
+export default initCopyParagraphButtons;

package/src/index.ts

@@ -135,3 +135,5 @@ export {
 } from './Subject';
 
 export { default as ContentCard } from './ContentCard';
+
+export { default as CopyParagraphButton } from './CopyParagraphButton';

package/src/locale/messages-en.ts

@@ -327,6 +327,7 @@ const messages = {
     multipleAuthorsLabelAriaConjunction: 'and',
     copyPageLink: 'Copy page-link',
     copyPageLinkCopied: 'Link copied',
+    copyHeaderLink: 'Copy link to header',
     conjunction: 'and',
     supplierLabel: 'Rightsholder: {{name}}',
     multipleSuppliersLabel: 'Rightsholders: {{names}}',

package/src/locale/messages-nb.ts

@@ -326,6 +326,7 @@ const messages = {
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til siden',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskriften',
     conjunction: 'og',
     supplierLabel: 'Rettighetshaver: {{name}}',
     multipleSuppliersLabel: 'Rettighetshavere: {{names}}',

package/src/locale/messages-nn.ts

@@ -327,6 +327,7 @@ const messages = {
     multipleAuthorsLabelAriaConjunction: 'og',
     copyPageLink: 'Kopier lenke til sida',
     copyPageLinkCopied: 'Lenke kopiert',
+    copyHeaderLink: 'Kopier lenke til overskrifta',
     conjunction: 'og',
     supplierLabel: 'Rettshavar: {{name}}',
     multipleSuppliersLabel: 'Rettshavarar: {{names}}',