@times-components/save-and-share-bar 0.19.55-alpha.8 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.20.0](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.19.55...@times-components/save-and-share-bar@0.20.0) (2024-04-16)
+
+
+### Features
+
+* **TMD-11:** redesigned article share bar ([#3800](https://github.com/newsuk/times-components/issues/3800)) ([209b1bc](https://github.com/newsuk/times-components/commit/209b1bc753b571c88b380ae65910cd8bfdd4ae6a))
+
+
+
+
+
+## [0.19.55](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.19.54...@times-components/save-and-share-bar@0.19.55) (2024-04-12)
+
+**Note:** Version bump only for package @times-components/save-and-share-bar
+
+
+
+
+
 ## [0.19.54](https://github.com/newsuk/times-components/compare/@times-components/save-and-share-bar@0.19.53...@times-components/save-and-share-bar@0.19.54) (2024-03-25)
 
 **Note:** Version bump only for package @times-components/save-and-share-bar

package/dist/{email-share.js → components/email-share.js}

@@ -11,9 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icons = require("@times-components/icons");
 
-var _styles = _interopRequireDefault(require("./styles"));
+var _shareItem = require("./share-item");
 
-var _barItem = _interopRequireDefault(require("./bar-item"));
+var _styled = require("../styled");
+
+var _styles = _interopRequireDefault(require("../styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -59,11 +61,10 @@ class EmailShare extends _react.Component {
           });
           this.openMailClient(data.article.tokenisedUrl);
         }
-      }).catch(error => {
+      }).catch(() => {
         this.setState({
           isLoading: false
         });
-        console.error("Error in connecting to api", error);
       });
     } else {
       const matches = window.location.search.match(/[?&]shareToken=([^&]+)/);
@@ -82,18 +83,19 @@ class EmailShare extends _react.Component {
 
   render() {
     const isLoading = this.state.isLoading;
-    return /*#__PURE__*/_react.default.createElement(_barItem.default, {
-      onPress: this.onShare,
-      dataTestId: "email-share",
-      url: ""
-    }, isLoading ? /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, {
-      size: "small",
-      style: _styles.default.activityLoader
-    }) : /*#__PURE__*/_react.default.createElement(_icons.IconEmail, {
-      fillColour: "currentColor",
-      height: _styles.default.svgIcon.height,
-      title: "Share by email"
-    }));
+    return /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
+      tooltipContent: "Share by email",
+      onClick: this.onShare,
+      testId: "email-share"
+    }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
+      icon: isLoading ? /*#__PURE__*/_react.default.createElement(_styled.EmailSpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, {
+        size: "small"
+      })) : /*#__PURE__*/_react.default.createElement(_icons.IconEmail, {
+        fillColour: "currentColor",
+        height: _styles.default.svgIcon.height,
+        title: "Share by email"
+      })
+    }, "Email"));
   }
 
 }

package/dist/components/save-button.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _icons = require("@times-components/icons");
+
+var _Bookmark = require("@emotion-icons/bootstrap/Bookmark");
+
+var _BookmarkFill = require("@emotion-icons/bootstrap/BookmarkFill");
+
+var _styled = require("../styled");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SaveButton = props => {
+  if (props.error || !props.loading && !props.data) return null;
+
+  const _ref = props.data || {
+    isBookmarked: false
+  },
+        isBookmarked = _ref.isBookmarked;
+
+  const bookmarkIconStyles = {
+    height: 14,
+    width: 14,
+    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"
+    },
+    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 ? buttonText : ""));
+};
+
+SaveButton.propTypes = {
+  loading: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  data: _propTypes.default.shape({}),
+  articleId: _propTypes.default.string,
+  onToggleSave: _propTypes.default.func
+};
+
+var _default = _react.default.memo(SaveButton);
+
+exports.default = _default;

package/dist/components/share-item.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShareItemLabel = exports.ShareItem = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _newskit = require("newskit");
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 StyledLinkStandalone = (0, _newskit.styled)(_newskit.LinkStandalone)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  &:hover {\n    text-decoration: none !important;\n  }\n"])));
+
+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 ShareItem = _ref => {
+  let children = _ref.children,
+      testId = _ref.testId,
+      tooltipContent = _ref.tooltipContent,
+      href = _ref.href,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? () => {} : _ref$onClick,
+      props = _objectWithoutProperties(_ref, ["children", "testId", "tooltipContent", "href", "onClick"]);
+
+  return /*#__PURE__*/_react.default.createElement(StyledLinkStandalone, _extends({
+    "data-testid": testId,
+    onClick: onClick,
+    href: href,
+    target: "_blank",
+    title: tooltipContent,
+    external: false
+  }, props), children);
+};
+
+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));
+};
+
+exports.ShareItemLabel = ShareItemLabel;
+ShareItem.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  testId: _propTypes.default.string,
+  href: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  tooltipContent: _propTypes.default.string
+};
+ShareItem.defaultProps = {
+  testId: "share-item",
+  href: "",
+  onClick: () => {},
+  tooltipContent: ""
+};
+ShareItemLabel.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  icon: _propTypes.default.node.isRequired
+};

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

@@ -5,20 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _utils = require("@times-components/utils");
-
 var _icons = require("@times-components/icons");
 
 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");
+
 var _getTokenisedArticleUrlApi = _interopRequireDefault(require("./get-tokenised-article-url-api"));
 
 var _withTrackEvents = _interopRequireDefault(require("./tracking/with-track-events"));
@@ -27,103 +29,124 @@ var _constants = _interopRequireDefault(require("./constants"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
-var _barItem = _interopRequireDefault(require("./bar-item"));
+var _styled = require("./styled");
 
-var _emailShare = _interopRequireDefault(require("./email-share"));
+var _emailShare = _interopRequireDefault(require("./components/email-share"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _saveButton = _interopRequireDefault(require("./components/save-button"));
 
-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); }
+var _shareItem = require("./components/share-item");
 
-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 _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); }
 
-/* eslint-disable jsx-a11y/anchor-is-valid */
-class SaveAndShareBar extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.copyToClipboard = this.copyToClipboard.bind(this);
-  }
-
-  copyToClipboard(e) {
-    const _this$props = this.props,
-          onCopyLink = _this$props.onCopyLink,
-          articleUrl = _this$props.articleUrl;
+function SaveAndShareBar(props) {
+  const articleId = props.articleId,
+        articleUrl = props.articleUrl,
+        savingEnabled = props.savingEnabled,
+        sharingEnabled = props.sharingEnabled,
+        onShareOnFB = props.onShareOnFB,
+        onShareOnTwitter = props.onShareOnTwitter,
+        isPreviewMode = props.isPreviewMode;
+
+  function copyToClipboard(e) {
+    const onCopyLink = props.onCopyLink;
     e.preventDefault();
     navigator.clipboard.writeText(articleUrl);
     onCopyLink();
   }
 
-  render() {
-    const _this$props2 = this.props,
-          articleId = _this$props2.articleId,
-          articleUrl = _this$props2.articleUrl,
-          savingEnabled = _this$props2.savingEnabled,
-          sharingEnabled = _this$props2.sharingEnabled,
-          onShareOnFB = _this$props2.onShareOnFB,
-          onShareOnTwitter = _this$props2.onShareOnTwitter;
-    return /*#__PURE__*/_react.default.createElement(_utils.TcView, {
-      style: _styles.default.container,
-      "data-testid": "save-and-share-bar"
-    }, sharingEnabled && /*#__PURE__*/_react.default.createElement(_utils.TcView, {
-      style: _styles.default.rowItem
-    }, /*#__PURE__*/_react.default.createElement(_utils.TcText, {
-      style: (0, _utils.checkStylesForUnits)(_styles.default.label)
-    }, "Share"), /*#__PURE__*/_react.default.createElement(_context.SectionContext.Consumer, null, _ref => {
+  return /*#__PURE__*/_react.default.createElement(_newskit.Stack, {
+    "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({}, this.props, {
+        fallback: /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, props, {
           shouldTokenise: false,
           publicationName: publicationName
         }))
-      }, /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, this.props, {
+      }, /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, props, {
         shouldTokenise: true,
         publicationName: publicationName
       })));
-    }), /*#__PURE__*/_react.default.createElement(_barItem.default, {
-      onPress: onShareOnTwitter,
-      target: "_blank",
-      dataTestId: "share-twitter",
-      url: "".concat(_constants.default.twitter, "?text=").concat(articleUrl)
-    }, /*#__PURE__*/_react.default.createElement(_icons.IconTwitter, {
-      fillColour: "currentColor",
-      height: _styles.default.svgIcon.height,
-      title: "Share on Twitter"
-    })), /*#__PURE__*/_react.default.createElement(_barItem.default, {
-      onPress: onShareOnFB,
-      target: "_blank",
-      dataTestId: "share-facebook",
-      url: "".concat(_constants.default.facebook, "?u=").concat(articleUrl)
-    }, /*#__PURE__*/_react.default.createElement(_icons.IconFacebook, {
-      fillColour: "currentColor",
-      height: _styles.default.svgIcon.fb.height,
-      title: "Share on Facebook"
-    })), /*#__PURE__*/_react.default.createElement(_barItem.default, {
-      color: _styles.default.svgIcon.save.strokeColour,
-      hoverColor: _styles.default.svgIcon.hoverFillColour,
-      onPress: this.copyToClipboard,
-      dataTestId: "copy-to-clickboard",
-      url: ""
-    }, /*#__PURE__*/_react.default.createElement(_icons.IconCopyLink, {
-      fillColour: "currentColor",
-      height: _styles.default.svgIcon.height,
-      title: "Copy link to clipboard"
-    }))), savingEnabled ? /*#__PURE__*/_react.default.createElement(_userState.default, {
-      state: _userState.default.showArticleSaveButton,
-      serverRender: false
-    }, /*#__PURE__*/_react.default.createElement(_utils.TcView, {
-      style: _styles.default.rowItemRight,
-      "data-testid": "save-star"
-    }, /*#__PURE__*/_react.default.createElement(_tsComponents.SaveStar, {
-      articleId: articleId
-    }))) : null);
-  }
-
+    }), /*#__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"
+    }
+  }, /*#__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, {
+    state: _userState.default.showArticleSaveButton,
+    serverRender: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "save-star"
+  }, /*#__PURE__*/_react.default.createElement(_tsComponents.SaveStar, {
+    articleId: articleId
+  }, /*#__PURE__*/_react.default.createElement(_saveButton.default, null)))), isPreviewMode && /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "save-star-preview"
+  }, /*#__PURE__*/_react.default.createElement(_tsComponents.SaveStar, {
+    isPreviewMode: true
+  }, /*#__PURE__*/_react.default.createElement(_saveButton.default, null)))) : null);
 }
-/* eslint-disable react/no-unused-prop-types */
-
 
 SaveAndShareBar.propTypes = {
   articleId: _propTypes.default.string.isRequired,
@@ -135,7 +158,8 @@ SaveAndShareBar.propTypes = {
   onShareEmail: _propTypes.default.func,
   onShareOnTwitter: _propTypes.default.func,
   savingEnabled: _propTypes.default.bool.isRequired,
-  sharingEnabled: _propTypes.default.bool.isRequired
+  sharingEnabled: _propTypes.default.bool.isRequired,
+  isPreviewMode: _propTypes.default.bool
 };
 /* Serves as an indication when share links are clicked for tracking and analytics */
 
@@ -143,7 +167,8 @@ SaveAndShareBar.defaultProps = {
   onShareOnFB: () => {},
   onShareOnTwitter: () => {},
   onShareEmail: () => {},
-  getTokenisedShareUrl: _getTokenisedArticleUrlApi.default
+  getTokenisedShareUrl: _getTokenisedArticleUrlApi.default,
+  isPreviewMode: _propTypes.default.bool = false
 };
 
 var _default = (0, _withTrackEvents.default)(SaveAndShareBar);

package/dist/styled.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopoverContent = exports.StyledPopover = exports.EmailSpinnerContainer = exports.IconActivityIndicatorContainer = exports.StyledButton = void 0;
+
+var _newskit = require("newskit");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+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;
+
+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"])));
+
+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"])));
+
+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;

package/dist/styles/index.js

@@ -7,51 +7,7 @@ exports.default = void 0;
 
 var _tsStyleguide = require("@times-components/ts-styleguide");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const ICON_SIZE = 40;
 const styles = {
-  container: {
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    paddingTop: (0, _tsStyleguide.spacing)(2),
-    paddingBottom: (0, _tsStyleguide.spacing)(2),
-    height: "100%",
-    alignItems: "center"
-  },
-  activityLoader: {
-    borderRadius: 9999,
-    height: 40,
-    overflow: "hidden",
-    width: 40
-  },
-  label: _objectSpread(_objectSpread({}, (0, _tsStyleguide.fontFactory)({
-    font: "supporting",
-    fontSize: "saveAndShare"
-  })), {}, {
-    color: _tsStyleguide.colours.functional.secondary,
-    marginRight: (0, _tsStyleguide.spacing)(2),
-    transform: "translateY(9%)"
-  }),
-  link: {
-    base: "\n      margin-left: ".concat((0, _tsStyleguide.spacing)(1), ";\n      cursor: pointer;\n      border-radius: ").concat(ICON_SIZE, "px;\n\n      &, > * {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: ").concat(ICON_SIZE, "px;\n        width: ").concat(ICON_SIZE, "px;\n      }\n\n      &:hover {\n        background-color: ").concat(_tsStyleguide.colours.functional.whiteGrey, ";\n      }\n      &:active {\n        background-color: ").concat(_tsStyleguide.colours.functional.keyline, ";\n      }\n    ")
-  },
-  rowItem: {
-    alignItems: "center",
-    flexDirection: "row",
-    height: ICON_SIZE
-  },
-  rowItemRight: {
-    alignItems: "center",
-    flexDirection: "row",
-    height: ICON_SIZE,
-    marginLeft: "auto"
-  },
   svgIcon: {
     fb: {
       height: 18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-components/save-and-share-bar",
-  "version": "0.19.55-alpha.8+f128cf0eff",
+  "version": "0.20.0",
   "description": "Save and Share bar ",
   "main": "dist/save-and-share-bar",
   "dev": "src/save-and-share-bar",
@@ -32,27 +32,29 @@
   },
   "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.15.1",
-    "@times-components/icons": "^2.21.19",
-    "@times-components/link": "^3.17.13",
-    "@times-components/message-bar": "^0.7.64",
-    "@times-components/provider-queries": "^2.21.0",
-    "@times-components/tracking": "^2.22.13",
-    "@times-components/ts-components": "^1.82.2-alpha.8+f128cf0eff",
-    "@times-components/ts-styleguide": "^1.50.13",
-    "@times-components/user-state": "^0.5.30",
-    "@times-components/utils": "^6.20.1",
+    "@times-components/context": "1.15.1",
+    "@times-components/icons": "2.21.19",
+    "@times-components/message-bar": "0.7.64",
+    "@times-components/provider-queries": "2.21.0",
+    "@times-components/tracking": "2.22.13",
+    "@times-components/ts-components": "1.84.0",
+    "@times-components/ts-newskit": "1.177.2",
+    "@times-components/ts-styleguide": "1.50.13",
+    "@times-components/user-state": "0.5.30",
+    "@times-components/utils": "6.20.1",
+    "newskit": "7.2.0",
     "prop-types": "15.7.2"
   },
   "devDependencies": {
     "@babel/core": "7.4.4",
-    "@times-components/eslint-config-thetimes": "^0.8.18",
-    "@times-components/jest-configurator-web": "^0.8.1",
-    "@times-components/jest-serializer": "^3.13.8",
-    "@times-components/provider-test-tools": "^1.29.2",
-    "@times-components/storybook": "^4.12.13",
-    "@times-components/webpack-configurator": "^2.1.0",
+    "@times-components/eslint-config-thetimes": "0.8.18",
+    "@times-components/jest-configurator-web": "0.8.1",
+    "@times-components/jest-serializer": "3.13.8",
+    "@times-components/provider-test-tools": "1.29.2",
+    "@times-components/storybook": "4.12.13",
+    "@times-components/webpack-configurator": "2.1.0",
     "babel-jest": "24.8.0",
     "eslint": "5.9.0",
     "jest": "24.8.0",
@@ -73,5 +75,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f128cf0eff2ab474f58602d164b4b0ba993a2191"
+  "gitHead": "94a399c0beb404720f398d3e4c65bd7f555f8089"
 }

package/rnw.js

@@ -1 +1 @@
-module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=11)}([function(e,t){e.exports=require("react")},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/icons/rnw")},function(e,t){e.exports=require("@times-components/user-state/rnw")},function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("@times-components/context/rnw")},function(e,t){e.exports=require("@times-components/ts-components/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){e.exports=require("@times-components/link/rnw")},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n),a=(r(5),r(2)),i=r(3),c=r(4),l=r.n(c),s=r(6),u=r(7),d=r(8);const p=Object(a.makeClient)();var h=e=>p.query({query:d.getTokenisedArticleUrl,variables:{id:e}}),f=r(9),m="https://www.facebook.com/sharer/sharer.php",g="https://twitter.com/intent/tweet",b=r(1);function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function v(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?y(Object(r),!0).forEach((function(t){w(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function w(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var O={container:{flex:1,flexDirection:"row",justifyContent:"space-between",paddingTop:Object(b.spacing)(2),paddingBottom:Object(b.spacing)(2),height:"100%",alignItems:"center"},activityLoader:{borderRadius:9999,height:40,overflow:"hidden",width:40},label:v(v({},Object(b.fontFactory)({font:"supporting",fontSize:"saveAndShare"})),{},{color:b.colours.functional.secondary,marginRight:Object(b.spacing)(2),transform:"translateY(9%)"}),link:{base:"\n      margin-left: ".concat(Object(b.spacing)(1),";\n      cursor: pointer;\n      border-radius: ").concat(40,"px;\n\n      &, > * {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: ").concat(40,"px;\n        width: ").concat(40,"px;\n      }\n\n      &:hover {\n        background-color: ").concat(b.colours.functional.whiteGrey,";\n      }\n      &:active {\n        background-color: ").concat(b.colours.functional.keyline,";\n      }\n    ")},rowItem:{alignItems:"center",flexDirection:"row",height:40},rowItemRight:{alignItems:"center",flexDirection:"row",height:40,marginLeft:"auto"},svgIcon:{fb:{height:18},star:{height:18},fillColour:b.colours.functional.secondary,height:16,hoverFillColour:b.colours.functional.brandColour,save:{fillColour:b.colours.functional.white,strokeColour:b.colours.functional.secondary}}},S=r(10),I=r.n(S);function k(){return(k=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function T(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var C=e=>{let t=e.children,r=e.colour,n=void 0===r?O.svgIcon.fillColour:r,i=e.dataTestId,c=e.hoverColour,l=void 0===c?O.svgIcon.hoverFillColour:c,s=e.onPress,u=void 0===s?()=>{}:s,d=T(e,["children","colour","dataTestId","hoverColour","onPress"]);return o.a.createElement(a.TcView,{"data-testid":i},o.a.createElement(I.a,k({onPress:u,responsiveLinkStyles:O.link},d),o.a.createElement(a.HoverIcon,{colour:n,hoverColour:l},t)))};class j extends n.Component{constructor(e){super(e),this.state={isLoading:!1},this.onShare=this.onShare.bind(this)}onShare(e){const t=this.props,r=t.articleId,n=t.getTokenisedShareUrl,o=t.shouldTokenise,a=t.articleUrl,i=t.onShareEmail,c=t.articleHeadline;if(e.preventDefault(),i({articleId:r,articleUrl:a,articleHeadline:c}),o)this.setState({isLoading:!0}),n(r).then(e=>{const t=e.data;t&&t.article&&(this.setState({isLoading:!1}),this.openMailClient(t.article.tokenisedUrl))}).catch(e=>{this.setState({isLoading:!1}),console.error("Error in connecting to api",e)});else{const e=window.location.search.match(/[?&]shareToken=([^&]+)/);this.openMailClient(e?"".concat(a,"?shareToken=").concat(e[1]):a)}}openMailClient(e){const t=this.props,r=t.articleHeadline,n="TIMES"!==t.publicationName?"The Sunday Times":"The Times",o="mailto:?subject=".concat(r," from ").concat(n,"&body=I thought you would be interested in this story from ").concat(n,"%0A%0A").concat(r,"%0A%0A").concat(e);window.location.assign(o)}render(){const e=this.state.isLoading;return o.a.createElement(C,{onPress:this.onShare,dataTestId:"email-share",url:""},e?o.a.createElement(i.IconActivityIndicator,{size:"small",style:O.activityLoader}):o.a.createElement(i.IconEmail,{fillColour:"currentColor",height:O.svgIcon.height,title:"Share by email"}))}}j.defaultProps={publicationName:"TIMES"};var E=j;function x(){return(x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}class P extends n.Component{constructor(e){super(e),this.copyToClipboard=this.copyToClipboard.bind(this)}copyToClipboard(e){const t=this.props,r=t.onCopyLink,n=t.articleUrl;e.preventDefault(),navigator.clipboard.writeText(n),r()}render(){const e=this.props,t=e.articleId,r=e.articleUrl,n=e.savingEnabled,c=e.sharingEnabled,d=e.onShareOnFB,p=e.onShareOnTwitter;return o.a.createElement(a.TcView,{style:O.container,"data-testid":"save-and-share-bar"},c&&o.a.createElement(a.TcView,{style:O.rowItem},o.a.createElement(a.TcText,{style:Object(a.checkStylesForUnits)(O.label)},"Share"),o.a.createElement(s.SectionContext.Consumer,null,e=>{let t=e.publicationName;return o.a.createElement(l.a,{state:l.a.showTokenisedEmailShare,fallback:o.a.createElement(E,x({},this.props,{shouldTokenise:!1,publicationName:t}))},o.a.createElement(E,x({},this.props,{shouldTokenise:!0,publicationName:t})))}),o.a.createElement(C,{onPress:p,target:"_blank",dataTestId:"share-twitter",url:"".concat(g,"?text=").concat(r)},o.a.createElement(i.IconTwitter,{fillColour:"currentColor",height:O.svgIcon.height,title:"Share on Twitter"})),o.a.createElement(C,{onPress:d,target:"_blank",dataTestId:"share-facebook",url:"".concat(m,"?u=").concat(r)},o.a.createElement(i.IconFacebook,{fillColour:"currentColor",height:O.svgIcon.fb.height,title:"Share on Facebook"})),o.a.createElement(C,{color:O.svgIcon.save.strokeColour,hoverColor:O.svgIcon.hoverFillColour,onPress:this.copyToClipboard,dataTestId:"copy-to-clickboard",url:""},o.a.createElement(i.IconCopyLink,{fillColour:"currentColor",height:O.svgIcon.height,title:"Copy link to clipboard"}))),n?o.a.createElement(l.a,{state:l.a.showArticleSaveButton,serverRender:!1},o.a.createElement(a.TcView,{style:O.rowItemRight,"data-testid":"save-star"},o.a.createElement(u.SaveStar,{articleId:t}))):null)}}P.defaultProps={onShareOnFB:()=>{},onShareOnTwitter:()=>{},onShareEmail:()=>{},getTokenisedShareUrl:h};var A;t.default=(A=P,Object(f.withTrackEvents)(A,{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("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/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/utils/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(7),u=n(1),h=n(6),m=n(8),p=n(9),f=n(10);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"]))),A=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"]))),N=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;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(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(A,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(N,{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"}]}))}]);

package/dist/bar-item.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _utils = require("@times-components/utils");
-
-var _link = _interopRequireDefault(require("@times-components/link"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
-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); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-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; }
-
-/* eslint-disable jsx-a11y/anchor-is-valid, react/require-default-props */
-const BarItem = _ref => {
-  let children = _ref.children,
-      _ref$colour = _ref.colour,
-      colour = _ref$colour === void 0 ? _styles.default.svgIcon.fillColour : _ref$colour,
-      dataTestId = _ref.dataTestId,
-      _ref$hoverColour = _ref.hoverColour,
-      hoverColour = _ref$hoverColour === void 0 ? _styles.default.svgIcon.hoverFillColour : _ref$hoverColour,
-      _ref$onPress = _ref.onPress,
-      onPress = _ref$onPress === void 0 ? () => {} : _ref$onPress,
-      props = _objectWithoutProperties(_ref, ["children", "colour", "dataTestId", "hoverColour", "onPress"]);
-
-  return /*#__PURE__*/_react.default.createElement(_utils.TcView, {
-    "data-testid": dataTestId
-  }, /*#__PURE__*/_react.default.createElement(_link.default, _extends({
-    onPress: onPress,
-    responsiveLinkStyles: _styles.default.link
-  }, props), /*#__PURE__*/_react.default.createElement(_utils.HoverIcon, {
-    colour: colour,
-    hoverColour: hoverColour
-  }, children)));
-};
-
-BarItem.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  colour: _propTypes.default.string,
-  dataTestId: _propTypes.default.string,
-  hoverColour: _propTypes.default.string,
-  onPress: _propTypes.default.func
-};
-var _default = BarItem;
-exports.default = _default;