@times-components/save-and-share-bar 0.23.1 → 0.23.3-alpha.10
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 +11 -0
- package/dist/assets/comment-icon.js +40 -0
- package/dist/components/comment-button.js +93 -0
- package/dist/components/email-share.js +1 -10
- package/dist/save-and-share-bar.js +10 -3
- package/dist/styled.js +13 -3
- package/package.json +17 -17
- package/rnw.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.23.2](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.23.1...@times-components/save-and-share-bar@0.23.2) (2024-08-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Reverts
|
|
10
|
+
|
|
11
|
+
* Revert "feat(TMRS-329): Category path added to email share (#3923)" (#3928) ([d0c261e](https://github.com/newsuk/times-components/commit/d0c261ec6b1caa0b2af4ef9c7eed1656fed63a9d)), closes [#3923](https://github.com/newsuk/times-components/issues/3923) [#3928](https://github.com/newsuk/times-components/issues/3928)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [0.23.1](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.23.0...@times-components/save-and-share-bar@0.23.1) (2024-08-28)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @times-components/save-and-share-bar
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
const CommentIcon = _ref => {
|
|
15
|
+
let height = _ref.height,
|
|
16
|
+
width = _ref.width;
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
+
width: width,
|
|
20
|
+
height: height,
|
|
21
|
+
viewBox: "0 0 24 24",
|
|
22
|
+
style: {
|
|
23
|
+
fill: "rgba(0, 0, 0, 1)",
|
|
24
|
+
transform: "scaleX(-1)"
|
|
25
|
+
}
|
|
26
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
27
|
+
d: "M20 2H4c-1.103 0-2 .897-2 2v18l5.333-4H20c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 14H6.667L4 18V4h16v12z"
|
|
28
|
+
}));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
CommentIcon.propTypes = {
|
|
32
|
+
height: _propTypes.default.number,
|
|
33
|
+
width: _propTypes.default.number
|
|
34
|
+
};
|
|
35
|
+
CommentIcon.defaultProps = {
|
|
36
|
+
height: 16,
|
|
37
|
+
width: 16
|
|
38
|
+
};
|
|
39
|
+
var _default = CommentIcon;
|
|
40
|
+
exports.default = _default;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _icons = require("@times-components/icons");
|
|
13
|
+
|
|
14
|
+
var _styled = require("../styled");
|
|
15
|
+
|
|
16
|
+
var _commentIcon = _interopRequireDefault(require("../assets/comment-icon"));
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
|
|
22
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
|
|
23
|
+
|
|
24
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
25
|
+
|
|
26
|
+
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."); }
|
|
27
|
+
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
32
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
|
|
33
|
+
|
|
34
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
35
|
+
|
|
36
|
+
const CommentButton = _ref => {
|
|
37
|
+
let commentCount = _ref.commentCount;
|
|
38
|
+
|
|
39
|
+
const _React$useState = _react.default.useState(true),
|
|
40
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
41
|
+
isLoading = _React$useState2[0],
|
|
42
|
+
setIsLoading = _React$useState2[1];
|
|
43
|
+
|
|
44
|
+
const _React$useState3 = _react.default.useState(false),
|
|
45
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
46
|
+
showCommentButton = _React$useState4[0],
|
|
47
|
+
setShowCommentButton = _React$useState4[1];
|
|
48
|
+
|
|
49
|
+
(0, _react.useEffect)(() => {
|
|
50
|
+
if (window.sessionStorage.getItem("showCommentButton") === "true") {
|
|
51
|
+
// commentCount && commentCount > -30
|
|
52
|
+
if (true) {
|
|
53
|
+
setShowCommentButton(true);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
setTimeout(() => setIsLoading(false), 2000);
|
|
58
|
+
}, [commentCount]);
|
|
59
|
+
|
|
60
|
+
if (!showCommentButton) {
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
return /*#__PURE__*/_react.default.createElement(_styled.CommentsLink, {
|
|
65
|
+
href: "#comments-container",
|
|
66
|
+
isLoading: isLoading,
|
|
67
|
+
onClick: e => {
|
|
68
|
+
e.preventDefault();
|
|
69
|
+
const commentsContainer = document.getElementById("comments-container");
|
|
70
|
+
|
|
71
|
+
if (commentsContainer) {
|
|
72
|
+
commentsContainer.scrollIntoView({
|
|
73
|
+
behavior: "smooth"
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}, /*#__PURE__*/_react.default.createElement(_styled.OutlineButton, {
|
|
78
|
+
isLoading: isLoading
|
|
79
|
+
}, isLoading && /*#__PURE__*/_react.default.createElement(_styled.IconActivityIndicatorContainer, null, /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, null)), /*#__PURE__*/_react.default.createElement("div", {
|
|
80
|
+
className: "content"
|
|
81
|
+
}, /*#__PURE__*/_react.default.createElement(_commentIcon.default, {
|
|
82
|
+
height: 14,
|
|
83
|
+
width: 14
|
|
84
|
+
}), /*#__PURE__*/_react.default.createElement("span", null, "Comment"), /*#__PURE__*/_react.default.createElement("span", null, commentCount.toLocaleString()))));
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
CommentButton.propTypes = {
|
|
88
|
+
commentCount: _propTypes.default.number.isRequired
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
var _default = _react.default.memo(CommentButton);
|
|
92
|
+
|
|
93
|
+
exports.default = _default;
|
|
@@ -62,16 +62,7 @@ class EmailShare extends _react.Component {
|
|
|
62
62
|
this.setState({
|
|
63
63
|
isLoading: false
|
|
64
64
|
});
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
if (data.article.categoryPath) {
|
|
68
|
-
const _URL = new URL(data.article.tokenisedUrl),
|
|
69
|
-
token = _URL.search;
|
|
70
|
-
|
|
71
|
-
tokenisedUrl = "".concat(hostName).concat(data.article.categoryPath).concat(token);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
this.openMailClient((0, _utils.getDomainSpecificUrl)(hostName, tokenisedUrl));
|
|
65
|
+
this.openMailClient((0, _utils.getDomainSpecificUrl)(hostName, data.article.tokenisedUrl));
|
|
75
66
|
}
|
|
76
67
|
}).catch(() => {
|
|
77
68
|
this.setState({
|
|
@@ -37,6 +37,8 @@ var _shareItem = require("./components/share-item");
|
|
|
37
37
|
|
|
38
38
|
var _shareIcon = _interopRequireDefault(require("./assets/share-icon"));
|
|
39
39
|
|
|
40
|
+
var _commentButton = _interopRequireDefault(require("./components/comment-button"));
|
|
41
|
+
|
|
40
42
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
41
43
|
|
|
42
44
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -64,7 +66,8 @@ function SaveAndShareBar(props) {
|
|
|
64
66
|
sharingEnabled = props.sharingEnabled,
|
|
65
67
|
onShareOnFB = props.onShareOnFB,
|
|
66
68
|
onShareOnTwitter = props.onShareOnTwitter,
|
|
67
|
-
isPreviewMode = props.isPreviewMode
|
|
69
|
+
isPreviewMode = props.isPreviewMode,
|
|
70
|
+
commentCount = props.commentCount;
|
|
68
71
|
|
|
69
72
|
const _React$useState = _react.default.useState(false),
|
|
70
73
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
@@ -211,7 +214,9 @@ function SaveAndShareBar(props) {
|
|
|
211
214
|
"data-testid": "save-star-preview"
|
|
212
215
|
}, /*#__PURE__*/_react.default.createElement(_tsComponents.SaveStar, {
|
|
213
216
|
isPreviewMode: true
|
|
214
|
-
}, /*#__PURE__*/_react.default.createElement(_saveButton.default, null)))
|
|
217
|
+
}, /*#__PURE__*/_react.default.createElement(_saveButton.default, null))), /*#__PURE__*/_react.default.createElement(_commentButton.default, {
|
|
218
|
+
commentCount: commentCount
|
|
219
|
+
})) : null);
|
|
215
220
|
}
|
|
216
221
|
|
|
217
222
|
SaveAndShareBar.propTypes = {
|
|
@@ -225,6 +230,7 @@ SaveAndShareBar.propTypes = {
|
|
|
225
230
|
onShareOnTwitter: _propTypes.default.func,
|
|
226
231
|
savingEnabled: _propTypes.default.bool.isRequired,
|
|
227
232
|
sharingEnabled: _propTypes.default.bool.isRequired,
|
|
233
|
+
commentCount: _propTypes.default.number,
|
|
228
234
|
isPreviewMode: _propTypes.default.bool,
|
|
229
235
|
hostName: _propTypes.default.string.isRequired
|
|
230
236
|
};
|
|
@@ -235,7 +241,8 @@ SaveAndShareBar.defaultProps = {
|
|
|
235
241
|
onShareOnTwitter: () => {},
|
|
236
242
|
onShareEmail: () => {},
|
|
237
243
|
getTokenisedShareUrl: _getTokenisedArticleUrlApi.default,
|
|
238
|
-
isPreviewMode: _propTypes.default.bool = false
|
|
244
|
+
isPreviewMode: _propTypes.default.bool = false,
|
|
245
|
+
commentCount: _propTypes.default.number = 0
|
|
239
246
|
};
|
|
240
247
|
|
|
241
248
|
var _default = (0, _withTrackEvents.default)(SaveAndShareBar);
|
package/dist/styled.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.EmailSpinnerContainer = exports.IconActivityIndicatorContainer = exports.CloseButton = exports.PopoverContent = exports.PopoverHeader = exports.Popover = exports.OutlineButton = exports.ShareButtonContainer = exports.SaveAndShareBarContainer = void 0;
|
|
6
|
+
exports.CommentsLink = exports.EmailSpinnerContainer = exports.IconActivityIndicatorContainer = exports.CloseButton = exports.PopoverContent = exports.PopoverHeader = exports.Popover = exports.OutlineButton = exports.ShareButtonContainer = exports.SaveAndShareBarContainer = void 0;
|
|
7
7
|
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
|
|
@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
12
12
|
const SaveAndShareBarContainer = _styledComponents.default.div.withConfig({
|
|
13
13
|
displayName: "styled__SaveAndShareBarContainer",
|
|
14
14
|
componentId: "qkwc0r-0"
|
|
15
|
-
})(["display:flex;align-items:center;gap:
|
|
15
|
+
})(["display:flex;align-items:center;gap:16px;height:100%;"]);
|
|
16
16
|
|
|
17
17
|
exports.SaveAndShareBarContainer = SaveAndShareBarContainer;
|
|
18
18
|
|
|
@@ -88,4 +88,14 @@ const EmailSpinnerContainer = _styledComponents.default.div.withConfig({
|
|
|
88
88
|
componentId: "qkwc0r-8"
|
|
89
89
|
})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);
|
|
90
90
|
|
|
91
|
-
exports.EmailSpinnerContainer = EmailSpinnerContainer;
|
|
91
|
+
exports.EmailSpinnerContainer = EmailSpinnerContainer;
|
|
92
|
+
|
|
93
|
+
const CommentsLink = _styledComponents.default.a.withConfig({
|
|
94
|
+
displayName: "styled__CommentsLink",
|
|
95
|
+
componentId: "qkwc0r-9"
|
|
96
|
+
})(["all:unset;span:nth-of-type(1){display:none;}span:nth-of-type(2){color:#333333;}@media (min-width:768px){span:nth-of-type(1){display:block;}span:nth-of-type(2){color:#696969;}}div.content{display:flex;align-items:center;gap:8px;", ";}"], _ref7 => {
|
|
97
|
+
let isLoading = _ref7.isLoading;
|
|
98
|
+
return isLoading && "opacity: 0";
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
exports.CommentsLink = CommentsLink;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@times-components/save-and-share-bar",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.3-alpha.10+ece2dd4d65",
|
|
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": "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.
|
|
40
|
-
"@times-components/tracking": "2.22.34",
|
|
41
|
-
"@times-components/ts-components": "1.103.
|
|
42
|
-
"@times-components/ts-styleguide": "1.50.34",
|
|
43
|
-
"@times-components/user-state": "0.5.51",
|
|
44
|
-
"@times-components/utils": "6.26.0",
|
|
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.1",
|
|
40
|
+
"@times-components/tracking": "^2.22.34",
|
|
41
|
+
"@times-components/ts-components": "^1.103.3",
|
|
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": "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.
|
|
54
|
-
"@times-components/storybook": "4.12.34",
|
|
55
|
-
"@times-components/webpack-configurator": "2.1.1",
|
|
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.2",
|
|
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": "ece2dd4d655988295bf76d24b5ce0701d50a73e7"
|
|
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 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),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;gap:24px;height:100%;"]),C=k.a.div.withConfig({displayName:"styled__ShareButtonContainer",componentId:"qkwc0r-1"})(["position:relative;"]),S=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;}"]),L=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;}"]),T=k.a.div.withConfig({displayName:"styled__EmailSpinnerContainer",componentId:"qkwc0r-8"})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);var A=()=>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 P(){return(P=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 j(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 q=k.a.div.withConfig({displayName:"share-item__ShareItemLabelContainer",componentId:"sc-1idd4zx-0"})(["display:flex;align-items:center;gap:8px;"]),M=k.a.span.withConfig({displayName:"share-item__ShareItemLabelText",componentId:"sc-1idd4zx-1"})(["font-family:Roboto;font-size:16px;font-weight:500;"]),B=k.a.a.withConfig({displayName:"share-item__StyledLink",componentId:"sc-1idd4zx-2"})(["color:#005c8a;text-decoration:none;cursor:pointer;&:hover{color:#00527a;}"]),H=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,o=e.href,a=e.onClick,l=void 0===a?()=>{}:a,c=j(e,["children","testId","tooltipContent","href","onClick"]);return i.a.createElement(B,P({"data-testid":n,onClick:l,href:o,target:"_blank",title:r},c),t)},U=e=>{let t=e.children,n=e.icon;return i.a.createElement(q,null,i.a.createElement(H,null,n),i.a.createElement(M,null,t))};z.defaultProps={testId:"share-item",href:"",onClick:()=>{},tooltipContent:""};class F 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;if(t&&t.article){this.setState({isLoading:!1});let e=t.article.tokenisedUrl;if(t.article.categoryPath){const n=new URL(t.article.tokenisedUrl).search;e="".concat(c).concat(t.article.categoryPath).concat(n)}this.openMailClient(Object(h.getDomainSpecificUrl)(c,e))}}).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(z,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},i.a.createElement(U,{icon:e?i.a.createElement(T,null,i.a.createElement(l.IconActivityIndicator,{size:"small"})):i.a.createElement(l.IconEmail,{ariaLabel:"",fillColour:"currentColor",height:y.svgIcon.height,title:"Share by email"})},"Email"))}}F.defaultProps={publicationName:"TIMES"};var R=F;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(S,{isLoading:e.loading,onClick:()=>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.isPreviewMode,m=K(i.a.useState(!1),2),f=m[0],g=m[1],w=K(i.a.useState(null),2),x=w[0],k=w[1],N=K(i.a.useState(null),2),T=N[0],P=N[1],j=i.a.useRef(),q=i.a.useRef(),M=i.a.useRef();Object(r.useEffect)(()=>{"undefined"!=typeof window&&(k(window.innerHeight),P(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===q.current||g(!1)}},[]);const B=j.current?j.current.getBoundingClientRect().bottom:x;const H=()=>{g(e=>!e)};return i.a.createElement(E,{"data-testid":"save-and-share-bar",ref:j},a&&i.a.createElement(C,null,i.a.createElement(S,{ref:q,isPopoverOpen:f,onClick:H},i.a.createElement(G,{height:14,width:14}),"Share"),i.a.createElement(I,{ref:M,position:x?x-B>(T&&T>449?250:400)?"bottom":"top":"bottom",isOpen:f,"aria-expanded":f},i.a.createElement(O,null,i.a.createElement("h3",null,"Share this article"),i.a.createElement(_,{onClick:H},i.a.createElement(A,null))),i.a.createElement(L,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(R,J({},e,{shouldTokenise:!1,publicationName:n}))},i.a.createElement(R,J({},e,{shouldTokenise:!0,publicationName:n})))}),i.a.createElement(z,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(v,"?text=").concat(n),onClick:p},i.a.createElement(U,{icon:i.a.createElement(l.IconTwitter,{ariaLabel:"",fillColour:"currentColor",height:y.svgIcon.height,title:"Share on Twitter"})},"Twitter")),i.a.createElement(z,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(b,"?u=").concat(n),onClick:c},i.a.createElement(U,{icon:i.a.createElement(l.IconFacebook,{ariaLabel:"",fillColour:"currentColor",height:y.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),i.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()}},i.a.createElement(U,{icon:i.a.createElement(l.IconCopyLink,{ariaLabel:"",fillColour:"currentColor",height:y.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,null)))),h&&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:()=>{},getTokenisedShareUrl:f,isPreviewMode:a.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"}]}))}]);
|
|
1
|
+
module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.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 o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));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("prop-types")},function(e,t){e.exports=require("@times-components/icons/rnw")},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),o=n.n(r),a=n(2),i=n.n(a),l=n(3),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",y="https://twitter.com/intent/tweet",b=n(5);var w={svgIcon:{fb:{height:18},star:{height:18},fillColour:b.colours.functional.secondary,height:16,hoverFillColour:b.colours.functional.brandColour,save:{fillColour:b.colours.functional.white,strokeColour:b.colours.functional.secondary}}},x=n(1),E=n.n(x);const k=E.a.div.withConfig({displayName:"styled__SaveAndShareBarContainer",componentId:"qkwc0r-0"})(["display:flex;align-items:center;gap:16px;height:100%;"]),C=E.a.div.withConfig({displayName:"styled__ShareButtonContainer",componentId:"qkwc0r-1"})(["position:relative;"]),S=E.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=E.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=E.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;}"]),L=E.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;}"]),A=E.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;}"]),_=E.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;}"]),N=E.a.div.withConfig({displayName:"styled__EmailSpinnerContainer",componentId:"qkwc0r-8"})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]),T=E.a.a.withConfig({displayName:"styled__CommentsLink",componentId:"qkwc0r-9"})(["all:unset;span:nth-of-type(1){display:none;}span:nth-of-type(2){color:#333333;}@media (min-width:768px){span:nth-of-type(1){display:block;}span:nth-of-type(2){color:#696969;}}div.content{display:flex;align-items:center;gap:8px;",";}"],e=>e.isLoading&&"opacity: 0");var j=()=>o.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:12,height:12,viewBox:"0 0 14 14",fill:"none"},o.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 P(){return(P=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 q(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const M=E.a.div.withConfig({displayName:"share-item__ShareItemLabelContainer",componentId:"sc-1idd4zx-0"})(["display:flex;align-items:center;gap:8px;"]),B=E.a.span.withConfig({displayName:"share-item__ShareItemLabelText",componentId:"sc-1idd4zx-1"})(["font-family:Roboto;font-size:16px;font-weight:500;"]),H=E.a.a.withConfig({displayName:"share-item__StyledLink",componentId:"sc-1idd4zx-2"})(["color:#005c8a;text-decoration:none;cursor:pointer;&:hover{color:#00527a;}"]),z=E.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,a=e.href,i=e.onClick,l=void 0===i?()=>{}:i,c=q(e,["children","testId","tooltipContent","href","onClick"]);return o.a.createElement(H,P({"data-testid":n,onClick:l,href:a,target:"_blank",title:r},c),t)},U=e=>{let t=e.children,n=e.icon;return o.a.createElement(M,null,o.a.createElement(z,null,n),o.a.createElement(B,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,o=t.shouldTokenise,a=t.articleUrl,i=t.onShareEmail,l=t.articleHeadline,c=t.hostName;if(e.preventDefault(),i({articleId:n,articleUrl:a,articleHeadline:l}),o)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(a,"?shareToken=").concat(e[1]):a)}}openMailClient(e){const t=this.props,n=t.articleHeadline,r="TIMES"!==t.publicationName?"The Sunday Times":"The Times",o="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(o)}render(){const e=this.state.isLoading;return o.a.createElement(F,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},o.a.createElement(U,{icon:e?o.a.createElement(N,null,o.a.createElement(l.IconActivityIndicator,{size:"small"})):o.a.createElement(l.IconEmail,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Share by email"})},"Email"))}}R.defaultProps={publicationName:"TIMES"};var V=R;const D=e=>{let t=e.height,n=e.width,r=e.visibility;return o.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},o.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 Y=D;const $=e=>{let t=e.height,n=e.width,r=e.visibility;return o.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},o.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"}))};$.defaultProps={height:16,width:16,visibility:"visible"};var W=$;var X=o.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 o.a.createElement(o.a.Fragment,null,o.a.createElement(S,{isLoading:e.loading,onClick:()=>e.onToggleSave(e.articleId,e.data.isBookmarked)},e.loading&&o.a.createElement(_,null,o.a.createElement(l.IconActivityIndicator,null)),t?o.a.createElement(W,{height:n.height,width:n.width,visibility:n.visibility}):o.a.createElement(Y,{height:n.height,width:n.width,visibility:n.visibility}),e.loading?"":r))});const Z=e=>{let t=e.height,n=e.width;return o.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},o.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"}))};Z.defaultProps={height:16,width:16};var G=Z;const J=e=>{let t=e.height,n=e.width;return o.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:n,height:t,viewBox:"0 0 24 24",style:{fill:"rgba(0, 0, 0, 1)",transform:"scaleX(-1)"}},o.a.createElement("path",{d:"M20 2H4c-1.103 0-2 .897-2 2v18l5.333-4H20c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 14H6.667L4 18V4h16v12z"}))};J.defaultProps={height:16,width:16};var K=J;function Q(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,o,a=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return ee(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 ee(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 ee(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}var te=o.a.memo(e=>{let t=e.commentCount;const n=Q(o.a.useState(!0),2),a=n[0],i=n[1],c=Q(o.a.useState(!1),2),s=c[0],d=c[1];return Object(r.useEffect)(()=>{"true"===window.sessionStorage.getItem("showCommentButton")&&d(!0),setTimeout(()=>i(!1),2e3)},[t]),s?o.a.createElement(T,{href:"#comments-container",isLoading:a,onClick:e=>{e.preventDefault();const t=document.getElementById("comments-container");t&&t.scrollIntoView({behavior:"smooth"})}},o.a.createElement(S,{isLoading:a},a&&o.a.createElement(_,null,o.a.createElement(l.IconActivityIndicator,null)),o.a.createElement("div",{className:"content"},o.a.createElement(K,{height:14,width:14}),o.a.createElement("span",null,"Comment"),o.a.createElement("span",null,t.toLocaleString())))):null});function ne(){return(ne=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 re(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,o,a=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return oe(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 oe(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 oe(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 ae(e){const t=e.articleId,n=e.articleUrl,a=e.savingEnabled,i=e.sharingEnabled,c=e.onShareOnFB,p=e.onShareOnTwitter,h=e.isPreviewMode,m=e.commentCount,f=re(o.a.useState(!1),2),g=f[0],b=f[1],x=re(o.a.useState(null),2),E=x[0],_=x[1],N=re(o.a.useState(null),2),T=N[0],P=N[1],q=o.a.useRef(),M=o.a.useRef(),B=o.a.useRef();Object(r.useEffect)(()=>{"undefined"!=typeof window&&(_(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===M.current||b(!1)}},[]);const H=q.current?q.current.getBoundingClientRect().bottom:E;const z=()=>{b(e=>!e)};return o.a.createElement(k,{"data-testid":"save-and-share-bar",ref:q},i&&o.a.createElement(C,null,o.a.createElement(S,{ref:M,isPopoverOpen:g,onClick:z},o.a.createElement(G,{height:14,width:14}),"Share"),o.a.createElement(I,{ref:B,position:E?E-H>(T&&T>449?250:400)?"bottom":"top":"bottom",isOpen:g,"aria-expanded":g},o.a.createElement(O,null,o.a.createElement("h3",null,"Share this article"),o.a.createElement(A,{onClick:z},o.a.createElement(j,null))),o.a.createElement(L,null,o.a.createElement(d.SectionContext.Consumer,null,t=>{let n=t.publicationName;return o.a.createElement(s.a,{state:s.a.showTokenisedEmailShare,fallback:o.a.createElement(V,ne({},e,{shouldTokenise:!1,publicationName:n}))},o.a.createElement(V,ne({},e,{shouldTokenise:!0,publicationName:n})))}),o.a.createElement(F,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(y,"?text=").concat(n),onClick:p},o.a.createElement(U,{icon:o.a.createElement(l.IconTwitter,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Share on Twitter"})},"Twitter")),o.a.createElement(F,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(v,"?u=").concat(n),onClick:c},o.a.createElement(U,{icon:o.a.createElement(l.IconFacebook,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),o.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()}},o.a.createElement(U,{icon:o.a.createElement(l.IconCopyLink,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Copy link to clipboard"})},"Link"))))),a?o.a.createElement(o.a.Fragment,null,o.a.createElement(s.a,{state:s.a.showArticleSaveButton,serverRender:!1},o.a.createElement("div",{"data-testid":"save-star"},o.a.createElement(u.SaveStar,{articleId:t},o.a.createElement(X,null)))),h&&o.a.createElement("div",{"data-testid":"save-star-preview"},o.a.createElement(u.SaveStar,{isPreviewMode:!0},o.a.createElement(X,null))),o.a.createElement(te,{commentCount:m})):null)}ae.defaultProps={onShareOnFB:()=>{},onShareOnTwitter:()=>{},onShareEmail:()=>{},getTokenisedShareUrl:f,isPreviewMode:i.a.bool=!1,commentCount:i.a.number=0};var ie;t.default=(ie=ae,Object(g.withTrackEvents)(ie,{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"}]}))}]);
|