@times-components/save-and-share-bar 0.20.13 → 0.21.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.21.0](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.20.13...@times-components/save-and-share-bar@0.21.0) (2024-05-31)
+
+
+### Features
+
+* **TMD-217:** Save and share bar updates ([#3846](https://github.com/newsuk/times-components/issues/3846)) ([8d47af2](https://github.com/newsuk/times-components/commit/8d47af2e6220e30e691e810c5f9021587ed8e2ab))
+
+
+
+
+
 ## [0.20.13](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.20.12...@times-components/save-and-share-bar@0.20.13) (2024-05-30)
 
 **Note:** Version bump only for package @times-components/save-and-share-bar

package/dist/assets/close-icon.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CloseIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 12,
+  height: 12,
+  viewBox: "0 0 14 14",
+  fill: "none"
+}, /*#__PURE__*/_react.default.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"
+}));
+
+var _default = CloseIcon;
+exports.default = _default;

package/dist/components/email-share.js

@@ -94,6 +94,7 @@ class EmailShare extends _react.Component {
       icon: isLoading ? /*#__PURE__*/_react.default.createElement(_styled.EmailSpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, {
         size: "small"
       })) : /*#__PURE__*/_react.default.createElement(_icons.IconEmail, {
+        ariaLabel: "",
         fillColour: "currentColor",
         height: _styles.default.svgIcon.height,
         title: "Share by email"

package/dist/components/save-button.js

@@ -33,15 +33,8 @@ const SaveButton = props => {
     visibility: props.loading ? "hidden" : "visible"
   };
   const buttonText = isBookmarked ? "Saved" : "Save";
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.StyledButton, {
-    style: {
-      width: 84,
-      height: 32
-    },
-    size: "small",
-    overrides: {
-      stylePreset: "buttonOutlinedPrimary"
-    },
+  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

package/dist/components/share-item.js

@@ -7,12 +7,10 @@ exports.ShareItemLabel = exports.ShareItem = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _newskit = require("newskit");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -21,11 +19,25 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const ShareItemLabelContainer = _styledComponents.default.div.withConfig({
+  displayName: "share-item__ShareItemLabelContainer",
+  componentId: "sc-1idd4zx-0"
+})(["display:flex;align-items:center;gap:8px;"]);
+
+const ShareItemLabelText = _styledComponents.default.span.withConfig({
+  displayName: "share-item__ShareItemLabelText",
+  componentId: "sc-1idd4zx-1"
+})(["font-family:Roboto;font-size:16px;font-weight:500;"]);
 
-const StyledLinkStandalone = (0, _newskit.styled)(_newskit.LinkStandalone)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  &:hover {\n    text-decoration: none !important;\n  }\n"])));
+const StyledLink = _styledComponents.default.a.withConfig({
+  displayName: "share-item__StyledLink",
+  componentId: "sc-1idd4zx-2"
+})(["color:#005c8a;text-decoration:none;cursor:pointer;&:hover{color:#00527a;}"]);
 
-const IconContainer = _newskit.styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n"])));
+const IconContainer = _styledComponents.default.div.withConfig({
+  displayName: "share-item__IconContainer",
+  componentId: "sc-1idd4zx-3"
+})(["display:flex;align-items:center;justify-content:center;width:24px;height:24px;"]);
 
 const ShareItem = _ref => {
   let children = _ref.children,
@@ -36,13 +48,12 @@ const ShareItem = _ref => {
       onClick = _ref$onClick === void 0 ? () => {} : _ref$onClick,
       props = _objectWithoutProperties(_ref, ["children", "testId", "tooltipContent", "href", "onClick"]);
 
-  return /*#__PURE__*/_react.default.createElement(StyledLinkStandalone, _extends({
+  return /*#__PURE__*/_react.default.createElement(StyledLink, _extends({
     "data-testid": testId,
     onClick: onClick,
     href: href,
     target: "_blank",
-    title: tooltipContent,
-    external: false
+    title: tooltipContent
   }, props), children);
 };
 
@@ -51,12 +62,7 @@ exports.ShareItem = ShareItem;
 const ShareItemLabel = _ref2 => {
   let children = _ref2.children,
       icon = _ref2.icon;
-  return /*#__PURE__*/_react.default.createElement(_newskit.Stack, {
-    flow: "horizontal-center",
-    spaceInline: "space020"
-  }, /*#__PURE__*/_react.default.createElement(IconContainer, null, icon), /*#__PURE__*/_react.default.createElement(_newskit.TextBlock, {
-    typographyPreset: "utilityLabel020"
-  }, children));
+  return /*#__PURE__*/_react.default.createElement(ShareItemLabelContainer, null, /*#__PURE__*/_react.default.createElement(IconContainer, null, icon), /*#__PURE__*/_react.default.createElement(ShareItemLabelText, null, children));
 };
 
 exports.ShareItemLabel = ShareItemLabel;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -15,8 +15,6 @@ var _userState = _interopRequireDefault(require("@times-components/user-state"))
 
 var _context = require("@times-components/context");
 
-var _newskit = require("newskit");
-
 var _tsComponents = require("@times-components/ts-components");
 
 var _Share = require("@emotion-icons/bootstrap/Share");
@@ -31,6 +29,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _styled = require("./styled");
 
+var _closeIcon = _interopRequireDefault(require("./assets/close-icon"));
+
 var _emailShare = _interopRequireDefault(require("./components/email-share"));
 
 var _saveButton = _interopRequireDefault(require("./components/save-button"));
@@ -39,8 +39,24 @@ var _shareItem = require("./components/share-item");
 
 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); }
+
+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; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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); }
+
+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; }
+
+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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function SaveAndShareBar(props) {
   const articleId = props.articleId,
         articleUrl = props.articleUrl,
@@ -50,6 +66,68 @@ function SaveAndShareBar(props) {
         onShareOnTwitter = props.onShareOnTwitter,
         isPreviewMode = props.isPreviewMode;
 
+  const _React$useState = _react.default.useState(false),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        popoverOpen = _React$useState2[0],
+        setPopoverOpen = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        windowHeight = _React$useState4[0],
+        setWindowHeight = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        windowWidth = _React$useState6[0],
+        setWindowWidth = _React$useState6[1];
+
+  const barRef = _react.default.useRef();
+
+  const shareBtnRef = _react.default.useRef();
+
+  const popoverRef = _react.default.useRef(); // Set window height after hydration
+
+
+  (0, _react.useEffect)(() => {
+    if (typeof window !== "undefined") {
+      setWindowHeight(window.innerHeight);
+      setWindowWidth(window.innerWidth);
+    }
+  }, []); // Add event listener to close popover when clicked outside
+
+  (0, _react.useEffect)(() => {
+    if (!popoverRef.current) return undefined;
+
+    function clickHandler(event) {
+      // Close popover if clicked outside popover or on share button
+      if (!popoverRef.current.contains(event.target) && event.target !== shareBtnRef.current) {
+        setPopoverOpen(false);
+      }
+    }
+
+    document.body.addEventListener("click", clickHandler);
+    return () => {
+      document.body.removeEventListener("click", clickHandler);
+    };
+  }, []);
+  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
+
+  function getPosition() {
+    const isLargeDevice = windowWidth && windowWidth > 449;
+    const threshold = isLargeDevice ? 250 : 400;
+    if (!windowHeight) return "bottom";
+
+    if (windowHeight - barPosition > threshold) {
+      return "bottom";
+    }
+
+    return "top";
+  }
+
+  const togglePopover = () => {
+    setPopoverOpen(prev => !prev);
+  };
+
   function copyToClipboard(e) {
     const onCopyLink = props.onCopyLink;
     e.preventDefault();
@@ -57,84 +135,74 @@ function SaveAndShareBar(props) {
     onCopyLink();
   }
 
-  return /*#__PURE__*/_react.default.createElement(_newskit.Stack, {
+  return /*#__PURE__*/_react.default.createElement(_styled.SaveAndShareBarContainer, {
     "data-testid": "save-and-share-bar",
-    flow: "horizontal-center",
-    spaceInline: "space050",
-    overrides: {
-      paddingBlock: "14px"
-    }
-  }, sharingEnabled && /*#__PURE__*/_react.default.createElement(_styled.StyledPopover, {
-    placement: "bottom",
-    header: "Share this article",
-    overrides: {
-      minWidth: {
-        xs: "90%",
-        md: "auto"
-      }
-    },
-    content: /*#__PURE__*/_react.default.createElement(_styled.PopoverContent, {
-      flow: {
-        xs: "vertical-start",
-        md: "horizontal-center"
-      }
-    }, /*#__PURE__*/_react.default.createElement(_context.SectionContext.Consumer, null, _ref => {
-      let publicationName = _ref.publicationName;
-      return /*#__PURE__*/_react.default.createElement(_userState.default, {
-        state: _userState.default.showTokenisedEmailShare,
-        fallback: /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, props, {
-          shouldTokenise: false,
-          publicationName: publicationName
-        }))
-      }, /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, props, {
-        shouldTokenise: true,
-        publicationName: publicationName
-      })));
-    }), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
-      testId: "share-twitter",
-      tooltipContent: "Share on Twitter",
-      href: "".concat(_constants.default.twitter, "?text=").concat(articleUrl),
-      onClick: onShareOnTwitter
-    }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
-      icon: /*#__PURE__*/_react.default.createElement(_icons.IconTwitter, {
-        fillColour: "currentColor",
-        height: _styles.default.svgIcon.height,
-        title: "Share on Twitter"
-      })
-    }, "Twitter")), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
-      testId: "share-facebook",
-      tooltipContent: "Share on Facebook",
-      href: "".concat(_constants.default.facebook, "?u=").concat(articleUrl),
-      onClick: onShareOnFB
-    }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
-      icon: /*#__PURE__*/_react.default.createElement(_icons.IconFacebook, {
-        fillColour: "currentColor",
-        height: _styles.default.svgIcon.fb.height,
-        title: "Share on Facebook"
-      })
-    }, "Facebook")), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
-      testId: "copy-to-clickboard",
-      tooltipContent: "Copy link to clipboard",
-      href: "".concat(_constants.default.facebook, "?u=").concat(articleUrl),
-      onClick: copyToClipboard
-    }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
-      icon: /*#__PURE__*/_react.default.createElement(_icons.IconCopyLink, {
-        fillColour: "currentColor",
-        height: _styles.default.svgIcon.height,
-        title: "Copy link to clipboard"
-      })
-    }, "Link")))
-  }, /*#__PURE__*/_react.default.createElement(_styled.StyledButton, {
-    size: "small",
-    overrides: {
-      stylePreset: "buttonOutlinedPrimary"
-    }
+    ref: barRef
+  }, sharingEnabled && /*#__PURE__*/_react.default.createElement(_styled.ShareButtonContainer, null, /*#__PURE__*/_react.default.createElement(_styled.OutlineButton, {
+    ref: shareBtnRef,
+    isPopoverOpen: popoverOpen,
+    onClick: togglePopover
   }, /*#__PURE__*/_react.default.createElement(_Share.Share, {
     style: {
       height: 14,
       width: 14
     }
-  }), "Share")), savingEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_userState.default, {
+  }), "Share"), /*#__PURE__*/_react.default.createElement(_styled.Popover, {
+    ref: popoverRef,
+    position: getPosition(),
+    isOpen: popoverOpen,
+    "aria-expanded": popoverOpen
+  }, /*#__PURE__*/_react.default.createElement(_styled.PopoverHeader, null, /*#__PURE__*/_react.default.createElement("h3", null, "Share this article"), /*#__PURE__*/_react.default.createElement(_styled.CloseButton, {
+    onClick: togglePopover
+  }, /*#__PURE__*/_react.default.createElement(_closeIcon.default, null))), /*#__PURE__*/_react.default.createElement(_styled.PopoverContent, null, /*#__PURE__*/_react.default.createElement(_context.SectionContext.Consumer, null, _ref => {
+    let publicationName = _ref.publicationName;
+    return /*#__PURE__*/_react.default.createElement(_userState.default, {
+      state: _userState.default.showTokenisedEmailShare,
+      fallback: /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, props, {
+        shouldTokenise: false,
+        publicationName: publicationName
+      }))
+    }, /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, props, {
+      shouldTokenise: true,
+      publicationName: publicationName
+    })));
+  }), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
+    testId: "share-twitter",
+    tooltipContent: "Share on Twitter",
+    href: "".concat(_constants.default.twitter, "?text=").concat(articleUrl),
+    onClick: onShareOnTwitter
+  }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.IconTwitter, {
+      ariaLabel: "",
+      fillColour: "currentColor",
+      height: _styles.default.svgIcon.height,
+      title: "Share on Twitter"
+    })
+  }, "Twitter")), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
+    testId: "share-facebook",
+    tooltipContent: "Share on Facebook",
+    href: "".concat(_constants.default.facebook, "?u=").concat(articleUrl),
+    onClick: onShareOnFB
+  }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.IconFacebook, {
+      ariaLabel: "",
+      fillColour: "currentColor",
+      height: _styles.default.svgIcon.fb.height,
+      title: "Share on Facebook"
+    })
+  }, "Facebook")), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
+    testId: "copy-to-clickboard",
+    tooltipContent: "Copy link to clipboard",
+    href: "".concat(_constants.default.facebook, "?u=").concat(articleUrl),
+    onClick: copyToClipboard
+  }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
+    icon: /*#__PURE__*/_react.default.createElement(_icons.IconCopyLink, {
+      ariaLabel: "",
+      fillColour: "currentColor",
+      height: _styles.default.svgIcon.height,
+      title: "Copy link to clipboard"
+    })
+  }, "Link"))))), savingEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_userState.default, {
     state: _userState.default.showArticleSaveButton,
     serverRender: false
   }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/styled.js

@@ -3,25 +3,89 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopoverContent = exports.StyledPopover = exports.EmailSpinnerContainer = exports.IconActivityIndicatorContainer = exports.StyledButton = void 0;
+exports.EmailSpinnerContainer = exports.IconActivityIndicatorContainer = exports.CloseButton = exports.PopoverContent = exports.PopoverHeader = exports.Popover = exports.OutlineButton = exports.ShareButtonContainer = exports.SaveAndShareBarContainer = void 0;
 
-var _newskit = require("newskit");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const SaveAndShareBarContainer = _styledComponents.default.div.withConfig({
+  displayName: "styled__SaveAndShareBarContainer",
+  componentId: "qkwc0r-0"
+})(["display:flex;align-items:center;gap:24px;height:100%;"]);
 
-const StyledButton = (0, _newskit.styled)(_newskit.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  border-radius: 0;\n  border-color: #333333;\n  color: #333333;\n"])));
-exports.StyledButton = StyledButton;
+exports.SaveAndShareBarContainer = SaveAndShareBarContainer;
 
-const IconActivityIndicatorContainer = _newskit.styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  div {\n    height: 16px;\n    width: 16px;\n    border-right-color: #333333;\n    border-width: 0.15em;\n  }\n"])));
+const ShareButtonContainer = _styledComponents.default.div.withConfig({
+  displayName: "styled__ShareButtonContainer",
+  componentId: "qkwc0r-1"
+})(["position:relative;"]);
+
+exports.ShareButtonContainer = ShareButtonContainer;
+
+const OutlineButton = _styledComponents.default.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;}"], _ref => {
+  let isPopoverOpen = _ref.isPopoverOpen;
+  return isPopoverOpen ? "#EEEEEE" : "#fff";
+}, _ref2 => {
+  let isLoading = _ref2.isLoading;
+  return isLoading && "\n      border: none;\n      background-color: #eeeeee;\n      cursor: default;\n    ";
+});
+
+exports.OutlineButton = OutlineButton;
+
+const Popover = _styledComponents.default.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;}"], _ref3 => {
+  let position = _ref3.position;
+  return position === "top" ? "top: 0" : "bottom: 0";
+}, _ref4 => {
+  let position = _ref4.position;
+  return position === "top" ? "translateY(calc((100% + 10px) * -1))" : "translateY(calc((100% + 10px)))";
+}, _ref5 => {
+  let isOpen = _ref5.isOpen;
+  return isOpen ? "flex" : "none";
+}, _ref6 => {
+  let position = _ref6.position;
+  return position === "top" ? "\n      bottom: -16px;\n      transform: rotate(180deg);\n    " : "\n    top: -16px;\n    ";
+});
+
+exports.Popover = Popover;
+
+const PopoverHeader = _styledComponents.default.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;}"]);
+
+exports.PopoverHeader = PopoverHeader;
+
+const PopoverContent = _styledComponents.default.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;}"]);
+
+exports.PopoverContent = PopoverContent;
+
+const CloseButton = _styledComponents.default.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;}"]);
+
+exports.CloseButton = CloseButton;
+
+const IconActivityIndicatorContainer = _styledComponents.default.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;}"]);
 
 exports.IconActivityIndicatorContainer = IconActivityIndicatorContainer;
 
-const EmailSpinnerContainer = _newskit.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div {\n    height: 16px;\n    width: 16px;\n    border-right-color: #00527a;\n    border-width: 0.15em;\n  }\n"])));
+const EmailSpinnerContainer = _styledComponents.default.div.withConfig({
+  displayName: "styled__EmailSpinnerContainer",
+  componentId: "qkwc0r-8"
+})(["div{height:16px;width:16px;border-right-color:#00527a;border-width:0.15em;}"]);
 
-exports.EmailSpinnerContainer = EmailSpinnerContainer;
-const StyledPopover = (0, _newskit.styled)(_newskit.Popover)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    left: 5%;\n  }\n  box-shadow: 0px -20px 32px 0px #11111114, 0px 4px 4px 0px #00000040 !important;\n"])), (0, _newskit.getMediaQueryFromTheme)("xs", "md"));
-exports.StyledPopover = StyledPopover;
-const PopoverContent = (0, _newskit.styled)(_newskit.Stack)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  gap: 24px;\n"])));
-exports.PopoverContent = PopoverContent;
+exports.EmailSpinnerContainer = EmailSpinnerContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/save-and-share-bar",
-  "version": "0.20.13",
+  "version": "0.21.0",
   "description": "Save and Share bar ",
   "main": "dist/save-and-share-bar",
   "dev": "src/save-and-share-bar",
@@ -34,18 +34,17 @@
   "dependencies": {
     "@emotion-icons/bootstrap": "3.27.0",
     "@storybook/addon-knobs": "6.4.0",
-    "@times-components/context": "1.17.0",
-    "@times-components/icons": "2.21.27",
-    "@times-components/message-bar": "0.7.72",
+    "@times-components/context": "1.18.0",
+    "@times-components/icons": "2.22.0",
+    "@times-components/message-bar": "0.7.73",
     "@times-components/provider-queries": "2.21.1",
-    "@times-components/tracking": "2.22.21",
-    "@times-components/ts-components": "1.87.0",
-    "@times-components/ts-newskit": "1.182.0",
-    "@times-components/ts-styleguide": "1.50.21",
-    "@times-components/user-state": "0.5.38",
+    "@times-components/tracking": "2.22.22",
+    "@times-components/ts-components": "1.88.0",
+    "@times-components/ts-styleguide": "1.50.22",
+    "@times-components/user-state": "0.5.39",
     "@times-components/utils": "6.20.6",
-    "newskit": "7.2.0",
-    "prop-types": "15.7.2"
+    "prop-types": "15.7.2",
+    "styled-components": "4.3.2"
   },
   "devDependencies": {
     "@babel/core": "7.4.4",
@@ -53,7 +52,7 @@
     "@times-components/jest-configurator-web": "0.8.2",
     "@times-components/jest-serializer": "3.13.13",
     "@times-components/provider-test-tools": "1.29.3",
-    "@times-components/storybook": "4.12.21",
+    "@times-components/storybook": "4.12.22",
     "@times-components/webpack-configurator": "2.1.1",
     "babel-jest": "24.8.0",
     "eslint": "5.9.0",
@@ -75,5 +74,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a15ae6ee757b637e601a7019656d1596650a6d56"
+  "gitHead": "bb3f67e82b3ce3948c1508c2421c97cb4c2b1b5c"
 }

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("newskit")},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(1),h=n(7),m=n(9),p=n(10),f=n(6);const b=Object(f.makeClient)();var v=e=>b.query({query:p.getTokenisedArticleUrl,variables:{id:e}}),g=n(11),y="https://www.facebook.com/sharer/sharer.php",k="https://twitter.com/intent/tweet",S=n(5);var w,E,x,O,C,I={svgIcon:{fb:{height:18},star:{height:18},fillColour:S.colours.functional.secondary,height:16,hoverFillColour:S.colours.functional.brandColour,save:{fillColour:S.colours.functional.white,strokeColour:S.colours.functional.secondary}}};function T(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}const j=Object(u.styled)(u.Button)(w||(w=T(["\n  position: relative;\n  border-radius: 0;\n  border-color: #333333;\n  color: #333333;\n"]))),P=u.styled.div(E||(E=T(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  div {\n    height: 16px;\n    width: 16px;\n    border-right-color: #333333;\n    border-width: 0.15em;\n  }\n"]))),N=u.styled.div(x||(x=T(["\n  div {\n    height: 16px;\n    width: 16px;\n    border-right-color: #00527a;\n    border-width: 0.15em;\n  }\n"]))),A=Object(u.styled)(u.Popover)(O||(O=T(["\n  "," {\n    left: 5%;\n  }\n  box-shadow: 0px -20px 32px 0px #11111114, 0px 4px 4px 0px #00000040 !important;\n"])),Object(u.getMediaQueryFromTheme)("xs","md")),q=Object(u.styled)(u.Stack)(C||(C=T(["\n  gap: 24px;\n"])));var B,M;function F(){return(F=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 H(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}function L(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}const z=Object(u.styled)(u.LinkStandalone)(B||(B=L(["\n  cursor: pointer;\n  &:hover {\n    text-decoration: none !important;\n  }\n"]))),U=u.styled.div(M||(M=L(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n"]))),_=e=>{let t=e.children,n=e.testId,r=e.tooltipContent,a=e.href,i=e.onClick,l=void 0===i?()=>{}:i,c=H(e,["children","testId","tooltipContent","href","onClick"]);return o.a.createElement(z,F({"data-testid":n,onClick:l,href:a,target:"_blank",title:r,external:!1},c),t)},D=e=>{let t=e.children,n=e.icon;return o.a.createElement(u.Stack,{flow:"horizontal-center",spaceInline:"space020"},o.a.createElement(U,null,n),o.a.createElement(u.TextBlock,{typographyPreset:"utilityLabel020"},t))};_.defaultProps={testId:"share-item",href:"",onClick:()=>{},tooltipContent:""};class Q 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(f.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(_,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},o.a.createElement(D,{icon:e?o.a.createElement(N,null,o.a.createElement(l.IconActivityIndicator,{size:"small"})):o.a.createElement(l.IconEmail,{fillColour:"currentColor",height:I.svgIcon.height,title:"Share by email"})},"Email"))}}Q.defaultProps={publicationName:"TIMES"};var R=Q,W=n(12),G=n(13);var J=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(j,{style:{width:84,height:32},size:"small",overrides:{stylePreset:"buttonOutlinedPrimary"},onClick:()=>e.onToggleSave(e.articleId,e.data.isBookmarked)},e.loading&&o.a.createElement(P,null,o.a.createElement(l.IconActivityIndicator,null)),t?o.a.createElement(G.BookmarkFill,{style:n}):o.a.createElement(W.Bookmark,{style:n}),e.loading?"":r))});function K(){return(K=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 V(e){const t=e.articleId,n=e.articleUrl,r=e.savingEnabled,a=e.sharingEnabled,i=e.onShareOnFB,c=e.onShareOnTwitter,p=e.isPreviewMode;return o.a.createElement(u.Stack,{"data-testid":"save-and-share-bar",flow:"horizontal-center",spaceInline:"space050",overrides:{paddingBlock:"14px"}},a&&o.a.createElement(A,{placement:"bottom",header:"Share this article",overrides:{minWidth:{xs:"90%",md:"auto"}},content:o.a.createElement(q,{flow:{xs:"vertical-start",md:"horizontal-center"}},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(R,K({},e,{shouldTokenise:!1,publicationName:n}))},o.a.createElement(R,K({},e,{shouldTokenise:!0,publicationName:n})))}),o.a.createElement(_,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(k,"?text=").concat(n),onClick:c},o.a.createElement(D,{icon:o.a.createElement(l.IconTwitter,{fillColour:"currentColor",height:I.svgIcon.height,title:"Share on Twitter"})},"Twitter")),o.a.createElement(_,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(y,"?u=").concat(n),onClick:i},o.a.createElement(D,{icon:o.a.createElement(l.IconFacebook,{fillColour:"currentColor",height:I.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),o.a.createElement(_,{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(D,{icon:o.a.createElement(l.IconCopyLink,{fillColour:"currentColor",height:I.svgIcon.height,title:"Copy link to clipboard"})},"Link")))},o.a.createElement(j,{size:"small",overrides:{stylePreset:"buttonOutlinedPrimary"}},o.a.createElement(m.Share,{style:{height:14,width:14}}),"Share")),r?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(h.SaveStar,{articleId:t},o.a.createElement(J,null)))),p&&o.a.createElement("div",{"data-testid":"save-star-preview"},o.a.createElement(h.SaveStar,{isPreviewMode:!0},o.a.createElement(J,null)))):null)}V.defaultProps={onShareOnFB:()=>{},onShareOnTwitter:()=>{},onShareEmail:()=>{},getTokenisedShareUrl:v,isPreviewMode:i.a.bool=!1};var X;t.default=(X=V,Object(g.withTrackEvents)(X,{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 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"}]}))}]);