@times-components/save-and-share-bar 0.24.13-alpha.3 → 0.25.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/CHANGELOG.md +19 -0
- package/dist/components/save-button.js +11 -1
- package/dist/save-and-share-bar.js +10 -13
- package/dist/tracking/with-track-events.js +17 -29
- package/package.json +17 -17
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.25.0](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.24.13...@times-components/save-and-share-bar@0.25.0) (2024-11-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **TMD-601:** add tracking for save article button ([#3971](https://github.com/newsuk/times-components/issues/3971)) ([13e6e42](https://github.com/newsuk/times-components/commit/13e6e425876cfc3465081e1a5feacc72229467f1))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.24.13](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.24.12...@times-components/save-and-share-bar@0.24.13) (2024-11-05)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @times-components/save-and-share-bar
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.24.12](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.24.11...@times-components/save-and-share-bar@0.24.12) (2024-11-05)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @times-components/save-and-share-bar
|
|
@@ -35,7 +35,15 @@ const SaveButton = props => {
|
|
|
35
35
|
const buttonText = isBookmarked ? "Saved" : "Save";
|
|
36
36
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.OutlineButton, {
|
|
37
37
|
isLoading: props.loading,
|
|
38
|
-
onClick: () =>
|
|
38
|
+
onClick: () => {
|
|
39
|
+
if (!isBookmarked) {
|
|
40
|
+
props.onSaveToMyArticles();
|
|
41
|
+
} else {
|
|
42
|
+
props.onRemoveFromMyArticles();
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
props.onToggleSave(props.articleId, props.data.isBookmarked);
|
|
46
|
+
}
|
|
39
47
|
}, props.loading && /*#__PURE__*/_react.default.createElement(_styled.IconActivityIndicatorContainer, null, /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, null)), !isBookmarked ? /*#__PURE__*/_react.default.createElement(_bookmarkIcon.default, {
|
|
40
48
|
height: iconStyles.height,
|
|
41
49
|
width: iconStyles.width,
|
|
@@ -48,6 +56,8 @@ const SaveButton = props => {
|
|
|
48
56
|
};
|
|
49
57
|
|
|
50
58
|
SaveButton.propTypes = {
|
|
59
|
+
onSaveToMyArticles: _propTypes.default.func,
|
|
60
|
+
onRemoveFromMyArticles: _propTypes.default.func,
|
|
51
61
|
loading: _propTypes.default.bool,
|
|
52
62
|
error: _propTypes.default.bool,
|
|
53
63
|
data: _propTypes.default.shape({}),
|
|
@@ -62,10 +62,10 @@ function SaveAndShareBar(props) {
|
|
|
62
62
|
articleUrl = props.articleUrl,
|
|
63
63
|
savingEnabled = props.savingEnabled,
|
|
64
64
|
sharingEnabled = props.sharingEnabled,
|
|
65
|
-
onShareBarExpend = props.onShareBarExpend,
|
|
66
|
-
onShareBarClose = props.onShareBarClose,
|
|
67
65
|
onShareOnFB = props.onShareOnFB,
|
|
68
66
|
onShareOnTwitter = props.onShareOnTwitter,
|
|
67
|
+
onSaveToMyArticles = props.onSaveToMyArticles,
|
|
68
|
+
onRemoveFromMyArticles = props.onRemoveFromMyArticles,
|
|
69
69
|
isPreviewMode = props.isPreviewMode;
|
|
70
70
|
|
|
71
71
|
const _React$useState = _react.default.useState(false),
|
|
@@ -127,12 +127,6 @@ function SaveAndShareBar(props) {
|
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
const togglePopover = () => {
|
|
130
|
-
if (!popoverOpen) {
|
|
131
|
-
onShareBarExpend();
|
|
132
|
-
} else {
|
|
133
|
-
onShareBarClose();
|
|
134
|
-
}
|
|
135
|
-
|
|
136
130
|
setPopoverOpen(prev => !prev);
|
|
137
131
|
};
|
|
138
132
|
|
|
@@ -215,7 +209,10 @@ function SaveAndShareBar(props) {
|
|
|
215
209
|
"data-testid": "save-star"
|
|
216
210
|
}, /*#__PURE__*/_react.default.createElement(_tsComponents.SaveStar, {
|
|
217
211
|
articleId: articleId
|
|
218
|
-
}, /*#__PURE__*/_react.default.createElement(_saveButton.default,
|
|
212
|
+
}, /*#__PURE__*/_react.default.createElement(_saveButton.default, {
|
|
213
|
+
onSaveToMyArticles: onSaveToMyArticles,
|
|
214
|
+
onRemoveFromMyArticles: onRemoveFromMyArticles
|
|
215
|
+
})))), isPreviewMode && /*#__PURE__*/_react.default.createElement("div", {
|
|
219
216
|
"data-testid": "save-star-preview"
|
|
220
217
|
}, /*#__PURE__*/_react.default.createElement(_tsComponents.SaveStar, {
|
|
221
218
|
isPreviewMode: true
|
|
@@ -228,11 +225,11 @@ SaveAndShareBar.propTypes = {
|
|
|
228
225
|
articleHeadline: _propTypes.default.string.isRequired,
|
|
229
226
|
getTokenisedShareUrl: _propTypes.default.func,
|
|
230
227
|
onCopyLink: _propTypes.default.func.isRequired,
|
|
231
|
-
onShareBarExpend: _propTypes.default.func,
|
|
232
|
-
onShareBarClose: _propTypes.default.func,
|
|
233
228
|
onShareOnFB: _propTypes.default.func,
|
|
234
229
|
onShareEmail: _propTypes.default.func,
|
|
235
230
|
onShareOnTwitter: _propTypes.default.func,
|
|
231
|
+
onSaveToMyArticles: _propTypes.default.func,
|
|
232
|
+
onRemoveFromMyArticles: _propTypes.default.func,
|
|
236
233
|
savingEnabled: _propTypes.default.bool.isRequired,
|
|
237
234
|
sharingEnabled: _propTypes.default.bool.isRequired,
|
|
238
235
|
isPreviewMode: _propTypes.default.bool,
|
|
@@ -241,11 +238,11 @@ SaveAndShareBar.propTypes = {
|
|
|
241
238
|
/* Serves as an indication when share links are clicked for tracking and analytics */
|
|
242
239
|
|
|
243
240
|
SaveAndShareBar.defaultProps = {
|
|
244
|
-
onShareBarExpend: () => {},
|
|
245
|
-
onShareBarClose: () => {},
|
|
246
241
|
onShareOnFB: () => {},
|
|
247
242
|
onShareOnTwitter: () => {},
|
|
248
243
|
onShareEmail: () => {},
|
|
244
|
+
onSaveToMyArticles: () => {},
|
|
245
|
+
onRemoveFromMyArticles: () => {},
|
|
249
246
|
getTokenisedShareUrl: _getTokenisedArticleUrlApi.default,
|
|
250
247
|
isPreviewMode: _propTypes.default.bool = false
|
|
251
248
|
};
|
|
@@ -9,32 +9,34 @@ var _tracking = require("@times-components/tracking");
|
|
|
9
9
|
|
|
10
10
|
var _default = Component => (0, _tracking.withTrackEvents)(Component, {
|
|
11
11
|
analyticsEvents: [{
|
|
12
|
-
actionName: "
|
|
12
|
+
actionName: "navigation",
|
|
13
13
|
eventName: "onSaveToMyArticles",
|
|
14
14
|
getAttrs: _ref => {
|
|
15
15
|
let articleId = _ref.articleId,
|
|
16
16
|
articleHeadline = _ref.articleHeadline;
|
|
17
17
|
return {
|
|
18
18
|
articleId,
|
|
19
|
-
articleHeadline
|
|
19
|
+
articleHeadline,
|
|
20
|
+
event_navigation_name: "add to my articles"
|
|
20
21
|
};
|
|
21
22
|
},
|
|
22
23
|
trackingName: "ArticleSaveToMyArticles"
|
|
23
24
|
}, {
|
|
24
|
-
actionName: "
|
|
25
|
-
eventName: "
|
|
25
|
+
actionName: "navigation",
|
|
26
|
+
eventName: "onRemoveFromMyArticles",
|
|
26
27
|
getAttrs: _ref2 => {
|
|
27
28
|
let articleId = _ref2.articleId,
|
|
28
29
|
articleHeadline = _ref2.articleHeadline;
|
|
29
30
|
return {
|
|
30
31
|
articleId,
|
|
31
|
-
articleHeadline
|
|
32
|
+
articleHeadline,
|
|
33
|
+
event_navigation_name: "remove from my articles"
|
|
32
34
|
};
|
|
33
35
|
},
|
|
34
|
-
trackingName: "
|
|
36
|
+
trackingName: "ArticleRemoveFromMyArticles"
|
|
35
37
|
}, {
|
|
36
38
|
actionName: "Pressed",
|
|
37
|
-
eventName: "
|
|
39
|
+
eventName: "onShareEmail",
|
|
38
40
|
getAttrs: _ref3 => {
|
|
39
41
|
let articleId = _ref3.articleId,
|
|
40
42
|
articleHeadline = _ref3.articleHeadline;
|
|
@@ -43,10 +45,10 @@ var _default = Component => (0, _tracking.withTrackEvents)(Component, {
|
|
|
43
45
|
articleHeadline
|
|
44
46
|
};
|
|
45
47
|
},
|
|
46
|
-
trackingName: "
|
|
48
|
+
trackingName: "ArticleShareUrlByEmail"
|
|
47
49
|
}, {
|
|
48
50
|
actionName: "Pressed",
|
|
49
|
-
eventName: "
|
|
51
|
+
eventName: "onCopyLink",
|
|
50
52
|
getAttrs: _ref4 => {
|
|
51
53
|
let articleId = _ref4.articleId,
|
|
52
54
|
articleHeadline = _ref4.articleHeadline;
|
|
@@ -55,10 +57,10 @@ var _default = Component => (0, _tracking.withTrackEvents)(Component, {
|
|
|
55
57
|
articleHeadline
|
|
56
58
|
};
|
|
57
59
|
},
|
|
58
|
-
trackingName: "
|
|
60
|
+
trackingName: "ArticleCopyLink"
|
|
59
61
|
}, {
|
|
60
62
|
actionName: "Pressed",
|
|
61
|
-
eventName: "
|
|
63
|
+
eventName: "onShareOnFB",
|
|
62
64
|
getAttrs: _ref5 => {
|
|
63
65
|
let articleId = _ref5.articleId,
|
|
64
66
|
articleHeadline = _ref5.articleHeadline;
|
|
@@ -67,33 +69,19 @@ var _default = Component => (0, _tracking.withTrackEvents)(Component, {
|
|
|
67
69
|
articleHeadline
|
|
68
70
|
};
|
|
69
71
|
},
|
|
70
|
-
trackingName: "
|
|
72
|
+
trackingName: "ArticleShareOnFacebook"
|
|
71
73
|
}, {
|
|
72
74
|
actionName: "Pressed",
|
|
73
|
-
eventName: "
|
|
75
|
+
eventName: "onShareOnTwitter",
|
|
74
76
|
getAttrs: _ref6 => {
|
|
75
77
|
let articleId = _ref6.articleId,
|
|
76
78
|
articleHeadline = _ref6.articleHeadline;
|
|
77
79
|
return {
|
|
78
80
|
articleId,
|
|
79
|
-
articleHeadline
|
|
80
|
-
event_social_action: "share start"
|
|
81
|
-
};
|
|
82
|
-
},
|
|
83
|
-
trackingName: "ArticleShareOnExpend"
|
|
84
|
-
}, {
|
|
85
|
-
actionName: "Pressed",
|
|
86
|
-
eventName: "onShareBarClose",
|
|
87
|
-
getAttrs: _ref7 => {
|
|
88
|
-
let articleId = _ref7.articleId,
|
|
89
|
-
articleHeadline = _ref7.articleHeadline;
|
|
90
|
-
return {
|
|
91
|
-
articleId,
|
|
92
|
-
articleHeadline,
|
|
93
|
-
event_social_action: "share start"
|
|
81
|
+
articleHeadline
|
|
94
82
|
};
|
|
95
83
|
},
|
|
96
|
-
trackingName: "
|
|
84
|
+
trackingName: "ArticleShareOnTwitter"
|
|
97
85
|
}]
|
|
98
86
|
});
|
|
99
87
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/save-and-share-bar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
4
4
|
"description": "Save and Share bar ",
|
|
5
5
|
"main": "dist/save-and-share-bar",
|
|
6
6
|
"dev": "src/save-and-share-bar",
|
|
@@ -33,26 +33,26 @@
|
|
|
33
33
|
"homepage": "https://github.com/newsuk/times-components#readme",
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@storybook/addon-knobs": "6.4.0",
|
|
36
|
-
"@times-components/context": "
|
|
37
|
-
"@times-components/icons": "
|
|
38
|
-
"@times-components/message-bar": "
|
|
39
|
-
"@times-components/provider-queries": "
|
|
40
|
-
"@times-components/tracking": "
|
|
41
|
-
"@times-components/ts-components": "
|
|
42
|
-
"@times-components/ts-styleguide": "
|
|
43
|
-
"@times-components/user-state": "
|
|
44
|
-
"@times-components/utils": "
|
|
36
|
+
"@times-components/context": "1.24.0",
|
|
37
|
+
"@times-components/icons": "2.22.12",
|
|
38
|
+
"@times-components/message-bar": "0.7.85",
|
|
39
|
+
"@times-components/provider-queries": "2.23.3",
|
|
40
|
+
"@times-components/tracking": "2.22.34",
|
|
41
|
+
"@times-components/ts-components": "1.110.1",
|
|
42
|
+
"@times-components/ts-styleguide": "1.50.34",
|
|
43
|
+
"@times-components/user-state": "0.5.51",
|
|
44
|
+
"@times-components/utils": "6.26.0",
|
|
45
45
|
"prop-types": "15.7.2",
|
|
46
46
|
"styled-components": "4.3.2"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@babel/core": "7.4.4",
|
|
50
|
-
"@times-components/eslint-config-thetimes": "
|
|
51
|
-
"@times-components/jest-configurator-web": "
|
|
52
|
-
"@times-components/jest-serializer": "
|
|
53
|
-
"@times-components/provider-test-tools": "
|
|
54
|
-
"@times-components/storybook": "
|
|
55
|
-
"@times-components/webpack-configurator": "
|
|
50
|
+
"@times-components/eslint-config-thetimes": "0.8.18",
|
|
51
|
+
"@times-components/jest-configurator-web": "0.8.2",
|
|
52
|
+
"@times-components/jest-serializer": "3.13.20",
|
|
53
|
+
"@times-components/provider-test-tools": "1.30.4",
|
|
54
|
+
"@times-components/storybook": "4.12.34",
|
|
55
|
+
"@times-components/webpack-configurator": "2.1.1",
|
|
56
56
|
"babel-jest": "24.8.0",
|
|
57
57
|
"eslint": "5.9.0",
|
|
58
58
|
"jest": "24.8.0",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "0f70ed8a34d2d9fa36a09559d8b1f7dcf024e497"
|
|
77
77
|
}
|
package/rnw.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=11)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/icons/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/user-state/rnw")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/ts-components/rnw")},function(e,t){e.exports=require("@times-components/context/rnw")},function(e,t){e.exports=require("@times-components/provider-queries/rnw")},function(e,t){e.exports=require("@times-components/tracking/rnw")},function(e,t,n){"use strict";n.r(t);var r=n(0),a=n.n(r),i=n(3),o=n.n(i),l=n(2),c=n(4),s=n.n(c),d=n(8),u=n(7),p=n(9),h=n(6);const m=Object(h.makeClient)();var f=e=>m.query({query:p.getTokenisedArticleUrl,variables:{id:e}}),g=n(10),b="https://www.facebook.com/sharer/sharer.php",v="https://twitter.com/intent/tweet",w=n(5);var y={svgIcon:{fb:{height:18},star:{height:18},fillColour:w.colours.functional.secondary,height:16,hoverFillColour:w.colours.functional.brandColour,save:{fillColour:w.colours.functional.white,strokeColour:w.colours.functional.secondary}}},x=n(1),k=n.n(x);const E=k.a.div.withConfig({displayName:"styled__SaveAndShareBarContainer",componentId:"qkwc0r-0"})(["display:flex;align-items:center;justify-content:start;gap:10px;height:100%;padding-block:10px;"]),S=k.a.div.withConfig({displayName:"styled__ShareButtonContainer",componentId:"qkwc0r-1"})(["position:relative;"]),C=k.a.button.withConfig({displayName:"styled__OutlineButton",componentId:"qkwc0r-2"})(["position:relative;height:32px;min-width:84px;padding:8px 12px 8px 12px;background-color:",";color:#333333;font-size:14px;font-family:Roboto,sans-serif;font-weight:500;cursor:pointer;outline:none;border:0.5px solid #000;display:flex;justify-content:center;align-items:center;gap:8px;transition:background-color 0.2s;",";&:hover{background-color:#eeeeee;}&:focus-visible{outline:2px solid #00527a;outline-offset:2px;background-color:#eeeeee;}&:active{background-color:#eeeeee;}"],e=>e.isPopoverOpen?"#EEEEEE":"#fff",e=>e.isLoading&&"\n border: none;\n background-color: #eeeeee;\n cursor: default;\n "),I=k.a.div.withConfig({displayName:"styled__Popover",componentId:"qkwc0r-3"})(["position:absolute;",";left:0;right:12px;transform:",";display:",';flex-direction:column;background-color:#fff;box-shadow:0px -20px 32px 0px #11111114,0px 4px 4px 0px #00000040;z-index:99;width:calc(100vw - 24px);max-width:450px;&::after{content:"";position:absolute;',";left:36px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;}"],e=>"top"===e.position?"top: 0":"bottom: 0",e=>"top"===e.position?"translateY(calc((100% + 10px) * -1))":"translateY(calc((100% + 10px)))",e=>e.isOpen?"flex":"none",e=>"top"===e.position?"\n bottom: -16px;\n transform: rotate(180deg);\n ":"\n top: -16px;\n "),O=k.a.div.withConfig({displayName:"styled__PopoverHeader",componentId:"qkwc0r-4"})(["display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #e4e4e4;h3{font-family:Roboto;font-size:18px;font-weight:500;margin:0;padding:24px;}button{margin:8px;}"]),N=k.a.div.withConfig({displayName:"styled__PopoverContent",componentId:"qkwc0r-5"})(["display:flex;justify-content:flex-start;align-items:center;gap:24px;padding:24px;@media (max-width:449px){flex-direction:column;align-items:flex-start;}"]),_=k.a.button.withConfig({displayName:"styled__CloseButton",componentId:"qkwc0r-6"})(["height:48px;width:48px;border-radius:50%;padding:16px;background-color:transparent;border:none;outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s;&:focus-visible{background-color:#eeeeee;border:1px solid #000;}&:hover{background-color:#eeeeee;}"]),L=k.a.div.withConfig({displayName:"styled__IconActivityIndicatorContainer",componentId:"qkwc0r-7"})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);div{height:16px;width:16px;border-right-color:#333333;border-width:0.125em;}"]),A=k.a.div.withConfig({displayName:"styled__EmailSpinnerContainer",componentId:"qkwc0r-8"})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);var T=()=>a.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:12,height:12,viewBox:"0 0 14 14",fill:"none"},a.a.createElement("path",{d:"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",fill:"#333333"}));function j(){return(j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function P(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}const q=k.a.div.withConfig({displayName:"share-item__ShareItemLabelContainer",componentId:"sc-1idd4zx-0"})(["display:flex;align-items:center;gap:8px;"]),B=k.a.span.withConfig({displayName:"share-item__ShareItemLabelText",componentId:"sc-1idd4zx-1"})(["font-family:Roboto;font-size:16px;font-weight:500;"]),H=k.a.a.withConfig({displayName:"share-item__StyledLink",componentId:"sc-1idd4zx-2"})(["color:#005c8a;text-decoration:none;cursor:pointer;&:hover{color:#00527a;}"]),M=k.a.div.withConfig({displayName:"share-item__IconContainer",componentId:"sc-1idd4zx-3"})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;"]),z=e=>{let t=e.children,n=e.testId,r=e.tooltipContent,i=e.href,o=e.onClick,l=void 0===o?()=>{}:o,c=P(e,["children","testId","tooltipContent","href","onClick"]);return a.a.createElement(H,j({"data-testid":n,onClick:l,href:i,target:"_blank",title:r},c),t)},F=e=>{let t=e.children,n=e.icon;return a.a.createElement(q,null,a.a.createElement(M,null,n),a.a.createElement(B,null,t))};z.defaultProps={testId:"share-item",href:"",onClick:()=>{},tooltipContent:""};class U extends r.Component{constructor(e){super(e),this.state={isLoading:!1},this.onShare=this.onShare.bind(this)}onShare(e){const t=this.props,n=t.articleId,r=t.getTokenisedShareUrl,a=t.shouldTokenise,i=t.articleUrl,o=t.onShareEmail,l=t.articleHeadline,c=t.hostName;if(e.preventDefault(),o({articleId:n,articleUrl:i,articleHeadline:l}),a)this.setState({isLoading:!0}),r(n).then(e=>{const t=e.data;t&&t.article&&(this.setState({isLoading:!1}),this.openMailClient(Object(h.getDomainSpecificUrl)(c,t.article.tokenisedUrl)))}).catch(()=>{this.setState({isLoading:!1})});else{const e=window.location.search.match(/[?&]shareToken=([^&]+)/);this.openMailClient(e?"".concat(i,"?shareToken=").concat(e[1]):i)}}openMailClient(e){const t=this.props,n=t.articleHeadline,r="TIMES"!==t.publicationName?"The Sunday Times":"The Times",a="mailto:?subject=".concat(n," from ").concat(r,"&body=I thought you would be interested in this story from ").concat(r,"%0A%0A").concat(n,"%0A%0A").concat(e);window.location.assign(a)}render(){const e=this.state.isLoading;return a.a.createElement(z,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},a.a.createElement(F,{icon:e?a.a.createElement(A,null,a.a.createElement(l.IconActivityIndicator,{size:"small"})):a.a.createElement(l.IconEmail,{ariaLabel:"",fillColour:"currentColor",height:y.svgIcon.height,title:"Share by email"})},"Email"))}}U.defaultProps={publicationName:"TIMES"};var R=U;const D=e=>{let t=e.height,n=e.width,r=e.visibility;return a.a.createElement("svg",{"data-id":"bookmark-icon-svg_outline",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",style:{visibility:r},fill:"currentColor",width:n,height:t},a.a.createElement("path",{d:"M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"}))};D.defaultProps={height:16,width:16,visibility:"visible"};var V=D;const Y=e=>{let t=e.height,n=e.width,r=e.visibility;return a.a.createElement("svg",{"data-id":"bookmark-icon-svg_outline",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",style:{visibility:r},fill:"currentColor",width:n,height:t},a.a.createElement("path",{d:"M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"}))};Y.defaultProps={height:16,width:16,visibility:"visible"};var W=Y;var Z=a.a.memo(e=>{if(e.error||!e.loading&&!e.data)return null;const t=(e.data||{isBookmarked:!1}).isBookmarked,n={height:14,width:14,visibility:e.loading?"hidden":"visible"},r=t?"Saved":"Save";return a.a.createElement(a.a.Fragment,null,a.a.createElement(C,{isLoading:e.loading,onClick:()=>e.onToggleSave(e.articleId,e.data.isBookmarked)},e.loading&&a.a.createElement(L,null,a.a.createElement(l.IconActivityIndicator,null)),t?a.a.createElement(W,{height:n.height,width:n.width,visibility:n.visibility}):a.a.createElement(V,{height:n.height,width:n.width,visibility:n.visibility}),e.loading?"":r))});const $=e=>{let t=e.height,n=e.width;return a.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",fill:"currentColor",width:n,height:t},a.a.createElement("path",{d:"M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"}))};$.defaultProps={height:16,width:16};var G=$;function J(){return(J=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function K(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,a,i=[],o=!0,l=!1;try{for(n=n.call(e);!(o=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);o=!0);}catch(e){l=!0,a=e}finally{try{o||null==n.return||n.return()}finally{if(l)throw a}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return Q(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Q(e,t)}(e,t)||function(){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 Q(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function X(e){const t=e.articleId,n=e.articleUrl,i=e.savingEnabled,o=e.sharingEnabled,c=e.onShareBarExpend,p=e.onShareBarClose,h=e.onShareOnFB,m=e.onShareOnTwitter,f=e.isPreviewMode,g=K(a.a.useState(!1),2),w=g[0],x=g[1],k=K(a.a.useState(null),2),L=k[0],A=k[1],j=K(a.a.useState(null),2),P=j[0],q=j[1],B=a.a.useRef(),H=a.a.useRef(),M=a.a.useRef();Object(r.useEffect)(()=>{"undefined"!=typeof window&&(A(window.innerHeight),q(window.innerWidth))},[]),Object(r.useEffect)(()=>{if(M.current)return document.body.addEventListener("click",e),()=>{document.body.removeEventListener("click",e)};function e(e){M.current.contains(e.target)||e.target===H.current||x(!1)}},[]);const U=B.current?B.current.getBoundingClientRect().bottom:L;const D=()=>{w?p():c(),x(e=>!e)};return a.a.createElement(E,{"data-testid":"save-and-share-bar",ref:B},o&&a.a.createElement(S,null,a.a.createElement(C,{ref:H,isPopoverOpen:w,onClick:D},a.a.createElement(G,{height:14,width:14}),"Share"),a.a.createElement(I,{ref:M,position:L?L-U>(P&&P>449?250:400)?"bottom":"top":"bottom",isOpen:w,"aria-expanded":w},a.a.createElement(O,null,a.a.createElement("h3",null,"Share this article"),a.a.createElement(_,{onClick:D},a.a.createElement(T,null))),a.a.createElement(N,null,a.a.createElement(d.SectionContext.Consumer,null,t=>{let n=t.publicationName;return a.a.createElement(s.a,{state:s.a.showTokenisedEmailShare,fallback:a.a.createElement(R,J({},e,{shouldTokenise:!1,publicationName:n}))},a.a.createElement(R,J({},e,{shouldTokenise:!0,publicationName:n})))}),a.a.createElement(z,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(v,"?text=").concat(n),onClick:m},a.a.createElement(F,{icon:a.a.createElement(l.IconTwitter,{ariaLabel:"",fillColour:"currentColor",height:y.svgIcon.height,title:"Share on Twitter"})},"Twitter")),a.a.createElement(z,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(b,"?u=").concat(n),onClick:h},a.a.createElement(F,{icon:a.a.createElement(l.IconFacebook,{ariaLabel:"",fillColour:"currentColor",height:y.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),a.a.createElement(z,{testId:"copy-to-clickboard",tooltipContent:"Copy link to clipboard",href:"".concat(b,"?u=").concat(n),onClick:function(t){const r=e.onCopyLink;t.preventDefault(),navigator.clipboard.writeText(n),r()}},a.a.createElement(F,{icon:a.a.createElement(l.IconCopyLink,{ariaLabel:"",fillColour:"currentColor",height:y.svgIcon.height,title:"Copy link to clipboard"})},"Link"))))),i?a.a.createElement(a.a.Fragment,null,a.a.createElement(s.a,{state:s.a.showArticleSaveButton,serverRender:!1},a.a.createElement("div",{"data-testid":"save-star"},a.a.createElement(u.SaveStar,{articleId:t},a.a.createElement(Z,null)))),f&&a.a.createElement("div",{"data-testid":"save-star-preview"},a.a.createElement(u.SaveStar,{isPreviewMode:!0},a.a.createElement(Z,null)))):null)}X.defaultProps={onShareBarExpend:()=>{},onShareBarClose:()=>{},onShareOnFB:()=>{},onShareOnTwitter:()=>{},onShareEmail:()=>{},getTokenisedShareUrl:f,isPreviewMode:o.a.bool=!1};var ee;t.default=(ee=X,Object(g.withTrackEvents)(ee,{analyticsEvents:[{actionName:"Pressed",eventName:"onSaveToMyArticles",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleSaveToMyArticles"},{actionName:"Pressed",eventName:"onShareEmail",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareUrlByEmail"},{actionName:"Pressed",eventName:"onCopyLink",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleCopyLink"},{actionName:"Pressed",eventName:"onShareOnFB",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareOnFacebook"},{actionName:"Pressed",eventName:"onShareOnTwitter",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareOnTwitter"},{actionName:"Pressed",eventName:"onShareBarExpend",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline,event_social_action:"share start"}),trackingName:"ArticleShareOnExpend"},{actionName:"Pressed",eventName:"onShareBarClose",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline,event_social_action:"share start"}),trackingName:"ArticleShareOnClose"}]}))}]);
|
|
1
|
+
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=11)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("styled-components")},function(e,t){e.exports=require("@times-components/icons/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/user-state/rnw")},function(e,t){e.exports=require("@times-components/ts-styleguide/rnw")},function(e,t){e.exports=require("@times-components/utils/rnw")},function(e,t){e.exports=require("@times-components/ts-components/rnw")},function(e,t){e.exports=require("@times-components/context/rnw")},function(e,t){e.exports=require("@times-components/provider-queries/rnw")},function(e,t){e.exports=require("@times-components/tracking/rnw")},function(e,t,n){"use strict";n.r(t);var r=n(0),i=n.n(r),o=n(3),a=n.n(o),l=n(2),c=n(4),s=n.n(c),d=n(8),u=n(7),p=n(9),h=n(6);const m=Object(h.makeClient)();var f=e=>m.query({query:p.getTokenisedArticleUrl,variables:{id:e}}),g=n(10),v="https://www.facebook.com/sharer/sharer.php",b="https://twitter.com/intent/tweet",y=n(5);var w={svgIcon:{fb:{height:18},star:{height:18},fillColour:y.colours.functional.secondary,height:16,hoverFillColour:y.colours.functional.brandColour,save:{fillColour:y.colours.functional.white,strokeColour:y.colours.functional.secondary}}},x=n(1),k=n.n(x);const E=k.a.div.withConfig({displayName:"styled__SaveAndShareBarContainer",componentId:"qkwc0r-0"})(["display:flex;align-items:center;justify-content:start;gap:10px;height:100%;padding-block:10px;"]),S=k.a.div.withConfig({displayName:"styled__ShareButtonContainer",componentId:"qkwc0r-1"})(["position:relative;"]),C=k.a.button.withConfig({displayName:"styled__OutlineButton",componentId:"qkwc0r-2"})(["position:relative;height:32px;min-width:84px;padding:8px 12px 8px 12px;background-color:",";color:#333333;font-size:14px;font-family:Roboto,sans-serif;font-weight:500;cursor:pointer;outline:none;border:0.5px solid #000;display:flex;justify-content:center;align-items:center;gap:8px;transition:background-color 0.2s;",";&:hover{background-color:#eeeeee;}&:focus-visible{outline:2px solid #00527a;outline-offset:2px;background-color:#eeeeee;}&:active{background-color:#eeeeee;}"],e=>e.isPopoverOpen?"#EEEEEE":"#fff",e=>e.isLoading&&"\n border: none;\n background-color: #eeeeee;\n cursor: default;\n "),I=k.a.div.withConfig({displayName:"styled__Popover",componentId:"qkwc0r-3"})(["position:absolute;",";left:0;right:12px;transform:",";display:",';flex-direction:column;background-color:#fff;box-shadow:0px -20px 32px 0px #11111114,0px 4px 4px 0px #00000040;z-index:99;width:calc(100vw - 24px);max-width:450px;&::after{content:"";position:absolute;',";left:36px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;}"],e=>"top"===e.position?"top: 0":"bottom: 0",e=>"top"===e.position?"translateY(calc((100% + 10px) * -1))":"translateY(calc((100% + 10px)))",e=>e.isOpen?"flex":"none",e=>"top"===e.position?"\n bottom: -16px;\n transform: rotate(180deg);\n ":"\n top: -16px;\n "),A=k.a.div.withConfig({displayName:"styled__PopoverHeader",componentId:"qkwc0r-4"})(["display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #e4e4e4;h3{font-family:Roboto;font-size:18px;font-weight:500;margin:0;padding:24px;}button{margin:8px;}"]),O=k.a.div.withConfig({displayName:"styled__PopoverContent",componentId:"qkwc0r-5"})(["display:flex;justify-content:flex-start;align-items:center;gap:24px;padding:24px;@media (max-width:449px){flex-direction:column;align-items:flex-start;}"]),_=k.a.button.withConfig({displayName:"styled__CloseButton",componentId:"qkwc0r-6"})(["height:48px;width:48px;border-radius:50%;padding:16px;background-color:transparent;border:none;outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color 0.2s;&:focus-visible{background-color:#eeeeee;border:1px solid #000;}&:hover{background-color:#eeeeee;}"]),N=k.a.div.withConfig({displayName:"styled__IconActivityIndicatorContainer",componentId:"qkwc0r-7"})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);div{height:16px;width:16px;border-right-color:#333333;border-width:0.125em;}"]),L=k.a.div.withConfig({displayName:"styled__EmailSpinnerContainer",componentId:"qkwc0r-8"})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);var T=()=>i.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:12,height:12,viewBox:"0 0 14 14",fill:"none"},i.a.createElement("path",{d:"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z",fill:"#333333"}));function j(){return(j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function M(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const P=k.a.div.withConfig({displayName:"share-item__ShareItemLabelContainer",componentId:"sc-1idd4zx-0"})(["display:flex;align-items:center;gap:8px;"]),q=k.a.span.withConfig({displayName:"share-item__ShareItemLabelText",componentId:"sc-1idd4zx-1"})(["font-family:Roboto;font-size:16px;font-weight:500;"]),H=k.a.a.withConfig({displayName:"share-item__StyledLink",componentId:"sc-1idd4zx-2"})(["color:#005c8a;text-decoration:none;cursor:pointer;&:hover{color:#00527a;}"]),B=k.a.div.withConfig({displayName:"share-item__IconContainer",componentId:"sc-1idd4zx-3"})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;"]),F=e=>{let t=e.children,n=e.testId,r=e.tooltipContent,o=e.href,a=e.onClick,l=void 0===a?()=>{}:a,c=M(e,["children","testId","tooltipContent","href","onClick"]);return i.a.createElement(H,j({"data-testid":n,onClick:l,href:o,target:"_blank",title:r},c),t)},z=e=>{let t=e.children,n=e.icon;return i.a.createElement(P,null,i.a.createElement(B,null,n),i.a.createElement(q,null,t))};F.defaultProps={testId:"share-item",href:"",onClick:()=>{},tooltipContent:""};class R extends r.Component{constructor(e){super(e),this.state={isLoading:!1},this.onShare=this.onShare.bind(this)}onShare(e){const t=this.props,n=t.articleId,r=t.getTokenisedShareUrl,i=t.shouldTokenise,o=t.articleUrl,a=t.onShareEmail,l=t.articleHeadline,c=t.hostName;if(e.preventDefault(),a({articleId:n,articleUrl:o,articleHeadline:l}),i)this.setState({isLoading:!0}),r(n).then(e=>{const t=e.data;t&&t.article&&(this.setState({isLoading:!1}),this.openMailClient(Object(h.getDomainSpecificUrl)(c,t.article.tokenisedUrl)))}).catch(()=>{this.setState({isLoading:!1})});else{const e=window.location.search.match(/[?&]shareToken=([^&]+)/);this.openMailClient(e?"".concat(o,"?shareToken=").concat(e[1]):o)}}openMailClient(e){const t=this.props,n=t.articleHeadline,r="TIMES"!==t.publicationName?"The Sunday Times":"The Times",i="mailto:?subject=".concat(n," from ").concat(r,"&body=I thought you would be interested in this story from ").concat(r,"%0A%0A").concat(n,"%0A%0A").concat(e);window.location.assign(i)}render(){const e=this.state.isLoading;return i.a.createElement(F,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},i.a.createElement(z,{icon:e?i.a.createElement(L,null,i.a.createElement(l.IconActivityIndicator,{size:"small"})):i.a.createElement(l.IconEmail,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Share by email"})},"Email"))}}R.defaultProps={publicationName:"TIMES"};var U=R;const D=e=>{let t=e.height,n=e.width,r=e.visibility;return i.a.createElement("svg",{"data-id":"bookmark-icon-svg_outline",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",style:{visibility:r},fill:"currentColor",width:n,height:t},i.a.createElement("path",{d:"M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"}))};D.defaultProps={height:16,width:16,visibility:"visible"};var V=D;const Y=e=>{let t=e.height,n=e.width,r=e.visibility;return i.a.createElement("svg",{"data-id":"bookmark-icon-svg_outline",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",style:{visibility:r},fill:"currentColor",width:n,height:t},i.a.createElement("path",{d:"M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2"}))};Y.defaultProps={height:16,width:16,visibility:"visible"};var W=Y;var Z=i.a.memo(e=>{if(e.error||!e.loading&&!e.data)return null;const t=(e.data||{isBookmarked:!1}).isBookmarked,n={height:14,width:14,visibility:e.loading?"hidden":"visible"},r=t?"Saved":"Save";return i.a.createElement(i.a.Fragment,null,i.a.createElement(C,{isLoading:e.loading,onClick:()=>{t?e.onRemoveFromMyArticles():e.onSaveToMyArticles(),e.onToggleSave(e.articleId,e.data.isBookmarked)}},e.loading&&i.a.createElement(N,null,i.a.createElement(l.IconActivityIndicator,null)),t?i.a.createElement(W,{height:n.height,width:n.width,visibility:n.visibility}):i.a.createElement(V,{height:n.height,width:n.width,visibility:n.visibility}),e.loading?"":r))});const $=e=>{let t=e.height,n=e.width;return i.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16","aria-hidden":"true",focusable:"false",fill:"currentColor",width:n,height:t},i.a.createElement("path",{d:"M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"}))};$.defaultProps={height:16,width:16};var G=$;function J(){return(J=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function K(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,i,o=[],a=!0,l=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(o.push(r.value),!t||o.length!==t);a=!0);}catch(e){l=!0,i=e}finally{try{a||null==n.return||n.return()}finally{if(l)throw i}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return Q(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Q(e,t)}(e,t)||function(){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 Q(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function X(e){const t=e.articleId,n=e.articleUrl,o=e.savingEnabled,a=e.sharingEnabled,c=e.onShareOnFB,p=e.onShareOnTwitter,h=e.onSaveToMyArticles,m=e.onRemoveFromMyArticles,f=e.isPreviewMode,g=K(i.a.useState(!1),2),y=g[0],x=g[1],k=K(i.a.useState(null),2),N=k[0],L=k[1],j=K(i.a.useState(null),2),M=j[0],P=j[1],q=i.a.useRef(),H=i.a.useRef(),B=i.a.useRef();Object(r.useEffect)(()=>{"undefined"!=typeof window&&(L(window.innerHeight),P(window.innerWidth))},[]),Object(r.useEffect)(()=>{if(B.current)return document.body.addEventListener("click",e),()=>{document.body.removeEventListener("click",e)};function e(e){B.current.contains(e.target)||e.target===H.current||x(!1)}},[]);const R=q.current?q.current.getBoundingClientRect().bottom:N;const D=()=>{x(e=>!e)};return i.a.createElement(E,{"data-testid":"save-and-share-bar",ref:q},a&&i.a.createElement(S,null,i.a.createElement(C,{ref:H,isPopoverOpen:y,onClick:D},i.a.createElement(G,{height:14,width:14}),"Share"),i.a.createElement(I,{ref:B,position:N?N-R>(M&&M>449?250:400)?"bottom":"top":"bottom",isOpen:y,"aria-expanded":y},i.a.createElement(A,null,i.a.createElement("h3",null,"Share this article"),i.a.createElement(_,{onClick:D},i.a.createElement(T,null))),i.a.createElement(O,null,i.a.createElement(d.SectionContext.Consumer,null,t=>{let n=t.publicationName;return i.a.createElement(s.a,{state:s.a.showTokenisedEmailShare,fallback:i.a.createElement(U,J({},e,{shouldTokenise:!1,publicationName:n}))},i.a.createElement(U,J({},e,{shouldTokenise:!0,publicationName:n})))}),i.a.createElement(F,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(b,"?text=").concat(n),onClick:p},i.a.createElement(z,{icon:i.a.createElement(l.IconTwitter,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Share on Twitter"})},"Twitter")),i.a.createElement(F,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(v,"?u=").concat(n),onClick:c},i.a.createElement(z,{icon:i.a.createElement(l.IconFacebook,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),i.a.createElement(F,{testId:"copy-to-clickboard",tooltipContent:"Copy link to clipboard",href:"".concat(v,"?u=").concat(n),onClick:function(t){const r=e.onCopyLink;t.preventDefault(),navigator.clipboard.writeText(n),r()}},i.a.createElement(z,{icon:i.a.createElement(l.IconCopyLink,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Copy link to clipboard"})},"Link"))))),o?i.a.createElement(i.a.Fragment,null,i.a.createElement(s.a,{state:s.a.showArticleSaveButton,serverRender:!1},i.a.createElement("div",{"data-testid":"save-star"},i.a.createElement(u.SaveStar,{articleId:t},i.a.createElement(Z,{onSaveToMyArticles:h,onRemoveFromMyArticles:m})))),f&&i.a.createElement("div",{"data-testid":"save-star-preview"},i.a.createElement(u.SaveStar,{isPreviewMode:!0},i.a.createElement(Z,null)))):null)}X.defaultProps={onShareOnFB:()=>{},onShareOnTwitter:()=>{},onShareEmail:()=>{},onSaveToMyArticles:()=>{},onRemoveFromMyArticles:()=>{},getTokenisedShareUrl:f,isPreviewMode:a.a.bool=!1};var ee;t.default=(ee=X,Object(g.withTrackEvents)(ee,{analyticsEvents:[{actionName:"navigation",eventName:"onSaveToMyArticles",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline,event_navigation_name:"add to my articles"}),trackingName:"ArticleSaveToMyArticles"},{actionName:"navigation",eventName:"onRemoveFromMyArticles",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline,event_navigation_name:"remove from my articles"}),trackingName:"ArticleRemoveFromMyArticles"},{actionName:"Pressed",eventName:"onShareEmail",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareUrlByEmail"},{actionName:"Pressed",eventName:"onCopyLink",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleCopyLink"},{actionName:"Pressed",eventName:"onShareOnFB",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareOnFacebook"},{actionName:"Pressed",eventName:"onShareOnTwitter",getAttrs:e=>({articleId:e.articleId,articleHeadline:e.articleHeadline}),trackingName:"ArticleShareOnTwitter"}]}))}]);
|