@ndla/ui 3.2.8 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/CopyParagraphButton/CopyParagraphButton.js +23 -7
- package/es/CopyParagraphButton/initCopyParagraphButtons.js +2 -2
- package/lib/CopyParagraphButton/CopyParagraphButton.d.ts +2 -1
- package/lib/CopyParagraphButton/CopyParagraphButton.js +23 -7
- package/lib/CopyParagraphButton/initCopyParagraphButtons.js +2 -2
- package/package.json +2 -2
- package/src/CopyParagraphButton/CopyParagraphButton.tsx +23 -4
- package/src/CopyParagraphButton/initCopyParagraphButtons.tsx +1 -2
|
@@ -38,7 +38,7 @@ var IconButton = _styled("button", {
|
|
|
38
38
|
} : {
|
|
39
39
|
name: "1eoah0f",
|
|
40
40
|
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;}",
|
|
41
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
41
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCZ0MiLCJmaWxlIjoiQ29weVBhcmFncmFwaEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IExpbmsgfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0Jztcbi8vIEB0cy1pZ25vcmVcbmltcG9ydCBUb29sdGlwIGZyb20gJ0BuZGxhL3Rvb2x0aXAnO1xuaW1wb3J0IHsgY29weVRleHRUb0NsaXBib2FyZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuXG5jb25zdCBJY29uQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgZmxvYXQ6IGxlZnQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbGVmdDogLTNlbTtcbiAgdG9wOiAwLjFlbTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgYm9yZGVyOiAwO1xuICB6LWluZGV4OiAxO1xuICB0cmFuc2l0aW9uOiAwLjJzO1xuICBvcGFjaXR5OiAwO1xuXG4gICYgc3ZnIHtcbiAgICB3aWR0aDogMzBweDtcbiAgICBoZWlnaHQ6IDMwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IENvbnRhaW5lckRpdiA9IHN0eWxlZC5kaXZgXG4gICY6aG92ZXIgYnV0dG9uIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgb3BhY2l0eTogMC41O1xuICB9XG5cbiAgJiBoMiB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGxlZnQ6IC0yZW07XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHRpdGxlPzogc3RyaW5nIHwgbnVsbDtcbiAgY29udGVudD86IHN0cmluZyB8IG51bGw7XG4gIGh5ZHJhdGU/OiBib29sZWFuO1xufVxuXG5pbnRlcmZhY2UgV3JhcHBlclByb3BzIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgaHlkcmF0ZT86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IFdyYXBwZXJDb21wb25lbnQgPSAoeyB0aXRsZSwgaHlkcmF0ZSwgY2hpbGRyZW4gfTogV3JhcHBlclByb3BzKSA9PiB7XG4gIGlmIChoeWRyYXRlKSB7XG4gICAgcmV0dXJuIDw+e2NoaWxkcmVufTwvPjtcbiAgfVxuICByZXR1cm4gKFxuICAgIDxDb250YWluZXJEaXYgZGF0YS1oZWFkZXItY29weS1jb250YWluZXIgZGF0YS10aXRsZT17dGl0bGV9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvQ29udGFpbmVyRGl2PlxuICApO1xufTtcblxuY29uc3QgQ29weVBhcmFncmFwaEJ1dHRvbiA9ICh7IHRpdGxlLCBjb250ZW50LCBoeWRyYXRlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgW2hhc0NvcGllZCwgc2V0SGFzQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaGFzQ29waWVkKSB7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHNldEhhc0NvcGllZChmYWxzZSksIDMwMDApO1xuICAgIH1cbiAgfSwgW2hhc0NvcGllZF0pO1xuXG4gIGlmICghdGl0bGUpIHJldHVybiBudWxsO1xuXG4gIGNvbnN0IG9uQ29weUNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50LCBNb3VzZUV2ZW50Pik6IHZvaWQgPT4ge1xuICAgIHNldEhhc0NvcGllZCh0cnVlKTtcbiAgICBjb25zdCBjb3B5SWQgPSBldmVudC5jdXJyZW50VGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS10aXRsZScpO1xuICAgIGNvbnN0IHsgbG9jYXRpb24gfSA9IHdpbmRvdztcbiAgICBjb25zdCBuZXdIYXNoID0gYCMke2NvcHlJZH1gO1xuICAgIGNvbnN0IHBvcnQgPSBsb2NhdGlvbi5wb3J0ID8gYDoke2xvY2F0aW9uLnBvcnR9YCA6ICcnO1xuICAgIGNvbnN0IHVybFRvQ29weSA9IGAke2xvY2F0aW9uLnByb3RvY29sfS8vJHtsb2NhdGlvbi5ob3N0bmFtZX0ke3BvcnR9JHtsb2NhdGlvbi5wYXRobmFtZX0ke2xvY2F0aW9uLnNlYXJjaH0ke25ld0hhc2h9YDtcblxuICAgIGNvcHlUZXh0VG9DbGlwYm9hcmQodXJsVG9Db3B5KTtcbiAgfTtcblxuICBjb25zdCBzYW5pdGl6ZWRUaXRsZSA9IGVuY29kZVVSSUNvbXBvbmVudCh0aXRsZS5yZXBsYWNlKC8gL2csICctJykpO1xuICBjb25zdCB0b29sdGlwID0gaGFzQ29waWVkID8gdCgnYXJ0aWNsZS5jb3B5UGFnZUxpbmtDb3BpZWQnKSA6IHQoJ2FydGljbGUuY29weUhlYWRlckxpbmsnKTtcblxuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyQ29tcG9uZW50IGh5ZHJhdGU9e2h5ZHJhdGV9IHRpdGxlPXt0aXRsZX0+XG4gICAgICA8SWNvbkJ1dHRvbiBvbkNsaWNrPXtvbkNvcHlDbGlja30gZGF0YS10aXRsZT17c2FuaXRpemVkVGl0bGV9PlxuICAgICAgICA8VG9vbHRpcCB0b29sdGlwPXt0b29sdGlwfT5cbiAgICAgICAgICA8TGluayB0aXRsZT17Jyd9IC8+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICAgIDwvSWNvbkJ1dHRvbj5cbiAgICAgIDxoMiBpZD17c2FuaXRpemVkVGl0bGV9IHRhYkluZGV4PXswfSBkYW5nZXJvdXNseVNldElubmVySFRNTD17eyBfX2h0bWw6IGNvbnRlbnQgfHwgJycgfX0+PC9oMj5cbiAgICA8L1dyYXBwZXJDb21wb25lbnQ+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBDb3B5UGFyYWdyYXBoQnV0dG9uO1xuIl19 */",
|
|
42
42
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
43
43
|
});
|
|
44
44
|
|
|
@@ -51,13 +51,29 @@ var ContainerDiv = _styled("div", {
|
|
|
51
51
|
} : {
|
|
52
52
|
name: "25spe5",
|
|
53
53
|
styles: "&:hover button{cursor:pointer;opacity:0.5;}& h2{position:relative;left:-2em;}",
|
|
54
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
54
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDK0IiLCJmaWxlIjoiQ29weVBhcmFncmFwaEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IExpbmsgfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0Jztcbi8vIEB0cy1pZ25vcmVcbmltcG9ydCBUb29sdGlwIGZyb20gJ0BuZGxhL3Rvb2x0aXAnO1xuaW1wb3J0IHsgY29weVRleHRUb0NsaXBib2FyZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuXG5jb25zdCBJY29uQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgZmxvYXQ6IGxlZnQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbGVmdDogLTNlbTtcbiAgdG9wOiAwLjFlbTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgYm9yZGVyOiAwO1xuICB6LWluZGV4OiAxO1xuICB0cmFuc2l0aW9uOiAwLjJzO1xuICBvcGFjaXR5OiAwO1xuXG4gICYgc3ZnIHtcbiAgICB3aWR0aDogMzBweDtcbiAgICBoZWlnaHQ6IDMwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IENvbnRhaW5lckRpdiA9IHN0eWxlZC5kaXZgXG4gICY6aG92ZXIgYnV0dG9uIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgb3BhY2l0eTogMC41O1xuICB9XG5cbiAgJiBoMiB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGxlZnQ6IC0yZW07XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHRpdGxlPzogc3RyaW5nIHwgbnVsbDtcbiAgY29udGVudD86IHN0cmluZyB8IG51bGw7XG4gIGh5ZHJhdGU/OiBib29sZWFuO1xufVxuXG5pbnRlcmZhY2UgV3JhcHBlclByb3BzIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgaHlkcmF0ZT86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IFdyYXBwZXJDb21wb25lbnQgPSAoeyB0aXRsZSwgaHlkcmF0ZSwgY2hpbGRyZW4gfTogV3JhcHBlclByb3BzKSA9PiB7XG4gIGlmIChoeWRyYXRlKSB7XG4gICAgcmV0dXJuIDw+e2NoaWxkcmVufTwvPjtcbiAgfVxuICByZXR1cm4gKFxuICAgIDxDb250YWluZXJEaXYgZGF0YS1oZWFkZXItY29weS1jb250YWluZXIgZGF0YS10aXRsZT17dGl0bGV9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvQ29udGFpbmVyRGl2PlxuICApO1xufTtcblxuY29uc3QgQ29weVBhcmFncmFwaEJ1dHRvbiA9ICh7IHRpdGxlLCBjb250ZW50LCBoeWRyYXRlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgW2hhc0NvcGllZCwgc2V0SGFzQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaGFzQ29waWVkKSB7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHNldEhhc0NvcGllZChmYWxzZSksIDMwMDApO1xuICAgIH1cbiAgfSwgW2hhc0NvcGllZF0pO1xuXG4gIGlmICghdGl0bGUpIHJldHVybiBudWxsO1xuXG4gIGNvbnN0IG9uQ29weUNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50LCBNb3VzZUV2ZW50Pik6IHZvaWQgPT4ge1xuICAgIHNldEhhc0NvcGllZCh0cnVlKTtcbiAgICBjb25zdCBjb3B5SWQgPSBldmVudC5jdXJyZW50VGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS10aXRsZScpO1xuICAgIGNvbnN0IHsgbG9jYXRpb24gfSA9IHdpbmRvdztcbiAgICBjb25zdCBuZXdIYXNoID0gYCMke2NvcHlJZH1gO1xuICAgIGNvbnN0IHBvcnQgPSBsb2NhdGlvbi5wb3J0ID8gYDoke2xvY2F0aW9uLnBvcnR9YCA6ICcnO1xuICAgIGNvbnN0IHVybFRvQ29weSA9IGAke2xvY2F0aW9uLnByb3RvY29sfS8vJHtsb2NhdGlvbi5ob3N0bmFtZX0ke3BvcnR9JHtsb2NhdGlvbi5wYXRobmFtZX0ke2xvY2F0aW9uLnNlYXJjaH0ke25ld0hhc2h9YDtcblxuICAgIGNvcHlUZXh0VG9DbGlwYm9hcmQodXJsVG9Db3B5KTtcbiAgfTtcblxuICBjb25zdCBzYW5pdGl6ZWRUaXRsZSA9IGVuY29kZVVSSUNvbXBvbmVudCh0aXRsZS5yZXBsYWNlKC8gL2csICctJykpO1xuICBjb25zdCB0b29sdGlwID0gaGFzQ29waWVkID8gdCgnYXJ0aWNsZS5jb3B5UGFnZUxpbmtDb3BpZWQnKSA6IHQoJ2FydGljbGUuY29weUhlYWRlckxpbmsnKTtcblxuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyQ29tcG9uZW50IGh5ZHJhdGU9e2h5ZHJhdGV9IHRpdGxlPXt0aXRsZX0+XG4gICAgICA8SWNvbkJ1dHRvbiBvbkNsaWNrPXtvbkNvcHlDbGlja30gZGF0YS10aXRsZT17c2FuaXRpemVkVGl0bGV9PlxuICAgICAgICA8VG9vbHRpcCB0b29sdGlwPXt0b29sdGlwfT5cbiAgICAgICAgICA8TGluayB0aXRsZT17Jyd9IC8+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICAgIDwvSWNvbkJ1dHRvbj5cbiAgICAgIDxoMiBpZD17c2FuaXRpemVkVGl0bGV9IHRhYkluZGV4PXswfSBkYW5nZXJvdXNseVNldElubmVySFRNTD17eyBfX2h0bWw6IGNvbnRlbnQgfHwgJycgfX0+PC9oMj5cbiAgICA8L1dyYXBwZXJDb21wb25lbnQ+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBDb3B5UGFyYWdyYXBoQnV0dG9uO1xuIl19 */",
|
|
55
55
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
56
56
|
});
|
|
57
57
|
|
|
58
|
-
var
|
|
58
|
+
var WrapperComponent = function WrapperComponent(_ref) {
|
|
59
59
|
var title = _ref.title,
|
|
60
|
-
|
|
60
|
+
hydrate = _ref.hydrate,
|
|
61
|
+
children = _ref.children;
|
|
62
|
+
|
|
63
|
+
if (hydrate) {
|
|
64
|
+
return ___EmotionJSX(React.Fragment, null, children);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return ___EmotionJSX(ContainerDiv, {
|
|
68
|
+
"data-header-copy-container": true,
|
|
69
|
+
"data-title": title
|
|
70
|
+
}, children);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
var CopyParagraphButton = function CopyParagraphButton(_ref2) {
|
|
74
|
+
var title = _ref2.title,
|
|
75
|
+
content = _ref2.content,
|
|
76
|
+
hydrate = _ref2.hydrate;
|
|
61
77
|
|
|
62
78
|
var _useTranslation = useTranslation(),
|
|
63
79
|
t = _useTranslation.t;
|
|
@@ -89,9 +105,9 @@ var CopyParagraphButton = function CopyParagraphButton(_ref) {
|
|
|
89
105
|
|
|
90
106
|
var sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
|
|
91
107
|
var tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
|
|
92
|
-
return ___EmotionJSX(
|
|
93
|
-
|
|
94
|
-
|
|
108
|
+
return ___EmotionJSX(WrapperComponent, {
|
|
109
|
+
hydrate: hydrate,
|
|
110
|
+
title: title
|
|
95
111
|
}, ___EmotionJSX(IconButton, {
|
|
96
112
|
onClick: onCopyClick,
|
|
97
113
|
"data-title": sanitizedTitle
|
|
@@ -21,10 +21,10 @@ var forEachElement = function forEachElement(selector, callback) {
|
|
|
21
21
|
var initCopyParagraphButtons = function initCopyParagraphButtons() {
|
|
22
22
|
forEachElement('[data-header-copy-container]', function (el) {
|
|
23
23
|
var title = el.getAttribute('data-title');
|
|
24
|
-
var content = el.innerHTML;
|
|
25
24
|
ReactDOM.hydrate(___EmotionJSX(CopyParagraphButton, {
|
|
26
25
|
title: title,
|
|
27
|
-
content:
|
|
26
|
+
content: title,
|
|
27
|
+
hydrate: true
|
|
28
28
|
}), el);
|
|
29
29
|
});
|
|
30
30
|
};
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
interface Props {
|
|
9
9
|
title?: string | null;
|
|
10
10
|
content?: string | null;
|
|
11
|
+
hydrate?: boolean;
|
|
11
12
|
}
|
|
12
|
-
declare const CopyParagraphButton: ({ title, content }: Props) => JSX.Element | null;
|
|
13
|
+
declare const CopyParagraphButton: ({ title, content, hydrate }: Props) => JSX.Element | null;
|
|
13
14
|
export default CopyParagraphButton;
|
|
@@ -50,7 +50,7 @@ var IconButton = (0, _styledBase["default"])("button", {
|
|
|
50
50
|
} : {
|
|
51
51
|
name: "1eoah0f",
|
|
52
52
|
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;}",
|
|
53
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
53
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCZ0MiLCJmaWxlIjoiQ29weVBhcmFncmFwaEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IExpbmsgfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0Jztcbi8vIEB0cy1pZ25vcmVcbmltcG9ydCBUb29sdGlwIGZyb20gJ0BuZGxhL3Rvb2x0aXAnO1xuaW1wb3J0IHsgY29weVRleHRUb0NsaXBib2FyZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuXG5jb25zdCBJY29uQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgZmxvYXQ6IGxlZnQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbGVmdDogLTNlbTtcbiAgdG9wOiAwLjFlbTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgYm9yZGVyOiAwO1xuICB6LWluZGV4OiAxO1xuICB0cmFuc2l0aW9uOiAwLjJzO1xuICBvcGFjaXR5OiAwO1xuXG4gICYgc3ZnIHtcbiAgICB3aWR0aDogMzBweDtcbiAgICBoZWlnaHQ6IDMwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IENvbnRhaW5lckRpdiA9IHN0eWxlZC5kaXZgXG4gICY6aG92ZXIgYnV0dG9uIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgb3BhY2l0eTogMC41O1xuICB9XG5cbiAgJiBoMiB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGxlZnQ6IC0yZW07XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHRpdGxlPzogc3RyaW5nIHwgbnVsbDtcbiAgY29udGVudD86IHN0cmluZyB8IG51bGw7XG4gIGh5ZHJhdGU/OiBib29sZWFuO1xufVxuXG5pbnRlcmZhY2UgV3JhcHBlclByb3BzIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgaHlkcmF0ZT86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IFdyYXBwZXJDb21wb25lbnQgPSAoeyB0aXRsZSwgaHlkcmF0ZSwgY2hpbGRyZW4gfTogV3JhcHBlclByb3BzKSA9PiB7XG4gIGlmIChoeWRyYXRlKSB7XG4gICAgcmV0dXJuIDw+e2NoaWxkcmVufTwvPjtcbiAgfVxuICByZXR1cm4gKFxuICAgIDxDb250YWluZXJEaXYgZGF0YS1oZWFkZXItY29weS1jb250YWluZXIgZGF0YS10aXRsZT17dGl0bGV9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvQ29udGFpbmVyRGl2PlxuICApO1xufTtcblxuY29uc3QgQ29weVBhcmFncmFwaEJ1dHRvbiA9ICh7IHRpdGxlLCBjb250ZW50LCBoeWRyYXRlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgW2hhc0NvcGllZCwgc2V0SGFzQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaGFzQ29waWVkKSB7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHNldEhhc0NvcGllZChmYWxzZSksIDMwMDApO1xuICAgIH1cbiAgfSwgW2hhc0NvcGllZF0pO1xuXG4gIGlmICghdGl0bGUpIHJldHVybiBudWxsO1xuXG4gIGNvbnN0IG9uQ29weUNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50LCBNb3VzZUV2ZW50Pik6IHZvaWQgPT4ge1xuICAgIHNldEhhc0NvcGllZCh0cnVlKTtcbiAgICBjb25zdCBjb3B5SWQgPSBldmVudC5jdXJyZW50VGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS10aXRsZScpO1xuICAgIGNvbnN0IHsgbG9jYXRpb24gfSA9IHdpbmRvdztcbiAgICBjb25zdCBuZXdIYXNoID0gYCMke2NvcHlJZH1gO1xuICAgIGNvbnN0IHBvcnQgPSBsb2NhdGlvbi5wb3J0ID8gYDoke2xvY2F0aW9uLnBvcnR9YCA6ICcnO1xuICAgIGNvbnN0IHVybFRvQ29weSA9IGAke2xvY2F0aW9uLnByb3RvY29sfS8vJHtsb2NhdGlvbi5ob3N0bmFtZX0ke3BvcnR9JHtsb2NhdGlvbi5wYXRobmFtZX0ke2xvY2F0aW9uLnNlYXJjaH0ke25ld0hhc2h9YDtcblxuICAgIGNvcHlUZXh0VG9DbGlwYm9hcmQodXJsVG9Db3B5KTtcbiAgfTtcblxuICBjb25zdCBzYW5pdGl6ZWRUaXRsZSA9IGVuY29kZVVSSUNvbXBvbmVudCh0aXRsZS5yZXBsYWNlKC8gL2csICctJykpO1xuICBjb25zdCB0b29sdGlwID0gaGFzQ29waWVkID8gdCgnYXJ0aWNsZS5jb3B5UGFnZUxpbmtDb3BpZWQnKSA6IHQoJ2FydGljbGUuY29weUhlYWRlckxpbmsnKTtcblxuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyQ29tcG9uZW50IGh5ZHJhdGU9e2h5ZHJhdGV9IHRpdGxlPXt0aXRsZX0+XG4gICAgICA8SWNvbkJ1dHRvbiBvbkNsaWNrPXtvbkNvcHlDbGlja30gZGF0YS10aXRsZT17c2FuaXRpemVkVGl0bGV9PlxuICAgICAgICA8VG9vbHRpcCB0b29sdGlwPXt0b29sdGlwfT5cbiAgICAgICAgICA8TGluayB0aXRsZT17Jyd9IC8+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICAgIDwvSWNvbkJ1dHRvbj5cbiAgICAgIDxoMiBpZD17c2FuaXRpemVkVGl0bGV9IHRhYkluZGV4PXswfSBkYW5nZXJvdXNseVNldElubmVySFRNTD17eyBfX2h0bWw6IGNvbnRlbnQgfHwgJycgfX0+PC9oMj5cbiAgICA8L1dyYXBwZXJDb21wb25lbnQ+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBDb3B5UGFyYWdyYXBoQnV0dG9uO1xuIl19 */",
|
|
54
54
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
55
55
|
});
|
|
56
56
|
var ContainerDiv = (0, _styledBase["default"])("div", {
|
|
@@ -62,13 +62,29 @@ var ContainerDiv = (0, _styledBase["default"])("div", {
|
|
|
62
62
|
} : {
|
|
63
63
|
name: "25spe5",
|
|
64
64
|
styles: "&:hover button{cursor:pointer;opacity:0.5;}& h2{position:relative;left:-2em;}",
|
|
65
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
65
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDK0IiLCJmaWxlIjoiQ29weVBhcmFncmFwaEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IExpbmsgfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0Jztcbi8vIEB0cy1pZ25vcmVcbmltcG9ydCBUb29sdGlwIGZyb20gJ0BuZGxhL3Rvb2x0aXAnO1xuaW1wb3J0IHsgY29weVRleHRUb0NsaXBib2FyZCB9IGZyb20gJ0BuZGxhL3V0aWwnO1xuXG5jb25zdCBJY29uQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgZmxvYXQ6IGxlZnQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbGVmdDogLTNlbTtcbiAgdG9wOiAwLjFlbTtcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgYm9yZGVyOiAwO1xuICB6LWluZGV4OiAxO1xuICB0cmFuc2l0aW9uOiAwLjJzO1xuICBvcGFjaXR5OiAwO1xuXG4gICYgc3ZnIHtcbiAgICB3aWR0aDogMzBweDtcbiAgICBoZWlnaHQ6IDMwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IENvbnRhaW5lckRpdiA9IHN0eWxlZC5kaXZgXG4gICY6aG92ZXIgYnV0dG9uIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgb3BhY2l0eTogMC41O1xuICB9XG5cbiAgJiBoMiB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGxlZnQ6IC0yZW07XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIHRpdGxlPzogc3RyaW5nIHwgbnVsbDtcbiAgY29udGVudD86IHN0cmluZyB8IG51bGw7XG4gIGh5ZHJhdGU/OiBib29sZWFuO1xufVxuXG5pbnRlcmZhY2UgV3JhcHBlclByb3BzIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgaHlkcmF0ZT86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IFdyYXBwZXJDb21wb25lbnQgPSAoeyB0aXRsZSwgaHlkcmF0ZSwgY2hpbGRyZW4gfTogV3JhcHBlclByb3BzKSA9PiB7XG4gIGlmIChoeWRyYXRlKSB7XG4gICAgcmV0dXJuIDw+e2NoaWxkcmVufTwvPjtcbiAgfVxuICByZXR1cm4gKFxuICAgIDxDb250YWluZXJEaXYgZGF0YS1oZWFkZXItY29weS1jb250YWluZXIgZGF0YS10aXRsZT17dGl0bGV9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvQ29udGFpbmVyRGl2PlxuICApO1xufTtcblxuY29uc3QgQ29weVBhcmFncmFwaEJ1dHRvbiA9ICh7IHRpdGxlLCBjb250ZW50LCBoeWRyYXRlIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgW2hhc0NvcGllZCwgc2V0SGFzQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaGFzQ29waWVkKSB7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHNldEhhc0NvcGllZChmYWxzZSksIDMwMDApO1xuICAgIH1cbiAgfSwgW2hhc0NvcGllZF0pO1xuXG4gIGlmICghdGl0bGUpIHJldHVybiBudWxsO1xuXG4gIGNvbnN0IG9uQ29weUNsaWNrID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50LCBNb3VzZUV2ZW50Pik6IHZvaWQgPT4ge1xuICAgIHNldEhhc0NvcGllZCh0cnVlKTtcbiAgICBjb25zdCBjb3B5SWQgPSBldmVudC5jdXJyZW50VGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS10aXRsZScpO1xuICAgIGNvbnN0IHsgbG9jYXRpb24gfSA9IHdpbmRvdztcbiAgICBjb25zdCBuZXdIYXNoID0gYCMke2NvcHlJZH1gO1xuICAgIGNvbnN0IHBvcnQgPSBsb2NhdGlvbi5wb3J0ID8gYDoke2xvY2F0aW9uLnBvcnR9YCA6ICcnO1xuICAgIGNvbnN0IHVybFRvQ29weSA9IGAke2xvY2F0aW9uLnByb3RvY29sfS8vJHtsb2NhdGlvbi5ob3N0bmFtZX0ke3BvcnR9JHtsb2NhdGlvbi5wYXRobmFtZX0ke2xvY2F0aW9uLnNlYXJjaH0ke25ld0hhc2h9YDtcblxuICAgIGNvcHlUZXh0VG9DbGlwYm9hcmQodXJsVG9Db3B5KTtcbiAgfTtcblxuICBjb25zdCBzYW5pdGl6ZWRUaXRsZSA9IGVuY29kZVVSSUNvbXBvbmVudCh0aXRsZS5yZXBsYWNlKC8gL2csICctJykpO1xuICBjb25zdCB0b29sdGlwID0gaGFzQ29waWVkID8gdCgnYXJ0aWNsZS5jb3B5UGFnZUxpbmtDb3BpZWQnKSA6IHQoJ2FydGljbGUuY29weUhlYWRlckxpbmsnKTtcblxuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyQ29tcG9uZW50IGh5ZHJhdGU9e2h5ZHJhdGV9IHRpdGxlPXt0aXRsZX0+XG4gICAgICA8SWNvbkJ1dHRvbiBvbkNsaWNrPXtvbkNvcHlDbGlja30gZGF0YS10aXRsZT17c2FuaXRpemVkVGl0bGV9PlxuICAgICAgICA8VG9vbHRpcCB0b29sdGlwPXt0b29sdGlwfT5cbiAgICAgICAgICA8TGluayB0aXRsZT17Jyd9IC8+XG4gICAgICAgIDwvVG9vbHRpcD5cbiAgICAgIDwvSWNvbkJ1dHRvbj5cbiAgICAgIDxoMiBpZD17c2FuaXRpemVkVGl0bGV9IHRhYkluZGV4PXswfSBkYW5nZXJvdXNseVNldElubmVySFRNTD17eyBfX2h0bWw6IGNvbnRlbnQgfHwgJycgfX0+PC9oMj5cbiAgICA8L1dyYXBwZXJDb21wb25lbnQ+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBDb3B5UGFyYWdyYXBoQnV0dG9uO1xuIl19 */",
|
|
66
66
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
67
67
|
});
|
|
68
68
|
|
|
69
|
-
var
|
|
69
|
+
var WrapperComponent = function WrapperComponent(_ref) {
|
|
70
70
|
var title = _ref.title,
|
|
71
|
-
|
|
71
|
+
hydrate = _ref.hydrate,
|
|
72
|
+
children = _ref.children;
|
|
73
|
+
|
|
74
|
+
if (hydrate) {
|
|
75
|
+
return (0, _core.jsx)(_react["default"].Fragment, null, children);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return (0, _core.jsx)(ContainerDiv, {
|
|
79
|
+
"data-header-copy-container": true,
|
|
80
|
+
"data-title": title
|
|
81
|
+
}, children);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
var CopyParagraphButton = function CopyParagraphButton(_ref2) {
|
|
85
|
+
var title = _ref2.title,
|
|
86
|
+
content = _ref2.content,
|
|
87
|
+
hydrate = _ref2.hydrate;
|
|
72
88
|
|
|
73
89
|
var _useTranslation = (0, _reactI18next.useTranslation)(),
|
|
74
90
|
t = _useTranslation.t;
|
|
@@ -100,9 +116,9 @@ var CopyParagraphButton = function CopyParagraphButton(_ref) {
|
|
|
100
116
|
|
|
101
117
|
var sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
|
|
102
118
|
var tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
|
|
103
|
-
return (0, _core.jsx)(
|
|
104
|
-
|
|
105
|
-
|
|
119
|
+
return (0, _core.jsx)(WrapperComponent, {
|
|
120
|
+
hydrate: hydrate,
|
|
121
|
+
title: title
|
|
106
122
|
}, (0, _core.jsx)(IconButton, {
|
|
107
123
|
onClick: onCopyClick,
|
|
108
124
|
"data-title": sanitizedTitle
|
|
@@ -33,11 +33,11 @@ var forEachElement = function forEachElement(selector, callback) {
|
|
|
33
33
|
var initCopyParagraphButtons = function initCopyParagraphButtons() {
|
|
34
34
|
forEachElement('[data-header-copy-container]', function (el) {
|
|
35
35
|
var title = el.getAttribute('data-title');
|
|
36
|
-
var content = el.innerHTML;
|
|
37
36
|
|
|
38
37
|
_reactDom["default"].hydrate((0, _core.jsx)(_CopyParagraphButton["default"], {
|
|
39
38
|
title: title,
|
|
40
|
-
content:
|
|
39
|
+
content: title,
|
|
40
|
+
hydrate: true
|
|
41
41
|
}), el);
|
|
42
42
|
});
|
|
43
43
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"description": "UI component library for NDLA.",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"publishConfig": {
|
|
93
93
|
"access": "public"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "567ca2aef46e065ec0b40ccaeed4e10743ea52c3"
|
|
96
96
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import React, { useEffect, useState } from 'react';
|
|
9
|
+
import React, { ReactNode, useEffect, useState } from 'react';
|
|
10
10
|
|
|
11
11
|
import styled from '@emotion/styled';
|
|
12
12
|
import { Link } from '@ndla/icons/common';
|
|
@@ -47,9 +47,27 @@ const ContainerDiv = styled.div`
|
|
|
47
47
|
interface Props {
|
|
48
48
|
title?: string | null;
|
|
49
49
|
content?: string | null;
|
|
50
|
+
hydrate?: boolean;
|
|
50
51
|
}
|
|
51
52
|
|
|
52
|
-
|
|
53
|
+
interface WrapperProps {
|
|
54
|
+
title: string;
|
|
55
|
+
hydrate?: boolean;
|
|
56
|
+
children: ReactNode;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const WrapperComponent = ({ title, hydrate, children }: WrapperProps) => {
|
|
60
|
+
if (hydrate) {
|
|
61
|
+
return <>{children}</>;
|
|
62
|
+
}
|
|
63
|
+
return (
|
|
64
|
+
<ContainerDiv data-header-copy-container data-title={title}>
|
|
65
|
+
{children}
|
|
66
|
+
</ContainerDiv>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const CopyParagraphButton = ({ title, content, hydrate }: Props) => {
|
|
53
71
|
const { t } = useTranslation();
|
|
54
72
|
const [hasCopied, setHasCopied] = useState(false);
|
|
55
73
|
useEffect(() => {
|
|
@@ -73,15 +91,16 @@ const CopyParagraphButton = ({ title, content }: Props) => {
|
|
|
73
91
|
|
|
74
92
|
const sanitizedTitle = encodeURIComponent(title.replace(/ /g, '-'));
|
|
75
93
|
const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
|
|
94
|
+
|
|
76
95
|
return (
|
|
77
|
-
<
|
|
96
|
+
<WrapperComponent hydrate={hydrate} title={title}>
|
|
78
97
|
<IconButton onClick={onCopyClick} data-title={sanitizedTitle}>
|
|
79
98
|
<Tooltip tooltip={tooltip}>
|
|
80
99
|
<Link title={''} />
|
|
81
100
|
</Tooltip>
|
|
82
101
|
</IconButton>
|
|
83
102
|
<h2 id={sanitizedTitle} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }}></h2>
|
|
84
|
-
</
|
|
103
|
+
</WrapperComponent>
|
|
85
104
|
);
|
|
86
105
|
};
|
|
87
106
|
|
|
@@ -19,8 +19,7 @@ const forEachElement = (selector: string, callback: Function) => {
|
|
|
19
19
|
const initCopyParagraphButtons = () => {
|
|
20
20
|
forEachElement('[data-header-copy-container]', (el: HTMLElement) => {
|
|
21
21
|
const title = el.getAttribute('data-title');
|
|
22
|
-
|
|
23
|
-
ReactDOM.hydrate(<CopyParagraphButton title={title} content={content} />, el);
|
|
22
|
+
ReactDOM.hydrate(<CopyParagraphButton title={title} content={title} hydrate={true} />, el);
|
|
24
23
|
});
|
|
25
24
|
};
|
|
26
25
|
|