@times-components/save-and-share-bar 0.27.1 → 0.28.1

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/save-and-share-bar.js +26 -2
  3. package/dist/styled.js +28 -11
  4. package/package.json +13 -13
  5. 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.28.1](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.28.0...@times-components/save-and-share-bar@0.28.1) (2025-03-17)
7
+
8
+ **Note:** Version bump only for package @times-components/save-and-share-bar
9
+
10
+
11
+
12
+
13
+
14
+ # [0.28.0](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.27.1...@times-components/save-and-share-bar@0.28.0) (2025-03-13)
15
+
16
+
17
+ ### Features
18
+
19
+ * **TMG-3003:** Share button highlight ([#4099](https://github.com/newsuk/times-components/issues/4099)) ([1ed5d89](https://github.com/newsuk/times-components/commit/1ed5d896bd140bc7bc82845ba73361a3aa066f48))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.27.1](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.26.19...@times-components/save-and-share-bar@0.27.1) (2025-03-13)
7
26
 
8
27
  **Note:** Version bump only for package @times-components/save-and-share-bar
package/dist/save-and-share-bar.js CHANGED
@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
+ var _utils = require("@times-components/utils");
13
+
12
14
  var _icons = require("@times-components/icons");
13
15
 
14
16
  var _userState = _interopRequireDefault(require("@times-components/user-state"));
@@ -85,6 +87,11 @@ function SaveAndShareBar(props) {
85
87
  windowWidth = _React$useState6[0],
86
88
  setWindowWidth = _React$useState6[1];
87
89
 
90
+ const _React$useState7 = _react.default.useState(false),
91
+ _React$useState8 = _slicedToArray(_React$useState7, 2),
92
+ shareHighlightVisible = _React$useState8[0],
93
+ setShareHighlightVisible = _React$useState8[1];
94
+
88
95
  const barRef = _react.default.useRef();
89
96
 
90
97
  const shareBtnRef = _react.default.useRef();
@@ -113,6 +120,14 @@ function SaveAndShareBar(props) {
113
120
  return () => {
114
121
  document.body.removeEventListener("click", clickHandler);
115
122
  };
123
+ }, []); // Set visiblity of the share highlight
124
+
125
+ (0, _react.useEffect)(() => {
126
+ if (typeof window !== "undefined") {
127
+ const isSymphonyExperiment = (0, _utils.checkForSymphonyExperiment)();
128
+ const hasShareButtonBeenClicked = window.localStorage.getItem("hasShareButtonBeenClicked") === "true";
129
+ setShareHighlightVisible(isSymphonyExperiment && !hasShareButtonBeenClicked);
130
+ }
116
131
  }, []);
117
132
  const barPosition = barRef.current ? barRef.current.getBoundingClientRect().bottom : windowHeight; // Position the popover at the top if the bar length is less than 400px from the bottom
118
133
 
@@ -138,6 +153,13 @@ function SaveAndShareBar(props) {
138
153
  setPopoverOpen(prev => !prev);
139
154
  };
140
155
 
156
+ const handleClick = e => {
157
+ e.preventDefault();
158
+ window.localStorage.setItem("hasShareButtonBeenClicked", "true");
159
+ setShareHighlightVisible(false);
160
+ togglePopover();
161
+ };
162
+
141
163
  function copyToClipboard(e) {
142
164
  const onCopyLink = props.onCopyLink;
143
165
  e.preventDefault();
@@ -151,11 +173,13 @@ function SaveAndShareBar(props) {
151
173
  }, sharingEnabled && /*#__PURE__*/_react.default.createElement(_styled.ShareButtonContainer, null, /*#__PURE__*/_react.default.createElement(_styled.OutlineButton, {
152
174
  ref: shareBtnRef,
153
175
  isPopoverOpen: popoverOpen,
154
- onClick: togglePopover
176
+ onClick: handleClick
155
177
  }, /*#__PURE__*/_react.default.createElement(_shareIcon.default, {
156
178
  height: 14,
157
179
  width: 14
158
- }), "Share"), /*#__PURE__*/_react.default.createElement(_styled.Popover, {
180
+ }), "Share"), shareHighlightVisible && /*#__PURE__*/_react.default.createElement(_styled.ShareButtonHighlightContainer, {
181
+ "data-testId": "share-button-highlight"
182
+ }, /*#__PURE__*/_react.default.createElement(_styled.ShareButtonHighlight, null)), /*#__PURE__*/_react.default.createElement(_styled.Popover, {
159
183
  ref: popoverRef,
160
184
  position: getPosition(),
161
185
  isOpen: popoverOpen,
package/dist/styled.js CHANGED
@@ -3,11 +3,13 @@
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.EmailSpinnerContainer = exports.IconActivityIndicatorContainer = exports.CloseButton = exports.PopoverContent = exports.PopoverHeader = exports.Popover = exports.OutlineButton = exports.ShareButtonHighlight = exports.ShareButtonHighlightContainer = exports.ShareButtonContainer = exports.SaveAndShareBarContainer = void 0;
7
7
 
8
- var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ 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); }
11
+
12
+ 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; }
11
13
 
12
14
  const SaveAndShareBarContainer = _styledComponents.default.div.withConfig({
13
15
  displayName: "styled__SaveAndShareBarContainer",
@@ -19,13 +21,28 @@ exports.SaveAndShareBarContainer = SaveAndShareBarContainer;
19
21
  const ShareButtonContainer = _styledComponents.default.div.withConfig({
20
22
  displayName: "styled__ShareButtonContainer",
21
23
  componentId: "qkwc0r-1"
22
- })(["position:relative;"]);
24
+ })(["display:flex;position:relative;"]);
23
25
 
24
26
  exports.ShareButtonContainer = ShareButtonContainer;
27
+ const flashing = (0, _styledComponents.keyframes)(["0%{box-shadow:0;}50%{box-shadow:0 0 3px 4px #4B9FC950;}100%{box-shadow:0;}"]);
28
+
29
+ const ShareButtonHighlightContainer = _styledComponents.default.div.withConfig({
30
+ displayName: "styled__ShareButtonHighlightContainer",
31
+ componentId: "qkwc0r-2"
32
+ })(["display:flex;background-color:#ffffff;width:15px;height:15px;border-radius:50%;z-index:1;position:absolute;top:-5px;right:-5px;"]);
33
+
34
+ exports.ShareButtonHighlightContainer = ShareButtonHighlightContainer;
35
+
36
+ const ShareButtonHighlight = _styledComponents.default.div.withConfig({
37
+ displayName: "styled__ShareButtonHighlight",
38
+ componentId: "qkwc0r-3"
39
+ })(["background-color:#4b9fc9;width:12px;height:12px;border-radius:50%;position:absolute;right:-1px;top:-1px;z-index:2;animation:", " 2400ms infinite;"], flashing);
40
+
41
+ exports.ShareButtonHighlight = ShareButtonHighlight;
25
42
 
26
43
  const OutlineButton = _styledComponents.default.button.withConfig({
27
44
  displayName: "styled__OutlineButton",
28
- componentId: "qkwc0r-2"
45
+ componentId: "qkwc0r-4"
29
46
  })(["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;}"], _ref => {
30
47
  let isPopoverOpen = _ref.isPopoverOpen;
31
48
  return isPopoverOpen ? "#EEEEEE" : "#fff";
@@ -38,7 +55,7 @@ exports.OutlineButton = OutlineButton;
38
55
 
39
56
  const Popover = _styledComponents.default.div.withConfig({
40
57
  displayName: "styled__Popover",
41
- componentId: "qkwc0r-3"
58
+ componentId: "qkwc0r-5"
42
59
  })(["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;}"], _ref3 => {
43
60
  let position = _ref3.position;
44
61
  return position === "top" ? "top: 0" : "bottom: 0";
@@ -57,35 +74,35 @@ exports.Popover = Popover;
57
74
 
58
75
  const PopoverHeader = _styledComponents.default.div.withConfig({
59
76
  displayName: "styled__PopoverHeader",
60
- componentId: "qkwc0r-4"
77
+ componentId: "qkwc0r-6"
61
78
  })(["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;}"]);
62
79
 
63
80
  exports.PopoverHeader = PopoverHeader;
64
81
 
65
82
  const PopoverContent = _styledComponents.default.div.withConfig({
66
83
  displayName: "styled__PopoverContent",
67
- componentId: "qkwc0r-5"
84
+ componentId: "qkwc0r-7"
68
85
  })(["display:flex;justify-content:flex-start;align-items:center;gap:24px;padding:24px;@media (max-width:449px){flex-direction:column;align-items:flex-start;}"]);
69
86
 
70
87
  exports.PopoverContent = PopoverContent;
71
88
 
72
89
  const CloseButton = _styledComponents.default.button.withConfig({
73
90
  displayName: "styled__CloseButton",
74
- componentId: "qkwc0r-6"
91
+ componentId: "qkwc0r-8"
75
92
  })(["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;}"]);
76
93
 
77
94
  exports.CloseButton = CloseButton;
78
95
 
79
96
  const IconActivityIndicatorContainer = _styledComponents.default.div.withConfig({
80
97
  displayName: "styled__IconActivityIndicatorContainer",
81
- componentId: "qkwc0r-7"
98
+ componentId: "qkwc0r-9"
82
99
  })(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);div{height:16px;width:16px;border-right-color:#333333;border-width:0.125em;}"]);
83
100
 
84
101
  exports.IconActivityIndicatorContainer = IconActivityIndicatorContainer;
85
102
 
86
103
  const EmailSpinnerContainer = _styledComponents.default.div.withConfig({
87
104
  displayName: "styled__EmailSpinnerContainer",
88
- componentId: "qkwc0r-8"
105
+ componentId: "qkwc0r-10"
89
106
  })(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);
90
107
 
91
108
  exports.EmailSpinnerContainer = EmailSpinnerContainer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@times-components/save-and-share-bar",
3
- "version": "0.27.1",
3
+ "version": "0.28.1",
4
4
  "description": "Save and Share bar ",
5
5
  "main": "dist/save-and-share-bar",
6
6
  "dev": "src/save-and-share-bar",
@@ -33,15 +33,15 @@
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.1",
37
- "@times-components/icons": "2.23.2",
38
- "@times-components/message-bar": "0.7.88",
36
+ "@times-components/context": "1.25.0",
37
+ "@times-components/icons": "2.23.4",
38
+ "@times-components/message-bar": "0.7.90",
39
39
  "@times-components/provider-queries": "2.25.0",
40
- "@times-components/tracking": "2.22.36",
41
- "@times-components/ts-components": "1.123.3",
42
- "@times-components/ts-styleguide": "1.50.36",
43
- "@times-components/user-state": "0.5.53",
44
- "@times-components/utils": "6.27.1",
40
+ "@times-components/tracking": "2.22.38",
41
+ "@times-components/ts-components": "1.124.0",
42
+ "@times-components/ts-styleguide": "1.51.0",
43
+ "@times-components/user-state": "0.5.55",
44
+ "@times-components/utils": "6.29.0",
45
45
  "prop-types": "15.7.2",
46
46
  "styled-components": "4.3.2"
47
47
  },
@@ -49,9 +49,9 @@
49
49
  "@babel/core": "7.4.4",
50
50
  "@times-components/eslint-config-thetimes": "0.8.18",
51
51
  "@times-components/jest-configurator-web": "0.8.2",
52
- "@times-components/jest-serializer": "3.13.22",
53
- "@times-components/provider-test-tools": "1.30.6",
54
- "@times-components/storybook": "4.12.36",
52
+ "@times-components/jest-serializer": "3.13.24",
53
+ "@times-components/provider-test-tools": "1.31.0",
54
+ "@times-components/storybook": "4.12.38",
55
55
  "@times-components/webpack-configurator": "2.1.1",
56
56
  "babel-jest": "24.8.0",
57
57
  "eslint": "5.9.0",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "7ce58e4d3e38bcfdbef10728939db8e0b191347c"
76
+ "gitHead": "96ba6ba2abdb6bdbd1ff5cf3a6d38ded0a35b48b"
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),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;}"]),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;}"]),O=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;}"]),_=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=()=>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 M(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 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;"]),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;"]),F=e=>{let t=e.children,n=e.testId,r=e.tooltipContent,i=e.href,o=e.onClick,l=void 0===o?()=>{}:o,c=M(e,["children","testId","tooltipContent","href","onClick"]);return a.a.createElement(B,j({"data-testid":n,onClick:l,href:i,target:"_blank",title:r},c),t)},z=e=>{let t=e.children,n=e.icon;return a.a.createElement(P,null,a.a.createElement(H,null,n),a.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,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(F,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},a.a.createElement(z,{icon:e?a.a.createElement(L,null,a.a.createElement(l.IconActivityIndicator,{size:"small"})):a.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 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:()=>{t?e.onRemoveFromMyArticles():e.onSaveToMyArticles(),e.onToggleSave(e.articleId,e.data.isBookmarked)}},e.loading&&a.a.createElement(_,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.onSaveToMyArticles,g=e.onRemoveFromMyArticles,y=e.isPreviewMode,x=K(a.a.useState(!1),2),k=x[0],_=x[1],L=K(a.a.useState(null),2),j=L[0],M=L[1],P=K(a.a.useState(null),2),q=P[0],B=P[1],H=a.a.useRef(),R=a.a.useRef(),D=a.a.useRef();Object(r.useEffect)(()=>{"undefined"!=typeof window&&(M(window.innerHeight),B(window.innerWidth))},[]),Object(r.useEffect)(()=>{if(D.current)return document.body.addEventListener("click",e),()=>{document.body.removeEventListener("click",e)};function e(e){D.current.contains(e.target)||e.target===R.current||_(!1)}},[]);const V=H.current?H.current.getBoundingClientRect().bottom:j;const Y=()=>{k?p():c(),_(e=>!e)};return a.a.createElement(E,{"data-testid":"save-and-share-bar",ref:H},o&&a.a.createElement(S,null,a.a.createElement(C,{ref:R,isPopoverOpen:k,onClick:Y},a.a.createElement(G,{height:14,width:14}),"Share"),a.a.createElement(I,{ref:D,position:j?j-V>(q&&q>449?250:400)?"bottom":"top":"bottom",isOpen:k,"aria-expanded":k},a.a.createElement(A,null,a.a.createElement("h3",null,"Share this article"),a.a.createElement(O,{onClick:Y},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(U,J({},e,{shouldTokenise:!1,publicationName:n}))},a.a.createElement(U,J({},e,{shouldTokenise:!0,publicationName:n})))}),a.a.createElement(F,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(b,"?text=").concat(n),onClick:m},a.a.createElement(z,{icon:a.a.createElement(l.IconTwitter,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Share on Twitter"})},"Twitter")),a.a.createElement(F,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(v,"?u=").concat(n),onClick:h},a.a.createElement(z,{icon:a.a.createElement(l.IconFacebook,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),a.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()}},a.a.createElement(z,{icon:a.a.createElement(l.IconCopyLink,{ariaLabel:"",fillColour:"currentColor",height:w.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,{onSaveToMyArticles:f,onRemoveFromMyArticles:g})))),y&&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:()=>{},onSaveToMyArticles:()=>{},onRemoveFromMyArticles:()=>{},getTokenisedShareUrl:f,isPreviewMode:o.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"},{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 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/utils/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/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(4),c=n(2),s=n(5),d=n.n(s),u=n(8),h=n(7),p=n(9);const m=Object(l.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(6);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"})(["display:flex;position:relative;"]),C=Object(x.keyframes)(["0%{box-shadow:0;}50%{box-shadow:0 0 3px 4px #4B9FC950;}100%{box-shadow:0;}"]),I=k.a.div.withConfig({displayName:"styled__ShareButtonHighlightContainer",componentId:"qkwc0r-2"})(["display:flex;background-color:#ffffff;width:15px;height:15px;border-radius:50%;z-index:1;position:absolute;top:-5px;right:-5px;"]),A=k.a.div.withConfig({displayName:"styled__ShareButtonHighlight",componentId:"qkwc0r-3"})(["background-color:#4b9fc9;width:12px;height:12px;border-radius:50%;position:absolute;right:-1px;top:-1px;z-index:2;animation:"," 2400ms infinite;"],C),_=k.a.button.withConfig({displayName:"styled__OutlineButton",componentId:"qkwc0r-4"})(["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 "),O=k.a.div.withConfig({displayName:"styled__Popover",componentId:"qkwc0r-5"})(["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 "),N=k.a.div.withConfig({displayName:"styled__PopoverHeader",componentId:"qkwc0r-6"})(["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-7"})(["display:flex;justify-content:flex-start;align-items:center;gap:24px;padding:24px;@media (max-width:449px){flex-direction:column;align-items:flex-start;}"]),T=k.a.button.withConfig({displayName:"styled__CloseButton",componentId:"qkwc0r-8"})(["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;}"]),j=k.a.div.withConfig({displayName:"styled__IconActivityIndicatorContainer",componentId:"qkwc0r-9"})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);div{height:16px;width:16px;border-right-color:#333333;border-width:0.125em;}"]),B=k.a.div.withConfig({displayName:"styled__EmailSpinnerContainer",componentId:"qkwc0r-10"})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);var M=()=>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 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,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 H=k.a.div.withConfig({displayName:"share-item__ShareItemLabelContainer",componentId:"sc-1idd4zx-0"})(["display:flex;align-items:center;gap:8px;"]),F=k.a.span.withConfig({displayName:"share-item__ShareItemLabelText",componentId:"sc-1idd4zx-1"})(["font-family:Roboto;font-size:16px;font-weight:500;"]),z=k.a.a.withConfig({displayName:"share-item__StyledLink",componentId:"sc-1idd4zx-2"})(["color:#005c8a;text-decoration:none;cursor:pointer;&:hover{color:#00527a;}"]),R=k.a.div.withConfig({displayName:"share-item__IconContainer",componentId:"sc-1idd4zx-3"})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;"]),U=e=>{let t=e.children,n=e.testId,r=e.tooltipContent,i=e.href,o=e.onClick,l=void 0===o?()=>{}:o,c=q(e,["children","testId","tooltipContent","href","onClick"]);return a.a.createElement(z,P({"data-testid":n,onClick:l,href:i,target:"_blank",title:r},c),t)},D=e=>{let t=e.children,n=e.icon;return a.a.createElement(H,null,a.a.createElement(R,null,n),a.a.createElement(F,null,t))};U.defaultProps={testId:"share-item",href:"",onClick:()=>{},tooltipContent:""};class V 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,c=t.articleHeadline,s=t.hostName;if(e.preventDefault(),o({articleId:n,articleUrl:i,articleHeadline:c}),a)this.setState({isLoading:!0}),r(n).then(e=>{const t=e.data;t&&t.article&&(this.setState({isLoading:!1}),this.openMailClient(Object(l.getDomainSpecificUrl)(s,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(U,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},a.a.createElement(D,{icon:e?a.a.createElement(B,null,a.a.createElement(c.IconActivityIndicator,{size:"small"})):a.a.createElement(c.IconEmail,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Share by email"})},"Email"))}}V.defaultProps={publicationName:"TIMES"};var Y=V;const W=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"}))};W.defaultProps={height:16,width:16,visibility:"visible"};var Z=W;const $=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"}))};$.defaultProps={height:16,width:16,visibility:"visible"};var G=$;var J=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(_,{isLoading:e.loading,onClick:()=>{t?e.onRemoveFromMyArticles():e.onSaveToMyArticles(),e.onToggleSave(e.articleId,e.data.isBookmarked)}},e.loading&&a.a.createElement(j,null,a.a.createElement(c.IconActivityIndicator,null)),t?a.a.createElement(G,{height:n.height,width:n.width,visibility:n.visibility}):a.a.createElement(Z,{height:n.height,width:n.width,visibility:n.visibility}),e.loading?"":r))});const K=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"}))};K.defaultProps={height:16,width:16};var Q=K;function X(){return(X=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 ee(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 te(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 te(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 te(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 ne(e){const t=e.articleId,n=e.articleUrl,i=e.savingEnabled,o=e.sharingEnabled,s=e.onShareBarExpend,p=e.onShareBarClose,m=e.onShareOnFB,f=e.onShareOnTwitter,g=e.onSaveToMyArticles,y=e.onRemoveFromMyArticles,x=e.isPreviewMode,k=ee(a.a.useState(!1),2),C=k[0],j=k[1],B=ee(a.a.useState(null),2),P=B[0],q=B[1],H=ee(a.a.useState(null),2),F=H[0],z=H[1],R=ee(a.a.useState(!1),2),V=R[0],W=R[1],Z=a.a.useRef(),$=a.a.useRef(),G=a.a.useRef();Object(r.useEffect)(()=>{"undefined"!=typeof window&&(q(window.innerHeight),z(window.innerWidth))},[]),Object(r.useEffect)(()=>{if(G.current)return document.body.addEventListener("click",e),()=>{document.body.removeEventListener("click",e)};function e(e){G.current.contains(e.target)||e.target===$.current||j(!1)}},[]),Object(r.useEffect)(()=>{if("undefined"!=typeof window){const e=Object(l.checkForSymphonyExperiment)(),t="true"===window.localStorage.getItem("hasShareButtonBeenClicked");W(e&&!t)}},[]);const K=Z.current?Z.current.getBoundingClientRect().bottom:P;const te=()=>{C?p():s(),j(e=>!e)};return a.a.createElement(E,{"data-testid":"save-and-share-bar",ref:Z},o&&a.a.createElement(S,null,a.a.createElement(_,{ref:$,isPopoverOpen:C,onClick:e=>{e.preventDefault(),window.localStorage.setItem("hasShareButtonBeenClicked","true"),W(!1),te()}},a.a.createElement(Q,{height:14,width:14}),"Share"),V&&a.a.createElement(I,{"data-testId":"share-button-highlight"},a.a.createElement(A,null)),a.a.createElement(O,{ref:G,position:P?P-K>(F&&F>449?250:400)?"bottom":"top":"bottom",isOpen:C,"aria-expanded":C},a.a.createElement(N,null,a.a.createElement("h3",null,"Share this article"),a.a.createElement(T,{onClick:te},a.a.createElement(M,null))),a.a.createElement(L,null,a.a.createElement(u.SectionContext.Consumer,null,t=>{let n=t.publicationName;return a.a.createElement(d.a,{state:d.a.showTokenisedEmailShare,fallback:a.a.createElement(Y,X({},e,{shouldTokenise:!1,publicationName:n}))},a.a.createElement(Y,X({},e,{shouldTokenise:!0,publicationName:n})))}),a.a.createElement(U,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(b,"?text=").concat(n),onClick:f},a.a.createElement(D,{icon:a.a.createElement(c.IconTwitter,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Share on Twitter"})},"Twitter")),a.a.createElement(U,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(v,"?u=").concat(n),onClick:m},a.a.createElement(D,{icon:a.a.createElement(c.IconFacebook,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),a.a.createElement(U,{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()}},a.a.createElement(D,{icon:a.a.createElement(c.IconCopyLink,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Copy link to clipboard"})},"Link"))))),i?a.a.createElement(a.a.Fragment,null,a.a.createElement(d.a,{state:d.a.showArticleSaveButton,serverRender:!1},a.a.createElement("div",{"data-testid":"save-star"},a.a.createElement(h.SaveStar,{articleId:t},a.a.createElement(J,{onSaveToMyArticles:g,onRemoveFromMyArticles:y})))),x&&a.a.createElement("div",{"data-testid":"save-star-preview"},a.a.createElement(h.SaveStar,{isPreviewMode:!0},a.a.createElement(J,null)))):null)}ne.defaultProps={onShareBarExpend:()=>{},onShareBarClose:()=>{},onShareOnFB:()=>{},onShareOnTwitter:()=>{},onShareEmail:()=>{},onSaveToMyArticles:()=>{},onRemoveFromMyArticles:()=>{},getTokenisedShareUrl:f,isPreviewMode:o.a.bool=!1};var re;t.default=(re=ne,Object(g.withTrackEvents)(re,{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"},{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"}]}))}]);