@times-components/save-and-share-bar 0.21.14 → 0.22.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.22.0](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.21.14...@times-components/save-and-share-bar@0.22.0) (2024-07-23)
+
+
+### Features
+
+* **TMD-477:** remove emotion icons ([#3892](https://github.com/newsuk/times-components/issues/3892)) ([ee7f436](https://github.com/newsuk/times-components/commit/ee7f4361a29b53aaeb3e9a354a7eda896d21abab))
+
+
+
+
+
 ## [0.21.14](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.21.13...@times-components/save-and-share-bar@0.21.14) (2024-07-15)
 
 **Note:** Version bump only for package @times-components/save-and-share-bar

package/dist/assets/bookmark-fill-icon.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const BookmarkFillIcon = _ref => {
+  let height = _ref.height,
+      width = _ref.width,
+      visibility = _ref.visibility;
+  return /*#__PURE__*/_react.default.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
+    },
+    fill: "currentColor",
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+
+BookmarkFillIcon.propTypes = {
+  height: _propTypes.default.number,
+  width: _propTypes.default.number,
+  visibility: _propTypes.default.string
+};
+BookmarkFillIcon.defaultProps = {
+  height: 16,
+  width: 16,
+  visibility: "visible"
+};
+var _default = BookmarkFillIcon;
+exports.default = _default;

package/dist/assets/bookmark-icon.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const BookmarkIcon = _ref => {
+  let height = _ref.height,
+      width = _ref.width,
+      visibility = _ref.visibility;
+  return /*#__PURE__*/_react.default.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
+    },
+    fill: "currentColor",
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+
+BookmarkIcon.propTypes = {
+  height: _propTypes.default.number,
+  width: _propTypes.default.number,
+  visibility: _propTypes.default.string
+};
+BookmarkIcon.defaultProps = {
+  height: 16,
+  width: 16,
+  visibility: "visible"
+};
+var _default = BookmarkIcon;
+exports.default = _default;

package/dist/assets/share-icon.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ShareIcon = _ref => {
+  let height = _ref.height,
+      width = _ref.width;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    "aria-hidden": "true",
+    focusable: "false",
+    fill: "currentColor",
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.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"
+  }));
+};
+
+ShareIcon.propTypes = {
+  height: _propTypes.default.number,
+  width: _propTypes.default.number
+};
+ShareIcon.defaultProps = {
+  height: 16,
+  width: 16
+};
+var _default = ShareIcon;
+exports.default = _default;

package/dist/components/save-button.js

@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icons = require("@times-components/icons");
 
-var _Bookmark = require("@emotion-icons/bootstrap/Bookmark");
+var _styled = require("../styled");
 
-var _BookmarkFill = require("@emotion-icons/bootstrap/BookmarkFill");
+var _bookmarkIcon = _interopRequireDefault(require("../assets/bookmark-icon"));
 
-var _styled = require("../styled");
+var _bookmarkFillIcon = _interopRequireDefault(require("../assets/bookmark-fill-icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +27,7 @@ const SaveButton = props => {
   },
         isBookmarked = _ref.isBookmarked;
 
-  const bookmarkIconStyles = {
+  const iconStyles = {
     height: 14,
     width: 14,
     visibility: props.loading ? "hidden" : "visible"
@@ -36,10 +36,14 @@ const SaveButton = props => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.OutlineButton, {
     isLoading: props.loading,
     onClick: () => props.onToggleSave(props.articleId, props.data.isBookmarked)
-  }, props.loading && /*#__PURE__*/_react.default.createElement(_styled.IconActivityIndicatorContainer, null, /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, null)), !isBookmarked ? /*#__PURE__*/_react.default.createElement(_Bookmark.Bookmark, {
-    style: bookmarkIconStyles
-  }) : /*#__PURE__*/_react.default.createElement(_BookmarkFill.BookmarkFill, {
-    style: bookmarkIconStyles
+  }, props.loading && /*#__PURE__*/_react.default.createElement(_styled.IconActivityIndicatorContainer, null, /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, null)), !isBookmarked ? /*#__PURE__*/_react.default.createElement(_bookmarkIcon.default, {
+    height: iconStyles.height,
+    width: iconStyles.width,
+    visibility: iconStyles.visibility
+  }) : /*#__PURE__*/_react.default.createElement(_bookmarkFillIcon.default, {
+    height: iconStyles.height,
+    width: iconStyles.width,
+    visibility: iconStyles.visibility
   }), !props.loading ? buttonText : ""));
 };
 

package/dist/save-and-share-bar.js

@@ -17,8 +17,6 @@ var _context = require("@times-components/context");
 
 var _tsComponents = require("@times-components/ts-components");
 
-var _Share = require("@emotion-icons/bootstrap/Share");
-
 var _getTokenisedArticleUrlApi = _interopRequireDefault(require("./get-tokenised-article-url-api"));
 
 var _withTrackEvents = _interopRequireDefault(require("./tracking/with-track-events"));
@@ -37,6 +35,8 @@ var _saveButton = _interopRequireDefault(require("./components/save-button"));
 
 var _shareItem = require("./components/share-item");
 
+var _shareIcon = _interopRequireDefault(require("./assets/share-icon"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -142,11 +142,9 @@ function SaveAndShareBar(props) {
     ref: shareBtnRef,
     isPopoverOpen: popoverOpen,
     onClick: togglePopover
-  }, /*#__PURE__*/_react.default.createElement(_Share.Share, {
-    style: {
-      height: 14,
-      width: 14
-    }
+  }, /*#__PURE__*/_react.default.createElement(_shareIcon.default, {
+    height: 14,
+    width: 14
   }), "Share"), /*#__PURE__*/_react.default.createElement(_styled.Popover, {
     ref: popoverRef,
     position: getPosition(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/save-and-share-bar",
-  "version": "0.21.14",
+  "version": "0.22.0",
   "description": "Save and Share bar ",
   "main": "dist/save-and-share-bar",
   "dev": "src/save-and-share-bar",
@@ -32,7 +32,6 @@
   },
   "homepage": "https://github.com/newsuk/times-components#readme",
   "dependencies": {
-    "@emotion-icons/bootstrap": "3.27.0",
     "@storybook/addon-knobs": "6.4.0",
     "@times-components/context": "1.24.0",
     "@times-components/icons": "2.22.12",
@@ -74,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c96f1406c8099b71598c1fc0c0c4c4b053109cf6"
+  "gitHead": "edb286626ae5ac1cd1d58d3214042765f0bce6be"
 }

package/rnw.js

@@ -1 +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=14)}([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("@emotion-icons/bootstrap/Share")},function(e,t){e.exports=require("@times-components/provider-queries/rnw")},function(e,t){e.exports=require("@times-components/tracking/rnw")},function(e,t){e.exports=require("@emotion-icons/bootstrap/Bookmark")},function(e,t){e.exports=require("@emotion-icons/bootstrap/BookmarkFill")},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),a=n(3),i=n.n(a),l=n(2),c=n(4),s=n.n(c),d=n(8),u=n(7),p=n(9),m=n(10),h=n(6);const f=Object(h.makeClient)();var g=e=>f.query({query:m.getTokenisedArticleUrl,variables:{id:e}}),b=n(11),y="https://www.facebook.com/sharer/sharer.php",v="https://twitter.com/intent/tweet",x=n(5);var w={svgIcon:{fb:{height:18},star:{height:18},fillColour:x.colours.functional.secondary,height:16,hoverFillColour:x.colours.functional.brandColour,save:{fillColour:x.colours.functional.white,strokeColour:x.colours.functional.secondary}}},k=n(1),E=n.n(k);const S=E.a.div.withConfig({displayName:"styled__SaveAndShareBarContainer",componentId:"qkwc0r-0"})(["display:flex;align-items:center;gap:24px;height:100%;"]),C=E.a.div.withConfig({displayName:"styled__ShareButtonContainer",componentId:"qkwc0r-1"})(["position:relative;"]),I=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    "),O=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    "),N=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;}"]),_=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;}"]),T=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;}"]),j=E.a.div.withConfig({displayName:"styled__EmailSpinnerContainer",componentId:"qkwc0r-8"})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);var A=()=>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 q(){return(q=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function P(e,t){if(null==e)return{};var n,r,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 B=E.a.div.withConfig({displayName:"share-item__ShareItemLabelContainer",componentId:"sc-1idd4zx-0"})(["display:flex;align-items:center;gap:8px;"]),M=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;}"]),F=E.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,a=e.href,i=e.onClick,l=void 0===i?()=>{}:i,c=P(e,["children","testId","tooltipContent","href","onClick"]);return o.a.createElement(H,q({"data-testid":n,onClick:l,href:a,target:"_blank",title:r},c),t)},z=e=>{let t=e.children,n=e.icon;return o.a.createElement(B,null,o.a.createElement(F,null,n),o.a.createElement(M,null,t))};U.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(U,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},o.a.createElement(z,{icon:e?o.a.createElement(j,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 D=R,Y=n(12),W=n(13);var Z=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(I,{isLoading:e.loading,onClick:()=>e.onToggleSave(e.articleId,e.data.isBookmarked)},e.loading&&o.a.createElement(T,null,o.a.createElement(l.IconActivityIndicator,null)),t?o.a.createElement(W.BookmarkFill,{style:n}):o.a.createElement(Y.Bookmark,{style:n}),e.loading?"":r))});function $(){return($=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 G(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 J(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 J(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 J(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 K(e){const t=e.articleId,n=e.articleUrl,a=e.savingEnabled,i=e.sharingEnabled,c=e.onShareOnFB,m=e.onShareOnTwitter,h=e.isPreviewMode,f=G(o.a.useState(!1),2),g=f[0],b=f[1],x=G(o.a.useState(null),2),k=x[0],E=x[1],T=G(o.a.useState(null),2),j=T[0],q=T[1],P=o.a.useRef(),B=o.a.useRef(),M=o.a.useRef();Object(r.useEffect)(()=>{"undefined"!=typeof window&&(E(window.innerHeight),q(window.innerWidth))},[]),Object(r.useEffect)(()=>{if(M.current)return document.body.addEventListener("click",e),()=>{document.body.removeEventListener("click",e)};function e(e){M.current.contains(e.target)||e.target===B.current||b(!1)}},[]);const H=P.current?P.current.getBoundingClientRect().bottom:k;const F=()=>{b(e=>!e)};return o.a.createElement(S,{"data-testid":"save-and-share-bar",ref:P},i&&o.a.createElement(C,null,o.a.createElement(I,{ref:B,isPopoverOpen:g,onClick:F},o.a.createElement(p.Share,{style:{height:14,width:14}}),"Share"),o.a.createElement(O,{ref:M,position:k?k-H>(j&&j>449?250:400)?"bottom":"top":"bottom",isOpen:g,"aria-expanded":g},o.a.createElement(N,null,o.a.createElement("h3",null,"Share this article"),o.a.createElement(_,{onClick:F},o.a.createElement(A,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(D,$({},e,{shouldTokenise:!1,publicationName:n}))},o.a.createElement(D,$({},e,{shouldTokenise:!0,publicationName:n})))}),o.a.createElement(U,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(v,"?text=").concat(n),onClick:m},o.a.createElement(z,{icon:o.a.createElement(l.IconTwitter,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.height,title:"Share on Twitter"})},"Twitter")),o.a.createElement(U,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(y,"?u=").concat(n),onClick:c},o.a.createElement(z,{icon:o.a.createElement(l.IconFacebook,{ariaLabel:"",fillColour:"currentColor",height:w.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),o.a.createElement(U,{testId:"copy-to-clickboard",tooltipContent:"Copy link to clipboard",href:"".concat(y,"?u=").concat(n),onClick:function(t){const r=e.onCopyLink;t.preventDefault(),navigator.clipboard.writeText(n),r()}},o.a.createElement(z,{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(Z,null)))),h&&o.a.createElement("div",{"data-testid":"save-star-preview"},o.a.createElement(u.SaveStar,{isPreviewMode:!0},o.a.createElement(Z,null)))):null)}K.defaultProps={onShareOnFB:()=>{},onShareOnTwitter:()=>{},onShareEmail:()=>{},getTokenisedShareUrl:g,isPreviewMode:i.a.bool=!1};var Q;t.default=(Q=K,Object(b.withTrackEvents)(Q,{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"}]}))}]);
+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 j(){return(j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function P(e,t){if(null==e)return{};var n,r,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=P(e,["children","testId","tooltipContent","href","onClick"]);return i.a.createElement(B,j({"data-testid":n,onClick:l,href:o,target:"_blank",title:r},c),t)},F=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 U extends r.Component{constructor(e){super(e),this.state={isLoading:!1},this.onShare=this.onShare.bind(this)}onShare(e){const t=this.props,n=t.articleId,r=t.getTokenisedShareUrl,i=t.shouldTokenise,o=t.articleUrl,a=t.onShareEmail,l=t.articleHeadline,c=t.hostName;if(e.preventDefault(),a({articleId:n,articleUrl:o,articleHeadline:l}),i)this.setState({isLoading:!0}),r(n).then(e=>{const t=e.data;t&&t.article&&(this.setState({isLoading:!1}),this.openMailClient(Object(h.getDomainSpecificUrl)(c,t.article.tokenisedUrl)))}).catch(()=>{this.setState({isLoading:!1})});else{const e=window.location.search.match(/[?&]shareToken=([^&]+)/);this.openMailClient(e?"".concat(o,"?shareToken=").concat(e[1]):o)}}openMailClient(e){const t=this.props,n=t.articleHeadline,r="TIMES"!==t.publicationName?"The Sunday Times":"The Times",i="mailto:?subject=".concat(n," from ").concat(r,"&body=I thought you would be interested in this story from ").concat(r,"%0A%0A").concat(n,"%0A%0A").concat(e);window.location.assign(i)}render(){const e=this.state.isLoading;return i.a.createElement(z,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},i.a.createElement(F,{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"))}}U.defaultProps={publicationName:"TIMES"};var R=U;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],j=N[1],P=i.a.useRef(),q=i.a.useRef(),M=i.a.useRef();Object(r.useEffect)(()=>{"undefined"!=typeof window&&(k(window.innerHeight),j(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=P.current?P.current.getBoundingClientRect().bottom:x;const H=()=>{g(e=>!e)};return i.a.createElement(E,{"data-testid":"save-and-share-bar",ref:P},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(F,{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(F,{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(F,{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"}]}))}]);