@quintype/arrow 3.15.1-perf.4 → 3.15.1-perf.5

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 (166) hide show
  1. package/cjs/index.js +14589 -0
  2. package/package.json +1 -1
  3. package/atoms/Author/index.js +0 -170
  4. package/atoms/Author/styles.arrow.css +0 -1
  5. package/atoms/AuthorWithTime/index.js +0 -514
  6. package/atoms/AuthorWithTime/styles.arrow.css +0 -1
  7. package/atoms/CollectionName/index.js +0 -255
  8. package/atoms/CollectionName/styles.arrow.css +0 -1
  9. package/atoms/ExtendedLoadMore/index-0f809dd9.js +0 -254
  10. package/atoms/ExtendedLoadMore/index-142f015c.js +0 -476
  11. package/atoms/ExtendedLoadMore/index-37a9ccff.js +0 -182
  12. package/atoms/ExtendedLoadMore/index-446679c8.js +0 -191
  13. package/atoms/ExtendedLoadMore/index-44f97338.js +0 -300
  14. package/atoms/ExtendedLoadMore/index-57dd4870.js +0 -239
  15. package/atoms/ExtendedLoadMore/index-66dd4dbd.js +0 -215
  16. package/atoms/ExtendedLoadMore/index-8462c597.js +0 -363
  17. package/atoms/ExtendedLoadMore/index-93cb06d1.js +0 -1016
  18. package/atoms/ExtendedLoadMore/index-afd44863.js +0 -95
  19. package/atoms/ExtendedLoadMore/index-b5754c5d.js +0 -195
  20. package/atoms/ExtendedLoadMore/index-bbaf526e.js +0 -256
  21. package/atoms/ExtendedLoadMore/index-cfb262ef.js +0 -192
  22. package/atoms/ExtendedLoadMore/index.js +0 -20
  23. package/atoms/ExtendedLoadMore/styles.arrow.css +0 -1
  24. package/atoms/Headline/index.js +0 -379
  25. package/atoms/Headline/styles.arrow.css +0 -1
  26. package/atoms/HeroImage/index.js +0 -336
  27. package/atoms/HeroImage/styles.arrow.css +0 -1
  28. package/atoms/LoadmoreButton/index.js +0 -175
  29. package/atoms/LoadmoreButton/styles.arrow.css +0 -1
  30. package/atoms/ScrollSnap/index.js +0 -379
  31. package/atoms/ScrollSnap/styles.arrow.css +0 -1
  32. package/atoms/SectionTag/index.js +0 -140
  33. package/atoms/SectionTag/styles.arrow.css +0 -1
  34. package/atoms/Subheadline/index.js +0 -120
  35. package/atoms/Subheadline/styles.arrow.css +0 -1
  36. package/atoms/TimeStamp/index.js +0 -221
  37. package/atoms/TimeStamp/styles.arrow.css +0 -1
  38. package/molecules/KeyEvents/index.js +0 -457
  39. package/molecules/KeyEvents/styles.arrow.css +0 -1
  40. package/molecules/PageIntroductionCard/index.js +0 -248
  41. package/molecules/PageIntroductionCard/styles.arrow.css +0 -1
  42. package/molecules/SocialShareTemplate/index.js +0 -506
  43. package/molecules/SocialShareTemplate/styles.arrow.css +0 -1
  44. package/molecules/StoryCard/index.js +0 -1430
  45. package/molecules/StoryCard/styles.arrow.css +0 -1
  46. package/molecules/StoryElementCard/index.js +0 -3091
  47. package/molecules/StoryElementCard/styles.arrow.css +0 -1
  48. package/molecules/StorycardContent/index.js +0 -976
  49. package/molecules/StorycardContent/styles.arrow.css +0 -1
  50. package/rows/AlternateCollectionFilter/index.js +0 -2189
  51. package/rows/AlternateCollectionFilter/styles.arrow.css +0 -1
  52. package/rows/AsideCollection/index.js +0 -2135
  53. package/rows/AsideCollection/styles.arrow.css +0 -1
  54. package/rows/AstrologyCollection/index.js +0 -2106
  55. package/rows/AstrologyCollection/styles.arrow.css +0 -1
  56. package/rows/AuthorIntroductionCard/index.js +0 -813
  57. package/rows/AuthorIntroductionCard/styles.arrow.css +0 -1
  58. package/rows/AuthorsList/index.js +0 -996
  59. package/rows/AuthorsList/styles.arrow.css +0 -1
  60. package/rows/CollectionFilter/index.js +0 -2279
  61. package/rows/CollectionFilter/styles.arrow.css +0 -1
  62. package/rows/ElevenStories/index.js +0 -2118
  63. package/rows/ElevenStories/styles.arrow.css +0 -1
  64. package/rows/FourColFiveStories/index.js +0 -1861
  65. package/rows/FourColFiveStories/styles.arrow.css +0 -1
  66. package/rows/FourColGrid/index.js +0 -2083
  67. package/rows/FourColGrid/styles.arrow.css +0 -1
  68. package/rows/FourColPortraitStories/index.js +0 -2116
  69. package/rows/FourColPortraitStories/styles.arrow.css +0 -1
  70. package/rows/FourColSixteenStories/index.js +0 -1849
  71. package/rows/FourColSixteenStories/styles.arrow.css +0 -1
  72. package/rows/FourColTwelveStories/index.js +0 -1822
  73. package/rows/FourColTwelveStories/styles.arrow.css +0 -1
  74. package/rows/FourStorySlider/index.js +0 -2223
  75. package/rows/FourStorySlider/styles.arrow.css +0 -1
  76. package/rows/FourStorySliderPortrait/index.js +0 -2226
  77. package/rows/FourStorySliderPortrait/styles.arrow.css +0 -1
  78. package/rows/FourTabbedBigStorySlider/index.js +0 -1985
  79. package/rows/FourTabbedBigStorySlider/styles.arrow.css +0 -1
  80. package/rows/FullScreenSlider/index.js +0 -2141
  81. package/rows/FullScreenSlider/styles.arrow.css +0 -1
  82. package/rows/HalfScreenSlider/index.js +0 -1994
  83. package/rows/HalfScreenSlider/styles.arrow.css +0 -1
  84. package/rows/ListComponent/index.js +0 -1942
  85. package/rows/ListComponent/styles.arrow.css +0 -1
  86. package/rows/Listicles/index.js +0 -945
  87. package/rows/Listicles/styles.arrow.css +0 -1
  88. package/rows/MagazineEditions/index.js +0 -690
  89. package/rows/MagazineEditions/styles.arrow.css +0 -1
  90. package/rows/MagazineHeaderCard/index.js +0 -684
  91. package/rows/MagazineHeaderCard/styles.arrow.css +0 -1
  92. package/rows/MagazineWidget/index.js +0 -1994
  93. package/rows/MagazineWidget/styles.arrow.css +0 -1
  94. package/rows/OneColStoryList/index.js +0 -2169
  95. package/rows/OneColStoryList/styles.arrow.css +0 -1
  96. package/rows/OpinionCollection/index.js +0 -1545
  97. package/rows/OpinionCollection/styles.arrow.css +0 -1
  98. package/rows/SixColSixStories/index.js +0 -2014
  99. package/rows/SixColSixStories/styles.arrow.css +0 -1
  100. package/rows/StoryCollection/index.js +0 -2135
  101. package/rows/StoryCollection/styles.arrow.css +0 -1
  102. package/rows/TagIntroductionCard/index.js +0 -103
  103. package/rows/TagIntroductionCard/styles.arrow.css +0 -1
  104. package/rows/ThreeColFlexStories/index.js +0 -2074
  105. package/rows/ThreeColFlexStories/styles.arrow.css +0 -1
  106. package/rows/ThreeColFourteenStories/index.js +0 -1770
  107. package/rows/ThreeColFourteenStories/styles.arrow.css +0 -1
  108. package/rows/ThreeColGrid/index.js +0 -2104
  109. package/rows/ThreeColGrid/styles.arrow.css +0 -1
  110. package/rows/ThreeColSevenStory/index.js +0 -1982
  111. package/rows/ThreeColSevenStory/styles.arrow.css +0 -1
  112. package/rows/ThreeColSixStories/index.js +0 -1965
  113. package/rows/ThreeColSixStories/styles.arrow.css +0 -1
  114. package/rows/ThreeColTwelveStories/index.js +0 -1854
  115. package/rows/ThreeColTwelveStories/styles.arrow.css +0 -1
  116. package/rows/TwoColFourStories/index.js +0 -1943
  117. package/rows/TwoColFourStories/styles.arrow.css +0 -1
  118. package/rows/TwoColFourStoryHighlight/index.js +0 -1930
  119. package/rows/TwoColFourStoryHighlight/styles.arrow.css +0 -1
  120. package/rows/TwoColSevenStories/index.js +0 -1970
  121. package/rows/TwoColSevenStories/styles.arrow.css +0 -1
  122. package/rows/TwoColSixStories/index.js +0 -1963
  123. package/rows/TwoColSixStories/styles.arrow.css +0 -1
  124. package/rows/TwoColTenStoriesSidebar/index.js +0 -2029
  125. package/rows/TwoColTenStoriesSidebar/styles.arrow.css +0 -1
  126. package/rows/TwoColThreeStories/index.js +0 -1916
  127. package/rows/TwoColThreeStories/styles.arrow.css +0 -1
  128. package/story-elements/AlsoRead/index.js +0 -320
  129. package/story-elements/AlsoRead/styles.arrow.css +0 -1
  130. package/story-elements/Attachment/index.js +0 -167
  131. package/story-elements/Attachment/styles.arrow.css +0 -1
  132. package/story-elements/BigFact/index.js +0 -137
  133. package/story-elements/BigFact/styles.arrow.css +0 -1
  134. package/story-elements/BlockQuote/index.js +0 -304
  135. package/story-elements/BlockQuote/styles.arrow.css +0 -1
  136. package/story-elements/Blurb/index.js +0 -189
  137. package/story-elements/Blurb/styles.arrow.css +0 -1
  138. package/story-elements/Image/index.js +0 -529
  139. package/story-elements/Image/styles.arrow.css +0 -1
  140. package/story-elements/ImageGallery/index.js +0 -462
  141. package/story-elements/ImageGallery/styles.arrow.css +0 -1
  142. package/story-elements/ImageSlideshow/index.js +0 -773
  143. package/story-elements/ImageSlideshow/styles.arrow.css +0 -1
  144. package/story-elements/QuestionAnswer/index.js +0 -267
  145. package/story-elements/QuestionAnswer/styles.arrow.css +0 -1
  146. package/story-elements/Quote/index.js +0 -166
  147. package/story-elements/Quote/styles.arrow.css +0 -1
  148. package/story-elements/Reference/index.js +0 -160
  149. package/story-elements/Reference/styles.arrow.css +0 -1
  150. package/story-elements/StoryElement/index.js +0 -75
  151. package/story-elements/Summary/index.js +0 -190
  152. package/story-elements/Summary/styles.arrow.css +0 -1
  153. package/story-elements/Text/index.js +0 -165
  154. package/story-elements/Text/styles.arrow.css +0 -1
  155. package/story-elements/Video/index.js +0 -81
  156. package/story-elements/Video/styles.arrow.css +0 -1
  157. package/story-templates/ListicleStoryTemplate/index.js +0 -5586
  158. package/story-templates/ListicleStoryTemplate/styles.arrow.css +0 -1
  159. package/story-templates/LiveBlogStoryTemplate/index.js +0 -5762
  160. package/story-templates/LiveBlogStoryTemplate/styles.arrow.css +0 -1
  161. package/story-templates/PhotoStoryTemplate/index.js +0 -5564
  162. package/story-templates/PhotoStoryTemplate/styles.arrow.css +0 -1
  163. package/story-templates/TextStoryTemplate/index.js +0 -5637
  164. package/story-templates/TextStoryTemplate/styles.arrow.css +0 -1
  165. package/story-templates/VideoStoryTemplate/index.js +0 -5496
  166. package/story-templates/VideoStoryTemplate/styles.arrow.css +0 -1
@@ -1,221 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
6
- var React = require('react');
7
- var lodash = require('lodash');
8
- require('@babel/runtime/helpers/asyncToGenerator');
9
- require('@babel/runtime/helpers/typeof');
10
- require('@babel/runtime/regenerator');
11
- var PropTypes = require('prop-types');
12
- var Timeago = require('react-timeago');
13
- var dateFnsTz = require('date-fns-tz');
14
-
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
18
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
20
- var Timeago__default = /*#__PURE__*/_interopDefaultLegacy(Timeago);
21
-
22
- var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
23
- var useStateValue = function useStateValue() {
24
- return React.useContext(StateContext);
25
- };
26
-
27
- var timestampToFormat = function timestampToFormat(value, unit, suffix, timestamp) {
28
- var config = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
29
- var _config$showTime = config.showTime,
30
- showTime = _config$showTime === void 0 ? false : _config$showTime,
31
- _config$isTimeFirst = config.isTimeFirst,
32
- isTimeFirst = _config$isTimeFirst === void 0 ? false : _config$isTimeFirst,
33
- _config$isUpperCase = config.isUpperCase,
34
- isUpperCase = _config$isUpperCase === void 0 ? false : _config$isUpperCase,
35
- _config$disableMeridi = config.disableMeridiem,
36
- disableMeridiem = _config$disableMeridi === void 0 ? false : _config$disableMeridi,
37
- _config$timeFormat = config.timeFormat,
38
- timeFormat = _config$timeFormat === void 0 ? "12hours" : _config$timeFormat;
39
- var monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
40
- var dateTime = new Date(timestamp);
41
- var date = dateTime.getDate().toString().padStart(2, 0);
42
- var month = monthList[dateTime.getMonth()];
43
- var localizedMonth = month;
44
-
45
- if (isUpperCase) {
46
- localizedMonth = lodash.upperCase(month);
47
- }
48
-
49
- var year = dateTime.getFullYear();
50
- var localizedMeridiem = config.localizedMeridiem,
51
- localizedMonths = config.localizedMonths,
52
- _config$direction = config.direction,
53
- direction = _config$direction === void 0 ? "ltr" : _config$direction;
54
- var time = formatAMPM(timestamp, timeFormat);
55
- var timeWithLocalizedMeridiem = time;
56
- var timetoShow;
57
-
58
- if (localizedMonths) {
59
- localizedMonth = lodash.get(localizedMonths, [lodash.lowerCase(month)]) || month;
60
- }
61
-
62
- if (localizedMeridiem) {
63
- var isAm = time.includes("am");
64
- var _localizedMeridiem$am = localizedMeridiem.am,
65
- am = _localizedMeridiem$am === void 0 ? "am" : _localizedMeridiem$am,
66
- _localizedMeridiem$pm = localizedMeridiem.pm,
67
- pm = _localizedMeridiem$pm === void 0 ? "pm" : _localizedMeridiem$pm;
68
- timeWithLocalizedMeridiem = (isAm ? time.replace("am", am) : time.replace("pm", pm)) || time;
69
- }
70
-
71
- if (direction === "rtl") {
72
- timetoShow = showTime ? "".concat(timeWithLocalizedMeridiem) : "";
73
- return "".concat(date, " ").concat(localizedMonth, ", ").concat(year, " ").concat(timetoShow, " ");
74
- } else {
75
- if (disableMeridiem) {
76
- return "".concat(localizedMonth, " ").concat(date, ", ").concat(year);
77
- } else if (isTimeFirst) {
78
- return "".concat(timeWithLocalizedMeridiem, ", ").concat(date, " ").concat(localizedMonth, " ").concat(year);
79
- } else {
80
- timetoShow = showTime ? ", ".concat(timeWithLocalizedMeridiem) : "";
81
- return "".concat(date, " ").concat(localizedMonth, ", ").concat(year).concat(timetoShow);
82
- }
83
- }
84
- };
85
- function formatter(value, unit, suffix, date, config) {
86
- var showDateForUnits = ["day", "week", "month", "year"]; // suffix here refers to ago
87
- // unit here refers to seconds, minute, minutes,...
88
-
89
- var localizedSuffix = lodash.get(config, ["localizedPublishTime", suffix]) || suffix;
90
- var localizedUnitOfTime;
91
-
92
- if (unit === "hour" && value > 23 || showDateForUnits.indexOf(unit) !== -1) {
93
- return timestampToFormat(value, unit, suffix, date, config);
94
- } else if (value > 1) {
95
- localizedUnitOfTime = lodash.get(config, ["localizedPublishTime", "".concat(unit, "s")]) || "".concat(unit, "s");
96
- return "".concat(value, " ").concat(localizedUnitOfTime, " ").concat(localizedSuffix);
97
- }
98
-
99
- localizedUnitOfTime = lodash.get(config, ["localizedPublishTime", unit]) || unit;
100
- return "".concat(value, " ").concat(localizedUnitOfTime, " ").concat(localizedSuffix, " ");
101
- }
102
-
103
- function formatAMPM(timestamp) {
104
- var timeFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "12hours";
105
- var dateTime = new Date(timestamp);
106
- var hours = dateTime.getHours();
107
- var minutes = dateTime.getMinutes();
108
- var ampm = hours >= 12 ? "pm" : "am";
109
- hours = hours % 12;
110
- hours = hours || 12;
111
- minutes = minutes < 10 ? "0" + minutes : minutes;
112
- var strTime = hours + ":" + minutes + " " + ampm;
113
-
114
- if (timeFormat === "24hours") {
115
- return dateTime.toLocaleTimeString([], {
116
- hour: "2-digit",
117
- minute: "2-digit"
118
- });
119
- }
120
-
121
- return strTime;
122
- }
123
-
124
- var hexToRGB = function hexToRGB(hex) {
125
- var r = parseInt(hex.slice(1, 3), 16);
126
- var g = parseInt(hex.slice(3, 5), 16);
127
- var b = parseInt(hex.slice(5, 7), 16);
128
- return {
129
- r: r,
130
- g: g,
131
- b: b
132
- };
133
- };
134
- var getLuminanceOfColor = function getLuminanceOfColor(hex) {
135
- var _hexToRGB = hexToRGB(hex),
136
- r = _hexToRGB.r,
137
- g = _hexToRGB.g,
138
- b = _hexToRGB.b;
139
-
140
- return r * 0.299 + g * 0.587 + b * 0.114;
141
- };
142
- var rgbToHex = function rgbToHex() {
143
- var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
144
- var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
145
- return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
146
- };
147
- var getTextColor = function getTextColor() {
148
- var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
149
- var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
150
- var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
151
- var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
152
- return textColor;
153
- };
154
- PropTypes__default["default"].shape({
155
- "sketches-host": PropTypes__default["default"].string,
156
- "cdn-name": PropTypes__default["default"].string,
157
- "cdn-image": PropTypes__default["default"].string
158
- });
159
- PropTypes__default["default"].shape({
160
- headline: PropTypes__default["default"].string,
161
- "last-published-at": PropTypes__default["default"].number,
162
- subheadline: PropTypes__default["default"].string
163
- });
164
- var getTimeStamp = function getTimeStamp(date, _formatter) {
165
- var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
166
- var template = arguments.length > 3 ? arguments[3] : undefined;
167
- var timezone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
168
-
169
- if (timezone && template === "story") {
170
- var zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
171
- var formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
172
- timeZone: timezone
173
- });
174
- var timeStamp = timestampToFormat("", "", "", date, config);
175
- return /*#__PURE__*/React__default["default"].createElement("time", {
176
- dateTime: formatZonedTime
177
- }, timeStamp);
178
- }
179
-
180
- return /*#__PURE__*/React__default["default"].createElement(Timeago__default["default"], {
181
- date: date,
182
- formatter: function formatter(value, unit, suffix, date) {
183
- return _formatter(value, unit, suffix, date, config);
184
- }
185
- });
186
- };
187
-
188
- var _styleModuleImportMap = {
189
- "./timestamp.m.css": {
190
- "time": "timestamp-m_time__2v46i",
191
- "time-wrapper": "timestamp-m_time-wrapper__3O2lM",
192
- "bottom-fix": "timestamp-m_bottom-fix__1Zh8r",
193
- "dark": "timestamp-m_dark__2lk9E",
194
- "light": "timestamp-m_light__2QlrI"
195
- }
196
- };
197
- var TimeStamp = function TimeStamp(_ref) {
198
- var story = _ref.story,
199
- isBottom = _ref.isBottom,
200
- _ref$config = _ref.config,
201
- config = _ref$config === void 0 ? {} : _ref$config;
202
- var configState = useStateValue() || {};
203
- var isTime = lodash.get(config, ["showTime"], lodash.get(configState, ["showTime"], true));
204
- var time = story["last-published-at"] || story["first-published-at"];
205
- var isBottomClasses = isBottom ? "bottom-fix" : "";
206
- var textColor = getTextColor(configState.theme);
207
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isTime && /*#__PURE__*/React__default["default"].createElement("div", {
208
- "data-test-id": "publish-time",
209
- className: "time arr--publish-time " + _getClassName__default["default"]("time ".concat(textColor, " ").concat(isBottomClasses), _styleModuleImportMap)
210
- }, /*#__PURE__*/React__default["default"].createElement("div", {
211
- className: "timestamp-m_time-wrapper__3O2lM"
212
- }, getTimeStamp(time, formatter, config))));
213
- };
214
- TimeStamp.propTypes = {
215
- /** The Story Object from the API response */
216
- story: PropTypes__default["default"].object,
217
- isBottom: PropTypes__default["default"].bool,
218
- config: PropTypes__default["default"].object
219
- };
220
-
221
- exports.TimeStamp = TimeStamp;
@@ -1 +0,0 @@
1
- .timestamp-m_time__nFaiw{display:flex;margin-bottom:2px}.timestamp-m_time-wrapper__K6nmZ{margin-bottom:var(--arrow-spacing-xxs)}.timestamp-m_bottom-fix__gjxS2{margin-top:auto}.timestamp-m_dark__z8gbw{color:var(--arrow-c-mono4)}.timestamp-m_light__BcFUe{color:var(--arrow-c-invert-mono4)}
@@ -1,457 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
- var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
7
- var React = require('react');
8
- var lodash = require('lodash');
9
- var PropTypes = require('prop-types');
10
- require('@babel/runtime/helpers/asyncToGenerator');
11
- require('@babel/runtime/helpers/typeof');
12
- require('@babel/runtime/regenerator');
13
- var Timeago = require('react-timeago');
14
- var dateFnsTz = require('date-fns-tz');
15
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
16
- var components = require('@quintype/components');
17
- var reactRedux = require('react-redux');
18
-
19
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
-
21
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
22
- var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
23
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
25
- var Timeago__default = /*#__PURE__*/_interopDefaultLegacy(Timeago);
26
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
27
-
28
- var ClockIcon = function ClockIcon(_ref) {
29
- var _ref$color = _ref.color,
30
- color = _ref$color === void 0 ? "#333" : _ref$color;
31
- return /*#__PURE__*/React__default["default"].createElement("svg", {
32
- xmlns: "http://www.w3.org/2000/svg",
33
- width: "24",
34
- height: "24",
35
- viewBox: "0 0 24 24"
36
- }, /*#__PURE__*/React__default["default"].createElement("path", {
37
- fill: color,
38
- fillRule: "evenodd",
39
- d: "M12 19.75a7.513 7.513 0 003.875-1.047 7.832 7.832 0 002.828-2.828A7.513 7.513 0 0019.75 12a7.513 7.513 0 00-1.047-3.875c-.698-1.187-1.64-2.13-2.828-2.828S13.395 4.25 12 4.25a7.51 7.51 0 00-3.875 1.047c-1.188.698-2.13 1.64-2.828 2.828S4.25 10.605 4.25 12a7.51 7.51 0 001.047 3.875 7.824 7.824 0 002.828 2.828A7.513 7.513 0 0012 19.75zm.016-1a6.64 6.64 0 01-3.391-.906 6.716 6.716 0 01-2.469-2.453 6.563 6.563 0 01-.906-3.375c0-1.22.302-2.35.906-3.391A6.711 6.711 0 018.61 6.156a6.563 6.563 0 013.375-.906c1.22 0 2.35.302 3.391.906a6.716 6.716 0 012.469 2.453A6.592 6.592 0 0118.751 12a6.616 6.616 0 01-.906 3.375 6.716 6.716 0 01-2.453 2.469 6.563 6.563 0 01-3.375.906zm2.283-3.92l.076-.002a.343.343 0 00.25-.14l.25-.375a.365.365 0 00.078-.266.328.328 0 00-.14-.234l-2.22-1.625V7.625a.362.362 0 00-.109-.266.36.36 0 00-.265-.109h-.438a.357.357 0 00-.265.11.358.358 0 00-.11.265v5c0 .125.052.219.156.281l2.532 1.844a.383.383 0 00.281.078l-.076.001z"
40
- }));
41
- };
42
- ClockIcon.propTypes = {
43
- color: PropTypes__default["default"].string
44
- };
45
-
46
- var timestampToFormat = function timestampToFormat(value, unit, suffix, timestamp) {
47
- var config = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
48
- var _config$showTime = config.showTime,
49
- showTime = _config$showTime === void 0 ? false : _config$showTime,
50
- _config$isTimeFirst = config.isTimeFirst,
51
- isTimeFirst = _config$isTimeFirst === void 0 ? false : _config$isTimeFirst,
52
- _config$isUpperCase = config.isUpperCase,
53
- isUpperCase = _config$isUpperCase === void 0 ? false : _config$isUpperCase,
54
- _config$disableMeridi = config.disableMeridiem,
55
- disableMeridiem = _config$disableMeridi === void 0 ? false : _config$disableMeridi,
56
- _config$timeFormat = config.timeFormat,
57
- timeFormat = _config$timeFormat === void 0 ? "12hours" : _config$timeFormat;
58
- var monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
59
- var dateTime = new Date(timestamp);
60
- var date = dateTime.getDate().toString().padStart(2, 0);
61
- var month = monthList[dateTime.getMonth()];
62
- var localizedMonth = month;
63
-
64
- if (isUpperCase) {
65
- localizedMonth = lodash.upperCase(month);
66
- }
67
-
68
- var year = dateTime.getFullYear();
69
- var localizedMeridiem = config.localizedMeridiem,
70
- localizedMonths = config.localizedMonths,
71
- _config$direction = config.direction,
72
- direction = _config$direction === void 0 ? "ltr" : _config$direction;
73
- var time = formatAMPM(timestamp, timeFormat);
74
- var timeWithLocalizedMeridiem = time;
75
- var timetoShow;
76
-
77
- if (localizedMonths) {
78
- localizedMonth = lodash.get(localizedMonths, [lodash.lowerCase(month)]) || month;
79
- }
80
-
81
- if (localizedMeridiem) {
82
- var isAm = time.includes("am");
83
- var _localizedMeridiem$am = localizedMeridiem.am,
84
- am = _localizedMeridiem$am === void 0 ? "am" : _localizedMeridiem$am,
85
- _localizedMeridiem$pm = localizedMeridiem.pm,
86
- pm = _localizedMeridiem$pm === void 0 ? "pm" : _localizedMeridiem$pm;
87
- timeWithLocalizedMeridiem = (isAm ? time.replace("am", am) : time.replace("pm", pm)) || time;
88
- }
89
-
90
- if (direction === "rtl") {
91
- timetoShow = showTime ? "".concat(timeWithLocalizedMeridiem) : "";
92
- return "".concat(date, " ").concat(localizedMonth, ", ").concat(year, " ").concat(timetoShow, " ");
93
- } else {
94
- if (disableMeridiem) {
95
- return "".concat(localizedMonth, " ").concat(date, ", ").concat(year);
96
- } else if (isTimeFirst) {
97
- return "".concat(timeWithLocalizedMeridiem, ", ").concat(date, " ").concat(localizedMonth, " ").concat(year);
98
- } else {
99
- timetoShow = showTime ? ", ".concat(timeWithLocalizedMeridiem) : "";
100
- return "".concat(date, " ").concat(localizedMonth, ", ").concat(year).concat(timetoShow);
101
- }
102
- }
103
- };
104
-
105
- function formatAMPM(timestamp) {
106
- var timeFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "12hours";
107
- var dateTime = new Date(timestamp);
108
- var hours = dateTime.getHours();
109
- var minutes = dateTime.getMinutes();
110
- var ampm = hours >= 12 ? "pm" : "am";
111
- hours = hours % 12;
112
- hours = hours || 12;
113
- minutes = minutes < 10 ? "0" + minutes : minutes;
114
- var strTime = hours + ":" + minutes + " " + ampm;
115
-
116
- if (timeFormat === "24hours") {
117
- return dateTime.toLocaleTimeString([], {
118
- hour: "2-digit",
119
- minute: "2-digit"
120
- });
121
- }
122
-
123
- return strTime;
124
- }
125
-
126
- var hexToRGB = function hexToRGB(hex) {
127
- var r = parseInt(hex.slice(1, 3), 16);
128
- var g = parseInt(hex.slice(3, 5), 16);
129
- var b = parseInt(hex.slice(5, 7), 16);
130
- return {
131
- r: r,
132
- g: g,
133
- b: b
134
- };
135
- };
136
- var getLuminanceOfColor = function getLuminanceOfColor(hex) {
137
- var _hexToRGB = hexToRGB(hex),
138
- r = _hexToRGB.r,
139
- g = _hexToRGB.g,
140
- b = _hexToRGB.b;
141
-
142
- return r * 0.299 + g * 0.587 + b * 0.114;
143
- };
144
- var rgbToHex = function rgbToHex() {
145
- var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
146
- var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
147
- return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
148
- };
149
- var getTextColor = function getTextColor() {
150
- var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
151
- var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
152
- var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
153
- var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
154
- return textColor;
155
- };
156
- var getSlug = function getSlug(collection) {
157
- var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
158
- var _config$magazineSlug = config.magazineSlug,
159
- magazineSlug = _config$magazineSlug === void 0 ? "" : _config$magazineSlug,
160
- _config$isArchivePage = config.isArchivePage,
161
- isArchivePage = _config$isArchivePage === void 0 ? false : _config$isArchivePage;
162
-
163
- if (isArchivePage) {
164
- return "/magazine/archive/".concat(magazineSlug);
165
- }
166
-
167
- if (magazineSlug) {
168
- return "/magazine/".concat(magazineSlug, "/").concat(collection.slug);
169
- }
170
-
171
- var isSection = collection.template === "section";
172
-
173
- if (isSection) {
174
- var sectionId = lodash.get(collection, ["metadata", "section", "0", "id"], "");
175
- var sections = config.sections;
176
- var section = sections && sections.find(function (section) {
177
- return section.id === sectionId;
178
- });
179
- return section ? section["section-url"] : "/";
180
- }
181
-
182
- return "/collection/".concat(collection.slug);
183
- };
184
- PropTypes__default["default"].shape({
185
- "sketches-host": PropTypes__default["default"].string,
186
- "cdn-name": PropTypes__default["default"].string,
187
- "cdn-image": PropTypes__default["default"].string
188
- });
189
- PropTypes__default["default"].shape({
190
- headline: PropTypes__default["default"].string,
191
- "last-published-at": PropTypes__default["default"].number,
192
- subheadline: PropTypes__default["default"].string
193
- });
194
- var generateNavigateSlug = function generateNavigateSlug() {
195
- var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
196
- var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
197
- var customUrlPath = arguments.length > 2 ? arguments[2] : undefined;
198
-
199
- if (customUrlPath) {
200
- return customUrlPath;
201
- }
202
-
203
- var _config$magazineSlug2 = config.magazineSlug,
204
- magazineSlug = _config$magazineSlug2 === void 0 ? "" : _config$magazineSlug2,
205
- _config$isArchivePage2 = config.isArchivePage,
206
- isArchivePage = _config$isArchivePage2 === void 0 ? false : _config$isArchivePage2;
207
-
208
- if (isArchivePage) {
209
- return "/magazine/archive/".concat(magazineSlug);
210
- }
211
-
212
- if (magazineSlug) {
213
- return "/magazine/".concat(magazineSlug, "/").concat(collection.slug);
214
- }
215
-
216
- if (collection) {
217
- return getSlug(collection, config);
218
- }
219
-
220
- return "/";
221
- };
222
- var getTimeStamp = function getTimeStamp(date, _formatter) {
223
- var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
224
- var template = arguments.length > 3 ? arguments[3] : undefined;
225
- var timezone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
226
-
227
- if (timezone && template === "story") {
228
- var zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
229
- var formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
230
- timeZone: timezone
231
- });
232
- var timeStamp = timestampToFormat("", "", "", date, config);
233
- return /*#__PURE__*/React__default["default"].createElement("time", {
234
- dateTime: formatZonedTime
235
- }, timeStamp);
236
- }
237
-
238
- return /*#__PURE__*/React__default["default"].createElement(Timeago__default["default"], {
239
- date: date,
240
- formatter: function formatter(value, unit, suffix, date) {
241
- return _formatter(value, unit, suffix, date, config);
242
- }
243
- });
244
- };
245
-
246
- var _styleModuleImportMap$1 = {
247
- "./load-more.m.css": {
248
- "button": "load-more-m_button__1mmf1",
249
- "default": "load-more-m_default__2_k4V",
250
- "dark": "load-more-m_dark__3dfzb",
251
- "light": "load-more-m_light__ePZQI"
252
- }
253
- };
254
-
255
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
256
-
257
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
258
- var LoadmoreButton = function LoadmoreButton(_ref) {
259
- var _ref$config = _ref.config,
260
- config = _ref$config === void 0 ? {} : _ref$config,
261
- collection = _ref.collection,
262
- _ref$template = _ref.template,
263
- template = _ref$template === void 0 ? "SubsequentLoadCount" : _ref$template,
264
- onClick = _ref.onClick,
265
- navigate = _ref.navigate,
266
- qtConfig = _ref.qtConfig;
267
- var _config$showButton = config.showButton,
268
- showButton = _config$showButton === void 0 ? true : _config$showButton,
269
- _config$buttonText = config.buttonText,
270
- buttonText = _config$buttonText === void 0 ? "Read More" : _config$buttonText,
271
- _config$theme = config.theme,
272
- theme = _config$theme === void 0 ? "" : _config$theme,
273
- _config$customUrlPath = config.customUrlPath,
274
- customUrlPath = _config$customUrlPath === void 0 ? "" : _config$customUrlPath;
275
- if (!showButton) return null;
276
- var textColor = getTextColor(theme);
277
- var slug = customUrlPath ? "/".concat(customUrlPath) : generateNavigateSlug(collection, _objectSpread(_objectSpread({}, qtConfig), config));
278
- return template === "SubsequentLoadCount" ? /*#__PURE__*/React__default["default"].createElement("div", {
279
- onClick: onClick,
280
- "data-test-id": "load-more",
281
- className: "arr--button " + _getClassName__default["default"]("button ".concat(textColor, " default"), _styleModuleImportMap$1)
282
- }, buttonText) : /*#__PURE__*/React__default["default"].createElement(components.LinkBase, {
283
- href: slug,
284
- navigateTo: navigate,
285
- "data-test-id": "load-more",
286
- "aria-label": "load-more"
287
- }, /*#__PURE__*/React__default["default"].createElement("div", {
288
- className: "arr--button " + _getClassName__default["default"]("button ".concat(textColor, " default"), _styleModuleImportMap$1)
289
- }, buttonText));
290
- };
291
- LoadmoreButton.propTypes = {
292
- collection: PropTypes__default["default"].object,
293
- template: PropTypes__default["default"].string,
294
- config: PropTypes__default["default"].object,
295
- onClick: PropTypes__default["default"].func,
296
- navigate: PropTypes__default["default"].func,
297
- qtConfig: PropTypes__default["default"].object
298
- };
299
-
300
- var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
301
-
302
- var StateProvider = function StateProvider(RowComponent) {
303
- return function (props) {
304
- return (
305
- /*#__PURE__*/
306
- // eslint-disable-next-line react/prop-types
307
- React__default["default"].createElement(StateContext.Provider, {
308
- value: props.config
309
- }, /*#__PURE__*/React__default["default"].createElement(RowComponent, props))
310
- );
311
- };
312
- };
313
-
314
- var _styleModuleImportMap = {
315
- "./key-events.m.css": {
316
- "container": "key-events-m_container__1slhR",
317
- "event-title": "key-events-m_event-title__u9bt3",
318
- "cards-wrapper": "key-events-m_cards-wrapper__3f8aB",
319
- "time-wrapper": "key-events-m_time-wrapper__2poXn",
320
- "dark": "key-events-m_dark__hrnAr",
321
- "light": "key-events-m_light__2gE0a",
322
- "borderNone": "key-events-m_borderNone__2tNUK",
323
- "fade-out": "key-events-m_fade-out__11jv_"
324
- }
325
- };
326
-
327
- var KeyEventCards = function KeyEventCards(props) {
328
- var config = props.config,
329
- index = props.index,
330
- cardLength = props.cardLength,
331
- _props$card = props.card,
332
- card = _props$card === void 0 ? {} : _props$card,
333
- slug = props.slug,
334
- loadCards = props.loadCards,
335
- showLoadMore = props.showLoadMore;
336
- var cardAddedAt = card["card-added-at"],
337
- _card$storyElements = card["story-elements"],
338
- storyElements = _card$storyElements === void 0 ? [] : _card$storyElements,
339
- id = card.id;
340
- var theme = config.theme,
341
- _config$mountAt = config.mountAt,
342
- mountAt = _config$mountAt === void 0 ? "" : _config$mountAt;
343
- var textColor = getTextColor(theme);
344
- var dark = "#333";
345
- var light = "#fff";
346
- var updateColor = textColor === "dark" ? dark : light;
347
- var lastElement = index === cardLength - 1;
348
- var borderLeft = lastElement ? "borderNone" : "";
349
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
350
- className: _getClassName__default["default"]("time-wrapper ".concat(textColor), _styleModuleImportMap)
351
- }, /*#__PURE__*/React__default["default"].createElement(ClockIcon, {
352
- color: updateColor
353
- }), getTimeStamp(cardAddedAt, timestampToFormat, {
354
- showTime: true,
355
- isTimeFirst: true
356
- })), /*#__PURE__*/React__default["default"].createElement("a", {
357
- href: "".concat(mountAt, "/").concat(slug, "#").concat(id),
358
- "aria-label": "event-title"
359
- }, /*#__PURE__*/React__default["default"].createElement("div", {
360
- className: _getClassName__default["default"]("event-title ".concat(textColor, " ").concat(borderLeft), _styleModuleImportMap)
361
- }, storyElements.map(function (element, index) {
362
- return element.type === "title" && /*#__PURE__*/React__default["default"].createElement("h3", {
363
- key: index
364
- }, element.text);
365
- }), showLoadMore && lastElement && loadCards && /*#__PURE__*/React__default["default"].createElement("div", {
366
- className: "key-events-m_fade-out__11jv_",
367
- style: {
368
- backgroundImage: "linear-gradient(to bottom, transparent, ".concat(theme, ")")
369
- }
370
- }))));
371
- };
372
-
373
- KeyEventCards.propTypes = {
374
- card: PropTypes__default["default"].shape({
375
- "card-added-at": PropTypes__default["default"].number,
376
- "story-elements": PropTypes__default["default"].array,
377
- id: PropTypes__default["default"].string
378
- }),
379
- config: PropTypes__default["default"].object,
380
- slug: PropTypes__default["default"].string,
381
- story: PropTypes__default["default"].object,
382
- elements: PropTypes__default["default"].array,
383
- index: PropTypes__default["default"].number,
384
- cardLength: PropTypes__default["default"].number,
385
- loadCards: PropTypes__default["default"].bool,
386
- showLoadMore: PropTypes__default["default"].bool
387
- };
388
- var KeyEventsBase = function KeyEventsBase(_ref) {
389
- var _ref$story = _ref.story,
390
- story = _ref$story === void 0 ? {} : _ref$story,
391
- _ref$config = _ref.config,
392
- config = _ref$config === void 0 ? {} : _ref$config,
393
- _ref$showLoadMore = _ref.showLoadMore,
394
- showLoadMore = _ref$showLoadMore === void 0 ? true : _ref$showLoadMore;
395
- var cards = lodash.get(story, ["cards"], []);
396
- var theme = config.theme,
397
- _config$initialLoadCo = config.initialLoadCount,
398
- initialLoadCount = _config$initialLoadCo === void 0 ? 4 : _config$initialLoadCo;
399
- var textColor = getTextColor(theme);
400
-
401
- var _useState = React.useState(initialLoadCount),
402
- _useState2 = _slicedToArray__default["default"](_useState, 2),
403
- initialCount = _useState2[0],
404
- updatedCount = _useState2[1];
405
-
406
- var cardsWithKeyEvents = cards.filter(function (card) {
407
- return lodash.get(card.metadata, ["attributes", "key-event"]);
408
- });
409
- var lastElement = cardsWithKeyEvents.length > initialCount;
410
- var qtConfig = reactRedux.useSelector(function (state) {
411
- return lodash.get(state, ["qt", "config"], {});
412
- });
413
-
414
- var onClick = function onClick() {
415
- updatedCount(initialCount + initialLoadCount);
416
- };
417
-
418
- if (cardsWithKeyEvents.length < 1) {
419
- return null;
420
- }
421
-
422
- var showAllCards = !showLoadMore ? cardsWithKeyEvents.slice(0, 4) : cardsWithKeyEvents.slice(0, initialCount);
423
- var keyEvents = showAllCards.map(function (card, index, source) {
424
- return /*#__PURE__*/React__default["default"].createElement(KeyEventCards, {
425
- cardLength: source.length,
426
- card: card,
427
- key: card.id,
428
- slug: story.slug,
429
- config: config,
430
- index: index,
431
- loadCards: lastElement,
432
- showLoadMore: showLoadMore
433
- });
434
- });
435
- return /*#__PURE__*/React__default["default"].createElement("div", {
436
- style: {
437
- background: theme
438
- },
439
- className: "arrow-component " + _getClassName__default["default"]("container ".concat(textColor), _styleModuleImportMap)
440
- }, /*#__PURE__*/React__default["default"].createElement("h3", null, "Key Events"), /*#__PURE__*/React__default["default"].createElement("div", {
441
- className: "key-events-m_cards-wrapper__3f8aB"
442
- }, keyEvents), showLoadMore && lastElement && /*#__PURE__*/React__default["default"].createElement(LoadmoreButton, {
443
- onClick: onClick,
444
- template: "SubsequentLoadCount",
445
- config: config,
446
- qtConfig: qtConfig
447
- }));
448
- };
449
- KeyEventsBase.propTypes = {
450
- story: PropTypes__default["default"].object,
451
- config: PropTypes__default["default"].object,
452
- showLoadMore: PropTypes__default["default"].bool
453
- };
454
- var KeyEvents = StateProvider(KeyEventsBase);
455
-
456
- exports.KeyEvents = KeyEvents;
457
- exports.KeyEventsBase = KeyEventsBase;