@ndla/ui 3.0.14-alpha.0 → 3.0.14

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.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.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.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;