@twreporter/universal-header 3.0.2 → 3.0.3-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/lib/actions/auth.js +9 -25
  3. package/lib/actions/error-action-creators.js +6 -20
  4. package/lib/components/action-button-item.js +41 -71
  5. package/lib/components/action-button-item.stories.js +7 -24
  6. package/lib/components/action-button.js +19 -46
  7. package/lib/components/channels.js +16 -52
  8. package/lib/components/channels.stories.js +4 -13
  9. package/lib/components/customized-link.js +3 -16
  10. package/lib/components/drop-down-menu.js +10 -52
  11. package/lib/components/hamburger-footer.js +20 -59
  12. package/lib/components/hamburger-footer.stories.js +5 -21
  13. package/lib/components/hamburger-menu-item.js +36 -75
  14. package/lib/components/hamburger-menu-item.stories.js +17 -48
  15. package/lib/components/hamburger-menu.js +41 -125
  16. package/lib/components/hamburger-menu.stories.js +4 -16
  17. package/lib/components/header.js +28 -100
  18. package/lib/components/header.stories.js +7 -16
  19. package/lib/components/icons.js +27 -86
  20. package/lib/components/icons.stories.js +5 -17
  21. package/lib/components/slogan.js +7 -24
  22. package/lib/components/slogan.stories.js +3 -12
  23. package/lib/components/tab-bar.js +21 -48
  24. package/lib/components/tab-bar.stories.js +4 -16
  25. package/lib/constants/action-item-types.js +13 -36
  26. package/lib/constants/action-types.js +2 -3
  27. package/lib/constants/actions.js +9 -13
  28. package/lib/constants/categories.js +5 -9
  29. package/lib/constants/channels.js +16 -27
  30. package/lib/constants/colors.js +2 -3
  31. package/lib/constants/external-links.js +1 -2
  32. package/lib/constants/fonts.js +2 -5
  33. package/lib/constants/footer.js +11 -18
  34. package/lib/constants/hamburger-menu.js +2 -3
  35. package/lib/constants/prop-types.js +5 -12
  36. package/lib/constants/slogan.js +1 -2
  37. package/lib/constants/social-media.js +2 -4
  38. package/lib/constants/theme.js +2 -3
  39. package/lib/containers/header.js +108 -200
  40. package/lib/contexts/header-context.js +2 -7
  41. package/lib/index.js +3 -9
  42. package/lib/reducers/auth.js +2 -13
  43. package/lib/reducers/index.js +1 -6
  44. package/lib/standalone-header.js +14 -45
  45. package/lib/storybook/constants/index.js +2 -8
  46. package/lib/storybook/utils/get-enum-arg.js +2 -5
  47. package/lib/utils/animations.js +2 -9
  48. package/lib/utils/icon.js +4 -83
  49. package/lib/utils/jwt.js +3 -10
  50. package/lib/utils/links.js +10 -55
  51. package/lib/utils/theme.js +8 -42
  52. package/package.json +7 -6
@@ -17,33 +17,23 @@ exports.getMyReadingLink = getMyReadingLink;
17
17
  exports.getSearchLink = getSearchLink;
18
18
  exports.getSocialMediaLinks = getSocialMediaLinks;
19
19
  exports.getTabBarLinks = getTabBarLinks;
20
-
21
20
  var _actions = require("../constants/actions");
22
-
23
21
  var _footer = require("../constants/footer");
24
-
25
22
  var _socialMedia = require("../constants/social-media");
26
-
27
23
  var _channels = require("../constants/channels");
28
-
29
24
  var _externalLinks = _interopRequireDefault(require("../constants/external-links"));
30
-
31
25
  var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
32
-
33
26
  var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
34
-
35
27
  var _forEach = _interopRequireDefault(require("lodash/forEach"));
36
-
37
28
  var _reduce = _interopRequireDefault(require("lodash/reduce"));
38
-
39
29
  var _split = _interopRequireDefault(require("lodash/split"));
40
-
41
30
  var _indexOf = _interopRequireDefault(require("lodash/indexOf"));
42
-
43
31
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
44
-
45
- 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; }
46
-
32
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
33
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
34
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
35
+ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // @twreporter
36
+ // lodash
47
37
  var _ = {
48
38
  forEach: _forEach["default"],
49
39
  reduce: _reduce["default"],
@@ -51,30 +41,26 @@ var _ = {
51
41
  indexOf: _indexOf["default"]
52
42
  };
53
43
  var originsForClient = _requestOrigins["default"].forClientSideRendering;
44
+
54
45
  /**
55
46
  * @param {string} domain - one of 'account', 'main', 'support', or 'api'
56
47
  * @returns {Object}
57
48
  */
58
-
59
49
  function getOriginsByType(domain) {
60
50
  var baseURL = {};
61
-
62
51
  _.forEach(_releaseBranch["default"], function (branch) {
63
52
  baseURL[branch] = originsForClient[branch][domain];
64
53
  });
65
-
66
54
  return baseURL;
67
55
  }
68
-
69
56
  var accountsBaseURL = getOriginsByType('accounts');
70
- var mainBaseURL = getOriginsByType('main'); // const support = getOriginsByType('support')
57
+ var mainBaseURL = getOriginsByType('main');
58
+ // const support = getOriginsByType('support')
71
59
 
72
60
  var defaultReleaseBranch = _releaseBranch["default"].master;
73
61
  var defaultIsExternal = false;
74
-
75
62
  function __getLink(isExternal, releaseBranch, baseURL, path) {
76
63
  var target = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '_self';
77
-
78
64
  if (isExternal) {
79
65
  if (baseURL.hasOwnProperty(releaseBranch)) {
80
66
  return {
@@ -84,17 +70,14 @@ function __getLink(isExternal, releaseBranch, baseURL, path) {
84
70
  };
85
71
  }
86
72
  }
87
-
88
73
  return {
89
74
  to: path,
90
75
  isExternal: isExternal
91
76
  };
92
77
  }
93
-
94
78
  function __getExternalLinks() {
95
79
  return Object.assign({}, _externalLinks["default"]);
96
80
  }
97
-
98
81
  var __composeExternalLink = function __composeExternalLink(link) {
99
82
  var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_self';
100
83
  return {
@@ -103,11 +86,9 @@ var __composeExternalLink = function __composeExternalLink(link) {
103
86
  target: target
104
87
  };
105
88
  };
106
-
107
- var checkReferrer = function checkReferrer() {
89
+ var checkReferrer = exports.checkReferrer = function checkReferrer() {
108
90
  var referrer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
109
91
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
110
-
111
92
  try {
112
93
  var url = new URL(referrer);
113
94
  return url.origin === mainBaseURL[releaseBranch];
@@ -115,24 +96,17 @@ var checkReferrer = function checkReferrer() {
115
96
  return false;
116
97
  }
117
98
  };
118
-
119
- exports.checkReferrer = checkReferrer;
120
-
121
- var checkPathnameParent = function checkPathnameParent() {
99
+ var checkPathnameParent = exports.checkPathnameParent = function checkPathnameParent() {
122
100
  var pathname = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
123
101
  var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
124
102
  return _.indexOf(_.split(pathname, '/'), parent) === 1;
125
103
  };
126
-
127
- exports.checkPathnameParent = checkPathnameParent;
128
-
129
104
  function getLink() {
130
105
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
131
106
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
132
107
  var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
133
108
  return __getLink(isExternal, releaseBranch, mainBaseURL, path);
134
109
  }
135
-
136
110
  function getLoginLink() {
137
111
  var releaseBranch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultReleaseBranch;
138
112
  return {
@@ -140,53 +114,43 @@ function getLoginLink() {
140
114
  isExternal: true
141
115
  };
142
116
  }
143
-
144
117
  function getMemberLink() {
145
118
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
146
119
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
147
120
  return __getLink(isExternal, releaseBranch, mainBaseURL, '/account');
148
121
  }
149
-
150
122
  function getBookmarksLink() {
151
123
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
152
124
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
153
125
  return __getLink(isExternal, releaseBranch, mainBaseURL, '/myreading/saved');
154
126
  }
155
-
156
127
  function getMyReadingLink() {
157
128
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
158
129
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
159
130
  return __getLink(isExternal, releaseBranch, mainBaseURL, '/myreading');
160
131
  }
161
-
162
132
  function getSearchLink() {
163
133
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
164
134
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
165
135
  return __getLink(isExternal, releaseBranch, mainBaseURL, '/search');
166
136
  }
167
-
168
137
  function getLogoLink() {
169
138
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
170
139
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
171
140
  return __getLink(isExternal, releaseBranch, mainBaseURL, '');
172
141
  }
173
-
174
142
  function getActionLinks() {
175
143
  var _ref;
176
-
177
144
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
178
145
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
179
146
  return _ref = {}, _defineProperty(_ref, _actions.ACTION_KEY.support, __composeExternalLink(__getExternalLinks().monthlyDonation)), _defineProperty(_ref, _actions.ACTION_KEY.newsLetter, __getLink(isExternal, releaseBranch, mainBaseURL, '/account/email-subscription')), _ref;
180
147
  }
181
-
182
148
  function getFooterLinks() {
183
149
  var _ref2;
184
-
185
150
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
186
151
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
187
152
  return _ref2 = {}, _defineProperty(_ref2, _footer.FOOTER_KEY.foundation, __getLink(isExternal, releaseBranch, mainBaseURL, _footer.FOOTER_PATH[_footer.FOOTER_KEY.foundation])), _defineProperty(_ref2, _footer.FOOTER_KEY.aboutUs, __getLink(true, releaseBranch, mainBaseURL, _footer.FOOTER_PATH[_footer.FOOTER_KEY.aboutUs], '_blank')), _defineProperty(_ref2, _footer.FOOTER_KEY.influenceReport, __getLink(isExternal, releaseBranch, mainBaseURL, _footer.FOOTER_PATH[_footer.FOOTER_KEY.influenceReport])), _defineProperty(_ref2, _footer.FOOTER_KEY.openLab, __composeExternalLink(__getExternalLinks().openLab, '_blank')), _defineProperty(_ref2, _footer.FOOTER_KEY.publicationAndMerchandise, __composeExternalLink(__getExternalLinks().publicationAndMerchandise, '_blank')), _ref2;
188
153
  }
189
-
190
154
  function getMemberLinks() {
191
155
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
192
156
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
@@ -195,36 +159,27 @@ function getMemberLinks() {
195
159
  return res;
196
160
  }, {});
197
161
  }
198
-
199
162
  function getSocialMediaLinks() {
200
163
  var externalLinks = __getExternalLinks();
201
-
202
164
  return _.reduce(_socialMedia.SOCIAL_MEDIA_KEY, function (res, key) {
203
165
  var link = externalLinks[key];
204
-
205
166
  if (link) {
206
167
  res[key] = __composeExternalLink(link, '_blank');
207
168
  }
208
-
209
169
  return res;
210
170
  }, {});
211
171
  }
212
-
213
172
  function getChannelLinks() {
214
173
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
215
174
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
216
-
217
175
  var links = _.reduce(_channels.CHANNEL_PATH, function (res, path, key) {
218
176
  var link = __getLink(isExternal, releaseBranch, mainBaseURL, path);
219
-
220
177
  res[key] = link;
221
178
  return res;
222
179
  }, {});
223
-
224
180
  links[_channels.CHANNEL_KEY.kidsReporter] = __composeExternalLink(__getExternalLinks().kidsReporter, '_blank');
225
181
  return links;
226
182
  }
227
-
228
183
  function getTabBarLinks() {
229
184
  var isExternal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultIsExternal;
230
185
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
@@ -4,46 +4,35 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.selectTabBarTheme = exports.selectSloganTheme = exports.selectLogoType = exports.selectHeaderTheme = exports.selectHamburgerMenuTheme = exports.selectHamburgerItemTheme = exports.selectHamburgerFooterTheme = void 0;
7
-
8
7
  var _theme = _interopRequireDefault(require("../constants/theme"));
9
-
10
8
  var _color = require("@twreporter/core/lib/constants/color");
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
-
14
- var selectLogoType = function selectLogoType(theme) {
10
+ var selectLogoType = exports.selectLogoType = function selectLogoType(theme) {
15
11
  switch (theme) {
16
12
  case _theme["default"].photography:
17
13
  case _theme["default"].transparent:
18
14
  return 'white';
19
-
20
15
  default:
21
16
  return 'default';
22
17
  }
23
18
  };
24
-
25
- exports.selectLogoType = selectLogoType;
26
-
27
- var selectHeaderTheme = function selectHeaderTheme(theme) {
19
+ var selectHeaderTheme = exports.selectHeaderTheme = function selectHeaderTheme(theme) {
28
20
  switch (theme) {
29
21
  case _theme["default"].photography:
30
22
  return {
31
23
  bgColor: _color.colorPhoto.dark,
32
24
  topRowBgColor: _color.colorPhoto.dark
33
25
  };
34
-
35
26
  case _theme["default"].transparent:
36
27
  return {
37
28
  bgColor: _color.colorOpacity['black_0.2'],
38
29
  topRowBgColor: 'unset'
39
30
  };
40
-
41
31
  case _theme["default"].index:
42
32
  return {
43
33
  bgColor: _color.colorGrayscale.white,
44
34
  topRowBgColor: _color.colorGrayscale.white
45
35
  };
46
-
47
36
  case _theme["default"].normal:
48
37
  default:
49
38
  return {
@@ -52,25 +41,18 @@ var selectHeaderTheme = function selectHeaderTheme(theme) {
52
41
  };
53
42
  }
54
43
  };
55
-
56
- exports.selectHeaderTheme = selectHeaderTheme;
57
-
58
- var selectSloganTheme = function selectSloganTheme(theme) {
44
+ var selectSloganTheme = exports.selectSloganTheme = function selectSloganTheme(theme) {
59
45
  switch (theme) {
60
46
  case _theme["default"].photography:
61
47
  case _theme["default"].transparent:
62
48
  return _color.colorGrayscale.white;
63
-
64
49
  case _theme["default"].index:
65
50
  case _theme["default"].normal:
66
51
  default:
67
52
  return _color.colorGrayscale.gray800;
68
53
  }
69
54
  };
70
-
71
- exports.selectSloganTheme = selectSloganTheme;
72
-
73
- var selectHamburgerFooterTheme = function selectHamburgerFooterTheme(theme) {
55
+ var selectHamburgerFooterTheme = exports.selectHamburgerFooterTheme = function selectHamburgerFooterTheme(theme) {
74
56
  switch (theme) {
75
57
  case _theme["default"].photography:
76
58
  return {
@@ -80,7 +62,6 @@ var selectHamburgerFooterTheme = function selectHamburgerFooterTheme(theme) {
80
62
  activeColor: _color.colorGrayscale.gray400,
81
63
  activeBgColor: _color.colorOpacity['white_0.5']
82
64
  };
83
-
84
65
  case _theme["default"].transparent:
85
66
  case _theme["default"].index:
86
67
  case _theme["default"].normal:
@@ -94,12 +75,8 @@ var selectHamburgerFooterTheme = function selectHamburgerFooterTheme(theme) {
94
75
  };
95
76
  }
96
77
  };
97
-
98
- exports.selectHamburgerFooterTheme = selectHamburgerFooterTheme;
99
-
100
- var selectHamburgerItemTheme = function selectHamburgerItemTheme(theme) {
78
+ var selectHamburgerItemTheme = exports.selectHamburgerItemTheme = function selectHamburgerItemTheme(theme) {
101
79
  var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
102
-
103
80
  switch (theme) {
104
81
  case _theme["default"].photography:
105
82
  return {
@@ -107,7 +84,6 @@ var selectHamburgerItemTheme = function selectHamburgerItemTheme(theme) {
107
84
  hoverBgColor: _color.colorOpacity['white_0.2'],
108
85
  activeBgColor: _color.colorOpacity['white_0.5']
109
86
  };
110
-
111
87
  case _theme["default"].transparent:
112
88
  case _theme["default"].index:
113
89
  case _theme["default"].normal:
@@ -119,17 +95,13 @@ var selectHamburgerItemTheme = function selectHamburgerItemTheme(theme) {
119
95
  };
120
96
  }
121
97
  };
122
-
123
- exports.selectHamburgerItemTheme = selectHamburgerItemTheme;
124
-
125
- var selectHamburgerMenuTheme = function selectHamburgerMenuTheme(theme) {
98
+ var selectHamburgerMenuTheme = exports.selectHamburgerMenuTheme = function selectHamburgerMenuTheme(theme) {
126
99
  switch (theme) {
127
100
  case _theme["default"].photography:
128
101
  return {
129
102
  bgColor: _color.colorPhoto.dark,
130
103
  scrollBarColor: _color.colorOpacity['white_0.8']
131
104
  };
132
-
133
105
  case _theme["default"].transparent:
134
106
  case _theme["default"].index:
135
107
  case _theme["default"].normal:
@@ -140,17 +112,13 @@ var selectHamburgerMenuTheme = function selectHamburgerMenuTheme(theme) {
140
112
  };
141
113
  }
142
114
  };
143
-
144
- exports.selectHamburgerMenuTheme = selectHamburgerMenuTheme;
145
-
146
- var selectTabBarTheme = function selectTabBarTheme(theme) {
115
+ var selectTabBarTheme = exports.selectTabBarTheme = function selectTabBarTheme(theme) {
147
116
  switch (theme) {
148
117
  case _theme["default"].photography:
149
118
  return {
150
119
  bgColor: _color.colorPhoto.dark,
151
120
  borderColor: _color.colorPhoto.heavy
152
121
  };
153
-
154
122
  case _theme["default"].transparent:
155
123
  case _theme["default"].index:
156
124
  case _theme["default"].normal:
@@ -160,6 +128,4 @@ var selectTabBarTheme = function selectTabBarTheme(theme) {
160
128
  borderColor: _color.colorGrayscale.gray300
161
129
  };
162
130
  }
163
- };
164
-
165
- exports.selectTabBarTheme = selectTabBarTheme;
131
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twreporter/universal-header",
3
- "version": "3.0.2",
3
+ "version": "3.0.3-rc.1",
4
4
  "description": "Universal header of TWReporter sites",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -20,17 +20,18 @@
20
20
  ],
21
21
  "license": "MIT",
22
22
  "dependencies": {
23
+ "@reduxjs/toolkit": "^2.2.5",
23
24
  "@twreporter/core": "^1.22.1",
24
- "@twreporter/react-components": "^9.0.2",
25
+ "@twreporter/react-components": "^9.1.0-rc.0",
25
26
  "lodash": "^4.17.11",
26
27
  "prop-types": "^15.6.2",
27
28
  "querystring": "^0.2.0",
28
29
  "react": "^18.2.0",
29
- "react-redux": "^6.0.0",
30
+ "react-redux": "^9.1.2",
30
31
  "react-router-dom": "^5.1.2",
31
32
  "react-transition-group": "^4.4.5",
32
- "redux": "^4.0.1",
33
- "redux-thunk": "^2.3.0",
33
+ "redux": "^5.0.1",
34
+ "redux-thunk": "^3.1.0",
34
35
  "styled-components": "^6.0.0",
35
36
  "stylis": "^4.0.0"
36
37
  },
@@ -52,5 +53,5 @@
52
53
  "babel-loader": "^8.2.5",
53
54
  "react-dom": "^18.2.0"
54
55
  },
55
- "gitHead": "48b821a07c388fab197859b742571da4f76bbf87"
56
+ "gitHead": "df79295a50f202d6ed016de4e91bbbc0899a3882"
56
57
  }