@times-components/save-and-share-bar 0.19.53-alpha.69 → 0.19.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/bar-item.js +57 -0
  2. package/dist/{components/email-share.js → email-share.js} +16 -17
  3. package/dist/save-and-share-bar.js +58 -92
  4. package/dist/styles/index.js +44 -0
  5. package/package.json +18 -19
  6. package/rnw.js +1 -1
  7. package/dist/assets/bookmark-filled.js +0 -42
  8. package/dist/assets/bookmark-outline.js +0 -44
  9. package/dist/assets/index.js +0 -25
  10. package/dist/assets/share.js +0 -42
  11. package/dist/components/save-button.js +0 -51
  12. package/dist/components/share-item.js +0 -82
  13. package/dist/styled.js +0 -23
package/dist/bar-item.js ADDED
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _utils = require("@times-components/utils");
11
+
12
+ var _link = _interopRequireDefault(require("@times-components/link"));
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var _styles = _interopRequireDefault(require("./styles"));
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ 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
+
22
+ 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; }
23
+
24
+ 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; }
25
+
26
+ /* eslint-disable jsx-a11y/anchor-is-valid, react/require-default-props */
27
+ const BarItem = _ref => {
28
+ let children = _ref.children,
29
+ _ref$colour = _ref.colour,
30
+ colour = _ref$colour === void 0 ? _styles.default.svgIcon.fillColour : _ref$colour,
31
+ dataTestId = _ref.dataTestId,
32
+ _ref$hoverColour = _ref.hoverColour,
33
+ hoverColour = _ref$hoverColour === void 0 ? _styles.default.svgIcon.hoverFillColour : _ref$hoverColour,
34
+ _ref$onPress = _ref.onPress,
35
+ onPress = _ref$onPress === void 0 ? () => {} : _ref$onPress,
36
+ props = _objectWithoutProperties(_ref, ["children", "colour", "dataTestId", "hoverColour", "onPress"]);
37
+
38
+ return /*#__PURE__*/_react.default.createElement(_utils.TcView, {
39
+ "data-testid": dataTestId
40
+ }, /*#__PURE__*/_react.default.createElement(_link.default, _extends({
41
+ onPress: onPress,
42
+ responsiveLinkStyles: _styles.default.link
43
+ }, props), /*#__PURE__*/_react.default.createElement(_utils.HoverIcon, {
44
+ colour: colour,
45
+ hoverColour: hoverColour
46
+ }, children)));
47
+ };
48
+
49
+ BarItem.propTypes = {
50
+ children: _propTypes.default.node.isRequired,
51
+ colour: _propTypes.default.string,
52
+ dataTestId: _propTypes.default.string,
53
+ hoverColour: _propTypes.default.string,
54
+ onPress: _propTypes.default.func
55
+ };
56
+ var _default = BarItem;
57
+ exports.default = _default;
package/dist/{components/email-share.js → email-share.js} RENAMED
@@ -11,9 +11,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
12
  var _icons = require("@times-components/icons");
13
13
 
14
- var _shareItem = require("./share-item");
14
+ var _styles = _interopRequireDefault(require("./styles"));
15
15
 
16
- var _styles = _interopRequireDefault(require("../styles"));
16
+ var _barItem = _interopRequireDefault(require("./bar-item"));
17
17
 
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
 
@@ -59,10 +59,11 @@ class EmailShare extends _react.Component {
59
59
  });
60
60
  this.openMailClient(data.article.tokenisedUrl);
61
61
  }
62
- }).catch(() => {
62
+ }).catch(error => {
63
63
  this.setState({
64
64
  isLoading: false
65
65
  });
66
+ console.error("Error in connecting to api", error);
66
67
  });
67
68
  } else {
68
69
  const matches = window.location.search.match(/[?&]shareToken=([^&]+)/);
@@ -81,20 +82,18 @@ class EmailShare extends _react.Component {
81
82
 
82
83
  render() {
83
84
  const isLoading = this.state.isLoading;
84
- return /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
85
- tooltipContent: "Share by email",
86
- onClick: this.onShare,
87
- testId: "email-share"
88
- }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
89
- icon: isLoading ? /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, {
90
- size: "small",
91
- style: _styles.default.activityLoader
92
- }) : /*#__PURE__*/_react.default.createElement(_icons.IconEmail, {
93
- fillColour: "currentColor",
94
- height: _styles.default.svgIcon.height,
95
- title: "Share by email"
96
- })
97
- }, "Email"));
85
+ return /*#__PURE__*/_react.default.createElement(_barItem.default, {
86
+ onPress: this.onShare,
87
+ dataTestId: "email-share",
88
+ url: ""
89
+ }, isLoading ? /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, {
90
+ size: "small",
91
+ style: _styles.default.activityLoader
92
+ }) : /*#__PURE__*/_react.default.createElement(_icons.IconEmail, {
93
+ fillColour: "currentColor",
94
+ height: _styles.default.svgIcon.height,
95
+ title: "Share by email"
96
+ }));
98
97
  }
99
98
 
100
99
  }
package/dist/save-and-share-bar.js CHANGED
@@ -9,14 +9,14 @@ var _react = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
+ var _utils = require("@times-components/utils");
13
+
12
14
  var _icons = require("@times-components/icons");
13
15
 
14
16
  var _userState = _interopRequireDefault(require("@times-components/user-state"));
15
17
 
16
18
  var _context = require("@times-components/context");
17
19
 
18
- var _newskit = require("newskit");
19
-
20
20
  var _tsComponents = require("@times-components/ts-components");
21
21
 
22
22
  var _getTokenisedArticleUrlApi = _interopRequireDefault(require("./get-tokenised-article-url-api"));
@@ -27,15 +27,9 @@ var _constants = _interopRequireDefault(require("./constants"));
27
27
 
28
28
  var _styles = _interopRequireDefault(require("./styles"));
29
29
 
30
- var _styled = require("./styled");
31
-
32
- var _emailShare = _interopRequireDefault(require("./components/email-share"));
30
+ var _barItem = _interopRequireDefault(require("./bar-item"));
33
31
 
34
- var _saveButton = _interopRequireDefault(require("./components/save-button"));
35
-
36
- var _shareItem = require("./components/share-item");
37
-
38
- var _assets = require("./assets");
32
+ var _emailShare = _interopRequireDefault(require("./email-share"));
39
33
 
40
34
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
41
35
 
@@ -45,6 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
45
39
 
46
40
  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); }
47
41
 
42
+ /* eslint-disable jsx-a11y/anchor-is-valid */
48
43
  class SaveAndShareBar extends _react.Component {
49
44
  constructor(props) {
50
45
  super(props);
@@ -67,90 +62,63 @@ class SaveAndShareBar extends _react.Component {
67
62
  savingEnabled = _this$props2.savingEnabled,
68
63
  sharingEnabled = _this$props2.sharingEnabled,
69
64
  onShareOnFB = _this$props2.onShareOnFB,
70
- onShareOnTwitter = _this$props2.onShareOnTwitter,
71
- isPreviewMode = _this$props2.isPreviewMode;
72
- return /*#__PURE__*/_react.default.createElement(_newskit.Stack, {
73
- "data-testid": "save-and-share-bar",
74
- flow: "horizontal-center",
75
- spaceInline: "space050"
76
- }, sharingEnabled && /*#__PURE__*/_react.default.createElement(_styled.StyledPopover, {
77
- placement: "top",
78
- header: "Share this article",
79
- overrides: {
80
- minWidth: {
81
- xs: "90%",
82
- md: "auto"
83
- }
84
- },
85
- content: /*#__PURE__*/_react.default.createElement(_styled.PopoverContent, {
86
- flow: {
87
- xs: "vertical-start",
88
- md: "horizontal-center"
89
- }
90
- }, /*#__PURE__*/_react.default.createElement(_context.SectionContext.Consumer, null, _ref => {
91
- let publicationName = _ref.publicationName;
92
- return /*#__PURE__*/_react.default.createElement(_userState.default, {
93
- state: _userState.default.showTokenisedEmailShare,
94
- fallback: /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, this.props, {
95
- shouldTokenise: false,
96
- publicationName: publicationName
97
- }))
98
- }, /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, this.props, {
99
- shouldTokenise: true,
65
+ onShareOnTwitter = _this$props2.onShareOnTwitter;
66
+ return /*#__PURE__*/_react.default.createElement(_utils.TcView, {
67
+ style: _styles.default.container,
68
+ "data-testid": "save-and-share-bar"
69
+ }, sharingEnabled && /*#__PURE__*/_react.default.createElement(_utils.TcView, {
70
+ style: _styles.default.rowItem
71
+ }, /*#__PURE__*/_react.default.createElement(_utils.TcText, {
72
+ style: (0, _utils.checkStylesForUnits)(_styles.default.label)
73
+ }, "Share"), /*#__PURE__*/_react.default.createElement(_context.SectionContext.Consumer, null, _ref => {
74
+ let publicationName = _ref.publicationName;
75
+ return /*#__PURE__*/_react.default.createElement(_userState.default, {
76
+ state: _userState.default.showTokenisedEmailShare,
77
+ fallback: /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, this.props, {
78
+ shouldTokenise: false,
100
79
  publicationName: publicationName
101
- })));
102
- }), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
103
- testId: "share-twitter",
104
- tooltipContent: "Share on Twitter",
105
- href: "".concat(_constants.default.twitter, "?text=").concat(articleUrl),
106
- onClick: onShareOnTwitter
107
- }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
108
- icon: /*#__PURE__*/_react.default.createElement(_icons.IconTwitter, {
109
- fillColour: "currentColor",
110
- height: _styles.default.svgIcon.height,
111
- title: "Share on Twitter"
112
- })
113
- }, "Twitter")), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
114
- testId: "share-facebook",
115
- tooltipContent: "Share on Facebook",
116
- href: "".concat(_constants.default.facebook, "?u=").concat(articleUrl),
117
- onClick: onShareOnFB
118
- }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
119
- icon: /*#__PURE__*/_react.default.createElement(_icons.IconFacebook, {
120
- fillColour: "currentColor",
121
- height: _styles.default.svgIcon.fb.height,
122
- title: "Share on Facebook"
123
- })
124
- }, "Facebook")), /*#__PURE__*/_react.default.createElement(_shareItem.ShareItem, {
125
- testId: "copy-to-clickboard",
126
- tooltipContent: "Copy link to clipboard",
127
- href: "".concat(_constants.default.facebook, "?u=").concat(articleUrl),
128
- onClick: this.copyToClipboard
129
- }, /*#__PURE__*/_react.default.createElement(_shareItem.ShareItemLabel, {
130
- icon: /*#__PURE__*/_react.default.createElement(_icons.IconCopyLink, {
131
- fillColour: "currentColor",
132
- height: _styles.default.svgIcon.height,
133
- title: "Copy link to clipboard"
134
- })
135
- }, "Link")))
136
- }, /*#__PURE__*/_react.default.createElement(_styled.StyledButton, {
137
- size: "small",
138
- overrides: {
139
- stylePreset: "buttonOutlinedPrimary"
140
- }
141
- }, /*#__PURE__*/_react.default.createElement(_assets.NewsKitShareIcon, null), " Share")), savingEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_userState.default, {
80
+ }))
81
+ }, /*#__PURE__*/_react.default.createElement(_emailShare.default, _extends({}, this.props, {
82
+ shouldTokenise: true,
83
+ publicationName: publicationName
84
+ })));
85
+ }), /*#__PURE__*/_react.default.createElement(_barItem.default, {
86
+ onPress: onShareOnTwitter,
87
+ target: "_blank",
88
+ dataTestId: "share-twitter",
89
+ url: "".concat(_constants.default.twitter, "?text=").concat(articleUrl)
90
+ }, /*#__PURE__*/_react.default.createElement(_icons.IconTwitter, {
91
+ fillColour: "currentColor",
92
+ height: _styles.default.svgIcon.height,
93
+ title: "Share on Twitter"
94
+ })), /*#__PURE__*/_react.default.createElement(_barItem.default, {
95
+ onPress: onShareOnFB,
96
+ target: "_blank",
97
+ dataTestId: "share-facebook",
98
+ url: "".concat(_constants.default.facebook, "?u=").concat(articleUrl)
99
+ }, /*#__PURE__*/_react.default.createElement(_icons.IconFacebook, {
100
+ fillColour: "currentColor",
101
+ height: _styles.default.svgIcon.fb.height,
102
+ title: "Share on Facebook"
103
+ })), /*#__PURE__*/_react.default.createElement(_barItem.default, {
104
+ color: _styles.default.svgIcon.save.strokeColour,
105
+ hoverColor: _styles.default.svgIcon.hoverFillColour,
106
+ onPress: this.copyToClipboard,
107
+ dataTestId: "copy-to-clickboard",
108
+ url: ""
109
+ }, /*#__PURE__*/_react.default.createElement(_icons.IconCopyLink, {
110
+ fillColour: "currentColor",
111
+ height: _styles.default.svgIcon.height,
112
+ title: "Copy link to clipboard"
113
+ }))), savingEnabled ? /*#__PURE__*/_react.default.createElement(_userState.default, {
142
114
  state: _userState.default.showArticleSaveButton,
143
115
  serverRender: false
144
- }, /*#__PURE__*/_react.default.createElement("div", {
116
+ }, /*#__PURE__*/_react.default.createElement(_utils.TcView, {
117
+ style: _styles.default.rowItemRight,
145
118
  "data-testid": "save-star"
146
119
  }, /*#__PURE__*/_react.default.createElement(_tsComponents.SaveStar, {
147
120
  articleId: articleId
148
- }, /*#__PURE__*/_react.default.createElement(_saveButton.default, null)))), isPreviewMode && /*#__PURE__*/_react.default.createElement("div", {
149
- "data-testid": "save-star-preview"
150
- }, /*#__PURE__*/_react.default.createElement(_tsComponents.SaveStar, {
151
- articleId: articleId,
152
- isPreviewMode: true
153
- }, /*#__PURE__*/_react.default.createElement(_saveButton.default, null)))) : null);
121
+ }))) : null);
154
122
  }
155
123
 
156
124
  }
@@ -167,8 +135,7 @@ SaveAndShareBar.propTypes = {
167
135
  onShareEmail: _propTypes.default.func,
168
136
  onShareOnTwitter: _propTypes.default.func,
169
137
  savingEnabled: _propTypes.default.bool.isRequired,
170
- sharingEnabled: _propTypes.default.bool.isRequired,
171
- isPreviewMode: _propTypes.default.bool
138
+ sharingEnabled: _propTypes.default.bool.isRequired
172
139
  };
173
140
  /* Serves as an indication when share links are clicked for tracking and analytics */
174
141
 
@@ -176,8 +143,7 @@ SaveAndShareBar.defaultProps = {
176
143
  onShareOnFB: () => {},
177
144
  onShareOnTwitter: () => {},
178
145
  onShareEmail: () => {},
179
- getTokenisedShareUrl: _getTokenisedArticleUrlApi.default,
180
- isPreviewMode: _propTypes.default.bool = false
146
+ getTokenisedShareUrl: _getTokenisedArticleUrlApi.default
181
147
  };
182
148
 
183
149
  var _default = (0, _withTrackEvents.default)(SaveAndShareBar);
package/dist/styles/index.js CHANGED
@@ -7,7 +7,51 @@ exports.default = void 0;
7
7
 
8
8
  var _tsStyleguide = require("@times-components/ts-styleguide");
9
9
 
10
+ 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; }
11
+
12
+ 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; }
13
+
14
+ 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; }
15
+
16
+ const ICON_SIZE = 40;
10
17
  const styles = {
18
+ container: {
19
+ flex: 1,
20
+ flexDirection: "row",
21
+ justifyContent: "space-between",
22
+ paddingTop: (0, _tsStyleguide.spacing)(2),
23
+ paddingBottom: (0, _tsStyleguide.spacing)(2),
24
+ height: "100%",
25
+ alignItems: "center"
26
+ },
27
+ activityLoader: {
28
+ borderRadius: 9999,
29
+ height: 40,
30
+ overflow: "hidden",
31
+ width: 40
32
+ },
33
+ label: _objectSpread(_objectSpread({}, (0, _tsStyleguide.fontFactory)({
34
+ font: "supporting",
35
+ fontSize: "saveAndShare"
36
+ })), {}, {
37
+ color: _tsStyleguide.colours.functional.secondary,
38
+ marginRight: (0, _tsStyleguide.spacing)(2),
39
+ transform: "translateY(9%)"
40
+ }),
41
+ link: {
42
+ 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 ")
43
+ },
44
+ rowItem: {
45
+ alignItems: "center",
46
+ flexDirection: "row",
47
+ height: ICON_SIZE
48
+ },
49
+ rowItemRight: {
50
+ alignItems: "center",
51
+ flexDirection: "row",
52
+ height: ICON_SIZE,
53
+ marginLeft: "auto"
54
+ },
11
55
  svgIcon: {
12
56
  fb: {
13
57
  height: 18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@times-components/save-and-share-bar",
3
- "version": "0.19.53-alpha.69+64700ab43f",
3
+ "version": "0.19.53",
4
4
  "description": "Save and Share bar ",
5
5
  "main": "dist/save-and-share-bar",
6
6
  "dev": "src/save-and-share-bar",
@@ -33,27 +33,26 @@
33
33
  "homepage": "https://github.com/newsuk/times-components#readme",
34
34
  "dependencies": {
35
35
  "@storybook/addon-knobs": "6.4.0",
36
- "@times-components/context": "^1.15.1-alpha.82+64700ab43f",
37
- "@times-components/icons": "^2.21.18-alpha.82+64700ab43f",
38
- "@times-components/message-bar": "^0.7.63-alpha.82+64700ab43f",
39
- "@times-components/provider-queries": "^2.21.0",
40
- "@times-components/tracking": "^2.22.12-alpha.82+64700ab43f",
41
- "@times-components/ts-components": "^1.81.26-alpha.69+64700ab43f",
42
- "@times-components/ts-newskit": "^1.176.2-alpha.9+64700ab43f",
43
- "@times-components/ts-styleguide": "^1.50.12-alpha.82+64700ab43f",
44
- "@times-components/user-state": "^0.5.29-alpha.82+64700ab43f",
45
- "@times-components/utils": "^6.20.0",
46
- "newskit": "7.2.0",
36
+ "@times-components/context": "1.15.0",
37
+ "@times-components/icons": "2.21.18",
38
+ "@times-components/link": "3.17.12",
39
+ "@times-components/message-bar": "0.7.63",
40
+ "@times-components/provider-queries": "2.21.0",
41
+ "@times-components/tracking": "2.22.12",
42
+ "@times-components/ts-components": "1.82.0",
43
+ "@times-components/ts-styleguide": "1.50.12",
44
+ "@times-components/user-state": "0.5.29",
45
+ "@times-components/utils": "6.20.0",
47
46
  "prop-types": "15.7.2"
48
47
  },
49
48
  "devDependencies": {
50
49
  "@babel/core": "7.4.4",
51
- "@times-components/eslint-config-thetimes": "^0.8.18",
52
- "@times-components/jest-configurator-web": "^0.8.1",
53
- "@times-components/jest-serializer": "^3.13.7",
54
- "@times-components/provider-test-tools": "^1.29.2",
55
- "@times-components/storybook": "^4.12.12-alpha.82+64700ab43f",
56
- "@times-components/webpack-configurator": "^2.1.0",
50
+ "@times-components/eslint-config-thetimes": "0.8.18",
51
+ "@times-components/jest-configurator-web": "0.8.1",
52
+ "@times-components/jest-serializer": "3.13.7",
53
+ "@times-components/provider-test-tools": "1.29.2",
54
+ "@times-components/storybook": "4.12.12",
55
+ "@times-components/webpack-configurator": "2.1.0",
57
56
  "babel-jest": "24.8.0",
58
57
  "eslint": "5.9.0",
59
58
  "jest": "24.8.0",
@@ -74,5 +73,5 @@
74
73
  "publishConfig": {
75
74
  "access": "public"
76
75
  },
77
- "gitHead": "64700ab43f8980944be79412a75c65f3348896f5"
76
+ "gitHead": "e3d39233ed6c381b222aa6003a4459f91ac276c8"
78
77
  }
package/rnw.js CHANGED
@@ -1 +1 @@
1
- module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=11)}([function(e,t){e.exports=require("react")},function(e,t){e.exports=require("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("@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,n){"use strict";n.r(t);var r=n(0),a=n.n(r),o=n(3),i=n.n(o),l=n(2),c=n(4),s=n.n(c),d=n(7),u=n(1),m=n(6),h=n(8),p=n(9);const f=Object(p.makeClient)();var v=e=>f.query({query:h.getTokenisedArticleUrl,variables:{id:e}}),g=n(10),y="https://www.facebook.com/sharer/sharer.php",b="https://twitter.com/intent/tweet",w=n(5);var C,k,E,S,O={svgIcon:{fb:{height:18},star:{height:18},fillColour:w.colours.functional.secondary,height:16,hoverFillColour:w.colours.functional.brandColour,save:{fillColour:w.colours.functional.white,strokeColour:w.colours.functional.secondary}}};function x(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}const I=Object(u.styled)(u.Button)(C||(C=x(["\n border-radius: 0;\n border-color: #333333;\n color: #333333;\n"]))),T=u.styled.div(k||(k=x(["\n div {\n height: 16px;\n width: 16px;\n }\n"]))),j=Object(u.styled)(u.Popover)(E||(E=x(["\n "," {\n left: 5%;\n }\n"])),Object(u.getMediaQueryFromTheme)("xs","md")),L=Object(u.styled)(u.Stack)(S||(S=x(["\n gap: 24px;\n"])));var P,N;function M(){return(M=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 A(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function _(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}const U=Object(u.styled)(u.LinkStandalone)(P||(P=_(["\n cursor: pointer;\n &:hover {\n text-decoration: none !important;\n }\n"]))),q=u.styled.div(N||(N=_(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n"]))),B=e=>{let t=e.children,n=e.testId,r=e.tooltipContent,o=e.href,i=e.onClick,l=void 0===i?()=>{}:i,c=A(e,["children","testId","tooltipContent","href","onClick"]);return a.a.createElement(u.Tooltip,{content:r,placement:"bottom",trigger:["focus","hover"]},a.a.createElement(U,M({"data-testid":n,onClick:l,href:o,target:"_blank",external:!1},c),t))},F=e=>{let t=e.children,n=e.icon;return a.a.createElement(u.Stack,{flow:"horizontal-center",spaceInline:"space020"},a.a.createElement(q,null,n),a.a.createElement(u.TextBlock,{typographyPreset:"utilityLabel020"},t))};B.defaultProps={testId:"share-item",href:"",onClick:()=>{},tooltipContent:""};class H extends r.Component{constructor(e){super(e),this.state={isLoading:!1},this.onShare=this.onShare.bind(this)}onShare(e){const t=this.props,n=t.articleId,r=t.getTokenisedShareUrl,a=t.shouldTokenise,o=t.articleUrl,i=t.onShareEmail,l=t.articleHeadline;if(e.preventDefault(),i({articleId:n,articleUrl:o,articleHeadline:l}),a)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(o,"?shareToken=").concat(e[1]):o)}}openMailClient(e){const t=this.props,n=t.articleHeadline,r="TIMES"!==t.publicationName?"The Sunday Times":"The Times",a="mailto:?subject=".concat(n," from ").concat(r,"&body=I thought you would be interested in this story from ").concat(r,"%0A%0A").concat(n,"%0A%0A").concat(e);window.location.assign(a)}render(){const e=this.state.isLoading;return a.a.createElement(B,{tooltipContent:"Share by email",onClick:this.onShare,testId:"email-share"},a.a.createElement(F,{icon:e?a.a.createElement(l.IconActivityIndicator,{size:"small",style:O.activityLoader}):a.a.createElement(l.IconEmail,{fillColour:"currentColor",height:O.svgIcon.height,title:"Share by email"})},"Email"))}}H.defaultProps={publicationName:"TIMES"};var z=H;var Z=()=>a.a.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a.a.createElement("mask",{id:"mask0_2527_128",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"16",height:"16"},a.a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.6933 11.2601C11.04 10.9468 11.4933 10.7468 12 10.7468C13.0733 10.7468 13.9467 11.6201 13.9467 12.6934C13.9467 13.7668 13.0733 14.6401 12 14.6401C10.9267 14.6401 10.0533 13.7668 10.0533 12.6934C10.0533 12.5468 10.0733 12.4001 10.1067 12.2601L5.36 9.48677C5 9.82011 4.52667 10.0268 4 10.0268C2.89333 10.0268 2 9.13344 2 8.02677C2 6.92011 2.89333 6.02677 4 6.02677C4.52667 6.02677 5 6.23344 5.36 6.56677L10.06 3.82677C10.0267 3.67344 10 3.52011 10 3.36011C10 2.25344 10.8933 1.36011 12 1.36011C13.1067 1.36011 14 2.25344 14 3.36011C14 4.46677 13.1067 5.36011 12 5.36011C11.4733 5.36011 11 5.15344 10.64 4.82011L5.94 7.56011C5.97333 7.71344 6 7.86677 6 8.02677C6 8.18677 5.97333 8.34011 5.94 8.49344L10.6933 11.2601ZM12.6667 3.36011C12.6667 2.99344 12.3667 2.69344 12 2.69344C11.6333 2.69344 11.3333 2.99344 11.3333 3.36011C11.3333 3.72677 11.6333 4.02677 12 4.02677C12.3667 4.02677 12.6667 3.72677 12.6667 3.36011ZM4 8.69344C3.63333 8.69344 3.33333 8.39344 3.33333 8.02677C3.33333 7.66011 3.63333 7.36011 4 7.36011C4.36667 7.36011 4.66667 7.66011 4.66667 8.02677C4.66667 8.39344 4.36667 8.69344 4 8.69344ZM11.3333 12.7068C11.3333 13.0734 11.6333 13.3734 12 13.3734C12.3667 13.3734 12.6667 13.0734 12.6667 12.7068C12.6667 12.3401 12.3667 12.0401 12 12.0401C11.6333 12.0401 11.3333 12.3401 11.3333 12.7068Z",fill:"#333333"})),a.a.createElement("g",{mask:"url(#mask0_2527_128)"},a.a.createElement("rect",{width:"16",height:"16",fill:"#333333"})));var K=()=>a.a.createElement("svg",{width:"16",height:"17",viewBox:"0 0 16 17",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a.a.createElement("mask",{id:"mask0_2535_694",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"17",height:"17"},a.a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.66756 2.12793L11.3342 2.12793C12.0676 2.12793 12.6676 2.72793 12.6676 3.46126L12.6676 14.1279L8.0009 12.1279L3.33423 14.1279L3.33423 3.46126C3.33423 2.72793 3.93423 2.12793 4.66756 2.12793ZM8.0009 10.6746L11.3342 12.1279L11.3342 3.46126L4.66756 3.46126L4.66756 12.1279L8.0009 10.6746Z",fill:"#333333"})),a.a.createElement("g",{mask:"url(#mask0_2535_694)"},a.a.createElement("rect",{x:"0.000976562",y:"0.12793",width:"16",height:"16",fill:"#333333"})));var R=()=>a.a.createElement("svg",{width:"17",height:"17",viewBox:"0 0 17 17",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a.a.createElement("mask",{id:"mask0_2535_1371",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"17",height:"17"},a.a.createElement("path",{d:"M11.8342 2.10986L5.16756 2.10986C4.43423 2.10986 3.83423 2.70986 3.83423 3.4432L3.83423 14.1099L8.5009 12.1099L13.1676 14.1099L13.1676 3.4432C13.1676 2.70986 12.5676 2.10986 11.8342 2.10986Z",fill:"#333333"})),a.a.createElement("g",{mask:"url(#mask0_2535_1371)"},a.a.createElement("rect",{x:"0.500977",y:"0.109863",width:"16",height:"16",fill:"#333333"})));const D=Object(u.customToNewsKitIcon)("NewsKitShareIcon",e=>a.a.createElement(Z,e)),Q=Object(u.customToNewsKitIcon)("NewsKitBookmarkFilledIcon",e=>a.a.createElement(R,e)),W=Object(u.customToNewsKitIcon)("NewsKitBookmarkOutlineIcon",e=>a.a.createElement(K,e));var G=e=>{if(e.loading)return a.a.createElement(I,{size:"small",overrides:{stylePreset:"buttonOutlinedPrimary"}},a.a.createElement(T,null,a.a.createElement(l.IconActivityIndicator,{size:"small"})),"Save");if(e.error||!e.data)return null;const t=e.data.isBookmarked;return a.a.createElement(a.a.Fragment,null,a.a.createElement(I,{size:"small",overrides:{stylePreset:"buttonOutlinedPrimary"},onClick:()=>e.onToggleSave(e.articleId,e.data.isBookmarked)},t?a.a.createElement(Q,null):a.a.createElement(W,null),t?"Saved":"Save"))};function J(){return(J=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}class V extends r.Component{constructor(e){super(e),this.copyToClipboard=this.copyToClipboard.bind(this)}copyToClipboard(e){const t=this.props,n=t.onCopyLink,r=t.articleUrl;e.preventDefault(),navigator.clipboard.writeText(r),n()}render(){const e=this.props,t=e.articleId,n=e.articleUrl,r=e.savingEnabled,o=e.sharingEnabled,i=e.onShareOnFB,c=e.onShareOnTwitter,h=e.isPreviewMode;return a.a.createElement(u.Stack,{"data-testid":"save-and-share-bar",flow:"horizontal-center",spaceInline:"space050"},o&&a.a.createElement(j,{placement:"top",header:"Share this article",overrides:{minWidth:{xs:"90%",md:"auto"}},content:a.a.createElement(L,{flow:{xs:"vertical-start",md:"horizontal-center"}},a.a.createElement(d.SectionContext.Consumer,null,e=>{let t=e.publicationName;return a.a.createElement(s.a,{state:s.a.showTokenisedEmailShare,fallback:a.a.createElement(z,J({},this.props,{shouldTokenise:!1,publicationName:t}))},a.a.createElement(z,J({},this.props,{shouldTokenise:!0,publicationName:t})))}),a.a.createElement(B,{testId:"share-twitter",tooltipContent:"Share on Twitter",href:"".concat(b,"?text=").concat(n),onClick:c},a.a.createElement(F,{icon:a.a.createElement(l.IconTwitter,{fillColour:"currentColor",height:O.svgIcon.height,title:"Share on Twitter"})},"Twitter")),a.a.createElement(B,{testId:"share-facebook",tooltipContent:"Share on Facebook",href:"".concat(y,"?u=").concat(n),onClick:i},a.a.createElement(F,{icon:a.a.createElement(l.IconFacebook,{fillColour:"currentColor",height:O.svgIcon.fb.height,title:"Share on Facebook"})},"Facebook")),a.a.createElement(B,{testId:"copy-to-clickboard",tooltipContent:"Copy link to clipboard",href:"".concat(y,"?u=").concat(n),onClick:this.copyToClipboard},a.a.createElement(F,{icon:a.a.createElement(l.IconCopyLink,{fillColour:"currentColor",height:O.svgIcon.height,title:"Copy link to clipboard"})},"Link")))},a.a.createElement(I,{size:"small",overrides:{stylePreset:"buttonOutlinedPrimary"}},a.a.createElement(D,null)," Share")),r?a.a.createElement(a.a.Fragment,null,a.a.createElement(s.a,{state:s.a.showArticleSaveButton,serverRender:!1},a.a.createElement("div",{"data-testid":"save-star"},a.a.createElement(m.SaveStar,{articleId:t},a.a.createElement(G,null)))),h&&a.a.createElement("div",{"data-testid":"save-star-preview"},a.a.createElement(m.SaveStar,{articleId:t,isPreviewMode:!0},a.a.createElement(G,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"}]}))}]);
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"}]}))}]);
package/dist/assets/bookmark-filled.js DELETED
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
-
12
- const BookmarkFilled = () => /*#__PURE__*/_react.default.createElement("svg", {
13
- width: "17",
14
- height: "17",
15
- viewBox: "0 0 17 17",
16
- fill: "none",
17
- xmlns: "http://www.w3.org/2000/svg"
18
- }, /*#__PURE__*/_react.default.createElement("mask", {
19
- id: "mask0_2535_1371",
20
- style: {
21
- maskType: "alpha"
22
- },
23
- maskUnits: "userSpaceOnUse",
24
- x: "0",
25
- y: "0",
26
- width: "17",
27
- height: "17"
28
- }, /*#__PURE__*/_react.default.createElement("path", {
29
- d: "M11.8342 2.10986L5.16756 2.10986C4.43423 2.10986 3.83423 2.70986 3.83423 3.4432L3.83423 14.1099L8.5009 12.1099L13.1676 14.1099L13.1676 3.4432C13.1676 2.70986 12.5676 2.10986 11.8342 2.10986Z",
30
- fill: "#333333"
31
- })), /*#__PURE__*/_react.default.createElement("g", {
32
- mask: "url(#mask0_2535_1371)"
33
- }, /*#__PURE__*/_react.default.createElement("rect", {
34
- x: "0.500977",
35
- y: "0.109863",
36
- width: "16",
37
- height: "16",
38
- fill: "#333333"
39
- })));
40
-
41
- var _default = BookmarkFilled;
42
- exports.default = _default;
package/dist/assets/bookmark-outline.js DELETED
@@ -1,44 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
-
12
- const BookmarkOutline = () => /*#__PURE__*/_react.default.createElement("svg", {
13
- width: "16",
14
- height: "17",
15
- viewBox: "0 0 16 17",
16
- fill: "none",
17
- xmlns: "http://www.w3.org/2000/svg"
18
- }, /*#__PURE__*/_react.default.createElement("mask", {
19
- id: "mask0_2535_694",
20
- style: {
21
- maskType: "alpha"
22
- },
23
- maskUnits: "userSpaceOnUse",
24
- x: "0",
25
- y: "0",
26
- width: "17",
27
- height: "17"
28
- }, /*#__PURE__*/_react.default.createElement("path", {
29
- fillRule: "evenodd",
30
- clipRule: "evenodd",
31
- d: "M4.66756 2.12793L11.3342 2.12793C12.0676 2.12793 12.6676 2.72793 12.6676 3.46126L12.6676 14.1279L8.0009 12.1279L3.33423 14.1279L3.33423 3.46126C3.33423 2.72793 3.93423 2.12793 4.66756 2.12793ZM8.0009 10.6746L11.3342 12.1279L11.3342 3.46126L4.66756 3.46126L4.66756 12.1279L8.0009 10.6746Z",
32
- fill: "#333333"
33
- })), /*#__PURE__*/_react.default.createElement("g", {
34
- mask: "url(#mask0_2535_694)"
35
- }, /*#__PURE__*/_react.default.createElement("rect", {
36
- x: "0.000976562",
37
- y: "0.12793",
38
- width: "16",
39
- height: "16",
40
- fill: "#333333"
41
- })));
42
-
43
- var _default = BookmarkOutline;
44
- exports.default = _default;
package/dist/assets/index.js DELETED
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.NewsKitBookmarkOutlineIcon = exports.NewsKitBookmarkFilledIcon = exports.NewsKitShareIcon = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _newskit = require("newskit");
11
-
12
- var _share = _interopRequireDefault(require("./share"));
13
-
14
- var _bookmarkOutline = _interopRequireDefault(require("./bookmark-outline"));
15
-
16
- var _bookmarkFilled = _interopRequireDefault(require("./bookmark-filled"));
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- const NewsKitShareIcon = (0, _newskit.customToNewsKitIcon)("NewsKitShareIcon", props => /*#__PURE__*/_react.default.createElement(_share.default, props));
21
- exports.NewsKitShareIcon = NewsKitShareIcon;
22
- const NewsKitBookmarkFilledIcon = (0, _newskit.customToNewsKitIcon)("NewsKitBookmarkFilledIcon", props => /*#__PURE__*/_react.default.createElement(_bookmarkFilled.default, props));
23
- exports.NewsKitBookmarkFilledIcon = NewsKitBookmarkFilledIcon;
24
- const NewsKitBookmarkOutlineIcon = (0, _newskit.customToNewsKitIcon)("NewsKitBookmarkOutlineIcon", props => /*#__PURE__*/_react.default.createElement(_bookmarkOutline.default, props));
25
- exports.NewsKitBookmarkOutlineIcon = NewsKitBookmarkOutlineIcon;
package/dist/assets/share.js DELETED
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
-
12
- const Share = () => /*#__PURE__*/_react.default.createElement("svg", {
13
- width: "16",
14
- height: "16",
15
- viewBox: "0 0 16 16",
16
- fill: "none",
17
- xmlns: "http://www.w3.org/2000/svg"
18
- }, /*#__PURE__*/_react.default.createElement("mask", {
19
- id: "mask0_2527_128",
20
- style: {
21
- maskType: "alpha"
22
- },
23
- maskUnits: "userSpaceOnUse",
24
- x: "0",
25
- y: "0",
26
- width: "16",
27
- height: "16"
28
- }, /*#__PURE__*/_react.default.createElement("path", {
29
- fillRule: "evenodd",
30
- clipRule: "evenodd",
31
- d: "M10.6933 11.2601C11.04 10.9468 11.4933 10.7468 12 10.7468C13.0733 10.7468 13.9467 11.6201 13.9467 12.6934C13.9467 13.7668 13.0733 14.6401 12 14.6401C10.9267 14.6401 10.0533 13.7668 10.0533 12.6934C10.0533 12.5468 10.0733 12.4001 10.1067 12.2601L5.36 9.48677C5 9.82011 4.52667 10.0268 4 10.0268C2.89333 10.0268 2 9.13344 2 8.02677C2 6.92011 2.89333 6.02677 4 6.02677C4.52667 6.02677 5 6.23344 5.36 6.56677L10.06 3.82677C10.0267 3.67344 10 3.52011 10 3.36011C10 2.25344 10.8933 1.36011 12 1.36011C13.1067 1.36011 14 2.25344 14 3.36011C14 4.46677 13.1067 5.36011 12 5.36011C11.4733 5.36011 11 5.15344 10.64 4.82011L5.94 7.56011C5.97333 7.71344 6 7.86677 6 8.02677C6 8.18677 5.97333 8.34011 5.94 8.49344L10.6933 11.2601ZM12.6667 3.36011C12.6667 2.99344 12.3667 2.69344 12 2.69344C11.6333 2.69344 11.3333 2.99344 11.3333 3.36011C11.3333 3.72677 11.6333 4.02677 12 4.02677C12.3667 4.02677 12.6667 3.72677 12.6667 3.36011ZM4 8.69344C3.63333 8.69344 3.33333 8.39344 3.33333 8.02677C3.33333 7.66011 3.63333 7.36011 4 7.36011C4.36667 7.36011 4.66667 7.66011 4.66667 8.02677C4.66667 8.39344 4.36667 8.69344 4 8.69344ZM11.3333 12.7068C11.3333 13.0734 11.6333 13.3734 12 13.3734C12.3667 13.3734 12.6667 13.0734 12.6667 12.7068C12.6667 12.3401 12.3667 12.0401 12 12.0401C11.6333 12.0401 11.3333 12.3401 11.3333 12.7068Z",
32
- fill: "#333333"
33
- })), /*#__PURE__*/_react.default.createElement("g", {
34
- mask: "url(#mask0_2527_128)"
35
- }, /*#__PURE__*/_react.default.createElement("rect", {
36
- width: "16",
37
- height: "16",
38
- fill: "#333333"
39
- })));
40
-
41
- var _default = Share;
42
- exports.default = _default;
package/dist/components/save-button.js DELETED
@@ -1,51 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
- var _icons = require("@times-components/icons");
13
-
14
- var _styled = require("../styled");
15
-
16
- var _assets = require("../assets");
17
-
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
- const SaveButton = props => {
21
- if (props.loading) {
22
- return /*#__PURE__*/_react.default.createElement(_styled.StyledButton, {
23
- size: "small",
24
- overrides: {
25
- stylePreset: "buttonOutlinedPrimary"
26
- }
27
- }, /*#__PURE__*/_react.default.createElement(_styled.IconActivityIndicatorContainer, null, /*#__PURE__*/_react.default.createElement(_icons.IconActivityIndicator, {
28
- size: "small"
29
- })), "Save");
30
- }
31
-
32
- if (props.error || !props.data) return null;
33
- const isBookmarked = props.data.isBookmarked;
34
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.StyledButton, {
35
- size: "small",
36
- overrides: {
37
- stylePreset: "buttonOutlinedPrimary"
38
- },
39
- onClick: () => props.onToggleSave(props.articleId, props.data.isBookmarked)
40
- }, !isBookmarked ? /*#__PURE__*/_react.default.createElement(_assets.NewsKitBookmarkOutlineIcon, null) : /*#__PURE__*/_react.default.createElement(_assets.NewsKitBookmarkFilledIcon, null), !isBookmarked ? "Save" : "Saved"));
41
- };
42
-
43
- SaveButton.propTypes = {
44
- loading: _propTypes.default.bool,
45
- error: _propTypes.default.bool,
46
- data: _propTypes.default.shape({}),
47
- articleId: _propTypes.default.string,
48
- onToggleSave: _propTypes.default.func
49
- };
50
- var _default = SaveButton;
51
- exports.default = _default;
package/dist/components/share-item.js DELETED
@@ -1,82 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ShareItemLabel = exports.ShareItem = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- var _newskit = require("newskit");
11
-
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
-
14
- var _templateObject, _templateObject2;
15
-
16
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- 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); }
19
-
20
- 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; }
21
-
22
- 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; }
23
-
24
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
25
-
26
- const StyledLinkStandalone = (0, _newskit.styled)(_newskit.LinkStandalone)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n &:hover {\n text-decoration: none !important;\n }\n"])));
27
-
28
- 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"])));
29
-
30
- const ShareItem = _ref => {
31
- let children = _ref.children,
32
- testId = _ref.testId,
33
- tooltipContent = _ref.tooltipContent,
34
- href = _ref.href,
35
- _ref$onClick = _ref.onClick,
36
- onClick = _ref$onClick === void 0 ? () => {} : _ref$onClick,
37
- props = _objectWithoutProperties(_ref, ["children", "testId", "tooltipContent", "href", "onClick"]);
38
-
39
- return /*#__PURE__*/_react.default.createElement(_newskit.Tooltip, {
40
- content: tooltipContent,
41
- placement: "bottom",
42
- trigger: ["focus", "hover"]
43
- }, /*#__PURE__*/_react.default.createElement(StyledLinkStandalone, _extends({
44
- "data-testid": testId,
45
- onClick: onClick,
46
- href: href,
47
- target: "_blank",
48
- external: false
49
- }, props), children));
50
- };
51
-
52
- exports.ShareItem = ShareItem;
53
-
54
- const ShareItemLabel = _ref2 => {
55
- let children = _ref2.children,
56
- icon = _ref2.icon;
57
- return /*#__PURE__*/_react.default.createElement(_newskit.Stack, {
58
- flow: "horizontal-center",
59
- spaceInline: "space020"
60
- }, /*#__PURE__*/_react.default.createElement(IconContainer, null, icon), /*#__PURE__*/_react.default.createElement(_newskit.TextBlock, {
61
- typographyPreset: "utilityLabel020"
62
- }, children));
63
- };
64
-
65
- exports.ShareItemLabel = ShareItemLabel;
66
- ShareItem.propTypes = {
67
- children: _propTypes.default.node.isRequired,
68
- testId: _propTypes.default.string,
69
- href: _propTypes.default.string,
70
- onClick: _propTypes.default.func,
71
- tooltipContent: _propTypes.default.string
72
- };
73
- ShareItem.defaultProps = {
74
- testId: "share-item",
75
- href: "",
76
- onClick: () => {},
77
- tooltipContent: ""
78
- };
79
- ShareItemLabel.propTypes = {
80
- children: _propTypes.default.node.isRequired,
81
- icon: _propTypes.default.node.isRequired
82
- };
package/dist/styled.js DELETED
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.PopoverContent = exports.StyledPopover = exports.IconActivityIndicatorContainer = exports.StyledButton = void 0;
7
-
8
- var _newskit = require("newskit");
9
-
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
-
12
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
13
-
14
- const StyledButton = (0, _newskit.styled)(_newskit.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 0;\n border-color: #333333;\n color: #333333;\n"])));
15
- exports.StyledButton = StyledButton;
16
-
17
- const IconActivityIndicatorContainer = _newskit.styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n div {\n height: 16px;\n width: 16px;\n }\n"])));
18
-
19
- exports.IconActivityIndicatorContainer = IconActivityIndicatorContainer;
20
- const StyledPopover = (0, _newskit.styled)(_newskit.Popover)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " {\n left: 5%;\n }\n"])), (0, _newskit.getMediaQueryFromTheme)("xs", "md"));
21
- exports.StyledPopover = StyledPopover;
22
- const PopoverContent = (0, _newskit.styled)(_newskit.Stack)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n gap: 24px;\n"])));
23
- exports.PopoverContent = PopoverContent;